/* Wiring for the shared motion layer (motion.css) on this site only.
   Rules of the road (plan review 2026-09-24):
   - zoom / grow only touch `scale`, which composes with the transform the
     hover states and the GSAP entrances (motion-gsap.js) use.
   - Everything moving here stops with prefers-reduced-motion (motion.css holds
     the global stop, site.css keeps its own reduce block). */

/* Home hero: the stage grows a little and sinks as the page leaves it. The
   wrapper moves, not the image, which keeps its own entrance and drift. */
.hero-media[data-m-part] { --m-anim: ssj-hero-media; transform-origin: 58% 42%; }

/* ?motion=off stands in for the reduced-motion page (site.css handles the real
   setting): the entrance curtain is skipped. */
.m-off .stage-enter { display: none; }

/* Mission copy lights up with the same brand gradient it always had. */
.big-copy[data-m="fill"] {
  --m-fill-lit: linear-gradient(112deg, #fffaf4 0 18%, #eadfff 40%, #d7bdf8 62%, #ff9acb 84%, #f2c6dc 100%);
  --m-fill-dim: #3b3346;
}

@media (prefers-reduced-motion: no-preference) {
  /* view() timelines measure against the nearest scroll container, and
     overflow: hidden makes an element one even though it never scrolls: every
     .section here would pin the timelines inside it at a constant value
     (found 2026-09-24). clip cuts exactly the same edge without being a
     scroll container. */
  .m-live.m-native :is(.section, .cta-stage, .honor-card) { overflow: clip; }

  /* The business path's line draws itself across the four steps (desktop
     only: below 900px site.css hides the line). */
  .m-live .stage-path[data-m="line"]::before { transform-origin: left center; animation: ssj-line-draw linear both; }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .m-live.m-native .stage-path[data-m="line"]::before {
      animation-duration: auto;
      animation-timeline: --m-host;
      animation-range: var(--m-range) calc(var(--m-start) * 1%) var(--m-range) calc(var(--m-end) * 1%);
    }
  }
  .m-live.m-fallback .stage-path[data-m="line"]::before {
    animation-duration: 1s;
    animation-play-state: paused;
    animation-delay: calc(var(--m-p) * -1s);
  }

  /* First screen of the inner pages: the copy fades up as one block, 0.6s in.
     When motion-gsap.js starts before that it staggers the lines instead and marks
     <body> with gsap-hero; if it is late or missing, this (and the home hero's
     own stage-content-in in site.css) still plays. */
  .m-on :is(.page-hero .wrap, .video-hero-copy) { animation: stage-content-in .7s .6s cubic-bezier(.2,.8,.2,1) both; }
  .gsap-hero :is(.hero-content, .page-hero .wrap, .video-hero-copy) { animation: none; }

  /* Press feedback, keeping each element's own transitions. */
  .button {
    transition: transform .18s ease, background .18s ease, border-color .18s ease, scale var(--motion-base) var(--motion-bounce);
  }
  .contact-action {
    transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, scale var(--motion-base) var(--motion-bounce);
  }
  .language-switcher button,
  .menu-button { transition: scale var(--motion-base) var(--motion-bounce), color .18s ease, background-color .18s ease; }
  :is(.button, .language-switcher button, .menu-button):active { scale: .96; transition-duration: 90ms; transition-timing-function: var(--motion-spring); }
  .contact-action:active { scale: .97; transition-duration: 90ms; transition-timing-function: var(--motion-spring); }

  /* Menu icon and mobile menu open with a spring. */
  .menu-button span, .menu-button::before, .menu-button::after {
    transition: transform var(--motion-slow) var(--motion-bounce), opacity var(--motion-fast) ease;
  }

  /* The LINE QR and business-card dialogs grow in. They are shown by removing
     [hidden] (site.js), so their first frame takes the @starting-style values. */
  :is(.line-qr-dialog, .profile-card-dialog) {
    transition: opacity var(--motion-base) var(--motion-spring), scale var(--motion-slow) var(--motion-bounce), translate var(--motion-slow) var(--motion-bounce);
  }
  :is(.line-qr-modal__backdrop, .profile-card-modal__backdrop) { transition: opacity 200ms ease; }
  @starting-style {
    :is(.line-qr-modal, .profile-card-modal):not([hidden]) :is(.line-qr-dialog, .profile-card-dialog) { opacity: 0; scale: .92; translate: 0 12px; }
    :is(.line-qr-modal, .profile-card-modal):not([hidden]) :is(.line-qr-modal__backdrop, .profile-card-modal__backdrop) { opacity: 0; }
  }

  @keyframes ssj-hero-media { from { scale: 1; translate: 0 0; } to { scale: 1.1; translate: 0 12vh; } }
  @keyframes ssj-line-draw { from { scale: 0 1; } to { scale: 1 1; } }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .site-nav { transition: max-height var(--motion-slow) var(--motion-spring); }
}