/* ==========================================================================
   Meldroch, LLC — Animations
   Intro sequence, scroll reveals, micro-interactions
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 24px -6px var(--gold-glow), 0 0 0 1px rgba(232, 184, 75, 0.35); }
  50%      { box-shadow: 0 0 44px -4px var(--gold-glow), 0 0 0 1px rgba(232, 184, 75, 0.6); }
}

@keyframes pulseGlowDrop {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(232, 184, 75, 0.35)); }
  50%      { filter: drop-shadow(0 0 28px rgba(232, 184, 75, 0.65)); }
}

@keyframes scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}

@keyframes kenburns {
  from { transform: scale(1.08) translateY(-1.5%); }
  to   { transform: scale(1.16) translateY(2.5%); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers — set on siblings inside a revealed group */
.reveal-group > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-group.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-group.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.in-view > *:nth-child(2) { transition-delay: 80ms; }
.reveal-group.in-view > *:nth-child(3) { transition-delay: 160ms; }
.reveal-group.in-view > *:nth-child(4) { transition-delay: 240ms; }
.reveal-group.in-view > *:nth-child(5) { transition-delay: 320ms; }
.reveal-group.in-view > *:nth-child(6) { transition-delay: 400ms; }

/* Hero entrance (plays after intro dismisses) */
.hero-inner > * {
  opacity: 0;
}

body.entered .hero-inner > * {
  animation: fadeUp 0.9s var(--ease-out) forwards;
}

body.entered .hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
body.entered .hero-inner > *:nth-child(2) { animation-delay: 0.18s; }
body.entered .hero-inner > *:nth-child(3) { animation-delay: 0.34s; }
body.entered .hero-inner > *:nth-child(4) { animation-delay: 0.5s; }

body.entered .hero-scroll {
  opacity: 0;
  animation: fadeIn 1.2s var(--ease-out) 1.1s forwards;
}

/* Non-index pages: hero content shows immediately */
body.no-intro .hero-inner > *,
body.no-intro .hero-scroll { opacity: 1; animation: none; }

/* ==========================================================================
   Intro / cinematic entry
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: flex;
  /* Auto margins on .intro-inner centre the panel, but still let it scroll
     when the copy is taller than the viewport — flex centring alone would
     clip the top on short screens. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(46rem 30rem at 50% 30%, rgba(232, 184, 75, 0.06), transparent 65%),
    var(--bg);
  transition: opacity 0.8s var(--ease-in), visibility 0.8s;
}

.intro[hidden] { display: none; }

.intro.leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-inner {
  margin: auto;              /* centres when it fits, scrolls when it doesn't */
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-logo {
  width: clamp(5.5rem, 14vw, 8rem);
  height: auto;
  margin-bottom: 2rem;
  animation: floaty 5s ease-in-out infinite;
  filter: drop-shadow(0 0 26px rgba(232, 184, 75, 0.4));
}

.intro-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: fadeUp 1s var(--ease-out) 0.1s both;
}


/* Opening statement — the first thing read after the logo */
.intro-lede {
  max-width: 46rem;
  margin: 1.6rem auto 0;
  color: var(--text-muted);
  font-size: clamp(0.98rem, 0.93rem + 0.35vw, 1.15rem);
  line-height: 1.75;
  text-wrap: pretty;
  animation: fadeUp 1s var(--ease-out) 0.25s both;
}

.intro-hint {
  color: var(--text-faint);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 2rem 0 1.6rem;
  animation: fadeUp 1s var(--ease-out) 0.35s both;
}

/* Holds the Enter button today; future mini-site buttons wrap in beside it */
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
}

/* Small print under the button */
.intro-note {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  /* Muted rather than faint: small print still has to be readable —
     --text-faint at this size falls under 4.5:1 on the dark backdrop. */
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  animation: fadeUp 1s var(--ease-out) 0.7s both;
}

.intro-enter {
  position: relative;
  min-width: 12rem;
  min-height: 3.4rem;
  padding: 1rem 3.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid rgba(232, 184, 75, 0.45);
  border-radius: 999px;
  background: rgba(232, 184, 75, 0.05);
  overflow: hidden;
  animation: fadeUp 1s var(--ease-out) 0.55s both, pulseGlow 3.2s ease-in-out 1.6s infinite;
  transition: color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.intro-enter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(232, 184, 75, 0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out);
}

.intro-enter:hover {
  color: #fff;
  background: rgba(232, 184, 75, 0.12);
  transform: translateY(-2px);
}

.intro-enter:hover::before { transform: translateX(100%); }
.intro-enter:active { transform: scale(0.97); }

/* Secondary gateway buttons (future mini-sites) — quieter than the primary
   Enter so the main industry still leads. */
.intro-enter-alt {
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  animation: fadeUp 1s var(--ease-out) 0.55s both;
}
.intro-enter-alt:hover {
  color: #fff;
  border-color: rgba(232, 184, 75, 0.4);
  background: rgba(232, 184, 75, 0.08);
}

/* Loading phase */
.intro-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.intro.loading .intro-gate { display: none; }
.intro.loading .intro-loading { display: flex; }

.intro-load-logo {
  width: 6rem;
  height: auto;
  animation:
    fadeIn 0.5s var(--ease-out) both,
    pulseGlowDrop 2.2s ease-in-out 0.4s infinite;
}

.intro-bar {
  width: min(16rem, 60vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.intro-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  box-shadow: 0 0 14px 1px var(--gold-glow);
  transition: width 0.25s var(--ease-out);
}

.intro-status {
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  min-height: 1.2em;
}

/* Scanline sweep during load */
.intro .scanline {
  display: none;
  position: absolute;
  inset-inline: 0;
  height: 30vh;
  background: linear-gradient(180deg, transparent, rgba(232, 184, 75, 0.045), transparent);
  pointer-events: none;
}

.intro.loading .scanline {
  display: block;
  animation: scanline 1.6s var(--ease-out) forwards;
}

/* Reduced motion: intro simplifies to a quick fade */
@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-enter, .intro-load-logo { animation: none; }
  .pc-kenburns { animation: none; }
  .hero-inner > * { opacity: 1; }
  body.entered .hero-inner > * { animation: none; }
  .reveal, .reveal-group > * { opacity: 1; transform: none; }
}