/* Magickal Adventures, the night version.

   Same page as children.css, same spreads, same words. What changes is the light: a
   violet dusk rather than warm paper, with a sky behind the whole page. Stars twinkle,
   a crescent moon sits high, and two amethyst points glow at the edges the way the ones
   in the temple do when the candles are lit.

   The purple is lifted well off the main site's near-black on purpose. This is a
   children's page at bedtime, not the temple at midnight: dark enough to feel magical,
   light enough that a five year old is not looking into a hole. Body text sits at a
   comfortable contrast against it rather than glowing.

   Everything that moves stops under prefers-reduced-motion. Twinkling is charming to
   most people and unbearable to some, and this page is aimed at children, where that
   matters more, not less. */

:root {
  --kid-night:  #241640;   /* the ground: violet, not black */
  --kid-deep:   #1A0F31;   /* behind the sky, for depth */
  --kid-raised: #30204F;   /* plates and chips */
  --kid-edge:   #4A3273;
  --kid-text:   #F2EAFF;
  --kid-body:   #C9B8E6;
  --kid-gold:   #E8C88A;
  --kid-star:   #FFF6E0;
  --kid-crys:   #C9A2F0;
}

body { background: var(--kid-deep); color: var(--kid-text); }

/* ---- The sky ----
   Fixed behind everything, so scrolling moves the stories past the sky rather than
   dragging the sky along with them. */
.kid-sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, #3A2363 0%, var(--kid-night) 45%,
                    var(--kid-deep) 100%);
}
/* Two star fields, each exactly as wide as the gutter beside the reading column. When
   the window narrows the gutters close to nothing and the fields close with them, so a
   phone gets no stars under its text rather than dimmed ones behind it. */
.kid-sky { --gutter: max(0px, (100vw - 56rem) / 2); }
.kid-stars {
  position: absolute; top: 0; bottom: 0;
  width: var(--gutter); overflow: hidden;
}
.kid-stars--left  { left: 0; }
.kid-stars--right { right: 0; }
.kid-stars i {
  position: absolute; display: block;
  animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}

/* The small ones: round points that breathe. */
.kid-dot {
  border-radius: 50%; background: var(--kid-star);
  box-shadow: 0 0 8px rgba(255, 246, 224, 0.9);
  opacity: var(--dim);
  animation-name: kid-breathe;
}
@keyframes kid-breathe {
  0%, 100% { opacity: var(--dim); transform: scale(0.85); }
  50%      { opacity: 1;          transform: scale(1.3); }
}

/* The big ones: four-point stars that turn as they flare.

   This is what actually reads as twinkling. A dot changing opacity looks like a dimmer
   being turned; a pointed shape that rotates and swells looks like light catching an
   edge, which is what a real star does through moving air. */
.kid-sparkle {
  background: var(--kid-star);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%,
                     50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter: drop-shadow(0 0 7px rgba(255, 246, 224, 0.95));
  opacity: var(--dim);
  animation-name: kid-twinkle;
}
@keyframes kid-twinkle {
  0%, 100% { opacity: var(--dim); transform: rotate(0deg)  scale(0.6); }
  45%      { opacity: 0.92;       transform: rotate(45deg) scale(1.15); }
  60%      { opacity: 0.8;        transform: rotate(60deg) scale(1); }
}


.kid-moon {
  /* Clear of the bar and the review banner: the moon sitting behind them read as
     a graphic glitch rather than a moon. */
  position: absolute; top: 13vh; right: 6vw; width: clamp(42px, 5.5vw, 68px);
  fill: #FFF3D2; opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(255, 243, 210, 0.55));
  animation: kid-moon-glow 9s ease-in-out infinite;
}
@keyframes kid-moon-glow {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

/* Amethyst points at the edges, pulsing slowly and out of step with each other so the
   page never feels like it is blinking. */
.kid-crystal {
  position: absolute; bottom: -2vh; width: clamp(70px, 10vw, 130px);
  fill: var(--kid-crys); opacity: 0.20;
  filter: drop-shadow(0 0 24px rgba(201, 162, 240, 0.55));
  animation: kid-crystal-pulse 7s ease-in-out infinite;
}
.kid-crystal .facet { stroke: #F0DEFF; stroke-width: 1.5; opacity: 0.5; fill: none; }
.kid-crystal--left  { left: -1.5vw; transform: rotate(-6deg); }
.kid-crystal--right { right: -1.5vw; transform: rotate(7deg); animation-delay: -3.4s; }
@keyframes kid-crystal-pulse {
  0%, 100% { opacity: 0.16; }
  50%      { opacity: 0.34; }
}

@media (prefers-reduced-motion: reduce) {
  .kid-stars i, .kid-moon, .kid-crystal { animation: none; }
  .kid-stars i { opacity: 0.75; transform: none; }
}

/* Everything the reader actually reads sits above the sky. */
.kid-bar, .kid-banner, .kid-main, .kid-foot { position: relative; z-index: 1; }

/* ---- The slim bar ---- */
.kid-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(56rem, 100% - 2rem); margin-inline: auto;
  padding: 0.9rem 0; border-bottom: 1px solid var(--kid-edge);
}
.kid-bar-logo { display: block; line-height: 0; }
.kid-bar-logo img { width: 132px; height: auto; opacity: 0.95; }
.kid-bar-up {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kid-gold); text-decoration: none; white-space: nowrap;
}
.kid-bar-up:hover { color: var(--kid-text); text-decoration: underline; }

.kid-banner {
  font-family: var(--sans); font-size: 0.76rem; line-height: 1.5; text-align: center;
  margin: 0; padding: 0.6rem 1rem;
  color: var(--kid-gold); background: rgba(26, 15, 49, 0.75);
  border-bottom: 1px solid var(--kid-edge);
}

.kid-main {
  width: min(56rem, 100% - 2rem); margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.kid-head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.kid-kicker {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--kid-gold);
  margin: 0 0 0.7rem;
}
.kid-head h1 {
  font-family: var(--serif); color: var(--kid-text);
  font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1.05; margin: 0 0 1.1rem;
  text-shadow: 0 0 30px rgba(201, 162, 240, 0.45);
}
.kid-intro {
  font-family: var(--sans); color: var(--kid-body);
  font-size: 1.02rem; line-height: 1.68; max-width: 44rem; margin: 0 auto 0.9rem;
}
.kid-ages { font-family: var(--sans); color: var(--kid-body); font-size: 0.92rem;
            margin: 0; opacity: 0.9; }

.kid-scene { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.kid-scene img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 0 60px rgba(107, 63, 160, 0.5);
}

/* ---- The spreads ---- */
.kid-spread {
  display: grid; gap: clamp(1.2rem, 4vw, 2.6rem); align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  border-bottom: 1px solid var(--kid-edge);
}
.kid-spread:last-of-type { border-bottom: none; }
@media (min-width: 46rem) {
  .kid-spread { grid-template-columns: 1fr 1fr; }
  .kid-spread--flip .kid-plate { order: 2; }
}

.kid-plate {
  padding: 0.6rem; border-radius: 14px;
  background: var(--kid-raised);
  box-shadow: 0 0 40px rgba(107, 63, 160, 0.4);
}

.kid-number {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--kid-gold);
  margin: 0 0 0.4rem;
}
.kid-text h2 {
  font-family: var(--serif); color: var(--kid-text);
  font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin: 0 0 0.7rem; line-height: 1.15;
}
.kid-text p { font-family: var(--sans); color: var(--kid-body); line-height: 1.7; margin: 0; }

.kid-meta { display: flex; align-items: center; gap: 0.7rem; margin: 1rem 0 0 !important; }
.kid-len {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(232, 200, 138, 0.16); color: var(--kid-gold);
}
.kid-about { font-family: var(--sans); font-size: 0.85rem; color: var(--kid-body); }

.kid-actions {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
.kid-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.55rem 1.7rem; border-radius: 999px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
  background: var(--kid-gold); color: #241640; text-decoration: none;
}
.kid-btn:hover { background: #F4DCAB; }
.kid-btn--quiet {
  background: transparent; color: var(--kid-text);
  box-shadow: inset 0 0 0 1.5px var(--kid-edge);
}
.kid-btn--quiet:hover { background: var(--kid-raised); color: var(--kid-text); }

.kid-soon {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--sans); font-size: 0.85rem; font-style: italic;
  color: var(--kid-body); opacity: 0.8;
}

/* ---- A recording that exists ---- */
.kid-audio { margin: 1rem 0 0; }
.kid-audio-label {
  font-family: var(--sans); font-size: 0.85rem; color: var(--kid-body);
  margin: 0 0 0.45rem !important;
}
.kid-audio audio {
  display: block; width: 100%; max-width: 30rem; height: 44px;
  border-radius: 999px; background: var(--kid-raised);
  color-scheme: dark;
}

/* ---- Placeholders ---- */
.kid-ph {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 42% 34%, #4A2F7A 0%, #2A1A4A 72%);
}
.kid-ph-mark {
  font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1;
  color: var(--kid-crys); opacity: 0.8;
}
.kid-ph-note {
  position: absolute; bottom: 0.55rem; left: 0; right: 0;
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; color: var(--kid-body); opacity: 0.65;
}

.kid-more, .kid-free {
  font-family: var(--sans); font-size: 0.92rem; text-align: center;
  color: var(--kid-body); opacity: 0.9;
}
.kid-more { margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.kid-free { margin: clamp(2rem, 5vw, 3rem) 0 0; }

.kid-foot {
  width: min(56rem, 100% - 2rem); margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.4rem) 0 clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--kid-edge); text-align: center;
}
.kid-foot p {
  font-family: var(--sans); font-size: 0.85rem; color: var(--kid-body); margin: 0;
}
.kid-foot a { color: var(--kid-gold); }
.kid-copy { margin-top: 0.5rem !important; font-size: 0.75rem !important; opacity: 0.7; }

/* ---- The row of site links under the slim bar ---- */
/* Smaller and quieter than the header's nav: this page belongs to the child, and the links are
   there for the parent holding the phone. One row, scrolled sideways when it will not fit, so it
   never grows into a block that pushes the first story below the fold. */
.kid-nav {
  position: relative;
  z-index: 1;
  width: min(56rem, 100% - 2rem);
  margin-inline: auto;
  padding: 0.55rem 0 0.7rem;
  display: flex;
  gap: 1.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--kid-edge);
}
.kid-nav::-webkit-scrollbar { display: none; }
.kid-nav a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kid-body);
  text-decoration: none;
  opacity: 0.78;
}
.kid-nav a:hover, .kid-nav a:focus-visible { color: var(--kid-gold); opacity: 1; }
.kid-nav a[aria-current="page"] { color: var(--kid-gold); opacity: 1; }