:root {
  --ink: #281b3d;
  --ink-soft: #30234d;
  --muted: #716787;
  --purple: #9871dd;
  --purple-strong: #8d65cf;
  --purple-deep: #6548a3;
  --paper: #fffaf5;
  --paper-rose: #fffaf7;
  --paper-mist: #f5efff;
  --line: rgba(130, 104, 170, 0.22);
  --shadow-soft: rgba(91, 58, 133, 0.12);
  --shadow-strong: rgba(142, 104, 205, 0.28);
}

@property --swing {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito", sans-serif;
  overflow-x: hidden;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 77% 65%, rgba(213, 198, 255, 0.36), transparent 29%),
    radial-gradient(ellipse at 8% 79%, rgba(209, 228, 255, 0.36), transparent 24%),
    linear-gradient(120deg, #fffaf5 0%, #fff9f2 54%, #fffaf7 100%);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* The homepage reference shows a clean, borderless hero, so this hook renders
   nothing. Kept (not deleted) in case layout code references it. */
.page-frame {
  display: none;
}

.navbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 136px;
  padding: 0 6.8%;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 250, 245, 0.92);
  backdrop-filter: blur(8px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand span {
  display: none;
}

.brand-planet {
  display: none;
}

.brand-logo-img {
  width: 160px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.nav-mascot {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.nav-sparkle {
  width: 34px;
  height: 34px;
  margin-top: -34px;
  animation: twinkle 3s ease-in-out infinite;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 25px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.55vw, 23px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Slim separators between nav items, matching the light "|" dividers in the
   homepage reference. Shared hairline color so they never read as a border. */
.nav-links a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 22px;
  background: var(--line);
  transform: translateY(-50%);
}

.nav-links a::after {
  /* Kept as an always-hidden hook so future underline styles have one place
     to live. Never sized here: the Home underline is intentionally removed. */
  content: "";
  position: absolute;
  left: 25px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-radius: 10px;
  background: transparent;
}

/* Active Home item: the task explicitly removes the underline pill,
   so Home is marked only by ink color (no ::after bar anywhere). */
.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}

/* Keyboard focus stays visible even though the underline was removed. */
.nav-links a:focus-visible {
  outline: 3px solid rgba(152, 113, 221, 0.5);
  outline-offset: 4px;
  border-radius: 8px;
}

.menu-toggle {
  display: none;
  padding: 8px;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
  border-radius: 2px;
}

/* Keep the hamburger keyboard-operable: visible focus, no extra border. */
.menu-toggle:focus-visible {
  outline: 3px solid rgba(152, 113, 221, 0.5);
  outline-offset: 4px;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 103px);
  padding: 60px 6.9% 125px;
  overflow: hidden;
  isolation: isolate;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: 49%;
  max-width: 700px;
  margin-top: -8px;
}

.eyebrow {
  display: none;
}

h1 {
  margin: 0 0 24px;
  color: #281a3b;
  font-size: clamp(45px, 5.5vw, 86px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -3.2px;
}

.hero h1 {
  min-height: 3.1em;
  margin-bottom: 30px;
}

/* Headline typing: typed text inherits the h1 ink color (original look);
   ONLY .typing-accent gets the purple gradient. Lines stay as normal
   inline flow so wrapping matches the original headline exactly. */
h1 .typing-line {
  position: relative;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

h1 .typing-accent {
  background: linear-gradient(100deg, #9b7de0 8%, #7651b7 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.typing-active::after {
  position: absolute;
  top: 0.08em;
  right: -0.1em;
  height: 0.85em;
  border-right: 3px solid var(--purple-deep);
  content: "";
  animation: typing-caret 0.8s steps(1, end) infinite;
}

/* Resting state: no caret or cursor is left behind once typing finishes.
   The completed headline reads as plain text (kept for backwards
   compatibility if script.js ever adds .typing-done). */
h1.typing-done .typing-line:last-child::after {
  content: none;
  display: none;
}

@keyframes typing-caret {
  50% {
    opacity: 0;
  }
}

.description {
  max-width: 580px;
  margin: 0 0 26px 7px;
  color: var(--muted);
  font-size: clamp(17px, 1.65vw, 24px);
  font-weight: 600;
  line-height: 1.47;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-left: 2px;
}

/* Entrance choreography: subtle fade-and-rise for copy blocks and art.
   Staggered so the headline leads, then description, actions, and artwork.
   Runs once on load; transform/opacity only, no layout shift. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy > * {
  animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-copy > :nth-child(2) {
  animation-delay: 0.08s;
}

.hero-copy > :nth-child(3) {
  animation-delay: 0.18s;
}

.hero-copy > :nth-child(4) {
  animation-delay: 0.28s;
}

.hero-art {
  animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 64px;
  padding: 0 35px;
  border-radius: 999px;
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button:focus-visible {
  outline: 3px solid rgba(152, 113, 221, 0.5);
  outline-offset: 4px;
}

.button-primary {
  color: #fff;
  background: linear-gradient(110deg, #a27ee5, #8d65cf);
  box-shadow: 0 8px 20px rgba(142, 104, 205, 0.14);
}

.button-primary:hover {
  box-shadow: 0 12px 28px var(--shadow-strong);
}

.button-primary span {
  font-size: 27px;
  line-height: 1;
}

.button-secondary {
  color: #49356e;
  background: rgba(255, 250, 245, 0.68);
  border: 2px solid #7857aa;
}

.button-secondary:hover {
  background: #fff;
}

.hero-art {
  position: absolute;
  z-index: 2;
  right: 3.7%;
  top: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51%;
  height: 86%;
}

.art-glow {
  position: absolute;
  left: 1%;
  top: 20%;
  width: 90%;
  height: 73%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(211, 194, 255, 0.7), rgba(225, 220, 255, 0.3) 48%, transparent 73%);
  filter: blur(8px);
}

.hero-deco,
.hanging-spider {
  pointer-events: none;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  /* Cursor-driven wind targets below: tiny lean/translate away from the
     cursor, smoothed in script.js. Defaults to rest pose. */
  --wind-x: 0px;
  --wind-y: 0px;
  --wind-rot: 0deg;
  transform: translate(var(--wind-x), var(--wind-y)) rotate(var(--wind-rot));
  transform-origin: 50% 78%;
  will-change: transform;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Feather only the bottom edge into the cream page; the sides and top hold the characters. */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 7%);
  mask-image: linear-gradient(to top, transparent 0%, #000 7%);
  /* Seamless right-to-left video exit: a slightly longer ease-out crossfade
     avoids the abrupt cut/jump at the final frame. Driven once by the
     'ended' handler in script.js (is-settled), never by cursor movement. */
  transition: opacity 0.38s ease-out, visibility 0s linear 0.38s;
}

.hero-still {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Nudged to land exactly on the video's final frame (measured: 852x1079 at -6px,-7px within 844x1068). */
  transform: translate(-0.7%, -0.65%) scale(1.0095);
  filter: drop-shadow(0 18px 16px rgba(107, 81, 153, 0.1));
  opacity: 0;
  visibility: hidden;
  /* Matches the video fade so the still lands with no flash or doubling. */
  transition: opacity 0.38s ease-out, visibility 0s linear 0.38s;
}

.hero-stage.is-settled .hero-video {
  opacity: 0;
  visibility: hidden;
}

.hero-stage.is-settled .hero-still {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.38s ease-out, visibility 0s;
}

.hero-web {
  position: absolute;
  z-index: 1;
  top: 0;
  width: clamp(110px, 11vw, 165px);
  height: auto;
  animation: deco-fade 1.1s ease both;
}

.web-left {
  left: 0;
}

.web-right {
  right: 0;
  transform: scaleX(-1);
}

.art-star {
  position: absolute;
  z-index: 2;
  display: block;
  width: 39px;
  height: 39px;
  pointer-events: none;
  animation: twinkle 3s ease-in-out infinite;
}

.art-star img {
  display: block;
  width: 100%;
  height: 100%;
}

.star-one {
  left: 3%;
  top: 42%;
  animation-delay: 0.6s;
}

.star-two {
  right: 4%;
  top: 61%;
  width: 35px;
  height: 35px;
  animation-delay: 1.7s;
}

.star-three {
  right: 15%;
  top: 35%;
  width: 25px;
  height: 25px;
  animation-delay: 2.5s;
}

.floating-sparkle {
  position: absolute;
  z-index: 1;
  width: 38px;
  height: 38px;
  animation: twinkle 3s ease-in-out infinite;
}

.s1 {
  left: 46.5%;
  top: 18%;
  animation-delay: 0.3s;
}

.s2 {
  left: 2%;
  top: 53%;
  width: 30px;
  height: 30px;
  animation-delay: 1.2s;
}

.s3 {
  right: 2.7%;
  top: 46%;
  width: 32px;
  height: 32px;
  animation-delay: 2.1s;
}

.hero-lightning {
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 83px;
  animation: bolt-glow 4.5s ease-in-out infinite;
}

.lightning-left {
  left: 2.6%;
  top: 20%;
  transform: rotate(8deg);
  animation-delay: 0.8s;
}

.lightning-right {
  right: 2.2%;
  top: 62%;
  width: 46px;
  height: 74px;
  transform: rotate(-6deg);
  animation-delay: 2.6s;
}

.hanging-spider {
  position: absolute;
  z-index: 6;
  top: 0;
  width: 46px;
  animation: spider-descend 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.hanging-spider-left {
  left: 3.4%;
}

.hanging-spider-right {
  right: 4.5%;
  width: 40px;
  animation-delay: 1.1s;
}

.hanging-spider-swing {
  position: relative;
  display: block;
  padding-top: 120px;
  transform-origin: 50% 0;
  /* Support point stays fixed; only this swing arm + spider below can rotate.
     --swing is the gentle baseline sway, --gust is the cursor-wind push. */
  --swing: 0deg;
  --gust: 0deg;
  transform: rotate(calc(var(--swing) + var(--gust)));
  animation: thread-sway 7s ease-in-out 2.3s infinite;
}

.hanging-spider-swing::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(#c3aee6, #a98fd4);
  transform: translateX(-50%);
}

.hanging-spider-swing img {
  display: block;
  width: 100%;
  height: auto;
  /* Spider body vibrates a touch after the thread moves; the thin line
     above stays visually anchored at the top. */
  transform-origin: 50% 0;
  animation: swing-settle 3.4s ease-in-out infinite;
}

.hanging-spider-right .hanging-spider-swing {
  padding-top: 86px;
  animation-delay: 3.1s;
}

/* ── Pastel corner clouds (hero bottom decoration) ───────────────────
   Layered, fluffy formations rising from the bottom-left and
   bottom-right corners. Pure radial-gradient puffs — no raster asset.
   z-index: -1 keeps them BEHIND the pumpkins/ghosts (z 2), copy (z 3),
   bats and spiders; pointer-events: none so clicks always pass through;
   .hero's overflow: hidden clips them inside the section. */
.bottom-clouds {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: clamp(150px, 22vh, 230px);
  overflow: hidden;
  pointer-events: none;
}

.cloud-bank {
  position: absolute;
  bottom: -22px;
  height: 104%;
  pointer-events: none;
}

/* Solid rounded cloud body so the puffs sit on a real mass instead of
   floating circles. Painted above the back layer (z 1) but below the
   mid/front lobes (z 2/3); its arched top + inset highlight create the
   soft lower shading / upper light of the formation. */
.cloud-bank::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -70px;
  height: 58%;
  z-index: 1;
  background: linear-gradient(180deg, #f7f4ff 0%, #ece9fc 52%, #e3e0f6 100%);
  border-radius: 44% 50% 0 0 / 64% 72% 0 0;
  box-shadow:
    inset 0 7px 12px rgba(255, 255, 255, 0.75),
    0 -3px 9px rgba(150, 130, 210, 0.22);
  pointer-events: none;
}

.cloud-bank-left {
  left: -3%;
  width: min(52vw, 660px);
}

/* Not a perfect mirror of the left bank — different width + colours. */
.cloud-bank-right {
  right: -3%;
  width: min(46vw, 600px);
}

.cloud-puff {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Back layer — tallest lavender/periwinkle puffs rising along the side
   edge. Each lobe is solid to ~70%, rim-shaded, then feathered over a
   few % so the SILHOUETTE stays crisp (blur never defines the shape);
   a small white lobe adds a gentle top-edge highlight. */
.cloud-puff--back {
  z-index: 0;
  background:
    radial-gradient(11% 16% at 3% 56%, rgba(255, 255, 255, 0.55) 0 55%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(34% 46% at 0% 78%, #cabcf2 0 70%, #bcb0ed 76%, rgba(188, 176, 237, 0) 81%),
    radial-gradient(25% 35% at 16% 60%, #cfc3f4 0 70%, #c0b4f0 76%, rgba(192, 180, 240, 0) 81%),
    radial-gradient(19% 27% at 30% 78%, #d4c9f6 0 70%, #c6bbf2 76%, rgba(198, 187, 242, 0) 81%),
    radial-gradient(14% 21% at 9% 44%, #d9cff7 0 70%, #cabff3 76%, rgba(202, 191, 243, 0) 81%),
    radial-gradient(11% 17% at 25% 52%, #ded5f9 0 70%, #d1c7f5 76%, rgba(209, 199, 245, 0) 81%);
  filter: drop-shadow(0 -2px 6px rgba(134, 112, 196, 0.3));
  animation: cloud-crest 17s ease-in-out -3s infinite alternate;
}

/* Right bank back layer: a DIFFERENT silhouette (pastel-blue dominant,
   lobes repositioned) so the corner formations complement, not mirror. */
.cloud-bank-right .cloud-puff--back {
  background:
    radial-gradient(11% 16% at 97% 58%, rgba(255, 255, 255, 0.55) 0 55%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(35% 49% at 100% 80%, #c9d2f4 0 70%, #bcc5ef 76%, rgba(188, 197, 239, 0) 81%),
    radial-gradient(24% 34% at 82% 62%, #d0d9f7 0 70%, #c2cbf2 76%, rgba(194, 203, 242, 0) 81%),
    radial-gradient(18% 26% at 68% 80%, #d6dcf9 0 70%, #c8cff4 76%, rgba(200, 207, 244, 0) 81%),
    radial-gradient(13% 20% at 90% 46%, #dce2fb 0 70%, #ced5f6 76%, rgba(206, 213, 246, 0) 81%),
    radial-gradient(10% 16% at 74% 55%, #e1e5fc 0 70%, #d3d9f7 76%, rgba(211, 217, 247, 0) 81%);
}

/* Middle layer — warm white + baby-blue fluffy core lobes overlapping
   the body arch, each with a lavender-blue rim for clear separation. */
.cloud-puff--mid {
  z-index: 2;
  background:
    radial-gradient(30% 42% at 3% 92%, #ffffff 0 72%, #eef0fc 78%, rgba(238, 240, 252, 0) 83%),
    radial-gradient(23% 33% at 21% 86%, #fbfdff 0 72%, #e8edff 78%, rgba(232, 237, 255, 0) 83%),
    radial-gradient(18% 26% at 36% 94%, #ffffff 0 72%, #ecf0ff 78%, rgba(236, 240, 255, 0) 83%),
    radial-gradient(13% 20% at 12% 70%, #ffffff 0 72%, #f0eefe 78%, rgba(240, 238, 254, 0) 83%),
    radial-gradient(10% 16% at 28% 75%, #fdfcff 0 72%, #ecf0ff 78%, rgba(236, 240, 255, 0) 83%);
  filter: drop-shadow(0 -2px 5px rgba(150, 140, 205, 0.22));
  animation: cloud-crest 21s ease-in-out -9s infinite alternate;
}

.cloud-bank-right .cloud-puff--mid {
  background:
    radial-gradient(31% 43% at 97% 92%, #ffffff 0 72%, #f0f2fd 78%, rgba(240, 242, 253, 0) 83%),
    radial-gradient(23% 33% at 78% 86%, #fbfcff 0 72%, #ebf0ff 78%, rgba(235, 240, 255, 0) 83%),
    radial-gradient(17% 25% at 62% 95%, #ffffff 0 72%, #eef3ff 78%, rgba(238, 243, 255, 0) 83%),
    radial-gradient(12% 19% at 88% 70%, #ffffff 0 72%, #f4f1fe 78%, rgba(244, 241, 254, 0) 83%),
    radial-gradient(10% 16% at 71% 76%, #fdfcff 0 72%, #edf1ff 78%, rgba(237, 241, 255, 0) 83%);
}

/* Front layer — small blush-pink / peach lobes peeking from the very
   bottom edge over the body, with soft rose rims. */
.cloud-puff--front {
  z-index: 3;
  background:
    radial-gradient(19% 30% at 1% 106%, #ffe9f1 0 72%, #fddaec 78%, rgba(253, 218, 236, 0) 83%),
    radial-gradient(15% 24% at 23% 110%, #fff1f5 0 72%, #ffe0ec 78%, rgba(255, 224, 236, 0) 83%),
    radial-gradient(12% 19% at 43% 106%, #fff5ea 0 72%, #ffe9d8 78%, rgba(255, 233, 216, 0) 83%);
  filter: drop-shadow(0 -2px 4px rgba(226, 150, 180, 0.22));
  animation: cloud-crest 14s ease-in-out -6s infinite alternate-reverse;
}

.cloud-bank-right .cloud-puff--front {
  background:
    radial-gradient(20% 31% at 99% 106%, #ffedf1 0 72%, #ffdee7 78%, rgba(255, 222, 231, 0) 83%),
    radial-gradient(15% 24% at 76% 110%, #ffe9f2 0 72%, #ffd8e6 78%, rgba(255, 216, 230, 0) 83%),
    radial-gradient(12% 19% at 56% 105%, #fff4ec 0 72%, #ffe8db 78%, rgba(255, 232, 219, 0) 83%);
}

/* Centre: only a whisper of transition between the two corner banks —
   low, narrow and faint so it never becomes a full-width blur band. */
.cloud-mist {
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: -30px;
  height: 60px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(252, 250, 255, 0.9) 50%,
      rgba(255, 255, 255, 0));
  filter: blur(7px);
  opacity: 0.3;
  pointer-events: none;
  animation: cloud-crest 25s ease-in-out -12s infinite alternate;
}

/* Dreamy, barely-there bob — transform only, tiny amplitude, seamless
   via alternate so there is never a jump at the loop point. */
@keyframes cloud-crest {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(7px, -4px, 0);
  }
}

@media (max-width: 1000px) {
  .bottom-clouds {
    height: clamp(140px, 20vh, 185px);
  }

  .cloud-bank-left {
    width: 58vw;
  }

  .cloud-bank-right {
    width: 52vw;
  }
}

.halloween-char {
  position: absolute;
  z-index: 2;
  bottom: 120px;
  filter: drop-shadow(0 4px 4px rgba(102, 75, 131, 0.08));
}

.ghost-char {
  left: 1.2%;
  width: 124px;
  height: auto;
  animation: ghost-float 5.5s ease-in-out 1.3s infinite;
}

.pumpkin-char {
  right: 1.4%;
  width: 132px;
  height: auto;
  animation: pumpkin-bob 6.5s ease-in-out 1.8s infinite;
}

.below-section {
  position: relative;
  z-index: 1;
  padding: 100px 20px;
  text-align: center;
  background: #fffaf7;
}

.section-kicker {
  color: #9774cf;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
}

.below-section h2 {
  max-width: 760px;
  margin: 12px auto;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.below-section > p:last-child {
  color: var(--muted);
  font-size: 18px;
}

.story-section {
  background: #f5efff;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}
/* Three flying bats share the supplied bat PNG (actual project asset).
   JS flight AI (script.js initBatFlight) drives each wrapper's position with
   --bat-x/--bat-y/--bat-rot; CSS only sizes/places the home anchor and keeps
   the wing-flap on the img. Sizes: a=small, b=medium, c=slightly larger.
   All three stay in open hero bands — never over copy or character faces. */
.flying-bat {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(var(--bat-x, 0px), var(--bat-y, 0px)) rotate(var(--bat-rot, 0deg));
}

.flying-bat img {
  display: block;
  width: 100%;
  height: auto;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.bat-a {
  left: 6%;
  top: 6%;
  width: clamp(64px, 6vw, 84px);
}

.bat-a img {
  animation: bat-flap 0.52s ease-in-out infinite;
}

.bat-b {
  right: 5%;
  top: 10%;
  width: clamp(76px, 7vw, 96px);
}

.bat-b img {
  animation: bat-flap 0.62s ease-in-out 0.3s infinite reverse;
}

.bat-c {
  left: 44%;
  top: 4%;
  width: clamp(88px, 8vw, 112px);
}

.bat-c img {
  animation: bat-flap 0.57s ease-in-out 0.15s infinite;
}

/* JS-driven flight: wrappers hold position vars, no drift keyframes.
   bat-flap stays on the img so wing motion never fights flight position. */

/* Wing-flap illusion for a flat PNG: quick squash-and-tilt on the img only,
   so it never fights the wrapper's JS flight transform above. */
@keyframes bat-flap {
  0%,
  100% {
    transform: scaleY(1) scaleX(1) rotate(-4deg);
  }

  50% {
    transform: scaleY(0.72) scaleX(1.08) rotate(4deg);
  }
}

/* Hidden tab: freeze the flying-bat loops in place (no CPU burn, no jump on
   return because play-state resumes mid-keyframe). Toggled by script.js. */
.hero.is-hidden-tab .flying-bat,
.hero.is-hidden-tab .flying-bat img {
  animation-play-state: paused;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.92) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.1) rotate(12deg);
  }
}

@keyframes deco-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spider-descend {
  0% {
    transform: translateY(-110px);
  }

  85% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes thread-sway {
  /* Drives --swing (not transform) so the keyframes compose with the
     cursor-gust rotation instead of overwriting it. */
  0%,
  100% {
    --swing: -1.4deg;
  }

  50% {
    --swing: 1.4deg;
  }
}

@keyframes swing-settle {
  /* Small flexible-string vibration layered on the spider image only. */
  0%,
  100% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(2.2deg);
  }

  60% {
    transform: rotate(-1.2deg);
  }
}

@keyframes bolt-glow {
  0%,
  100% {
    opacity: 0.85;
    filter: drop-shadow(0 0 2px rgba(181, 207, 255, 0.35));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 9px rgba(181, 207, 255, 0.6));
  }
}

@keyframes ghost-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes pumpkin-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-9deg);
  }

  50% {
    transform: translateY(-3px) rotate(-13deg);
  }
}

@media (max-width: 1000px) {
  .navbar {
    padding: 0 4%;
  }

  .brand {
    gap: 7px;
  }

  .brand-logo-img {
    width: 130px;
  }

  .nav-links a {
    padding: 12px 16px;
  }

  .nav-links a::after {
    left: 16px;
  }

  /* No underline pill: Home/active is color-only (see base nav rules). */

  .hero {
    padding-left: 5%;
    padding-right: 5%;
  }

  /* Tablets keep the two-column read but narrower, so copy and the Together
     stage never overlap; decorations shrink rather than crowd the text. */
  .bat-a {
    width: 72px;
  }

  .bat-b {
    width: 56px;
  }

  .bat-c {
    width: 84px;
  }

  .hero-copy {
    width: 52%;
  }

  h1 {
    letter-spacing: -2px;
  }

  .hero-art {
    right: 0;
    width: 51%;
  }

  .button {
    min-height: 56px;
    padding: 0 23px;
  }

  .hero-actions {
    gap: 12px;
  }
}

@media (max-width: 700px) {
  /* .page-frame stays hidden on small screens too (no outline box). */

  .navbar {
    min-height: 100px;
    padding: 0 5%;
  }

  .brand-logo-img {
    width: 88px;
  }

  .nav-mascot {
    display: none;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 12;
  }

  .nav-links {
    position: absolute;
    top: calc(100% - 8px);
    right: 4%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: min(240px, 90vw);
    padding: 10px;
    background: rgba(255, 250, 247, 0.97);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(57, 38, 81, 0.1);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 13px 16px;
  }

  .nav-links a + a::before {
    display: none;
  }

  .nav-links a::after {
    left: 16px;
    bottom: 5px;
  }

  /* No underline pill: Home/active is color-only (see base nav rules). */

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 116px 7% 115px;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .eyebrow {
    display: block;
    margin: 0 0 13px 3px;
    color: #9674c9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
  }

  h1 {
    margin-bottom: 18px;
    font-size: clamp(44px, 11.6vw, 68px);
    line-height: 1.02;
    letter-spacing: -2.5px;
  }

  .hero h1 {
    margin-bottom: 24px;
  }

  .description {
    max-width: 500px;
    margin: 0 0 22px 2px;
    font-size: 17px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
  }

  .button {
    min-height: 51px;
    padding: 0 18px;
    font-size: 14px;
  }

  .hero-actions .button {
    width: min(100%, 360px);
  }

  .button-primary span {
    font-size: 22px;
  }

  .hero-art {
    position: relative;
    right: auto;
    top: auto;
    width: 112%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 15px -6% -25px;
  }

  .art-glow {
    top: 18%;
    height: 65%;
  }

  .star-one {
    width: 27px;
    height: 27px;
  }

  .star-two {
    width: 23px;
    height: 23px;
  }

  .star-three {
    width: 17px;
    height: 17px;
  }

  .s1 {
    left: 87%;
    top: 40%;
    width: 26px;
    height: 26px;
  }

  .s2 {
    left: 1%;
    top: 35%;
    width: 22px;
    height: 22px;
  }

  .s3 {
    right: 3%;
    top: 49%;
    width: 24px;
    height: 24px;
  }

  .hero-lightning {
    display: none;
  }

  /* Small screens: JS flight roams a tighter, lower loop near the top so bats
     stay inside the hero and never cover stacked copy or character faces.
     Exactly 2 bats on mobile: bat-c hidden (display only, JS skips hidden).
     Motion still JS/CSS transform-only. */
  .flying-bat {
    opacity: 0.92;
  }

  .bat-a {
    left: 4%;
    top: 4%;
    width: 60px;
  }

  .bat-b {
    right: 5%;
    top: 7%;
    width: 48px;
  }

  .bat-c {
    display: none;
  }

  .hero-web {
    width: 92px;
  }

  .hanging-spider {
    width: 36px;
  }

  .hanging-spider-swing {
    padding-top: 68px;
  }

  .hanging-spider-right {
    width: 32px;
  }

  .hanging-spider-right .hanging-spider-swing {
    padding-top: 52px;
  }

  /* Phones: compact corner clouds that stay well below stacked copy,
     characters' feet, and the CTA buttons. */
  .bottom-clouds {
    height: 112px;
  }

  .cloud-bank-left {
    width: 66vw;
  }

  .cloud-bank-right {
    width: 58vw;
  }

  .cloud-mist {
    left: 20%;
    right: 20%;
    height: 64px;
    opacity: 0.4;
  }

  .ghost-char {
    left: 0;
    bottom: 24px;
    width: 90px;
    height: auto;
  }

  .pumpkin-char {
    right: 0;
    bottom: 24px;
    width: 96px;
    height: auto;
  }

  .below-section {
    padding: 72px 22px;
  }

  .below-section > p:last-child {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-video {
    display: none;
  }

  /* Reduced motion: still image rests with no wind offset; bats stay parked
     and visible (no looping drift/flap from keyframes or JS). */
  .hero-stage {
    --wind-x: 0px;
    --wind-y: 0px;
    --wind-rot: 0deg;
    transform: none;
  }

  .hero-copy > *,
  .hero-art {
    animation: none;
  }

  .hanging-spider-swing {
    --gust: 0deg;
  }

  .flying-bat,
  .flying-bat img {
    animation: none !important;
  }

  .flying-bat {
    --bat-x: 0px;
    --bat-y: 0px;
    --bat-rot: 0deg;
    transform: none;
  }

  .bat-a,
  .bat-b,
  .bat-c {
    opacity: 0.9;
  }

  .hero-still {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ================= OUR STORYBOOK ================= */
.storybook {
  --storybook-ink: #39364F;
  --storybook-muted: #716987;
  --storybook-lilac: #DCCFFF;
  --storybook-blue: #CFE2FF;
  --storybook-yellow: #FFE8A3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(76px, 9vw, 128px) 24px clamp(78px, 9vw, 122px);
  color: var(--storybook-ink);
  background:
    radial-gradient(ellipse at 4% 30%, rgba(207, 226, 255, 0.42), transparent 27%),
    radial-gradient(ellipse at 95% 64%, rgba(220, 207, 255, 0.48), transparent 28%),
    linear-gradient(180deg, #fffaf5 0%, #f7f2ff 46%, #fff8f2 100%);
}

.storybook *,
.storybook *::before,
.storybook *::after {
  box-sizing: border-box;
}

.storybook__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.storybook__heading {
  max-width: 770px;
  margin: 0 auto clamp(60px, 8vw, 104px);
  text-align: center;
}

.storybook__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: #8164b4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.storybook__eyebrow::before,
.storybook__eyebrow::after {
  width: 21px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.5;
}

.storybook__heading h2 {
  margin: 0 0 17px;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -2px;
}

.storybook__heading > p {
  max-width: 590px;
  margin: 0 auto;
  color: var(--storybook-muted);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  line-height: 1.65;
}

.storybook__journey {
  position: relative;
  display: grid;
  gap: clamp(72px, 9vw, 118px);
}

.storybook__journey::before {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(169, 143, 218, 0.48) 12%, rgba(169, 143, 218, 0.48) 88%, transparent);
  transform: translateX(-50%);
}

.storybook__scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: center;
  gap: clamp(42px, 7vw, 94px);
}

.storybook__scene::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  content: "";
  border: 4px solid #fffaf5;
  border-radius: 50%;
  background: #ad91de;
  box-shadow: 0 0 0 5px rgba(194, 172, 233, 0.24), 0 0 20px rgba(152, 113, 221, 0.44);
  transform: translate(-50%, -50%);
}

.storybook__scene:nth-child(even) .storybook__visual {
  grid-column: 2;
  grid-row: 1;
}

.storybook__scene:nth-child(even) .storybook__copy {
  grid-column: 1;
  grid-row: 1;
}

.storybook__visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.18;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 46px 24px 46px 24px;
  background: linear-gradient(140deg, #f7ecff, #dbe8ff 58%, #fff0d1);
  box-shadow: 0 24px 56px rgba(66, 51, 101, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition: transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 500ms ease;
}

.storybook__scene:nth-child(even) .storybook__visual {
  border-radius: 24px 46px 24px 46px;
}

.storybook__visual > img:not(.storybook__dream-ghost) {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.storybook__visual > img.storybook__visual-art--contain {
  object-fit: contain;
}

.storybook__visual--friends {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(254, 225, 166, 0.88), transparent 38%),
    linear-gradient(145deg, #fff5df, #e7ddff 57%, #d9edff);
}

.storybook__friend-orbit {
  position: absolute;
  z-index: 1;
  top: 13%;
  left: 50%;
  width: 35%;
  height: 70%;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.38), inset 0 0 18px rgba(255, 255, 255, 0.3);
  transform: translateX(-50%) rotate(32deg);
}

.storybook__friend-orbit--two {
  width: 64%;
  height: 45%;
  border-color: rgba(179, 153, 224, 0.55);
  transform: translateX(-50%) rotate(-18deg);
}

.storybook__friend-light {
  position: absolute;
  z-index: 2;
  top: 35%;
  display: grid;
  place-items: center;
  width: clamp(76px, 11vw, 126px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.16), 0 15px 34px rgba(108, 85, 154, 0.12);
  backdrop-filter: blur(5px);
  animation: storybook-friend-glow 5s ease-in-out infinite;
}

.storybook__friend-light img {
  display: block;
  width: 42%;
  height: 42%;
  filter: drop-shadow(0 0 14px rgba(255, 235, 175, 0.95));
}

.storybook__friend-light--abhay {
  left: 19%;
  background: radial-gradient(circle, rgba(255, 239, 194, 0.96), rgba(255, 226, 156, 0.44) 67%, rgba(255, 255, 255, 0.45));
}

.storybook__friend-light--divyansh {
  right: 19%;
  top: 27%;
  animation-delay: -2.5s;
  background: radial-gradient(circle, rgba(236, 227, 255, 0.96), rgba(194, 178, 244, 0.46) 67%, rgba(255, 255, 255, 0.45));
}

.storybook__friend-bridge {
  position: absolute;
  z-index: 3;
  top: 49%;
  left: 50%;
  color: #fff8e4;
  font-size: 27px;
  text-shadow: 0 0 16px #a990d4;
  transform: translate(-50%, -50%);
  animation: storybook-twinkle 3.7s ease-in-out infinite;
}

.storybook__friend-name {
  position: absolute;
  z-index: 2;
  top: 67%;
  color: #625572;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.storybook__friend-name--abhay {
  left: 13%;
}

.storybook__friend-name--divyansh {
  right: 11%;
}

.storybook__friend-name i {
  color: #b493de;
  font-style: normal;
}

.storybook__visual-glow {
  position: absolute;
  z-index: 0;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 232, 163, 0.78);
  filter: blur(26px);
}

.storybook__visual-caption {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  max-width: calc(100% - 36px);
  padding: 8px 13px;
  color: #514768;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 250, 245, 0.84);
  box-shadow: 0 5px 18px rgba(45, 35, 71, 0.12);
  backdrop-filter: blur(8px);
}

.storybook__visual--halloween {
  background:
    radial-gradient(ellipse at 51% 80%, rgba(255, 185, 104, 0.58), transparent 32%),
    linear-gradient(180deg, #383258 0%, #665384 58%, #d49d92 100%);
}

.storybook__halloween-moon {
  position: absolute;
  top: 12%;
  right: 22%;
  z-index: 0;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff0c7;
  box-shadow: 0 0 20px rgba(255, 238, 192, 0.72), 0 0 58px rgba(255, 216, 154, 0.45);
}

.storybook__halloween-house {
  position: absolute;
  z-index: 0;
  bottom: 16%;
  width: 26%;
  height: 39%;
  border: 1px solid rgba(255, 223, 192, 0.28);
  border-radius: 7px 7px 0 0;
  background:
    linear-gradient(135deg, transparent 48%, rgba(50, 41, 75, 0.94) 49%) 0 0 / 50% 30%,
    linear-gradient(225deg, transparent 48%, rgba(50, 41, 75, 0.94) 49%) 100% 0 / 50% 30%,
    linear-gradient(180deg, #584870, #39314f);
  box-shadow: 0 13px 28px rgba(33, 26, 56, 0.24);
}

.storybook__halloween-house::before {
  position: absolute;
  right: 21%;
  bottom: 12%;
  left: 21%;
  height: 28%;
  content: "";
  border: 2px solid rgba(255, 226, 166, 0.52);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(255, 213, 137, 0.68), rgba(255, 179, 110, 0.32));
  box-shadow: 0 0 22px rgba(255, 185, 111, 0.32);
}

.storybook__halloween-house--one {
  left: 8%;
}

.storybook__halloween-house--two {
  right: 8%;
  bottom: 19%;
  width: 22%;
  height: 33%;
  opacity: 0.82;
}

.storybook__visual--halloween .storybook__visual-caption {
  color: #fff7ec;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(58, 46, 79, 0.62);
}

.storybook__scene-decor {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.storybook__scene-decor img {
  display: block;
  width: 100%;
  height: auto;
}

.storybook__scene-decor--bat {
  top: 11%;
  right: 10%;
  width: clamp(36px, 4.5vw, 52px);
  filter: drop-shadow(0 5px 8px rgba(25, 18, 48, 0.18));
  animation: storybook-bat-drift 8s ease-in-out infinite;
}

.storybook__scene-decor--pumpkin {
  right: 8%;
  bottom: 13%;
  width: clamp(40px, 5vw, 58px);
  filter: drop-shadow(0 0 15px rgba(255, 179, 68, 0.75));
  animation: storybook-pumpkin-bob 5s ease-in-out infinite;
}

.storybook__scene-decor--ghost {
  top: 9%;
  right: 8%;
  width: clamp(44px, 5vw, 60px);
  filter: drop-shadow(0 0 10px rgba(184, 196, 255, 0.55));
  animation: storybook-ghost-drift 5s ease-in-out infinite;
}

.storybook__scene-decor--spark {
  top: 20%;
  left: 12%;
  width: 23px;
  filter: drop-shadow(0 0 8px rgba(255, 231, 163, 0.9));
  animation: storybook-twinkle 3s ease-in-out infinite;
}

.storybook__visual--dream {
  background:
    radial-gradient(ellipse at 50% 84%, rgba(203, 186, 255, 0.8), transparent 39%),
    radial-gradient(ellipse at 48% 44%, rgba(81, 94, 178, 0.64), transparent 48%),
    linear-gradient(155deg, #252449 0%, #554c92 58%, #9a82c7 100%);
}

.storybook__dream-moon {
  position: absolute;
  top: 11%;
  left: 16%;
  width: 55px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff2c8;
  box-shadow: 0 0 23px rgba(255, 232, 163, 0.76), 0 0 70px rgba(255, 232, 163, 0.34);
}

.storybook__dream-moon::after {
  position: absolute;
  top: -7px;
  left: 17px;
  width: 53px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: #3d3b72;
}

.storybook__dream-cloud {
  position: absolute;
  z-index: 0;
  bottom: 5%;
  width: 58%;
  height: 22%;
  border-radius: 50%;
  background: rgba(220, 207, 255, 0.5);
  filter: blur(20px);
}

.storybook__dream-cloud--one {
  left: -8%;
}

.storybook__dream-cloud--two {
  right: -9%;
  bottom: 1%;
  background: rgba(207, 226, 255, 0.54);
}

.storybook__dream-ghost {
  position: absolute;
  z-index: 2;
  top: 22%;
  right: 20%;
  width: 48px;
  height: auto;
  filter: drop-shadow(0 0 13px rgba(204, 220, 255, 0.9));
  animation: storybook-ghost-drift 4s ease-in-out infinite;
}

.storybook__dream-star {
  position: absolute;
  z-index: 2;
  color: #fff0b6;
  text-shadow: 0 0 13px rgba(255, 240, 182, 0.9);
  animation: storybook-twinkle 3.2s ease-in-out infinite;
}

.storybook__dream-star--one {
  top: 23%;
  left: 45%;
  font-size: 22px;
}

.storybook__dream-star--two {
  top: 14%;
  right: 12%;
  font-size: 17px;
  animation-delay: -1.5s;
}

.storybook__visual--wonder {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(216, 198, 255, 0.95), transparent 37%),
    radial-gradient(ellipse at 49% 49%, rgba(153, 121, 222, 0.5), transparent 48%),
    linear-gradient(155deg, #282649 0%, #4e477f 58%, #8b7db5 100%);
}

.storybook__dream-gadget {
  position: absolute;
  z-index: 1;
  bottom: 17%;
  display: block;
  filter: drop-shadow(0 0 17px rgba(255, 232, 163, 0.72));
}

.storybook__dream-gadget--lantern {
  left: 24%;
  width: 37px;
  height: 66px;
  border: 2px solid #f8d98e;
  border-radius: 13px 13px 8px 8px;
  background: linear-gradient(180deg, rgba(255, 243, 189, 0.98), rgba(255, 184, 89, 0.76));
  box-shadow: inset 0 0 17px rgba(255, 255, 228, 0.95), 0 0 22px rgba(255, 217, 131, 0.78);
  animation: storybook-lantern-pulse 3.4s ease-in-out infinite;
}

.storybook__lantern-handle {
  position: absolute;
  top: -17px;
  left: 6px;
  width: 21px;
  height: 19px;
  border: 2px solid #f8d98e;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.storybook__lantern-cage {
  position: absolute;
  inset: 9px 5px;
  border-right: 1px solid rgba(172, 111, 67, 0.52);
  border-left: 1px solid rgba(172, 111, 67, 0.52);
}

.storybook__lantern-flame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 23px;
  border-radius: 50% 50% 45% 45%;
  background: #fff9d7;
  box-shadow: 0 0 14px 5px rgba(255, 246, 190, 0.9);
  transform: translate(-50%, -50%);
}

.storybook__dream-gadget--wand {
  right: 24%;
  bottom: 21%;
  width: 8px;
  height: 84px;
  border: 1px solid rgba(239, 231, 255, 0.8);
  border-radius: 999px;
  background: linear-gradient(180deg, #f0e9ff, #a78ce0 50%, #6c5caa);
  box-shadow: 0 0 14px rgba(205, 191, 255, 0.8);
  rotate: 22deg;
}

.storybook__wand-star {
  position: absolute;
  top: -20px;
  left: -9px;
  color: #fff4bf;
  font-size: 26px;
  text-shadow: 0 0 13px rgba(255, 238, 175, 0.96);
  animation: storybook-twinkle 3s ease-in-out infinite;
}

.storybook__visual--wonder .storybook__dream-ghost {
  top: 23%;
  right: 31%;
  width: 46px;
}

.storybook__portal {
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 50%;
  width: 47%;
  height: 88%;
  border: 1px solid rgba(255, 237, 196, 0.9);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 238, 194, 0.24), rgba(199, 178, 255, 0.13) 48%, transparent 72%);
  box-shadow:
    0 0 0 8px rgba(199, 178, 255, 0.09),
    0 0 34px rgba(255, 233, 183, 0.62),
    inset 0 0 30px rgba(255, 233, 183, 0.42);
  transform: translateX(-50%);
  animation: storybook-portal-breathe 5s ease-in-out infinite;
}

.storybook__portal::before,
.storybook__portal::after {
  position: absolute;
  inset: 7%;
  content: "";
  border: 1px solid rgba(221, 208, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 17px rgba(208, 191, 255, 0.52);
}

.storybook__portal::after {
  inset: -7%;
  border-color: rgba(255, 232, 163, 0.35);
  border-style: dashed;
  animation: storybook-portal-turn 36s linear infinite;
}

.storybook__path-spark {
  position: absolute;
  z-index: 3;
  top: 18%;
  color: #d8c5ff;
  font-size: 25px;
  pointer-events: none;
  text-shadow: 0 0 14px rgba(212, 192, 255, 0.9);
  animation: storybook-path-glide 4s ease-in-out infinite;
}

.storybook__path-spark--one {
  left: 44%;
}

.storybook__path-spark--two {
  top: auto;
  right: 8%;
  bottom: 20%;
  color: #ffe8a3;
  font-size: 18px;
  animation-delay: -2s;
}

.storybook__copy {
  position: relative;
  max-width: 455px;
  padding: 16px 0;
}

.storybook__scene-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #8164b4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
}

.storybook__scene-number span {
  color: #d2a542;
  font-size: 15px;
  animation: storybook-twinkle 3s ease-in-out infinite;
}

.storybook__copy h3 {
  margin: 0 0 16px;
  color: var(--storybook-ink);
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1px;
}

.storybook__copy p {
  margin: 0 0 13px;
  color: var(--storybook-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  line-height: 1.75;
}

.storybook__copy p:last-child {
  margin-bottom: 0;
}

.storybook__finale {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(430px, 47vw, 570px);
  margin: clamp(84px, 10vw, 138px) -24px 0;
  margin-bottom: calc(-1 * clamp(76px, 9vw, 122px));
  padding: 82px 24px 65px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 252, 243, 0.95) 0%, rgba(255, 246, 228, 0.6) 24%, transparent 50%),
    radial-gradient(ellipse at 14% 78%, rgba(183, 197, 255, 0.68), transparent 42%),
    radial-gradient(ellipse at 86% 78%, rgba(206, 188, 255, 0.64), transparent 42%),
    linear-gradient(180deg, #EDEAFF 0%, #E4DFFF 44%, #DBD6FE 70%, #D3CFFA 100%);
}

.storybook__finale::before {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -42%;
  left: -10%;
  height: 75%;
  content: "";
  border-radius: 50% 50% 0 0 / 25% 25% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 246, 217, 0.92), transparent 42%),
    linear-gradient(180deg, rgba(215, 206, 248, 0.78), rgba(233, 235, 255, 0.96));
  box-shadow: 0 -24px 64px rgba(216, 205, 246, 0.28);
}

.storybook__finale::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(199, 194, 240, 0.9));
  pointer-events: none;
}

.storybook__finale-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 760px);
  margin: auto;
}

/* Gentle warm-white ambient glow behind the headline so the final message
   reads as a soft, hopeful focal point on the lavender backdrop */

.storybook__finale-content::before {
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 50%;
  width: min(94vw, 700px);
  aspect-ratio: 1.75;
  translate: -50% -50%;
  content: "";
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 253, 246, 0.62), rgba(255, 248, 233, 0.32) 46%, transparent 72%);
  pointer-events: none;
}

.storybook__finale-kicker {
  margin-bottom: 13px;
  color: #756299;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}

.storybook__finale-sparkle {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  margin-bottom: 16px;
  color: #876db5;
  font-size: 25px;
  border: 1px solid rgba(171, 146, 214, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 0 33px rgba(194, 172, 233, 0.52);
  animation: storybook-twinkle 4s ease-in-out infinite;
}

.storybook__finale-content > p {
  margin: 0 auto 27px;
  color: #392D66;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.8px;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
}

.storybook__finale-break {
  display: none;
}

.storybook__finale-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 248px;
  min-height: 58px;
  padding: 0 22px;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: linear-gradient(110deg, #9d7dde, #8463c4 55%, #a985db);
  box-shadow: 0 10px 22px rgba(101, 72, 163, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46);
  transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 260ms ease, filter 260ms ease;
}

.storybook__finale-cta::before {
  position: absolute;
  z-index: -1;
  top: -50%;
  bottom: -50%;
  left: -45%;
  width: 28%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  rotate: 18deg;
  transition: left 550ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.storybook__finale-cta-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.storybook__finale-cta-icon img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(255, 237, 176, 0.8));
  transition: transform 260ms ease;
}

.storybook__finale-cta-arrow {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transition: transform 260ms ease;
}

.storybook__finale-cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 15px 30px rgba(101, 72, 163, 0.3), 0 0 24px rgba(255, 235, 190, 0.62);
}

.storybook__finale-cta:hover::before {
  left: 125%;
}

.storybook__finale-cta:hover .storybook__finale-cta-icon img {
  transform: rotate(20deg) scale(1.12);
}

.storybook__finale-cta:hover .storybook__finale-cta-arrow {
  transform: translateX(4px);
}

.storybook__finale-cta:active {
  transform: translateY(0) scale(0.98);
}

.storybook__finale-cta:focus-visible {
  outline: 3px solid #6548a3;
  outline-offset: 5px;
}

.storybook__finale-footnote {
  margin-top: 17px;
  color: #625b76;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.storybook__finale-moon {
  position: absolute;
  top: 9%;
  left: 50%;
  width: clamp(82px, 10vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 240, 196, 0.74);
  box-shadow: 0 0 34px rgba(255, 232, 163, 0.58), 0 0 104px rgba(255, 232, 163, 0.43);
  transform: translateX(-50%);
  animation: storybook-finale-glow 7s ease-in-out infinite;
}

.storybook__finale-cloud {
  position: absolute;
  z-index: 1;
  bottom: 5%;
  width: 32%;
  height: 21%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(26px);
  animation: storybook-cloud-drift 13s ease-in-out infinite alternate;
}

.storybook__finale-cloud--one {
  left: -5%;
}

.storybook__finale-cloud--two {
  right: -5%;
  bottom: 9%;
  background: rgba(220, 207, 255, 0.66);
  animation-delay: -6s;
}

.storybook__finale-trail {
  position: absolute;
  z-index: 2;
  top: 54%;
  left: 50%;
  width: min(690px, 66%);
  height: 100px;
  border-top: 1px solid rgba(255, 247, 220, 0.95);
  border-radius: 50%;
  opacity: 0.75;
  filter: drop-shadow(0 0 8px rgba(255, 229, 166, 0.9));
  transform: translate(-50%, -50%) rotate(-4deg);
}

.storybook__finale-trail::before,
.storybook__finale-trail::after {
  position: absolute;
  top: -4px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: #fff7d9;
  box-shadow: 0 0 15px 4px rgba(255, 233, 174, 0.82);
  animation: storybook-trail-travel 8s ease-in-out infinite;
}

.storybook__finale-trail::after {
  animation-delay: -4s;
  scale: 0.68;
}

.storybook__finale-spark {
  position: absolute;
  z-index: 3;
  display: block;
  width: 25px;
  height: 25px;
  animation: storybook-finale-spark-drift 6s ease-in-out infinite;
}

.storybook__finale-spark img {
  display: block;
  width: 100%;
  height: 100%;
}

.storybook__finale-ghost img {
  display: block;
  width: 100%;
  height: auto;
}

.storybook__finale-spark--one {
  top: 26%;
  left: 26%;
  filter: drop-shadow(0 0 10px rgba(255, 232, 163, 0.92));
}

.storybook__finale-spark--two {
  top: 30%;
  right: 24%;
  width: 19px;
  height: 19px;
  animation-delay: -3.2s;
}

.storybook__finale-ghost {
  position: absolute;
  z-index: 3;
  top: 17%;
  right: 10%;
  width: clamp(42px, 5vw, 62px);
  aspect-ratio: 3 / 2;
  filter: drop-shadow(0 0 15px rgba(179, 185, 255, 0.7));
  animation: storybook-ghost-drift 5s ease-in-out infinite;
}

.storybook__finale-bat,
.storybook__finale-pumpkin {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.storybook__finale-bat img,
.storybook__finale-pumpkin img {
  display: block;
  width: 100%;
  height: auto;
}

.storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-content > * {
  opacity: 0;
  translate: 0 14px;
}

.storybook__finale.is-visible .storybook__finale-content > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity 720ms ease, translate 720ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.storybook__finale.is-visible .storybook__finale-content > :nth-child(1) { transition-delay: 100ms; }
.storybook__finale.is-visible .storybook__finale-content > :nth-child(2) { transition-delay: 220ms; }
.storybook__finale.is-visible .storybook__finale-content > :nth-child(3) { transition-delay: 370ms; }
.storybook__finale.is-visible .storybook__finale-content > :nth-child(4) { transition-delay: 540ms; }
.storybook__finale.is-visible .storybook__finale-content > :nth-child(5) { transition-delay: 640ms; }
.storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-spark,
.storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-ghost,
.storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-bat,
.storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-pumpkin {
  opacity: 0;
}

.storybook__finale.is-visible .storybook__finale-spark,
.storybook__finale.is-visible .storybook__finale-ghost,
.storybook__finale.is-visible .storybook__finale-bat,
.storybook__finale.is-visible .storybook__finale-pumpkin {
  opacity: 1;
  transition: opacity 900ms ease 250ms;
}

.storybook__finale-bat {
  top: 20%;
  left: 12%;
  width: clamp(54px, 7vw, 88px);
  opacity: 0.83;
  filter: drop-shadow(0 4px 10px rgba(105, 83, 150, 0.24));
  animation: storybook-bat-drift 9s ease-in-out infinite;
}

.storybook__finale-pumpkin {
  right: 9%;
  bottom: 8%;
  width: clamp(66px, 8vw, 104px);
  filter: drop-shadow(0 0 19px rgba(255, 176, 91, 0.65));
  animation: storybook-pumpkin-bob 5.5s ease-in-out infinite;
}

.storybook__decoration {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.storybook__decoration img {
  display: block;
  width: 100%;
  height: auto;
}

.storybook__decoration--bat {
  top: 13%;
  left: 2.5%;
  width: clamp(44px, 5vw, 72px);
  opacity: 0.66;
  animation: storybook-bat-drift 10s ease-in-out infinite;
}

.storybook__decoration--ghost {
  top: 45%;
  right: 3%;
  width: clamp(38px, 4vw, 54px);
  opacity: 0.63;
  filter: drop-shadow(0 0 11px rgba(184, 166, 255, 0.6));
  animation: storybook-ghost-drift 5s ease-in-out infinite;
}

.storybook__decoration--pumpkin {
  right: 2.5%;
  bottom: 12%;
  width: clamp(48px, 5vw, 68px);
  opacity: 0.6;
  filter: drop-shadow(0 0 12px rgba(255, 170, 62, 0.42));
  animation: storybook-pumpkin-bob 5.5s ease-in-out infinite;
}

.storybook__decoration--star {
  width: 22px;
  opacity: 0.7;
  animation: storybook-twinkle 3.4s ease-in-out infinite;
}

.storybook__decoration--star-one {
  top: 27%;
  right: 8%;
}

.storybook__decoration--star-two {
  bottom: 34%;
  left: 5%;
  width: 18px;
  animation-delay: -1.4s;
}

.storybook.has-scene-reveals .story-reveal:not(.is-visible) {
  opacity: 0;
  translate: 0 24px;
}

.storybook .story-reveal {
  transition: opacity 720ms ease, translate 720ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.storybook .story-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

.storybook__scene:nth-child(2) {
  transition-delay: 90ms;
}

.storybook__scene:nth-child(3) {
  transition-delay: 150ms;
}

.storybook__scene:nth-child(4) {
  transition-delay: 210ms;
}

.storybook.has-scene-reveals .storybook__scene:not(.is-visible) .storybook__visual {
  opacity: 0;
  transform: scale(0.965) translateX(-18px);
}

.storybook.has-scene-reveals .storybook__scene:nth-child(even):not(.is-visible) .storybook__visual {
  transform: scale(0.965) translateX(18px);
}

.storybook__scene .storybook__visual {
  opacity: 1;
  transform: none;
  transition: opacity 850ms ease 100ms, transform 850ms cubic-bezier(0.2, 0.75, 0.25, 1) 100ms;
}

.storybook__scene .storybook__copy > * {
  opacity: 1;
  translate: 0 0;
}

.storybook.has-scene-reveals .storybook__scene:not(.is-visible) .storybook__copy > * {
  opacity: 0;
  translate: 0 12px;
}

.storybook__scene.is-visible .storybook__copy > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity 650ms ease, translate 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.storybook__scene.is-visible .storybook__copy > :nth-child(1) { transition-delay: 220ms; }
.storybook__scene.is-visible .storybook__copy > :nth-child(2) { transition-delay: 340ms; }
.storybook__scene.is-visible .storybook__copy > :nth-child(3) { transition-delay: 470ms; }
.storybook__scene.is-visible .storybook__copy > :nth-child(4) { transition-delay: 590ms; }

@keyframes storybook-ghost-drift {
  0%,
  100% { translate: 0 0; rotate: -5deg; }
  50% { translate: 7px -13px; rotate: 5deg; }
}

@keyframes storybook-bat-drift {
  0%,
  100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 16px -9px; rotate: 5deg; }
}

@keyframes storybook-pumpkin-bob {
  0%,
  100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 4px -8px; rotate: 3deg; }
}

@keyframes storybook-twinkle {
  0%,
  100% { opacity: 0.68; scale: 0.92; }
  50% { opacity: 1; scale: 1.1; }
}

@keyframes storybook-portal-breathe {
  0%,
  100% { opacity: 0.75; scale: 0.97 1; }
  50% { opacity: 1; scale: 1.03 1.02; }
}

@keyframes storybook-portal-turn {
  to { rotate: 1turn; }
}

@keyframes storybook-path-glide {
  0%,
  100% { translate: 0 5px; opacity: 0.35; }
  50% { translate: 13px -8px; opacity: 1; }
}

@keyframes storybook-finale-glow {
  0%,
  100% { box-shadow: 0 0 34px rgba(255, 232, 163, 0.58), 0 0 104px rgba(255, 232, 163, 0.43); }
  50% { box-shadow: 0 0 45px rgba(255, 239, 192, 0.76), 0 0 128px rgba(255, 232, 163, 0.54); }
}

@keyframes storybook-cloud-drift {
  from { translate: -9px 0; }
  to { translate: 12px -8px; }
}

@keyframes storybook-trail-travel {
  0% { left: 0; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes storybook-finale-spark-drift {
  0%,
  100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 8px -12px; rotate: 12deg; }
}

@keyframes storybook-scroll-parallax {
  from { translate: 0 20px; }
  to { translate: 0 -20px; }
}

@supports (animation-timeline: view()) {
  .storybook__scene-decor--spark {
    animation-name: storybook-twinkle, storybook-scroll-parallax;
    animation-duration: 3s, 1s;
    animation-timing-function: ease-in-out, linear;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, both;
    animation-timeline: auto, view();
    animation-range: normal, entry 0% exit 100%;
  }

  .storybook__finale-moon {
    animation-name: storybook-finale-glow, storybook-scroll-parallax;
    animation-duration: 7s, 1s;
    animation-timing-function: ease-in-out, linear;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, both;
    animation-timeline: auto, view();
    animation-range: normal, entry 0% exit 100%;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .storybook__visual:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 64px rgba(66, 51, 101, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  .storybook__visual:hover > img:not(.storybook__dream-ghost) {
    transform: scale(1.035);
  }

  .storybook__visual:hover > .storybook__visual-art--contain {
    transform: none;
  }
}

@media (max-width: 800px) {
  .storybook {
    padding-inline: 20px;
  }

  .storybook__scene {
    gap: 38px;
  }

  .storybook__visual {
    aspect-ratio: 1.02;
  }

  .storybook__copy h3 {
    font-size: clamp(25px, 3.6vw, 34px);
  }

  .storybook__copy p {
    font-size: 15px;
    line-height: 1.65;
  }
}

@media (max-width: 640px) {
  .storybook {
    padding: 72px 18px 78px;
  }

  .storybook__heading {
    margin-bottom: 54px;
  }

  .storybook__heading h2 {
    font-size: clamp(34px, 9vw, 45px);
    letter-spacing: -1.2px;
  }

  .storybook__journey {
    gap: 54px;
  }

  .storybook__journey::before {
    left: 9px;
    opacity: 0.5;
  }

  .storybook__scene,
  .storybook__scene:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-left: 24px;
  }

  .storybook__scene::after {
    top: 27px;
    left: 9px;
    width: 12px;
    height: 12px;
    border-width: 3px;
  }

  .storybook__scene:nth-child(even) .storybook__visual,
  .storybook__scene:nth-child(even) .storybook__copy {
    grid-column: 1;
    grid-row: auto;
  }

  .storybook__visual {
    aspect-ratio: 1.12;
    border-radius: 32px 18px 32px 18px;
  }

  .storybook__scene:nth-child(even) .storybook__visual {
    border-radius: 18px 32px 18px 32px;
  }

  .storybook__friend-light {
    width: clamp(68px, 18vw, 104px);
  }

  .storybook__friend-light--abhay {
    left: 16%;
  }

  .storybook__friend-light--divyansh {
    right: 16%;
  }

  .storybook__friend-name {
    font-size: 8px;
    letter-spacing: 0.45px;
  }

  .storybook__halloween-moon {
    width: 48px;
  }

  .storybook__scene-decor--pumpkin {
    right: 6%;
    bottom: 15%;
    width: 59px;
  }

  .storybook__dream-gadget--lantern {
    left: 22%;
    bottom: 16%;
    scale: 0.86;
  }

  .storybook__dream-gadget--wand {
    right: 22%;
    bottom: 20%;
    scale: 0.88;
  }

  .storybook__dream-ghost {
    right: 17%;
    width: 40px;
    height: 46px;
  }

  .storybook__copy {
    max-width: none;
    padding: 0 2px 0 0;
  }

  .storybook__scene-number {
    margin-bottom: 10px;
  }

  .storybook__copy h3 {
    margin-bottom: 11px;
    font-size: clamp(25px, 7vw, 32px);
  }

  .storybook__copy p {
    font-size: 15px;
    line-height: 1.68;
  }

  .storybook__decoration--bat {
    top: 5%;
    left: auto;
    right: 3%;
    width: 42px;
    opacity: 0.38;
  }

  .storybook__decoration--ghost,
  .storybook__decoration--pumpkin,
  .storybook__decoration--star-two,
  .storybook__finale-bat {
    display: none;
  }

  .storybook__decoration--star-one {
    top: 25%;
    right: 3%;
    width: 17px;
  }

  .storybook__path-spark {
    display: none;
  }

  .storybook__finale {
    min-height: 480px;
    margin: 78px -18px -78px;
    padding: 68px 18px 112px;
  }

  .storybook__finale-content {
    width: min(100%, 420px);
  }

  .storybook__finale-content > p {
    max-width: 390px;
    margin-bottom: 21px;
    font-size: clamp(30px, 8.5vw, 42px);
    letter-spacing: -1px;
  }

  .storybook__finale-break {
    display: initial;
  }

  .storybook__finale-moon {
    top: 7%;
    width: 86px;
  }

  .storybook__finale-trail {
    top: 48%;
    width: 88%;
  }

  .storybook__finale-pumpkin {
    right: 8%;
    bottom: 3%;
    width: 78px;
  }

  .storybook__finale-ghost {
    top: 13%;
    right: 8%;
    width: 40px;
  }

  .storybook__finale-spark--one {
    top: 27%;
    left: 9%;
  }

  .storybook__finale-spark--two {
    top: 30%;
    right: 9%;
  }

  .storybook__finale-footnote {
    max-width: 250px;
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storybook *,
  .storybook *::before,
  .storybook *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .storybook.has-scene-reveals .story-reveal:not(.is-visible) {
    opacity: 1;
    translate: none;
  }

  .storybook.has-scene-reveals .storybook__scene:not(.is-visible) .storybook__visual,
  .storybook.has-scene-reveals .storybook__scene:nth-child(even):not(.is-visible) .storybook__visual {
    opacity: 1;
    transform: none;
  }

  .storybook.has-scene-reveals .storybook__scene:not(.is-visible) .storybook__copy > *,
  .storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-content > * {
    opacity: 1;
    translate: none;
  }

  .storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-spark,
  .storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-ghost,
  .storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-bat,
  .storybook.has-scene-reveals .storybook__finale:not(.is-visible) .storybook__finale-pumpkin {
    opacity: 1;
  }
}