/* ============================================================
   TK BRAND - motion CSS
   OWNER: Codex (motion + behavior)
   ------------------------------------------------------------
   Reveal states, native scroll-driven enhancement, and cross-document
   View Transitions. EVERYTHING here is gated behind prefers-reduced-motion
   at the bottom of the file. Use --tk-* tokens only.
   ============================================================ */

/* Reveal: content stays visible without JS. JS adds .tk-motion-ready only when motion is allowed. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tk-motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }

  .tk-motion-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .tk-motion-ready [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
  .tk-motion-ready [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
  .tk-motion-ready [data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }

  [data-parallax] {
    transform: translate3d(0, 0, 0);
  }

  [data-scene] {
    overflow: clip;
    transform-origin: center center;
  }

  /* Cross-document page transitions between brand pages. */
  @view-transition { navigation: auto; }
  .tk-hero__media {
    view-transition-name: tk-hero-media;
    contain: paint;
  }
  .tk-hero__headline {
    view-transition-name: tk-hero-headline;
    contain: paint;
  }

  ::view-transition-group(tk-hero-media) {
    animation-duration: .72s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(tk-hero-media),
  ::view-transition-new(tk-hero-media) {
    height: 100%;
    object-fit: cover;
  }
  ::view-transition-group(tk-hero-headline) {
    animation-duration: .56s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  ::view-transition-old(tk-hero-headline) { animation-name: tk-vt-headline-out; }
  ::view-transition-new(tk-hero-headline) { animation-name: tk-vt-headline-in; }

  @keyframes tk-vt-headline-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
  }

  @keyframes tk-vt-headline-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Motion off: content is static and fully visible, no transitions, no VT. */
@media (prefers-reduced-motion: reduce) {
  html.tk-motion-ready [data-reveal],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  [data-parallax],
  [data-scene],
  .tk-hero__media,
  .tk-hero__headline {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    view-transition-name: none !important;
  }
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}