/* Lily's Fairytale Party -- the web pages (2026-09-27). The app's own night sky and the invitation's palette; the
   porthole (the app icon's gold ring) is the frame everything sits in. Static but for the puppets that wander along
   the bottom (lp.js), which stop for a click on "Stop the parade" or for Reduce Motion. No web fonts, nothing
   fetched from anywhere else. */
:root {
  --night: #1b1436; --night-2: #261d4a; --plum: #4a3570; --lilac: #a39ebf; --aqua: #afd7e6;
  --gold: #ddab53; --gold-light: #f6d98f; --gold-dark: #9a6a22; --cream: #fff4de; --pink: #f4a6c8;
  --ink: #fbf7ff; --soft: #d7cff0; --faint: #a79dcb; --card: rgba(255, 255, 255, 0.06); --card-line: rgba(255, 255, 255, 0.10);
  --round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --floor: 150px;
}
* { box-sizing: border-box; }
/* The sky is its own fixed layer (body::before), not a fixed background on the page: WebKit takes a page with
   `background-attachment: fixed` off its fast scrolling path and repaints the whole window every frame, which he saw
   as sluggish scrolling and half-painted bands at the edge coming into view (2026-09-27). A fixed layer is painted
   once and only moved. No elastic overscroll, and the colour under the page is the sky's own, so neither end shows
   a strip of something else. */
html { background: #2a2052; overscroll-behavior: none; }
body {
  margin: 0; color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  padding-bottom: calc(var(--floor) + 24px);   /* the parade's floor never covers the last words */
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 42%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 35%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 28%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 62%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 70%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #1b1436 0%, #2a2052 45%, #4a3570 100%);
  transform: translateZ(0);                      /* its own layer, composited, never repainted by a scroll */
}
a { color: var(--aqua); text-underline-offset: 3px; }
a:hover { color: var(--gold-light); }
h1, h2, h3 { font-family: var(--round); letter-spacing: 0.01em; line-height: 1.15; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* -- the hero ---------------------------------------------------------------------------------------------- */
.hero { position: relative; text-align: center; padding: 56px 0 24px; overflow: hidden; }
.hero .rainbow { position: absolute; left: 50%; top: 86px; width: 760px; max-width: 150%; transform: translateX(-50%); opacity: 0.55; pointer-events: none; }
.hero img.logo { position: relative; width: 240px; height: 240px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.hero h1 { position: relative; font-size: clamp(34px, 6vw, 58px); margin: 12px 0 6px; color: var(--cream);
  text-shadow: 0 3px 0 var(--gold-dark), 0 10px 26px rgba(0, 0, 0, 0.45); }
.hero .tag { position: relative; font-size: clamp(18px, 2.4vw, 22px); color: var(--soft); max-width: 640px; margin: 0 auto 22px; }
.pill { display: inline-block; font-family: var(--round); font-weight: 700; font-size: 17px; padding: 12px 22px; border-radius: 999px;
  text-decoration: none; margin: 4px 6px; }
.pill.gold { color: #3a2410; background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: 0 3px 0 var(--gold-dark), 0 10px 20px rgba(0, 0, 0, 0.3); }
.pill.gold.soon { cursor: default; }
.pill.ghost { color: var(--cream); border: 2px solid rgba(255, 244, 222, 0.35); }
.pill.ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.small-header { display: flex; align-items: center; gap: 14px; padding: 28px 16px 8px; max-width: 760px; }   /* the page column's width */
.small-header img { width: 64px; height: 64px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)); }
.small-header a { color: var(--cream); text-decoration: none; font-family: var(--round); font-weight: 700; font-size: 22px; }

/* -- sections and cards ------------------------------------------------------------------------------------ */
section { padding: 34px 0 10px; }
section > h2, .page h1 { font-size: clamp(26px, 4vw, 36px); color: var(--gold-light); margin: 0 0 6px; }
.lede { color: var(--soft); max-width: 700px; margin: 0 0 20px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 22px; padding: 20px; }
.card h3 { margin: 10px 0 4px; font-size: 21px; color: var(--cream); }
.card p { margin: 0; color: var(--soft); }
.porthole { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #5c6fb0 0%, #2b2458 58%, #0e0a20 100%);
  box-shadow: 0 0 0 9px var(--gold), 0 0 0 11px var(--gold-dark), inset 0 0 22px rgba(0, 0, 0, 0.55), 0 12px 26px rgba(0, 0, 0, 0.4); }
.porthole img, .porthole svg { position: absolute; left: 50%; bottom: -34%; width: 140%; transform: translateX(-50%); }
.porthole svg { bottom: auto; top: 50%; width: 76%; transform: translate(-50%, -50%); }
.card .porthole { margin: 10px auto 16px; }

/* the characters: a porthole each, their name under it; a tap sends them out to walk */
.cast { display: grid; gap: 22px 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.cast button { all: unset; cursor: pointer; text-align: center; border-radius: 18px; padding: 8px 4px; }
.cast button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.cast .porthole { width: 112px; height: 112px; box-shadow: 0 0 0 7px var(--gold), 0 0 0 9px var(--gold-dark), inset 0 0 18px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.cast .porthole img { width: 165%; bottom: -78%; }       /* head and shoulders: the faces are what a child looks for */
.cast span { display: block; margin-top: 12px; font-family: var(--round); font-weight: 700; color: var(--cream); font-size: 16px; }
.cast button:hover span { color: var(--gold-light); }
.hint { color: var(--faint); font-size: 15px; margin-top: 10px; }

/* Shape draw's sets: the stage as the children see it, each picture a TV screen in a thin gold frame */
.screens { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }   /* 2 x 2, or one column on a phone */
.screens figure { margin: 0; }
.screens img { display: block; width: 100%; height: auto; border-radius: 16px; background: #000;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 4px var(--gold-dark), 0 12px 26px rgba(0, 0, 0, 0.4); }
.screens figcaption { margin-top: 12px; color: var(--soft); }
.screens figcaption strong { display: block; font-family: var(--round); font-size: 19px; color: var(--cream); }

/* the host's keys, as keycaps */
.keys { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.key { display: flex; align-items: baseline; gap: 12px; color: var(--soft); }
kbd { font-family: var(--round); font-weight: 700; font-size: 15px; color: #2a1c0a; background: linear-gradient(180deg, #fff9ea, #f1dfb8);
  border-radius: 8px; padding: 3px 10px; box-shadow: 0 3px 0 #b8914d; white-space: nowrap; min-width: 36px; text-align: center; }
ul.plain { padding-left: 20px; margin: 0; }
ul.plain li { color: var(--soft); margin: 6px 0; }
ul.plain strong, p strong { color: var(--ink); }
.page { max-width: 760px; }
.page h2 { color: var(--gold-light); font-size: 23px; margin: 30px 0 6px; }
.page p, .page li { color: var(--soft); }
.ages { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 12px; }
.ages .card h3 { color: var(--aqua); margin-top: 0; }
.big { font-size: 21px; color: var(--ink); }

footer { margin-top: 40px; padding: 26px 0; border-top: 1px solid var(--card-line); color: var(--faint); font-size: 15px; text-align: center; }
footer a { margin: 0 8px; }

/* -- the parade: the floor the puppets wander along (lp.js) ------------------------------------------------ */
.parade { position: fixed; left: 0; right: 0; bottom: 0; height: var(--floor); pointer-events: none; z-index: 20; overflow: hidden;
  contain: strict; transform: translateZ(0); }     /* its own layer: what the walkers do never touches the page */
.parade::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(180deg, transparent, rgba(14, 10, 32, 0.55)); }
.walker { position: absolute; bottom: 4px; left: 0; width: 120px; height: 150px; background-repeat: no-repeat;
  background-size: 960px 150px; pointer-events: auto; cursor: pointer; will-change: transform; }
.walker.hop { animation: hop 0.55s cubic-bezier(.3, .8, .4, 1); }
@keyframes hop { 0% { margin-bottom: 0; } 40% { margin-bottom: 46px; } 100% { margin-bottom: 0; } }
.spark { position: absolute; width: 14px; height: 14px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, #ffe9a8 30%, transparent 62%); animation: spark 0.8s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
.parade-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 30; font-family: var(--round); font-weight: 700; font-size: 14px;
  color: var(--cream); background: rgba(27, 20, 54, 0.92); border: 1px solid rgba(255, 244, 222, 0.28); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; }          /* solid, not blurred: a blur behind a fixed button re-renders on every scroll frame */
.parade-toggle:hover { border-color: var(--gold-light); color: var(--gold-light); }

@media (max-width: 640px) {
  :root { --floor: 118px; }
  .walker { width: 92px; height: 115px; background-size: 736px 115px; }
  .hero img.logo { width: 190px; height: 190px; }
  .hero .rainbow { top: 38px; width: 112%; opacity: 0.45; }     /* ends above the title: no words over the bands */
}