/* WB2 - "The bat, through time". Pairs with js/bat-stage.js. Palette: paper #F4EDDC, ink #1F1A14, green #1F4D36, maroon #6B1F2A, brass #B08A3E. */
.bat-section { position: relative; background: #F4EDDC; color: #1F1A14; }
.bat-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; background: #F4EDDC; pointer-events: none; }
.bat-stage .bat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bat-steps { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }
.bat-step { min-height: 72vh; min-height: 72svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 clamp(20px, 6vw, 96px); box-sizing: border-box; }
.bat-step:nth-child(even) { align-items: flex-end; text-align: right; }
.bat-step > *:not(.bat-step__fig) { max-width: 36rem; }
.bat-step[data-era]::before { content: attr(data-era); font: 600 clamp(6rem, 7.2vw, 10.4rem)/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; color: #6B1F2A; }
.bat-step h3, .bat-step h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(2rem, 1.7vw, 2.6rem); text-transform: uppercase; letter-spacing: .06em; margin: .4rem 0 .6rem; }
.bat-step p { font: 400 clamp(1.6rem, 1.25vw, 1.9rem)/1.5 Inter, system-ui, sans-serif; margin: 0; }
/* the stage is empty when no WebGL / reduced motion: JS adds .bat-fallback and a still picture per step */
.bat-fallback .bat-stage { display: none; }
.bat-fallback .bat-steps { margin-top: 0; }
.bat-fallback .bat-step { min-height: 0; padding-top: 48px; padding-bottom: 48px; align-items: center; text-align: center; }
.bat-fallback .bat-step:nth-child(even) { align-items: center; text-align: center; }
.bat-step__fig { width: min(70vw, 420px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: 1rem; max-width: none !important; }
/* narrow screens: text sits low, the bat stays centred above it */
@media (max-width: 767px) {
  .bat-step { justify-content: flex-end; padding-bottom: 12vh; }
  .bat-step:nth-child(even) { align-items: flex-start; text-align: left; }
  .bat-step > *:not(.bat-step__fig) { max-width: none; }
}
.bat-step:last-child { min-height: 100vh; min-height: 100svh; }