/* ============================================================
   ANIMATIONS.CSS — Keyframes · Transitions · Motion
   ============================================================ */

/* ── Page Load States ───────────────────────────────────────── */
/* Only applied when JS is present (.js class set by inline script).
   Graceful fallback: no .js class → everything visible */
.js .anim-hidden { opacity: 0; }
.js .anim-up     { opacity: 0; transform: translateY(40px); }
.js .anim-left   { opacity: 0; transform: translateX(-20px); }
.js .nav         { opacity: 0; transform: translateY(-10px); }
.js .headline-reveal__inner { transform: translateY(100%); }

/* ── Keyframe: Marquee scroll ───────────────────────────────── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Keyframe: Scroll indicator line ───────────────────────── */
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Keyframe: Hero decoration rotation ────────────────────── */
@keyframes deco-rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ── Keyframe: Fade in up (CSS fallback) ────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Keyframe: Clip reveal ──────────────────────────────────── */
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ── GSAP-animated headline lines ──────────────────────────── */
.headline-reveal {
  overflow: hidden;
  display: block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* GSAP sets translateY(100%) via gsap.set() before animating */
.headline-reveal__inner {
  display: block;
  will-change: transform;
}

/* ── Transition: Card hover shimmer ─────────────────────────── */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(200, 169, 126, 0.04) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--trans-base);
  pointer-events: none;
  border-radius: var(--radius-lg);
}

.card:hover::after {
  opacity: 1;
}

/* ── Gold line draw animation (CSS class-based) ─────────────── */
.line-draw {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.line-draw.in-view {
  transform: scaleX(1);
}

/* GSAP handles stagger and nav entrance via gsap.set() */
.stagger-item {}


/* ── Form submit states ──────────────────────────────────────── */
.btn--loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn--success {
  background: rgba(200, 169, 126, 0.2);
  color: var(--color-accent);
  border-color: var(--color-accent);
  pointer-events: none;
}

/* ── Page transition overlay (GSAP controls transform) ──────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: calc(var(--z-nav) + 100);
  pointer-events: none;
  will-change: transform;
}