/* ===========================================================
   ut.css — Undertale / Waterfall skin
   - Fonts: Press Start 2P (UI), VT323 (body) + Undertale stacks if present
   - Cards: black panels, thick white borders, pixel corners
   - Ambient: drifting motes + scanline film over panels
   - Subtle heading jitter; glow accents echo the flowers
   =========================================================== */

/* === Fonts (Google) === */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");

/* If you self-host Undertale fonts, keep these names first in the stack. */
:root{
  --ui-font: "Determination Sans", "Monster Friend", "Press Start 2P", system-ui, sans-serif;
  --body-font: "Determination Mono", "Monster Friend", "VT323", Consolas, "Courier New", monospace;

  /* Waterfall colours */
  --ink: #EAF6FF;              /* main text on dark */
  --muted: #9fb9c6;            /* secondary text */
  --panel: rgba(0, 6, 14, .72); /* card fill (inky blue) */
  --panel-strong: rgba(0, 6, 14, .88);
  --border: #ffffff;           /* Undertale white border */
  --accent: #79e9ff;           /* echo-flower cyan */
  --accent-2: #3cc7ff;         /* deeper cyan */
  --soul: #ff2b2b;             /* red heart */
  --shadow: 0 0 0 2px var(--border), 0 0 24px rgba(121, 233, 255, .08);

  --radius: 8px;
  --gap: 1rem;
}

/* ===== Page + Background ===== */
.ut-page{
  margin:0; color:var(--ink); font-family:var(--body-font);
  background:
    radial-gradient(100% 160% at 50% 120%, rgba(0,50,70,.55) 0%, rgba(0,0,0,.8) 42%, rgba(0,0,0,1) 78%) ,
    url("/images/fandom/waterfall.webp") center / cover fixed no-repeat;
  min-height:100dvh;
  line-height:1.4;
  image-rendering:auto;
  overflow-x:hidden;
}

/* Ambient motes */
.ut-page::before{
  content:"";
  position:fixed; inset:-10vh -10vw;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(121,233,255,.6) 40%, transparent 42%) 0 0/120px 120px,
    radial-gradient(2px 2px at 70% 60%, rgba(121,233,255,.35) 40%, transparent 42%) 0 0/160px 160px,
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.15) 40%, transparent 42%) 0 0/140px 140px;
  animation: motes 28s linear infinite;
  z-index:0;
}
@keyframes motes{
  from{ transform: translateY(0) }
  to  { transform: translateY(-12vh) }
}

/* ===== Layout ===== */
.wrap{ max-width:1100px; margin-inline:auto; padding: clamp(16px, 3vw, 32px); position:relative; z-index:1; }
.page.content{ display:block; }

.mt-2{ margin-top:1rem; }

/* ===== Nav (pixel rail) ===== */
.dst-nav{
  position:sticky; top:0; z-index:5;
  display:flex; gap:.75rem; align-items:center; justify-content:flex-start;
  padding:.6rem .9rem;
  font-family:var(--ui-font); font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(0,10,20,.92), rgba(0,10,20,.75));
  border-bottom:2px solid var(--border);
  box-shadow:0 4px 20px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(3px);
}
.dst-nav a{
  color:var(--ink); text-decoration:none; padding:.4rem .6rem; border:2px solid transparent;
}
.dst-nav a:focus-visible,
.dst-nav a:hover{
  border-color:var(--border);
  text-shadow:0 0 6px var(--accent);
}

/* Night switch (pure CSS skin; your JS flips aria-checked) */
.night-switch{
  margin-left:auto;
  
  background:var(--panel-strong);
  position:relative; border-radius:6px; cursor:pointer;
}
.night-switch::before{
  content:""; position:absolute; inset:2px auto 2px 2px;
  
  background:
    radial-gradient(circle at 35% 35%, #fff 0 40%, transparent 42%) ,
    radial-gradient(circle at 75% 50%, rgba(255,255,255,.25) 0 30%, transparent 32%);
  border-radius:4px; transition: transform .25s ease;
}
.night-switch[aria-checked="true"]::before{
  transform: translateX(16px);
  background:
    radial-gradient(circle at 50% 50%, var(--soul) 0 42%, transparent 44%),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.35) 0 26%, transparent 28%);
}

/* ===== Cards / HUD ===== */
.card{
  background:var(--panel);
  box-shadow: var(--shadow);
  border-radius:var(--radius);
  border:2px solid var(--border);
  position:relative;
  padding: clamp(16px, 2.5vw, 24px);
  overflow:hidden;
}

/* Pixel corner braces */
.hud-corners::before,
.hud-corners::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    conic-gradient(from 90deg at top left,  transparent 0 90deg, var(--border) 0 92deg, transparent 0) top left/16px 16px no-repeat,
    conic-gradient(from 180deg at top right, transparent 0 90deg, var(--border) 0 92deg, transparent 0) top right/16px 16px no-repeat,
    conic-gradient(from   0deg at bottom left, transparent 0 90deg, var(--border) 0 92deg, transparent 0) bottom left/16px 16px no-repeat,
    conic-gradient(from 270deg at bottom right,transparent 0 90deg, var(--border) 0 92deg, transparent 0) bottom right/16px 16px no-repeat;
}
.hud-corners::after{ /* scanline film */
  background:
    linear-gradient(transparent 60%, rgba(255,255,255,.03) 60% 62%, transparent 62%) 0 0/100% 4px,
    radial-gradient(90% 120% at 50% 120%, rgba(121,233,255,.05), transparent 60%);
  mix-blend-mode: screen; opacity:.4;
}

/* Card hover: Undertale glow */
.card:hover{
  box-shadow: 0 0 0 2px var(--border), 0 0 22px rgba(121,233,255,.25);
  transform: translateY(-1px);
}

/* ===== Hero ===== */
.hero{
  text-align:center;
  background:linear-gradient(180deg, rgba(0,10,20,.9), rgba(0,10,20,.75));
}
.hero .brace{
  display:block; margin-inline:auto; width:70px; height:8px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  opacity:.7; margin-bottom:.5rem;
}
h1{
  font-family:var(--ui-font); font-size: clamp(22px, 5vw, 36px);
  letter-spacing:1px; margin:0 0 .6rem;
  text-shadow:0 0 6px var(--accent-2);
  animation: jitter 3800ms steps(2,end) infinite;
}
.hero .lede{
  color:var(--muted); font-style:italic; font-size: clamp(14px, 2.4vw, 18px);
  text-shadow:0 0 10px rgba(121,233,255,.35);
  animation: gentleGlow 6s ease-in-out infinite;
}

/* ===== Section titles + taglines ===== */
h2{
  font-family:var(--ui-font); font-size: clamp(16px, 3.6vw, 24px);
  margin:0 0 .35rem; letter-spacing:0.5px;
  text-transform:uppercase;
  animation: jitter 4800ms steps(2,end) infinite;
}
h3{ font-family:var(--ui-font); letter-spacing:.5px; margin:0 0 .5rem; }
.tagline{ color:var(--muted); margin:.1rem 0 .5rem; }

/* ===== Chips ===== */
.chips{ list-style:none; display:flex; gap:.5rem; flex-wrap:wrap; padding:0; margin:.25rem 0 0; }
.chips li{
  font-family:var(--ui-font); font-size:11px; text-transform:uppercase;
  padding:.25rem .5rem; border:2px solid var(--border); border-radius:6px;
  background:rgba(0,0,0,.35);
}

/* ===== Grid of quote cards ===== */
.grid.auto{
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding:0; list-style:none;
}

/* Quote card layout */
.quote-card{
  list-style:none; display:grid; grid-template-columns: 88px 1fr; gap:.9rem;
  align-items:start; background:var(--panel);
  border:2px solid var(--border); border-radius:var(--radius);
  padding:.9rem; position:relative; box-shadow: var(--shadow);
}
.quote-card.no-art{ grid-template-columns: 1fr; }
.quote-card:hover{ box-shadow: 0 0 0 2px var(--border), 0 0 18px rgba(121,233,255,.22); }

.obj{
  width:80px; height:80px; object-fit:cover; border:2px solid var(--border);
  border-radius:6px; background:#000; image-rendering: pixelated;
  box-shadow:0 0 10px rgba(121,233,255,.2);
}

/* Blockquotes with 'soul' bullet */
blockquote{ margin:0; }
.quote-card blockquote{
  position:relative; padding-left:1.35rem;
}
.quote-card blockquote::before{
  content:"❤"; color:var(--soul); position:absolute; left:0; top:.05rem;
  font-size:1rem; text-shadow:0 0 6px rgba(255,43,43,.6);
}
.quote-card footer{
  color:var(--muted); margin-top:.4rem; font-style:italic;
}

/* Big epigraph style */
.dst-quote{
  font-size: clamp(16px, 2.6vw, 22px);
  text-align:center; margin:0;
  text-shadow:0 0 10px rgba(121,233,255,.35);
  animation: gentleGlow 6s ease-in-out infinite;
}
.dst-quote footer{ margin-top:.6rem; color:var(--muted); }

/* ===== Links ===== */
a{ color:var(--accent); }
a:hover{ color:var(--accent-2); text-shadow:0 0 6px var(--accent-2); }

/* ===== Animations ===== */
@keyframes jitter{
  0%, 100% { transform: translate(0,0) }
  50%      { transform: translate(.2px, -.4px) }
}
@keyframes gentleGlow{
  0%,100% { text-shadow:0 0 4px rgba(121,233,255,.25), 0 0 14px rgba(121,233,255,.12) }
  50%     { text-shadow:0 0 10px rgba(121,233,255,.45), 0 0 26px rgba(121,233,255,.18) }
}

/* ===== Accessibility: reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ===== Utilities ===== */
.center{ text-align:center; }

/* ===== Nice focus outlines (keyboard) ===== */
:focus-visible{
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* ===== Undertale Waterfall — visibility tweaks ===== */

/* 1) Make the background image unfiltered (no dark gradient). */
.ut-page{
  background: url("/images/fandom/waterfall.webp") center / cover fixed no-repeat;
}

/* 2) Make cards translucent and let the scene bleed through a touch. */
:root{
  /* soften the inky panels */
  --panel: rgba(0, 6, 14, .38);
  --panel-strong: rgba(0, 6, 14, .55);
}

/* frosted-but-minimal so text stays readable without hiding the art */
.card,
.quote-card{
  background: var(--panel);
  -webkit-backdrop-filter: blur(1.5px) saturate(110%);
          backdrop-filter: blur(1.5px) saturate(110%);
}

/* keep the Undertale HUD feel but lighten hover glow a tad */
.card:hover,
.quote-card:hover{
  box-shadow: 0 0 0 2px var(--border), 0 0 18px rgba(121,233,255,.18);
}

/* optional: nudge general text contrast if your bg is very bright in places */
/*
.ut-page{ text-shadow: 0 1px 0 rgba(0,0,0,.6); }
*/

/* =========================================================
   Undertale — UX fixes: switch, nav hover, pixel hearts
   Paste at the end of ut.css
   ========================================================= */

/* ---------- Pixel SVGs as CSS variables ---------- */
:root{
  /* tiny 8–10px pixel sprites; shape-rendering keeps them crunchy */
  --svg-heart: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'>\
<rect width='1' height='1' x='1' y='0' fill='%23ff2b2b'/><rect width='1' height='1' x='2' y='0' fill='%23ff2b2b'/>\
<rect width='1' height='1' x='5' y='0' fill='%23ff2b2b'/><rect width='1' height='1' x='6' y='0' fill='%23ff2b2b'/>\
<rect width='8' height='1' x='0' y='1' fill='%23ff2b2b'/>\
<rect width='8' height='1' x='0' y='2' fill='%23ff2b2b'/>\
<rect width='8' height='1' x='0' y='3' fill='%23ff2b2b'/>\
<rect width='6' height='1' x='1' y='4' fill='%23ff2b2b'/>\
<rect width='4' height='1' x='2' y='5' fill='%23ff2b2b'/>\
<rect width='2' height='1' x='3' y='6' fill='%23ff2b2b'/>\
</svg>");

  --svg-sun: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'>\
<rect x='4' y='0' width='1' height='1' fill='%23ffd34a'/>\
<rect x='0' y='4' width='1' height='1' fill='%23ffd34a'/>\
<rect x='8' y='4' width='1' height='1' fill='%23ffd34a'/>\
<rect x='4' y='8' width='1' height='1' fill='%23ffd34a'/>\
<rect x='1' y='1' width='1' height='1' fill='%23ffd34a'/><rect x='7' y='1' width='1' height='1' fill='%23ffd34a'/>\
<rect x='1' y='7' width='1' height='1' fill='%23ffd34a'/><rect x='7' y='7' width='1' height='1' fill='%23ffd34a'/>\
<rect x='3' y='3' width='3' height='3' fill='%23ffd34a'/>\
</svg>");

  --svg-moon: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'>\
<rect x='2' y='2' width='5' height='5' fill='%23bfe7ff'/>\
<rect x='5' y='2' width='2' height='5' fill='black'/>\
<rect x='4' y='3' width='2' height='3' fill='black'/>\
</svg>");
}

/* =========================================================
   1) Night-mode switch (uses aria-checked="true|false")
   ========================================================= */
.night-switch{
  --knob: 22px;
  inline-size: 48px; block-size: 28px;
  background: var(--panel-strong);
  position: relative; cursor: pointer; isolation:isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.45);
}

/* pixel icon on the track */
.night-switch::after{
  content:"";
  position:absolute; inset:auto 0 0 auto; left:6px; top:5px;
  width:18px; height:18px; image-rendering: pixelated;
  background-image: var(--svg-sun); background-size: 100% 100%; opacity:.9;
  
  transition: transform .28s ease, opacity .28s ease, left .28s ease;
}

/* knob */
.night-switch::before{
  content:"";
  position:absolute; top:2px; left:2px;
  
  background: #000;
  
  transition: transform .28s ease;
}

/* checked state = night */
.night-switch[aria-checked="true"]::before{
  transform: translateX(18px);
}
.night-switch[aria-checked="true"]::after{
  left:auto; right:6px;
  background-image: var(--svg-moon);
  
}

/* Keyboard focus */
.night-switch:focus-visible{
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

/* =========================================================
   2) Nav hover — remove borders, add pixel underline/glow
   ========================================================= */
.dst-nav a{
  position:relative;
  border:0 !important;       /* kill the pop-in border */
  padding:.44rem .6rem;
  transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
.dst-nav a::after{
  content:""; position:absolute; left:.35rem; right:.35rem; bottom:2px;
  height:2px; background: var(--border);
  box-shadow: 0 0 6px rgba(121,233,255,.35);
  transform: scaleX(0.25);
  transform-origin: left center;
  opacity:0; image-rendering: pixelated;
  transition: transform .18s ease, opacity .18s ease;
}
.dst-nav a:hover{
  color: var(--ink); transform: translateY(-1px);
  text-shadow: 0 0 6px var(--accent);
  background: linear-gradient(180deg, rgba(121,233,255,.10), rgba(121,233,255,0));
  border-radius:6px;
}
.dst-nav a:hover::after{
  opacity:1; transform: scaleX(1);
}

/* =========================================================
   3) Pixelised hearts in quote cards
   ========================================================= */
.quote-card blockquote{
  padding-left:1.6rem;
}
.quote-card blockquote::before{
  content:""; position:absolute; left:0; top:.05rem;
  width:14px; height:14px; image-rendering: pixelated;
  background-image: var(--svg-heart); background-size: 100% 100%;
  filter: drop-shadow(0 0 6px rgba(255,43,43,.55));
}

/* Optional subtle pulse like Undertale menu */
@keyframes soulPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
.quote-card:hover blockquote::before{ animation: soulPulse 900ms ease-in-out infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .dst-nav a, .dst-nav a::after, .night-switch::before, .night-switch::after,
  .quote-card:hover blockquote::before{ animation:none !important; transition:none !important; }
}

/* ===== Icon-only night switch (sun ⇄ moon) ===== */
/* Kills the old track/knob and shows just a pixel sprite. */

.night-switch{
  --size: 22px;                 /* visible icon size */
  inline-size: var(--size);
  block-size: var(--size);
  padding: 0;
  border: 0;
  background: none !important;  /* nuke the rounded rectangle */
  box-shadow: none !important;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* remove the old knob entirely */
.night-switch::before{ content: none !important; }

/* single icon layer */
.night-switch::after{
  content: "";
  position: absolute; inset: 0;
  background-image: var(--svg-sun);   /* from earlier patch */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(255,211,74,.45));
  transition: transform .15s ease, filter .15s ease, background-image .15s ease;
}

/* night = moon */
.night-switch[aria-checked="true"]::after{
  background-image: var(--svg-moon);
  filter: drop-shadow(0 0 5px rgba(121,233,255,.6));
}

/* tiny tactile feel */
.night-switch:hover::after{ transform: translateY(-1px); }
.night-switch:active::after{ transform: translateY(0) scale(.96); }

/* keyboard focus ring around just the icon area */
.night-switch:focus-visible{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ===== Fix: icon-only switch should flip with body.night OR aria-checked ===== */

/* sun by default (already set in ::after) */

/* show moon when either the ARIA state is true OR the body is in night mode */
.night-switch[aria-checked="true"]::after,
body.night .night-switch::after{
  background-image: var(--svg-moon);
  filter: drop-shadow(0 0 5px rgba(121,233,255,.6));
}

/* optional: if you want slightly different glow in day mode */
body:not(.night) .night-switch::after{
  background-image: var(--svg-sun);
  filter: drop-shadow(0 0 4px rgba(255,211,74,.45));
}

/* ===== Moon toggle — final authority (icon only) ===== */

/* Reset anything defined earlier */
.dst-nav .night-switch,
.dst-nav .night-switch::before,
.dst-nav .night-switch::after{ all: unset; }

.dst-nav .night-switch{
  margin-left:auto;
  width:22px; height:22px;
  display:inline-block; position:relative; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}

/* default = sun */
.dst-nav .night-switch::after{
  content:"";
  position:absolute; inset:0;
  background: var(--svg-sun) no-repeat 0 0 / 100% 100% !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(255,211,74,.45));
  transition: transform .15s ease, filter .15s ease;
}

/* night = moon (triggered by aria OR body class) */
.dst-nav .night-switch[aria-checked="true"]::after,
body.night .dst-nav .night-switch::after{
  background: var(--svg-moon) no-repeat 0 0 / 100% 100% !important;
  filter: drop-shadow(0 0 5px rgba(121,233,255,.6));
}

/* tiny tactile feel + focus ring */
.dst-nav .night-switch:hover::after{ transform: translateY(-1px); }
.dst-nav .night-switch:active::after{ transform: translateY(0) scale(.96); }
.dst-nav .night-switch:focus-visible{
  outline:2px dashed var(--accent);
  outline-offset:4px; border-radius:4px;
}

/* Make the explanation/footer span the full card width */
.quote-card footer{
  grid-column: 1 / -1;   /* across both columns, regardless of image */
  margin-top:.6rem;      /* a touch more breathing room */
}

/* (Optional) keep the no-art variant tidy; this still works fine there */

/* ===== Royal Children — story + image rail ===== */

.royals .royals-layout{
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}

/* Desktop: sticky gallery left, long text right */
@media (min-width: 900px){
  .royals .royals-layout{
    grid-template-columns: minmax(220px, 340px) 1fr;
  }
  .royal-rail{ position: sticky; top: calc(64px + 12px); align-self:start; }
}

/* Image rail */
.royal-rail{
  display:grid; gap:.75rem;
}
.rc-plate{
  background: var(--panel);
  border:2px solid var(--border); border-radius: var(--radius);
  padding:.5rem; box-shadow: var(--shadow);
}
.rc-plate img{
  width:100%; height:auto; display:block;
  image-rendering: pixelated;
  border:2px solid var(--border); border-radius:6px;
  background:#000;
}
.rc-plate figcaption{
  margin-top:.4rem; font-style:italic; color:var(--muted);
  text-align:center; font-size:.95rem;
}

/* Mobile: horizontal strip that scrolls */
@media (max-width: 899px){
  .royal-rail{
    display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.25rem;
    scroll-snap-type: x mandatory;
  }
  .rc-plate{ min-width: 200px; scroll-snap-align:start; }
}

/* Story column */
.royal-story{ display:flex; flex-direction:column; gap:1rem; }
.rc-sub{
  font-family:var(--ui-font); text-transform:uppercase;
  font-size: clamp(14px, 2.6vw, 18px); margin:.2rem 0 .3rem;
}
.rc-block{
  background: rgba(0,6,14,.32);
  border:2px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem .95rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 14px rgba(121,233,255,.08);
}
.rc-block p{ margin:.4rem 0; }

/* Utility: pixel GIF zoom by cropping */
.rc-plate .pixel-cover {
  width: 100%;
  height: 220px;            /* choose the box height you want */
  object-fit: cover;        /* fills + crops = zoom */
  object-position: 50% 50%; /* nudge if you want a different focal point */
  image-rendering: pixelated;
  display: block;
}

/* ========== Ambient Effects ========== */
/* fireflies */
.fireflies-container{
  position:fixed; inset:0;
  pointer-events:none; overflow:hidden; z-index:5;
}
.firefly{
  position:absolute; top:100%;
  width:6px; height:6px; border-radius:50%;
  background:rgba(224,201,221,.8);
  box-shadow:0 0 6px rgba(224,201,221,.6), 0 0 12px rgba(224,201,221,.4);
  opacity:.85;
}
/* individual drifts */
.firefly:nth-child(1){left:10%; animation:drift1 12s infinite ease-in-out 1s;}
.firefly:nth-child(2){left:25%; animation:drift2 11s infinite ease-in-out 2s;}
.firefly:nth-child(3){left:40%; animation:drift3 13s infinite ease-in-out 0s;}
.firefly:nth-child(4){left:60%; animation:drift4 14s infinite ease-in-out 1.5s;}
.firefly:nth-child(5){left:80%; animation:drift5 10s infinite ease-in-out 3s;}
.firefly:nth-child(6){left:30%; animation:drift6 12s infinite ease-in-out 4s;}
.firefly:nth-child(7){left:50%; animation:drift7 15s infinite ease-in-out 2.5s;}
.firefly:nth-child(8){left:70%; animation:drift8 11.5s infinite ease-in-out 1.2s;}
.firefly:nth-child(9){left:15%; animation:drift9 13s infinite ease-in-out 3.4s;}
.firefly:nth-child(10){left:90%; animation:drift10 10.5s infinite ease-in-out .6s;}

@keyframes drift1{  0%{transform:translate(0,0) scale(1); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(30px,-250px) scale(.8); opacity:.7;}
 75%{opacity:1;} 100%{transform:translate(-20px,-500px) scale(.6); opacity:.2;} }
@keyframes drift2{  0%{transform:translate(0,0) scale(1.2); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(-40px,-300px) scale(1); opacity:.8;}
 75%{opacity:1;} 100%{transform:translate(15px,-550px) scale(.7); opacity:.2;} }
@keyframes drift3{  0%{transform:translate(0,0) scale(.9); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(50px,-200px) scale(1.1); opacity:.6;}
 75%{opacity:1;} 100%{transform:translate(-30px,-450px) scale(.8); opacity:.2;} }
@keyframes drift4{  0%{transform:translate(0,0) scale(1); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(-20px,-280px) scale(.7); opacity:.7;}
 75%{opacity:1;} 100%{transform:translate(30px,-520px) scale(.5); opacity:.2;} }
@keyframes drift5{  0%{transform:translate(0,0) scale(1.1); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(40px,-230px) scale(.9); opacity:.8;}
 75%{opacity:1;} 100%{transform:translate(-50px,-480px) scale(.6); opacity:.2;} }
@keyframes drift6{  0%{transform:translate(0,0) scale(.8); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(-30px,-260px) scale(1); opacity:.7;}
 75%{opacity:1;} 100%{transform:translate(20px,-505px) scale(.5); opacity:.2;} }
@keyframes drift7{  0%{transform:translate(0,0) scale(1.2); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(25px,-300px) scale(.9); opacity:.8;}
 75%{opacity:1;} 100%{transform:translate(-35px,-550px) scale(.7); opacity:.2;} }
@keyframes drift8{  0%{transform:translate(0,0) scale(1); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(-45px,-240px) scale(.7); opacity:.7;}
 75%{opacity:1;} 100%{transform:translate(15px,-525px) scale(.6); opacity:.2;} }
@keyframes drift9{  0%{transform:translate(0,0) scale(1.1); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(35px,-220px) scale(.8); opacity:.8;}
 75%{opacity:1;} 100%{transform:translate(-25px,-500px) scale(.5); opacity:.2;} }
@keyframes drift10{ 0%{transform:translate(0,0) scale(.9); opacity:.2;}
 25%{opacity:1;} 50%{transform:translate(-20px,-270px) scale(1); opacity:.7;}
 75%{opacity:1;} 100%{transform:translate(40px,-530px) scale(.6); opacity:.2;} }
 
.embed-wrap { max-width: 860px; margin-inline: auto; }
.embed-wrap iframe { width: 100%; aspect-ratio: 4/3; image-rendering: pixelated; }