/* ==========================================================================
   animation.css  ·  Scroll reveals, page-load stagger & micro-interactions
   ========================================================================== */

/* ---------- Scroll reveal (toggled by main.js via IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }

.reveal-zoom { opacity: 0; transform: scale(.92); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-zoom.in { opacity: 1; transform: none; }

/* stagger children */
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){ transition-delay: .05s; }
.stagger.in > *:nth-child(2){ transition-delay: .15s; }
.stagger.in > *:nth-child(3){ transition-delay: .25s; }
.stagger.in > *:nth-child(4){ transition-delay: .35s; }
.stagger.in > *:nth-child(5){ transition-delay: .45s; }
.stagger.in > *:nth-child(6){ transition-delay: .55s; }
.stagger.in > *:nth-child(7){ transition-delay: .65s; }
.stagger.in > *:nth-child(8){ transition-delay: .75s; }
.stagger.in > *:nth-child(9){ transition-delay: .85s; }

/* ---------- Page-load hero entrance ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hero .anim { opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.hero .anim.d1 { animation-delay: .15s; }
.hero .anim.d2 { animation-delay: .3s; }
.hero .anim.d3 { animation-delay: .45s; }
.hero .anim.d4 { animation-delay: .6s; }
.hero-figure { animation: fadeIn 1.2s var(--ease) .3s both; }
.hero-figure img { animation: floatY 7s ease-in-out 1.2s infinite; }

.page-hero .anim { opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.page-hero .anim.d1 { animation-delay: .12s; }
.page-hero .anim.d2 { animation-delay: .26s; }
.page-hero .anim.d3 { animation-delay: .4s; }

/* gold shimmer accent on headings' italic word (subtle) */
.shimmer-gold {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* timeline progressive draw */
.htl-item, .vt-item { transition-delay: .05s; }

/* hover lift utility */
.lift { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lift:hover { transform: translateY(-6px); }

/* button ripple-ish glow on focus */
.btn:focus-visible, .filter-btn:focus-visible, .link-gold:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* loader (optional preloader) */
.preloader { position: fixed; inset: 0; background: var(--black); z-index: 999; display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s; }
.preloader.hide { opacity: 0; visibility: hidden; }
.preloader .pl-mono { font-family: var(--serif); font-weight: 800; font-size: 2.4rem; color: var(--gold); letter-spacing: .1em; animation: floatY 2.4s ease-in-out infinite; }