/* ============================================================
   Animation system — replaces Framer Motion
   ============================================================ */

/* ── Page load fade-in ── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: page-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Reveal (replaces <Reveal> component) ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-reveal][data-delay="0.1"]  { transition-delay: 0.10s; }
[data-reveal][data-delay="0.15"] { transition-delay: 0.15s; }
[data-reveal][data-delay="0.2"]  { transition-delay: 0.20s; }
[data-reveal][data-delay="0.3"]  { transition-delay: 0.30s; }

/* ── Stagger children (replaces <RevealStagger> + <RevealItem>) ── */
[data-stagger-item] {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  /* reveal transition (slow, smooth) */
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}
[data-stagger-item].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* after reveal, hover transitions become fast + springy */
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}
/* Card lift on hover — replicates Framer Motion whileHover */
[data-stagger-item].revealed:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 168, 76, 0.12);
}
[data-stagger-item].revealed:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 0.12s;
}

/* ── Word-by-word reveal (Manifesto) ── */
[data-word] {
  display: inline-block;
  opacity: 0.1;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 0.25em;
}
[data-word].word-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Keyframes ── */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(201,168,76,0.15); }
  50%       { box-shadow: 0 0 60px rgba(201,168,76,0.30); }
}

/* ── Hero entrance animations ── */
[data-hero-delay-1] { animation: reveal-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.20s both; }
[data-hero-delay-2] { animation: reveal-up 1.0s cubic-bezier(0.22,1,0.36,1) 0.35s both; }
[data-hero-delay-3] { animation: reveal-up 1.0s cubic-bezier(0.22,1,0.36,1) 0.60s both; }
[data-hero-delay-4] { animation: reveal-up 1.0s cubic-bezier(0.22,1,0.36,1) 0.80s both; }
[data-hero-scroll]  { animation: reveal-up 1.0s cubic-bezier(0.22,1,0.36,1) 1.60s both; }

/* ── Header ── */
[data-header] {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.5s, border-color 0.5s, backdrop-filter 0.5s;
  background: transparent;
  border-bottom: 1px solid transparent;
}
[data-header].header-scrolled {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: oklch(0.16 0.06 265 / 0.7);
  border-bottom-color: oklch(1 0 0 / 0.05);
}
/* Nav link hover underline */
[data-header] nav a {
  position: relative;
  transition: color 0.2s;
}
[data-header] nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: 50%;
  height: 1px;
  background: currentColor;
  transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-header] nav a:hover::after {
  left: 0; right: 0;
}

/* ── Mobile menu ── */
[data-mobile-menu] {
  position: fixed;
  top: 80px; left: 0; right: 0; bottom: 0;
  background: oklch(0.16 0.06 265 / 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 49;
}
[data-mobile-menu].menu-open {
  opacity: 1;
  visibility: visible;
}

/* ── Parallax ── */
[data-parallax-wrap] {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
[data-parallax] {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}
[data-parallax-texture] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.4;
  will-change: transform;
}
[data-parallax-fade] {
  will-change: opacity, transform;
  position: relative;
  height: 100%;
}

/* ── Number counter (data-counter) ── */
[data-counter] {
  font-variant-numeric: tabular-nums;
  transition: none;
}

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #C9A84C, #e8c97a);
  z-index: 100;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  [data-reveal],
  [data-stagger-item],
  [data-word] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-stagger-item].revealed:hover,
  [data-stagger-item].revealed:active {
    transform: none;
    box-shadow: none;
  }
  [data-hero-delay-1],[data-hero-delay-2],[data-hero-delay-3],[data-hero-delay-4],[data-hero-scroll] {
    animation: none;
    opacity: 1;
    transform: none;
  }
  [data-parallax],[data-parallax-texture] {
    transform: none !important;
  }
}