/* ============================================================
   SUPREME CONTROLS — ANIMATION BASE STATES
   GSAP controls all animation logic via JS.
   This file defines:
   1. Initial hidden states for elements that GSAP will reveal.
   2. CSS-only hover/transition effects (not driven by GSAP).
   ============================================================ */

/* ── GSAP reveal targets ─────────────────────────────────── */
/* No CSS initial hidden states — GSAP sets from-state inline  */
/* so content is visible if JS/CDN fails (progressive enhance) */
[data-reveal],
[data-stagger] > * {
  will-change: opacity, transform;
}

/* ── Hero text line animation ────────────────────────────── */
.hero-line-wrap {
  overflow: hidden;
  display: block;
}

.hero-line {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

/* ── Card hover effects (CSS-only, no GSAP needed) ───────── */
.card-hover {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* ── Image zoom on hover ─────────────────────────────────── */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

.img-zoom:hover img {
  transform: scale(1.04);
}

/* ── Underline link animation ────────────────────────────── */
.link-underline {
  position: relative;
  text-decoration: none;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background-color: var(--color-brand);
  transition: width var(--transition-base);
}

.link-underline:hover::after {
  width: 100%;
}

/* ── Stat counter (number flips) ─────────────────────────── */
.counter-value {
  display: inline-block;
  will-change: contents;
}

/* ── Page transition overlay ─────────────────────────────── */
#page-transition {
  position: fixed;
  inset: 0;
  background-color: var(--color-zinc-900);
  z-index: var(--z-modal);
  pointer-events: none;
  opacity: 0;
}

/* ── Loading state ───────────────────────────────────────── */
.is-loading {
  pointer-events: none;
}

/* ── Brand pulse ring ─────────────────────────────────────── */
/* Used on orange dots: .section-label::before, .hero__label-dot */
@keyframes brand-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0   hsla(203, 82.50%, 50.80%, 0.50); }
  60%       { box-shadow: 0 0 0 7px rgba(233, 99, 26, 0);    }
}

/* ── Process step pop-in ──────────────────────────────────── */
@keyframes step-pop {
  0%   { transform: scale(0.80); opacity: 0.5; }
  70%  { transform: scale(1.08); opacity: 1;   }
  100% { transform: scale(1);    opacity: 1;   }
}

/* ── CTA banner ambient gradient ─────────────────────────── */
@keyframes cta-gradient-shift {
  0%, 100% { background-position:   0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── Subtle float (decorative hero elements) ──────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}

/* ── Card tilt reset helper ──────────────────────────────── */
.tilt-card {
  transform-style: flat;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Reduced motion — disable all animations ─────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > *,
  .hero-line,
  .hero__image,
  .card-hover,
  .img-zoom img,
  .section-label::before,
  .hero__label-dot,
  .footer__social-link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}