/* popov_landing.css
   ─────────────────────────────────────────────
   POPOV LANDING — combined stylesheet
   Covers: V2 (the loop) · V4 (multi-goals) · V6 (duet)
   ───────────────────────────────────────────── */

/* ── Page shell ─────────────────────────────── */
html, body {
  margin: 0;
  background: #06070A;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #f0ede8;
}

/* ── Page stack (full-bleed bands, one continuous page) ─ */
.page-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* height + band background set inline by JS */
}

/* ── Shared hero scaffolding ───────────────── */
.hero-stage {
  position: relative;
  width: 1440px;
  height: 900px;
  background: transparent;
  color: #f0ede8;
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
  isolation: isolate;
}
.hero-stage::after {
  /* subtle film grain */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: overlay;
}
.hero-stage .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 40;
}
.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Keyframes (shared by all variants) ────── */
@keyframes splashIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wave {
  0%, 100% { height: 25%; }
  50%      { height: 90%; }
}
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes popovGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
@keyframes popovMorph {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25%      { transform: scale(1.04, 0.96) rotate(2deg); }
  50%      { transform: scale(0.97, 1.05) rotate(-1deg); }
  75%      { transform: scale(1.03, 0.98) rotate(1deg); }
}

/* ── V6 blob breathing/mouth ───────────────── */
@keyframes fBreathe0 {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%      { transform: scale(1.08); opacity: 0.4; }
}
@keyframes fBreathe1 {
  0%, 100% { transform: scale(1.04); opacity: 0.5; }
  50%      { transform: scale(1.16); opacity: 0.2; }
}
@keyframes fMouth {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
@keyframes pBreathe0 {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.1); opacity: 0.45; }
}
@keyframes pBreathe1 {
  0%, 100% { transform: scale(1.05); opacity: 0.5; }
  50%      { transform: scale(1.2);  opacity: 0.2; }
}
@keyframes pMouth {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}
@keyframes orbitV6 {
  to { transform: rotate(360deg); }
}