/* Motion is an enhancement: content stays visible before motion.js loads. */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 90;
  width: 100%;
  height: 3px;
  background: var(--lime);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  pointer-events: none;
  box-shadow: 0 0 18px #c9e8929c;
}

.motion-on .reveal[data-motion-pending] {
  opacity: .35;
  transform: translateY(34px);
  filter: blur(4px);
}
.motion-on .reveal {
  transition: opacity .8s cubic-bezier(.2,.75,.2,1),
              transform .8s cubic-bezier(.2,.75,.2,1),
              filter .8s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--motion-delay, 0ms);
}
.motion-on .reveal.in,
.motion-on .reveal:not([data-motion-pending]) {
  opacity: 1;
  transform: none;
  filter: none;
}

.motion-on .hero .eyebrow,
.motion-on .product-hero .breadcrumb { animation: rise-in .8s .08s both; }
.motion-on .hero h1,
.motion-on .product-hero h1 { animation: rise-in .95s .18s both; }
.motion-on .hero-text,
.motion-on .product-hero .lead { animation: rise-in .9s .35s both; }
.motion-on .hero-actions,
.motion-on .product-hero .button,
.motion-on .product-hero .release-state { animation: rise-in .8s .5s both; }
.motion-on .hero-proof { animation: rise-in .8s .65s both; }
.motion-on .hero-stage,
.motion-on .product-stage { animation: stage-in 1.1s .25s both; }

.hero-stage,
.product-stage,
.app-visual { isolation: isolate; }
.hero-stage::before,
.product-stage::before,
.app-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 48% at var(--pointer-x,50%) var(--pointer-y,42%),
    #c9e89223, transparent 75%);
  opacity: .9;
  transition: opacity .4s;
}
.app-visual::after { background: radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,40%), #fff8, transparent 56%); }
.product-stage .phone { z-index: 2; }
.product-stage .stage-label { z-index: 3; }
.hero-stage::before,.product-stage::before { animation: halo-breathe 6s ease-in-out infinite alternate; }
.hero-stage .stage-grid { animation: grid-breathe 8s ease-in-out infinite alternate; }
.product-stage { animation: grid-breathe 8s ease-in-out infinite alternate; }
.hero-phone { translate: var(--parallax-x,0px) var(--parallax-y,0px); transition: translate .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.hero-phone .phone { animation: phone-float 5.4s ease-in-out infinite; }
.hero-phone.mebrio .phone { animation-delay: -2.7s; }
.app-visual .phone,
.product-stage .phone,
.detail-panel .phone { animation: phone-float 6s ease-in-out infinite; }
.app-visual.mebrio .phone,
.product-stage.mebrio .phone { animation-delay: -2.1s; }
.app-visual .phone { transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(-3deg); transition: transform .45s ease, box-shadow .45s ease; }
.app-visual.mebrio .phone { transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(3deg); }
.product-stage .phone { transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(-5deg); transition: transform .45s ease; }
.product-stage.mebrio .phone { transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(5deg); }
.hero-phone .screen::after,
.app-visual .screen::after,
.product-stage .screen::after,
.detail-panel .screen::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -90%;
  width: 55%;
  z-index: 6;
  pointer-events: none;
  transform: skewX(-18deg) translateX(-170%);
  background: linear-gradient(90deg,transparent,#fff8,transparent);
  animation: screen-sheen 8s ease-in-out infinite;
}
.hero-phone.mebrio .screen::after,
.app-visual.mebrio .screen::after { animation-delay: -4s; }
.screen-action { animation: action-pulse 3.8s ease-in-out infinite; }
.visual-chip { animation: chip-hover 5s ease-in-out infinite; }
.strip-track b { animation: asterisk-spin 10s linear infinite; }
.about-mark span { display: inline-block; transform-origin: center; animation: asterisk-spin 16s linear infinite; }

.button { position: relative; overflow: hidden; translate: var(--button-x,0px) var(--button-y,0px); transition: translate .3s ease, transform .25s ease, background .25s ease, box-shadow .3s ease; }
.button::after { content:""; position:absolute; inset:-100% auto -100% -45%; width:35%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,#fff7,transparent); transition:translate .7s ease; pointer-events:none; }
.button:hover { box-shadow: 0 14px 35px #0002; }
.button:hover::after { translate: 560% 0; }
.nav-mid a,.footer-links a,.nav-link,.sibling-link { position:relative; transition:color .25s; }
.nav-mid a::after,.footer-links a::after { content:""; position:absolute; height:1px; left:0; right:0; bottom:-5px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-mid a:hover::after,.nav-mid a.is-active::after,.footer-links a:hover::after { transform:scaleX(1); }
.nav-mid a.is-active { color:var(--lime); }

.journey-item,.audience-card,.flow-item,.product-fact { transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.journey-item:hover { transform:translateY(-7px); border-color:var(--lime); }
.audience-card:hover { transform:translateY(-8px); border-color:#9fb48c; box-shadow:0 22px 55px #19271b18; }
.flow-item:hover { transform:translateY(-6px); border-color:#3e6430; }
.product-fact:hover { transform:translateY(-5px); }
.step-list li { transition:padding-left .35s ease, background .35s ease; }
.step-list li:hover { padding-left:10px; background:#dfe8d641; }
.editorial-list span { transition:padding-left .3s ease,color .3s ease; }
.editorial-list span:hover { padding-left:10px; color:#2e5d26; }
.about-rule { transition:padding-left .35s ease,border-color .35s ease; }
.about-rule:hover { padding-left:10px; border-color:#6e9060; }
.app-visual:hover .phone { box-shadow:28px 40px 65px #25332155; }

@keyframes rise-in { from{opacity:0;transform:translateY(24px);filter:blur(5px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes stage-in { from{opacity:0;transform:translateY(30px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes phone-float { 0%,100%{translate:0 0} 50%{translate:0 -13px} }
@keyframes grid-breathe { 0%{background-position:0 0;opacity:.8} 100%{background-position:15px -15px;opacity:1} }
@keyframes halo-breathe { 0%{opacity:.45;transform:scale(.9)} 100%{opacity:1;transform:scale(1.08)} }
@keyframes screen-sheen { 0%,55%,100%{transform:skewX(-18deg) translateX(-170%)} 70%{transform:skewX(-18deg) translateX(850%)} }
@keyframes chip-hover { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
@keyframes action-pulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.12)} }
@keyframes asterisk-spin { to{rotate:360deg} }

@media(max-width:800px){
  .hero-stage::before,.product-stage::before,.app-visual::after {opacity:.55}
  .hero-phone .phone,.app-visual .phone,.product-stage .phone,.detail-panel .phone {animation-duration:7s}
}
@media(hover:none){
  .button:hover {box-shadow:none}
  .journey-item:hover,.audience-card:hover,.flow-item:hover,.product-fact:hover {transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .motion-on .reveal[data-motion-pending] {opacity:1;transform:none;filter:none}
  .hero-phone,.button,.app-visual .phone,.product-stage .phone {translate:none!important}
  .scroll-progress {box-shadow:none}
}