/* ============================================================
   STORYBOOK / PARCHMENT SHARED PALETTE
   Loaded AFTER each page's inline <style> to override the
   dark-theme tokens with the warm fall-parchment direction.
   ============================================================ */

/* Fonts are now loaded via each page's <link> tag — no @import needed. */

:root {
  --bg:           #ecdcb4 !important;
  --bg-deeper:    #e3d0a4 !important;
  --bg-blue:      #e6d5af !important;
  --bg-warm:      #f3e5c3 !important;

  --paper:        #2e1814 !important;
  --paper-warm:   #1f0d0a !important;
  --paper-dim:    #5c3a30 !important;
  --paper-faint:  #8a6852 !important;

  --brass:        #8a6018 !important;
  --brass-bright: #6a4a18 !important;
  --brass-deep:   #c4a972 !important;
  --brass-dark:   #4a3210 !important;

  --ember:        #b85a1e !important;
  --ember-deep:   #7a3f17 !important;

  --witchfire:    #2a5a85 !important;
  --witchfire-deep: #1a3d5e !important;

  --oxblood:      #6a2520 !important;
  --oxblood-deep: #3d1410 !important;

  --plum:         #3d1a3a !important;
  --rust:         #9a4528 !important;

  --moonlight:    #8a6018 !important;
  --line:         #c4a972 !important;
  --line-soft:    #ddc89a !important;
}

/* Body font swap */
body {
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif !important;
  font-size: 19px;
  line-height: 1.65;
  background: var(--bg) !important;
  color: var(--paper) !important;
}

/* Parchment texture — paper grain + foxing spots + vignette */
body::before {
  content: '';
  position: fixed !important; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.42 !important;
  mix-blend-mode: multiply !important;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 100vw 100vh, 240px 240px !important;
  background-repeat: no-repeat, repeat !important;
}
body::after {
  content: '';
  position: fixed !important; inset: 0;
  pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle 11px at 12% 18%,  rgba(105, 55, 20, 0.32), transparent 70%),
    radial-gradient(circle  7px at 23% 42%,  rgba(130, 75, 30, 0.26), transparent 70%),
    radial-gradient(circle 14px at 78% 35%,  rgba(115, 60, 22, 0.30), transparent 70%),
    radial-gradient(circle  9px at 45% 28%,  rgba(120, 65, 25, 0.24), transparent 70%),
    radial-gradient(circle 12px at 65% 78%,  rgba(110, 55, 20, 0.30), transparent 70%),
    radial-gradient(circle  8px at 88% 62%,  rgba(130, 75, 30, 0.26), transparent 70%),
    radial-gradient(circle 10px at 28% 88%,  rgba(120, 60, 22, 0.28), transparent 70%),
    radial-gradient(circle 13px at 38% 8%,   rgba(120, 60, 22, 0.26), transparent 70%),
    radial-gradient(circle  8px at 92% 12%,  rgba(115, 60, 22, 0.24), transparent 70%),
    radial-gradient(circle 11px at 72% 95%,  rgba(120, 65, 25, 0.26), transparent 70%),
    radial-gradient(ellipse 70% 50% at 15% 25%, rgba(184, 130, 31, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 75%, rgba(154, 69, 40, 0.08), transparent 60%),
    radial-gradient(ellipse at center, transparent 45%, rgba(122, 70, 35, 0.28) 100%) !important;
}
body > * { position: relative; z-index: 3; }

/* Nav — cream gradient */
nav.top {
  background: linear-gradient(to bottom, rgba(10,7,6,0.95), rgba(10,7,6,0.7) 70%, transparent) !important;
  border-bottom: none;
}
nav.top .mark .word { color: #c8a060 !important; }
nav.top a { color: #e8d9b8 !important; }
nav.top a:hover { color: #f0b050 !important; }
nav.top a.current { color: #f0b050 !important; }
nav.top a::after { background: #c8a060 !important; }

/* Page hero (lodging/faq) */
.page-hero .eyebrow { color: var(--rust) !important; }
.page-hero h1 {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #4a1830 0%, #6a2520 30%, #8a3520 55%, #b85a1e 80%, #6a3318 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6a2520 !important;
  filter: drop-shadow(0 2px 3px rgba(74, 24, 48, 0.20));
}
.page-hero h1 .amp {
  font-family: 'Lora', serif !important;
  color: var(--ember) !important;
  -webkit-text-fill-color: var(--ember);
  background: none;
  font-style: italic !important;
  font-weight: 500 !important;
}
.page-hero .lede { color: var(--paper) !important; font-family: 'Lora', serif !important; }
.page-hero .lede a { color: var(--oxblood) !important; border-bottom-color: var(--brass) !important; }

/* Section headings (faq) */
.section-header .eyebrow { color: var(--rust) !important; }
.section-header h2 {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--plum) !important;
}
.section-header .icon-wrap { color: var(--ember) !important; }

/* LODGING cards */
.lodge {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 0 rgba(58,22,12,0.06), 0 8px 24px rgba(74,40,18,0.08);
}
.lodge::before, .lodge::after { border-color: var(--brass) !important; }
.lodge:hover { border-color: var(--ember) !important; }
.lodge .vibe { color: var(--ember) !important; }
.lodge h3 {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--plum) !important;
}
.lodge .description { color: var(--paper) !important; font-family: 'Lora', serif !important; }
.lodge .meta { color: var(--paper-dim) !important; }
.lodge .meta .row-label { color: var(--rust) !important; font-weight: 600; }
.lodge .visit { color: var(--oxblood) !important; }

/* Back-to-home strip (lodging) */
.back-strip {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
}
.back-strip p { color: var(--paper) !important; font-family: 'Lora', serif !important; }
.back-strip a { color: var(--oxblood) !important; border-bottom-color: var(--brass) !important; }

/* FAQ — Featured cards */
.featured {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 0 rgba(58,22,12,0.06), 0 8px 24px rgba(74,40,18,0.08);
}
.featured::before, .featured::after { border-color: var(--ember) !important; }
.feat-text .q-label { color: var(--ember) !important; font-weight: 600 !important; }
.feat-text h3 {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--plum) !important;
}
.feat-text p { color: var(--paper) !important; font-family: 'Lora', serif !important; }
.feat-text p em { color: var(--oxblood) !important; }
.feat-text a { color: var(--oxblood) !important; border-bottom-color: var(--brass) !important; }
.feat-illustration { color: var(--rust) !important; }
.feat-placeholder { background: rgba(184,90,30,0.06) !important; border-color: var(--brass) !important; }
.feat-placeholder .ph-label { color: var(--ember) !important; }
.feat-placeholder .ph-name { color: var(--paper) !important; }
.feat-placeholder .ph-spec { color: var(--paper-dim) !important; }

/* FAQ details/summary */
details.faq { border-top-color: var(--brass) !important; }
details.faq:last-of-type { border-bottom-color: var(--brass) !important; }
details.faq summary {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--plum) !important;
}
details.faq summary:hover { color: var(--ember) !important; }
details.faq .icon { border-color: var(--rust) !important; color: var(--ember) !important; }
details.faq[open] .icon { background: rgba(184,90,30,0.12) !important; }
details.faq .answer { color: var(--paper) !important; font-family: 'Lora', serif !important; }
details.faq .answer strong { color: var(--plum) !important; font-weight: 600 !important; }
details.faq .answer em { color: var(--oxblood) !important; }
details.faq .answer a { color: var(--oxblood) !important; border-bottom-color: var(--brass) !important; }

/* Closing note (faq) */
.closing-note {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 0 rgba(58,22,12,0.06), 0 8px 24px rgba(74,40,18,0.08);
}
.closing-note::before, .closing-note::after { border-color: var(--ember) !important; }
.closing-note .eyebrow { color: var(--ember) !important; }
.closing-note p { color: var(--paper) !important; font-family: 'Lora', serif !important; }
.closing-note .signature { color: var(--oxblood) !important; }

/* Image bands (faq) */
.image-band-inner {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
}
.image-band-inner::before, .image-band-inner::after { border-color: var(--brass) !important; }
.image-band-inner .ph-label { color: var(--ember) !important; }
.image-band-inner .ph-name { color: var(--paper) !important; }
.image-band-inner .ph-spec { color: var(--paper-dim) !important; }

/* Divider lines & flourishes */
.divider-fancy::before, .divider-fancy::after {
  background: linear-gradient(to right, transparent, var(--brass-deep), transparent) !important;
}
.divider-fancy { color: var(--rust) !important; }
.divider-fancy svg { color: var(--rust) !important; }
.apothecary-row { color: var(--rust) !important; opacity: 0.55 !important; }

/* RSVP — form */
.form-card {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 0 rgba(58,22,12,0.06), 0 8px 24px rgba(74,40,18,0.08);
}
.form-card::before, .form-card::after { border-color: var(--brass) !important; }
.field .label .num { color: var(--rust) !important; font-weight: 600 !important; }
.field .label .q {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--plum) !important;
}
.field .label .opt { color: var(--paper-dim) !important; }
.field .hint { color: var(--paper-dim) !important; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea, select {
  background: rgba(255,255,255,0.5) !important;
  border-color: var(--brass) !important;
  color: var(--paper) !important;
  font-family: 'Lora', serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ember) !important;
  background: rgba(255,255,255,0.7) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--paper-faint) !important; opacity: 0.55 !important; }
.sublabel { color: var(--ember) !important; font-weight: 600 !important; }
.stepper { border-color: var(--brass) !important; background: rgba(255,255,255,0.5) !important; }
.stepper input { color: var(--paper-warm) !important; }
.stepper .step { color: var(--ember) !important; }
.stepper .step:hover { background: rgba(184,90,30,0.12) !important; }
.radio-row, .check-row, label { color: var(--paper) !important; }

/* Buttons (RSVP) */
.btn {
  background: var(--rust) !important;
  border-color: var(--rust) !important;
  color: #f4ead0 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 0 rgba(58, 22, 12, 0.25);
}
.btn:hover:not(:disabled) {
  background: var(--oxblood) !important;
  border-color: var(--oxblood) !important;
  color: #f4ead0 !important;
  box-shadow: 0 6px 18px rgba(106, 37, 32, 0.30) !important;
}
.saved { color: var(--paper-dim) !important; font-style: italic; }

/* Footer — barn scene background */
footer, footer.foot {
  position: relative !important;
  background: #0e0704 url('images/hollinshead-barn-twilight.jpg') center / cover no-repeat !important;
  border-top: none !important;
  overflow: hidden !important;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 2, 0.42);
  z-index: 0;
}
footer > * { position: relative; z-index: 1; }
footer .foot-mark { color: #d4874a !important; }
footer .hosts {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: #f2e2c0 !important;
}
footer .small, footer .roman-foot { color: #c4a972 !important; }

/* Airports section + map (lodging page) */
.airports-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 2.5rem;
}

/* DRIVE-TIMES GRID (By Land section) */
.drive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.drive {
  background: var(--bg-warm) !important;
  border: 1px solid var(--line);
  padding: 1.5rem 1.4rem;
  position: relative;
  text-align: center;
  box-shadow: 0 2px 0 rgba(58,22,12,0.06), 0 8px 24px rgba(74,40,18,0.08);
}
.drive::before, .drive::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--brass);
}
.drive::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.drive::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.drive .city {
  font-family: 'Cinzel', serif !important;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--plum) !important;
  margin-bottom: 0.55rem;
  letter-spacing: 0.03em;
}
.drive .time {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ember) !important;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.drive .dist {
  font-family: 'Cormorant SC', serif !important;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--paper-dim) !important;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .drive-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .drive-grid { grid-template-columns: 1fr; }
}

/* BY SEA — joke fantasy cards */
.sea-grid { grid-template-columns: 1fr 1fr; }
.airport.sea .code {
  color: var(--witchfire) !important;
}
.airport.sea {
  background: linear-gradient(155deg, var(--bg-warm), rgba(42, 90, 133, 0.08)) !important;
}
.airports-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.airports-head .eyebrow { margin-bottom: 0.75rem; display: inline-block; }
.airports-head h2 {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--plum) !important;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.airports-head .section-sub {
  font-family: 'Lora', serif !important;
  font-style: italic;
  color: var(--paper-dim) !important;
  font-size: 1.15rem;
  margin-top: 0.5rem;
}

.airports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.airport {
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  padding: 2rem 1.8rem;
  position: relative;
  box-shadow: 0 2px 0 rgba(58,22,12,0.06), 0 8px 24px rgba(74,40,18,0.08);
}
.airport::before, .airport::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--brass);
}
.airport::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.airport::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.airport .code {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--oxblood) !important;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.airport .airport-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 500;
  color: var(--plum) !important;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
}
.airport .airport-stat {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 1.4rem;
  padding: 1rem 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.airport .airport-stat .stat .big {
  font-family: 'Cinzel', serif !important;
  font-weight: 700;
  font-size: 2rem;
  color: var(--ember) !important;
  line-height: 1;
}
.airport .airport-stat .stat .unit {
  font-family: 'Cormorant SC', serif !important;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--paper-dim) !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}
.airport .airport-note {
  font-family: 'Lora', serif !important;
  color: var(--paper) !important;
  font-size: 1.05rem;
  line-height: 1.6;
}
.airport .airport-note em {
  color: var(--oxblood) !important;
  font-style: italic;
  font-weight: 500;
}

/* Map frame */
.map-frame {
  background: transparent !important;
  border: none !important;
  padding: 0;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 14px 32px rgba(74, 40, 18, 0.22);
}
.map-frame::before, .map-frame::after { display: none; }
.map-frame .oregon-map {
  width: 100%;
  height: auto;
  display: block;
}
.map-frame .map-caption {
  display: none;
}

@media (max-width: 760px) {
  .airports-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ILLUSTRATION QUOTES — shared across all pages
   ============================================================ */

.illus-quote {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--paper-warm, #f0e6cf);
  line-height: 1.5;
  margin: 0 0 0.6rem;
  display: block;
}

.illus-attr {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-faint, #a89876);
  margin-top: 0.25rem;
}

/* ============================================================
   HALLOWEEN ATMOSPHERE — global overlays & effects
   ============================================================ */

/* --- Spider web corners (injected as .od-cobweb-tl / .od-cobweb-tr by halloween-init.js) --- */
.od-cobweb-tl,
.od-cobweb-tr {
  position: fixed;
  top: 0;
  width: 180px;
  height: 180px;
  background-repeat: no-repeat;
  background-size: 180px 180px;
  pointer-events: none;
  z-index: 210;
  opacity: 0.45;
}
.od-cobweb-tl {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg stroke='%23c8a97e' stroke-width='1.1' fill='none'%3E%3Cline x1='0' y1='0' x2='180' y2='0'/%3E%3Cline x1='0' y1='0' x2='166' y2='68'/%3E%3Cline x1='0' y1='0' x2='127' y2='127'/%3E%3Cline x1='0' y1='0' x2='68' y2='166'/%3E%3Cline x1='0' y1='0' x2='0' y2='180'/%3E%3Cpolyline points='45,0 42,17 32,32 17,42 0,45'/%3E%3Cpolyline points='90,0 83,35 64,64 35,83 0,90'/%3E%3Cpolyline points='135,0 125,52 96,96 52,125 0,135'/%3E%3Cpolyline points='180,0 166,68 127,127 68,166 0,180'/%3E%3C/g%3E%3C/svg%3E");
}
.od-cobweb-tr {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg stroke='%23c8a97e' stroke-width='1.1' fill='none'%3E%3Cline x1='180' y1='0' x2='0' y2='0'/%3E%3Cline x1='180' y1='0' x2='14' y2='68'/%3E%3Cline x1='180' y1='0' x2='53' y2='127'/%3E%3Cline x1='180' y1='0' x2='112' y2='166'/%3E%3Cline x1='180' y1='0' x2='180' y2='180'/%3E%3Cpolyline points='135,0 138,17 148,32 163,42 180,45'/%3E%3Cpolyline points='90,0 97,35 116,64 145,83 180,90'/%3E%3Cpolyline points='45,0 55,52 84,96 128,125 180,135'/%3E%3Cpolyline points='0,0 14,68 53,127 112,166 180,180'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 480px) {
  .od-cobweb-tl, .od-cobweb-tr {
    width: 100px; height: 100px;
    background-size: 100px 100px;
    opacity: 0.35;
  }
}

/* --- Candle glow flicker on section dividers --- */
@keyframes candleGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(184,90,30,0.35)); }
  40%       { filter: drop-shadow(0 0 9px rgba(225,145,40,0.62)); }
  70%       { filter: drop-shadow(0 0 2px rgba(158,62,14,0.22)); }
}
.divider-fancy {
  animation: candleGlow 4.8s ease-in-out infinite !important;
}

/* --- Moonlit glow behind subpage page heroes --- */
.page-hero {
  box-shadow: inset 0 0 200px rgba(240,215,155,0.13) !important;
}


/* --- Falling autumn leaves (lodging page) --- */
@keyframes leafFallCW {
  0%   { transform: translateY(-60px) translateX(0) rotate(0deg);    opacity: 0; }
  8%   { opacity: 0.72; }
  45%  { transform: translateY(44vh) translateX(42px) rotate(290deg); }
  92%  { opacity: 0.48; }
  100% { transform: translateY(110vh) translateX(-18px) rotate(630deg); opacity: 0; }
}
@keyframes leafFallCCW {
  0%   { transform: translateY(-60px) translateX(0) rotate(0deg);     opacity: 0; }
  8%   { opacity: 0.72; }
  45%  { transform: translateY(44vh) translateX(-42px) rotate(-290deg); }
  92%  { opacity: 0.48; }
  100% { transform: translateY(110vh) translateX(18px) rotate(-630deg); opacity: 0; }
}
.falling-leaves {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.falling-leaves .leaf {
  position: absolute;
  top: -60px;
  animation: leafFallCW linear infinite;
  will-change: transform;
}
.falling-leaves .leaf:nth-child(even) {
  animation-name: leafFallCCW;
}

/* --- Subtle drifting bats on subpages (2 injected by halloween-init.js) --- */
@keyframes subBatDrift {
  0%   { opacity: 0;    transform: translateX(0)    translateY(0)              rotate(-4deg); }
  6%   { opacity: 0.38; }
  18%  { transform: translateX(20vw)  translateY(var(--sb-drift, -6vh))  rotate(7deg);  }
  34%  { transform: translateX(40vw)  translateY(calc(var(--sb-drift, -6vh) * -0.5)) rotate(-5deg); }
  52%  { transform: translateX(60vw)  translateY(var(--sb-drift, -6vh))  rotate(9deg);  }
  70%  { transform: translateX(80vw)  translateY(calc(var(--sb-drift, -6vh) * 0.3))  rotate(-4deg); }
  94%  { opacity: 0.38; }
  100% { opacity: 0;    transform: translateX(115vw) translateY(0)              rotate(-2deg); }
}
.od-sub-bat {
  position: fixed;
  pointer-events: none;
  z-index: 220;
  will-change: transform;
}
.od-sub-bat img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.85;
}