/* ============================================================
   TRUETAP-MOTION.CSS - Sprint A motion layer (homepage)

   Progressive-enhancement contract:
   - Every hidden / pre-animation state in this file is scoped
     under html.tt-motion-enabled, a class added ONLY by
     assets/js/truetap-motion.js after successful controller
     initialisation.
   - If the script fails to load, is disabled through the kill
     switch (window.TRUETAP_MOTION_ENABLED = false or
     ?tt-motion=off), or the user prefers reduced motion, none
     of these states apply and all content renders statically.
   - Nothing in this file touches the Inside TrueTap (.itt)
     interaction architecture; it only choreographs the entrance
     of the section's static shell (head + console columns).

   Kill switch: set window.TRUETAP_MOTION_ENABLED = false before
   this script's companion JS runs, or append ?tt-motion=off to
   the URL. Motion then stays fully off and content static.
   ============================================================ */

/* ---- Motion tokens -------------------------------------------------- */

.tt-motion-enabled {
  --ttm-ease:      var(--ease-out-expo);
  --ttm-dur-xs:    420ms;
  --ttm-dur-sm:    560ms;
  --ttm-dur-md:    700ms;
  --ttm-dur-lg:    880ms;
  --ttm-rise:      26px;
  --ttm-rise-sm:   16px;
  --ttm-slide:     30px;
}

/* ---- Reveal variants -------------------------------------------------
   Initial states exist only when motion is enabled AND the user
   has not requested reduced motion. */

@media (prefers-reduced-motion: no-preference) {

  .tt-motion-enabled [data-motion] {
    opacity: 0;
    transition:
      opacity var(--ttm-dur-md) var(--ttm-ease),
      transform var(--ttm-dur-md) var(--ttm-ease);
  }

  .tt-motion-enabled [data-motion="up"]    { transform: translateY(var(--ttm-rise)); }
  .tt-motion-enabled [data-motion="up-sm"] { transform: translateY(var(--ttm-rise-sm)); }
  .tt-motion-enabled [data-motion="fade"]  { transform: none; }
  .tt-motion-enabled [data-motion="left"]  { transform: translateX(calc(-1 * var(--ttm-slide))); }
  .tt-motion-enabled [data-motion="right"] { transform: translateX(var(--ttm-slide)); }

  .tt-motion-enabled [data-motion="scale"] {
    transform: translateY(14px) scale(0.972);
    transition-duration: var(--ttm-dur-lg), var(--ttm-dur-lg);
  }

  /* Hero entrance variants - slightly longer, load-triggered */
  .tt-motion-enabled [data-motion="hero-eyebrow"] {
    transform: translateY(10px);
    letter-spacing: 0.24em;
    transition:
      opacity var(--ttm-dur-sm) var(--ttm-ease),
      transform var(--ttm-dur-sm) var(--ttm-ease),
      letter-spacing 920ms var(--ttm-ease);
  }
  .tt-motion-enabled [data-motion="hero-eyebrow"].ttm-in {
    letter-spacing: 0.14em;
  }
  .tt-motion-enabled [data-motion="hero-body"] { transform: translateY(18px); }
  .tt-motion-enabled [data-motion="hero-cta"]  { transform: translateY(12px); transition-duration: var(--ttm-dur-sm), var(--ttm-dur-sm); }
  .tt-motion-enabled [data-motion="hero-visual"] {
    transform: translateY(16px) scale(0.984);
    transition-duration: 960ms, 960ms;
  }

  /* Shared visible state */
  .tt-motion-enabled [data-motion].ttm-in {
    opacity: 1;
    transform: none;
  }

  /* ---- Stagger groups ------------------------------------------------
     Children of [data-motion-stagger] reveal individually when they
     enter the viewport; the controller assigns a small index-based
     transition-delay (inline, removed after the transition ends). */

  .tt-motion-enabled [data-motion-stagger] > * {
    opacity: 0;
    transform: translateY(var(--ttm-rise-sm));
    transition:
      opacity var(--ttm-dur-md) var(--ttm-ease),
      transform var(--ttm-dur-md) var(--ttm-ease);
  }

  .tt-motion-enabled [data-motion-stagger] > *.ttm-in {
    opacity: 1;
    transform: none;
  }

  /* ---- Kinetic headings ----------------------------------------------
     [data-motion-heading] is split by JS into masked line spans.
     Original text is preserved inside the spans and restored in full
     whenever the motion layer is disabled. */

  .tt-motion-enabled .ttm-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.09em;   /* keep descenders inside the mask */
    margin-bottom: -0.09em;   /* net-zero layout impact */
  }

  .tt-motion-enabled .ttm-line__in {
    display: inline-block;
    opacity: 0;
    transform: translateY(112%);
    transition:
      transform var(--ttm-dur-lg) var(--ttm-ease),
      opacity var(--ttm-dur-sm) var(--ttm-ease);
    will-change: transform;
  }

  .tt-motion-enabled [data-motion-heading].ttm-in .ttm-line__in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Re-split housekeeping (resize) must not re-play the animation */
  .tt-motion-enabled .ttm-noanim .ttm-line__in {
    transition: none !important;
  }

  /* ---- Rule draw -----------------------------------------------------
     Decorative journey line draws downward as the block enters. */

  .tt-motion-enabled [data-motion-rule="y"] {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    transition:
      transform 1150ms var(--ttm-ease) 160ms,
      opacity 480ms ease 160ms;
  }

  .tt-motion-enabled [data-motion-rule="y"].ttm-in {
    opacity: 0.55;
    transform: translateX(-50%) scaleY(1);
  }

  /* ---- Hero exit + parallax (desktop, scroll-linked) -----------------
     Driven by CSS custom properties written from a rAF-throttled
     scroll handler. Transform/opacity only; no layout impact. */

  @media (min-width: 1024px) {
    .tt-motion-enabled [data-motion-exit] .hero-v2__content {
      transform: translateY(calc(var(--ttm-exit, 0) * -22px));
      opacity: calc(1 - var(--ttm-exit, 0) * 0.3);   /* recedes to 0.70 */
    }
    .tt-motion-enabled [data-motion-exit] .hero-diagram {
      transform: translateY(
        calc(var(--ttm-exit, 0) * -10px + var(--ttm-py, 0px))
      );
      opacity: calc(1 - var(--ttm-exit, 0) * 0.5);   /* recedes to 0.50 */
    }
    .tt-motion-enabled [data-motion-parallax] {
      overflow: hidden;
    }
    .tt-motion-enabled [data-motion-parallax] > img {
      transform: translateY(var(--ttm-py, 0px)) scale(1.05);
    }
  }

} /* end prefers-reduced-motion: no-preference */

/* ---- Button / link micro-interactions --------------------------------
   Additive hover refinement only; no layout shift (transform-only),
   dimensions unchanged. Hover-capable pointers only. */

@media (hover: hover) and (pointer: fine) {

  .tt-motion-enabled .btn {
    transition:
      background-color var(--transition-base),
      border-color var(--transition-base),
      color var(--transition-base),
      transform 200ms var(--ttm-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .tt-motion-enabled .btn:hover {
    transform: translateY(-1px);
  }

  .tt-motion-enabled .btn:active {
    transform: translateY(0);
    transition-duration: 90ms;
  }

  /* Card CTA arrow nudge */
  .tt-motion-enabled .eco-panel__cta {
    display: inline-block;
    transition:
      color var(--transition-fast),
      transform 240ms var(--ttm-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .tt-motion-enabled .eco-panel:hover .eco-panel__cta,
  .tt-motion-enabled .eco-panel:focus-visible .eco-panel__cta {
    transform: translateX(4px);
  }

  /* Primary nav link underline draw */
  .tt-motion-enabled .nav__link {
    position: relative;
  }

  .tt-motion-enabled .nav__link::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 2px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.85;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms var(--ttm-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .tt-motion-enabled .nav__link:hover::after,
  .tt-motion-enabled .nav__link:focus-visible::after {
    transform: scaleX(1);
  }
}

/* ---- Mobile simplifications ------------------------------------------
   Shorter travel, faster settles, horizontal slides become a gentle
   rise. Parallax / exit features are disabled in JS. */

@media (max-width: 768px) {
  .tt-motion-enabled {
    --ttm-rise:    14px;
    --ttm-rise-sm: 10px;
    --ttm-dur-xs:  320ms;
    --ttm-dur-sm:  430ms;
    --ttm-dur-md:  540ms;
    --ttm-dur-lg:  640ms;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .tt-motion-enabled [data-motion="left"],
  .tt-motion-enabled [data-motion="right"] {
    transform: translateY(12px);
  }
  .tt-motion-enabled [data-motion-rule="y"] {
    transform: scaleY(0);
    transform-origin: top center;
  }
  .tt-motion-enabled [data-motion-rule="y"].ttm-in {
    transform: scaleY(1);
  }
}

/* ---- Reduced motion ----------------------------------------------------
   Belt and braces: even if the activation class is present, reduced
   motion forces every motion element into its final visible state and
   removes all Sprint A animation. */

@media (prefers-reduced-motion: reduce) {
  .tt-motion-enabled [data-motion],
  .tt-motion-enabled [data-motion-stagger] > *,
  .tt-motion-enabled [data-motion-heading] .ttm-line__in,
  .tt-motion-enabled [data-motion-rule] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .tt-motion-enabled [data-motion="hero-eyebrow"] {
    letter-spacing: 0.14em !important;
  }

  .tt-motion-enabled [data-motion-rule="y"] {
    opacity: 0.55 !important;
  }
}