/* ============================================================
   ThinkTribal - motion layer
   Subtle scroll-reveal + hover life, driven by tt-anim.js.
   All motion is gated behind prefers-reduced-motion so print,
   PDF export and reduced-motion users always see content.
   Settings persist in localStorage (key: tt-anim) so tweaks
   made on the home page carry across every page of the site.
   ============================================================ */

:root {
  --anim-dur:    720ms;
  --anim-dist:   22px;
  --anim-scale:  0.965;
  --anim-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reveal - base hidden state only when motion is on AND allowed.
   .tt-reveal is stamped on targets by JS; .is-in is added on entry. */
@media (prefers-reduced-motion: no-preference) {
  /* Hidden base state is applied INSTANTLY (no transition here). Putting the
     transition on the base made the browser try to animate INTO opacity 0,
     which in some render paths never commits - blocks stayed visible and never
     revealed. The transition now lives on .is-in, so the reveal animates OUT of
     a reliably-hidden state. */
  html[data-anim="on"] .tt-reveal {
    opacity: 0;
    will-change: opacity, transform;
  }
  html[data-anim="on"][data-anim-style="rise"]  .tt-reveal { transform: translateY(var(--anim-dist)); }
  html[data-anim="on"][data-anim-style="fade"]  .tt-reveal { transform: none; }
  html[data-anim="on"][data-anim-style="scale"] .tt-reveal { transform: scale(var(--anim-scale)); }
  html[data-anim="on"][data-anim-style="rise-in"] .tt-reveal { transform: translateY(var(--anim-dist)) scale(var(--anim-scale)); }

  /* Resting revealed state. The motion itself is driven imperatively by the
     Web Animations API in tt-anim.js (el.animate) - not a CSS transition -
     because a class-toggled transition can fail to fire (the value change and
     the transition are introduced in the same frame) and just snap. */
  html[data-anim="on"] .tt-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* Hover life - a small, restrained lift on interactive blocks. */
  html[data-hover="on"] .card,
  html[data-hover="on"] .product,
  html[data-hover="on"] .stat,
  html[data-hover="on"] .member,
  html[data-hover="on"] .plan {
    transition: transform 0.35s var(--anim-ease), box-shadow 0.35s var(--anim-ease);
  }
  html[data-hover="on"] .card:hover,
  html[data-hover="on"] .stat:hover,
  html[data-hover="on"] .member:hover,
  html[data-hover="on"] .plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px -22px rgba(29, 29, 29, 0.35);
  }
  html[data-hover="on"] .product:hover {
    box-shadow: 0 22px 50px -28px rgba(29, 29, 29, 0.4);
  }
  html[data-hover="on"] .sector {
    transition: transform 0.35s var(--anim-ease);
  }
  html[data-hover="on"] .sector:hover { transform: translateX(6px); }
  html[data-hover="on"] .sector:hover .arrow { transform: translateX(4px); }
  html[data-hover="on"] .sector .arrow { transition: transform 0.35s var(--anim-ease); }

  /* Ambient drift - a barely-there float on the hero image. */
  html[data-float="on"] .hero .ratio-45 img {
    animation: tt-float 9s ease-in-out infinite;
  }
}

@keyframes tt-float {
  0%, 100% { transform: translateY(0) scale(1.008); }
  50%      { transform: translateY(-10px) scale(1.008); }
}