/* ==========================================================================
   Advanced Aesthetics · Motion
   GPU-only transforms (transform + opacity). prefers-reduced-motion honored.
   ========================================================================== */

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 100;
  background: linear-gradient(90deg, var(--aa-gold), var(--aa-gold-deep));
}

/* ---- reveal (P01) ---- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* stagger children */
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.13s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.21s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.29s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.37s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.45s; }

/* ---- split-text H1 reveal ---- */
.split-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split-word { display: inline-block; }
.split-char { display: inline-block; transform: translateY(105%); transition: transform 0.7s var(--ease-out); will-change: transform; }
.split.in .split-char { transform: translateY(0); }

/* ---- clip-path image reveal (above-the-fold heroes) ---- */
.clip-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); }
.clip-reveal.in { clip-path: inset(0 0 0 0); }
.clip-reveal::before {
  content: ""; position: absolute; inset: 0; z-index: 3; background: var(--aa-gold);
  transform: scaleY(1); transform-origin: 50% 100%; transition: transform 0.9s 0.2s var(--ease-out); pointer-events: none;
}
.clip-reveal.in::before { transform: scaleY(0); transform-origin: 50% 0%; }

/* ---- sticky parallax target ---- */
.parallax { will-change: transform; }

/* ---- custom cursor (P05) ---- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  border-radius: 50%; mix-blend-mode: normal;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 7px; height: 7px; background: var(--aa-gold); transition: width 0.25s, height 0.25s, background-color 0.25s; }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(200,169,104,0.5); transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s, opacity 0.25s; }
body.cursor-hover .cursor-ring { width: 60px; height: 60px; border-color: var(--aa-gold); }
body.cursor-hover .cursor-dot { width: 0; height: 0; }
body.cursor-down .cursor-ring { width: 30px; height: 30px; }
/* on cream surfaces the dot/ring read as forest */
body.cursor-on-cream .cursor-dot { background: var(--aa-forest); }
body.cursor-on-cream .cursor-ring { border-color: rgba(13,12,10,0.5); }

/* ---- page transition overlay (P05) ---- */
.page-transition {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: #17171c;
  transform: scaleY(0); transform-origin: 50% 100%;
  display: flex; align-items: center; justify-content: center;
}
.page-transition.cover { transform: scaleY(1); transform-origin: 50% 100%; transition: transform 0.5s var(--ease-out); pointer-events: all; }
.page-transition.reveal-out { transform: scaleY(0); transform-origin: 50% 0%; transition: transform 0.5s var(--ease-out); }
.page-transition img { width: clamp(220px, 30vw, 420px); height: auto; aspect-ratio: 2 / 1; object-fit: contain; opacity: 0; transform: scale(0.96); transition: opacity 0.4s ease 0.1s, transform 0.6s var(--ease-out) 0.1s; }
.page-transition.cover img { opacity: 1; transform: scale(1); }

/* intro reveal (first load) */
.intro-veil {
  position: fixed; inset: 0; z-index: 320; background: var(--aa-forest);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.intro-veil img { width: clamp(260px, 38vw, 460px); height: auto; aspect-ratio: 2 / 1; object-fit: contain; opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.intro-veil.show img { opacity: 1; transform: none; }
.intro-veil.done { opacity: 0; visibility: hidden; }

/* hide custom cursor on touch / coarse pointers */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}
@media (max-width: 1040px) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---- no-GSAP fallback: stack pin/scrub vertically on all widths ---- */
.no-gsap [data-pin-horizontal] { height: auto; min-height: 0; max-height: none; display: block; overflow: visible; }
.no-gsap .pin-viewport { height: auto; min-height: 0; display: block; overflow: visible; }
.no-gsap .pin-track { flex-direction: column; transform: none !important; height: auto; gap: 18px; padding-top: 8px; }
.no-gsap .pin-panel { width: 100%; height: auto; }
.no-gsap .pin-panel .ed-card, .no-gsap .pin-panel > .card { height: clamp(420px, 66vh, 560px); }
.no-gsap .pin-progress { display: none; }
.no-gsap .scrub-pin { grid-template-columns: 1fr; height: auto; min-height: 0; display: block; }
.no-gsap .scrub-stage { height: 56vh; margin-bottom: 24px; }
.no-gsap .scrub-frame { position: relative; opacity: 1 !important; }
.no-gsap .scrub-step { opacity: 1; }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .split-char { transform: none !important; }
  .clip-reveal { clip-path: inset(0 0 0 0) !important; }
  .clip-reveal::before { display: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .intro-veil { display: none !important; }
  .scroll-progress { display: none; }
  .ed-card img { transition: none !important; }
}