/* ————————————————————————————————————————————————————————————————
   Micara motion system — shared grammar for product landing pages.
   Source of truth: brand/motion/MOTION.md. Copy this file to the next
   product and change only the three --m-ramp-* values.
   Every rule here animates transform / opacity only (filter on the aurora).
   ———————————————————————————————————————————————————————————————— */
:root{
  --m-ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --m-ease-spring:linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --m-dur-fast:160ms;
  --m-dur-base:420ms;
  --m-dur-slow:800ms;
  --m-stagger:70ms;
  --m-rise:24px;
  /* product ramp (People Teal) */
  --m-ramp-light:var(--micarahr-light,#2DD4BF);
  --m-ramp-base:var(--micarahr-base,#0D9488);
  --m-ramp-deep:var(--micarahr-deep,#115E59);
}

/* ——— Rise-reveal (IO, once). Hidden only once JS has claimed the page. ——— */
.js [data-reveal]{opacity:0;transform:translateY(var(--m-rise));
  transition:opacity var(--m-dur-base) var(--m-ease-out),transform var(--m-dur-base) var(--m-ease-out);
  transition-delay:calc(var(--i,0) * var(--m-stagger))}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ——— Hero choreography: words rise, then subtitle → CTA → note → visual. ——— */
.w{display:inline-block}
@keyframes m-rise{from{opacity:0;transform:translateY(var(--m-rise))}}
.js .w{animation:m-rise var(--m-dur-slow) var(--m-ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
.js .hero-in{animation:m-rise var(--m-dur-slow) var(--m-ease-out) both;animation-delay:var(--d,0ms)}

/* ——— Aurora: three blurred orbs in the ramp, slow symmetric drift. ——— */
.orb.a{animation:m-drift-a 24s var(--m-ease-in-out) infinite}
.orb.b{animation:m-drift-b 30s var(--m-ease-in-out) infinite}
.orb.c{animation:m-drift-c 27s var(--m-ease-in-out) infinite}
@keyframes m-drift-a{50%{transform:translate3d(-120px,90px,0) scale(1.15)}}
@keyframes m-drift-b{50%{transform:translate3d(140px,-70px,0) scale(.9)}}
@keyframes m-drift-c{50%{transform:translate3d(-90px,-120px,0) scale(1.2)}}

/* ——— Nav: transparent at the top, glass + shadow after 24 px; progress bar. ——— */
.js nav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.js nav.is-scrolled{background:var(--nav-bg);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:block;
  background:linear-gradient(90deg,var(--m-ramp-base),var(--m-ramp-light));
  transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:0;transition:opacity .35s ease}
.js nav.is-scrolled .nav-progress{opacity:1}

/* ——— Buttons & links: press, arrow nudge, magnetic pull, underline draw. ——— */
.btn{--tx:0px;--ty:0px;transform:translate(var(--tx),var(--ty));
  transition:transform var(--m-dur-fast) var(--m-ease-out),box-shadow var(--m-dur-fast) ease,background-color var(--m-dur-fast) ease}
.btn:hover{--ty:-2px}
.btn:active{transform:translate(var(--tx),var(--ty)) scale(.98)}
.btn[data-magnetic].is-snap{transition:transform 600ms var(--m-ease-spring),box-shadow var(--m-dur-fast) ease}
.btn .arr{display:inline-block;transition:transform var(--m-dur-fast) var(--m-ease-out)}
.btn:hover .arr{transform:translateX(4px)}
a.link{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--m-dur-fast) var(--m-ease-out),color .2s;padding-bottom:1px}
a.link:hover,a.link:focus-visible{background-size:100% 1px}

/* ——— Spotlight cards: radial glow under the pointer, gentle lift. ——— */
.card{--mx:50%;--my:0%;transition:transform .25s var(--m-ease-out),border-color .25s ease,background-color .35s ease}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.card .glow{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s ease;
  background:radial-gradient(380px 260px at var(--mx) var(--my),rgba(45,212,191,.16),transparent 70%)}
.card:hover .glow,.card:focus-within .glow{opacity:1}

/* ——— Tilt (product mockup) — pointer: fine only. ——— */
@media (hover:hover) and (pointer:fine){
  [data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--m-dur-fast) var(--m-ease-out)}
  [data-tilt].is-snap{transition:transform 700ms var(--m-ease-spring)}
}

/* ——— Marquee: duplicated track, pauses on hover. ——— */
.marq-in{animation:m-marquee 32s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
@keyframes m-marquee{to{transform:translateX(-50%)}}

/* ——— Sticky scroll-story (≥ 3 steps). Stage mode is enabled by JS on wide screens. ——— */
@media (min-width:901px){
  .story.is-stage{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .story.is-stage .story-stage{display:block;position:sticky;top:max(88px,calc(50vh - 240px));height:480px}
  .story.is-stage .story-visual{position:absolute;inset:0;display:flex;align-items:center;margin:0;
    opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
    transition:opacity .5s var(--m-ease-out),transform .5s var(--m-ease-out),visibility 0s linear .5s}
  .story.is-stage .story-visual>*{width:100%}
  .story.is-stage .story-visual.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .story.is-stage .story-step{min-height:68vh;display:flex;align-items:center;margin:0;padding:4vh 0;transition:opacity .4s ease}
  .story.is-stage .story-step:first-child{min-height:56vh;padding-top:0}
  .story.is-stage .story-step:not(.is-active){opacity:.42}
  /* each visual wakes up when it becomes active */
  .story.is-stage .tl,.story.is-stage .chain li,.story.is-stage .slip tr{transition:opacity .45s var(--m-ease-out),transform .45s var(--m-ease-out);transition-delay:calc(120ms + var(--i,0) * 60ms)}
  .story.is-stage .story-visual:not(.is-active) .tl{opacity:0;transform:translateY(6px);transition-delay:0s}
  .story.is-stage .story-visual:not(.is-active) .chain li{opacity:0;transform:translateX(-10px);transition-delay:0s}
  .story.is-stage .story-visual:not(.is-active) .slip tr{opacity:0;transition-delay:0s}
}

/* ——— Reduced motion: everything instant or static, never hidden. ——— */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal],.js .w,.js .hero-in{opacity:1;transform:none;transition:none;animation:none}
  .orb,.marq-in{animation:none}
  .btn,.card,[data-tilt]{transition:none}
  .story.is-stage .story-visual{transition:none}
  .story.is-stage .story-visual:not(.is-active) .tl,
  .story.is-stage .story-visual:not(.is-active) .chain li,
  .story.is-stage .story-visual:not(.is-active) .slip tr{opacity:1;transform:none}
}