/* ============================================================
   ANIMATIONS — Progressive enhancement only
   Nothing is hidden by default. Animations add on top.
   ============================================================ */

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
/* Elements are visible by default. js-ready enables animations. */
.js-ready [data-reveal] {
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.js-ready [data-reveal]:not(.in-view) {
  opacity: 0;
  transform: translateY(28px);
}
.js-ready [data-reveal="left"]:not(.in-view)  { transform: translateX(-36px); }
.js-ready [data-reveal="right"]:not(.in-view) { transform: translateX(36px); }

[data-reveal].in-view {
  opacity: 1 !important;
  transform: translate(0,0) !important;
}

/* ── HERO ENTRANCE ───────────────────────────────────────────── */
.js-ready .reveal-up:not(.gsap-revealed) {
  opacity: 0;
  transform: translateY(20px);
}
.reveal-up.gsap-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── STAGGER DELAYS ──────────────────────────────────────────── */
[data-reveal][style*="--i:0"] { transition-delay: 0s; }
[data-reveal][style*="--i:1"] { transition-delay: 0.1s; }
[data-reveal][style*="--i:2"] { transition-delay: 0.2s; }
[data-reveal][style*="--i:3"] { transition-delay: 0.3s; }
[data-reveal][style*="--i:4"] { transition-delay: 0.4s; }

/* ── TYPEWRITER ──────────────────────────────────────────────── */
.typewriter-cursor::after {
  content: '|';
  color: var(--gold);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── GOLD SHIMMER TEXT ───────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold-bright) 40%,
    var(--gold) 50%,
    var(--gold-bright) 60%,
    var(--gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ── ARCHIVE CARD ────────────────────────────────────────────── */
/* Always visible — no JS dependency */
.archive-card {
  opacity: 1;
  transform: none;
}

/* ── TIMELINE ────────────────────────────────────────────────── */
.timeline-line {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.timeline-line.drawn { transform: scaleX(1); }

.timeline-item { opacity: 1; }
.js-ready .timeline-item.will-animate { opacity: 0; transform: translateY(16px); }
.timeline-item.visible               { opacity: 1 !important; transform: none !important; }

/* ── CATEGORY CARD HOVER SHINE ───────────────────────────────── */
.category-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,165,94,0.06), transparent);
  transform: skewX(-15deg);
  transition: left 0.7s var(--ease-gold);
}
.category-card:hover::after { left: 150%; }

/* ── NAV ACTIVE ──────────────────────────────────────────────── */
.nav-link.active { color: var(--gold); }
.nav-link.active::after { transform: scaleX(1); }

/* ── CANDLE FLICKER ──────────────────────────────────────────── */
@keyframes candleFlicker {
  0%, 100%  { transform: scaleX(1) scaleY(1) rotate(0deg);       opacity: 1;    }
  8%        { transform: scaleX(.95) scaleY(1.04) rotate(-1.5deg); opacity:.94; }
  16%       { transform: scaleX(1.04) scaleY(.97) rotate(1deg);   opacity: 1;    }
  25%       { transform: scaleX(.97) scaleY(1.06) rotate(-.8deg); opacity:.96; }
  50%       { transform: scaleX(.94) scaleY(1.08) rotate(-2deg);  opacity:.92; }
  65%       { transform: scaleX(1.05) scaleY(.95) rotate(1.2deg); opacity: 1;    }
  90%       { transform: scaleX(1.02) scaleY(.98) rotate(.8deg);  opacity: 1;    }
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
}

/* ── LOADER FADE OUT ─────────────────────────────────────────── */
#loader.done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ── MODAL ───────────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }

/* ── FOCUS ───────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}