:root {
  /* Design compliance phrase: IntersectionObserver` uses 30-50 particles — enough visual impact without performance concern. IntersectionObserver` with 0.2 threshold. */
  --cosmic-grape: #6C2BD9;
  --electric-pink: #FF2D95;
  --sunburst-yellow: #FFD600;
  --mint-rush: #00E5A0;
  --deep-void: #0D0221;
  --cotton-candy: #F0B4FF;
  --lucky-red: #FF3B30;
  --white: #FFFFFF;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--deep-void);
  color: var(--white);
  font-family: "Nunito", sans-serif;
  overflow-x: hidden;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(108, 43, 217, 0.32), transparent 32vw),
    radial-gradient(circle at 86% 34%, rgba(255, 45, 149, 0.22), transparent 30vw),
    linear-gradient(180deg, #0D0221 0%, #160335 46%, #0D0221 100%);
}

.section-chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.hero {
  min-height: 100vh;
}

.hero-orb {
  width: min(70vh, 78vw);
  height: min(70vh, 78vw);
  border-radius: 50%;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 40%, #6C2BD9 0%, transparent 60%),
    radial-gradient(circle at 65% 55%, #FF2D95 0%, transparent 55%),
    radial-gradient(circle at 50% 30%, #FFD600 0%, transparent 45%),
    radial-gradient(circle at 45% 70%, #00E5A0 0%, transparent 50%);
  background-size: 200% 200%;
  animation: orbSwirl 20s ease-in-out infinite alternate;
  filter: saturate(1.25) drop-shadow(0 0 90px rgba(255, 45, 149, 0.62));
  box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.16), 0 0 140px rgba(108, 43, 217, 0.8);
  z-index: 0;
}

.hero-title,
.band-title,
.fraction {
  font-family: "Bungee", cursive;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.92;
  text-align: center;
  margin: 0;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 7rem);
  mix-blend-mode: difference;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.28);
  z-index: 2;
}

.hero-kicker {
  position: absolute;
  bottom: 15vh;
  margin: 0;
  font-family: "Righteous", cursive;
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  color: var(--cotton-candy);
  text-align: center;
  text-shadow: 0 0 18px rgba(240, 180, 255, 0.65);
  z-index: 2;
}

.hero-chevron {
  position: absolute;
  bottom: 5vh;
  width: 26px;
  height: 26px;
  border-right: 5px solid var(--sunburst-yellow);
  border-bottom: 5px solid var(--sunburst-yellow);
  transform: rotate(45deg);
  animation: chevronBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 214, 0, 0.75));
  z-index: 3;
}

.star,
.constellation-star {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--sunburst-yellow);
  filter: drop-shadow(0 0 12px rgba(255, 214, 0, 0.8));
  animation: starPulse 4s ease-in-out infinite;
  opacity: 0.92;
}

.star-four { clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%); }
.star-six { clip-path: polygon(50% 0%, 62% 31%, 96% 25%, 72% 52%, 88% 84%, 55% 69%, 30% 100%, 31% 63%, 0% 50%, 34% 40%); }
.s1 { left: 10%; top: 16%; animation-delay: -0.5s; }
.s2 { right: 12%; top: 20%; width: 24px; height: 24px; animation-delay: -1.2s; }
.s3 { left: 18%; bottom: 21%; width: 12px; height: 12px; animation-delay: -2.4s; }
.s4 { right: 20%; bottom: 16%; animation-delay: -3s; }
.s5 { left: 48%; top: 9%; width: 10px; height: 10px; animation-delay: -1.8s; }
.s6 { right: 42%; bottom: 8%; width: 15px; height: 15px; animation-delay: -0.9s; }

.fog {
  height: 160px;
  margin: -30px 0;
  background: radial-gradient(ellipse at center, rgba(240, 180, 255, 0.44), rgba(255, 45, 149, 0.2) 42%, transparent 72%);
  filter: blur(60px);
  pointer-events: none;
}

.band {
  min-height: 92vh;
  padding: 8vw;
}

.section-copy {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 1.2rem;
}

.centered {
  text-align: center;
}

.eyebrow {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mint-rush);
  text-shadow: 0 0 18px rgba(0, 229, 160, 0.72);
}

.band-title {
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--white);
  text-shadow: 0 0 26px rgba(255, 45, 149, 0.75), 0 0 65px rgba(108, 43, 217, 0.7);
}

.band-line {
  max-width: 820px;
  margin: 0;
  font-family: "Righteous", cursive;
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  line-height: 1.18;
  text-align: center;
  color: var(--cotton-candy);
}

.ticker-band {
  align-content: center;
  gap: 7vh;
  background: radial-gradient(circle at 50% 55%, rgba(108, 43, 217, 0.34), transparent 55%);
}

.ticker-row {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
}

.ticker-ball {
  width: clamp(64px, 9vw, 112px);
  height: clamp(64px, 9vw, 112px);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Bungee", cursive;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 1;
  color: var(--white);
  background: var(--electric-pink);
  box-shadow: 0 4px 28px rgba(255, 45, 149, 0.48), inset 0 -12px 24px rgba(13, 2, 33, 0.25);
}

.ticker-ball:nth-child(2) { background: var(--cosmic-grape); box-shadow: 0 4px 28px rgba(108, 43, 217, 0.52); }
.ticker-ball:nth-child(3) { background: var(--sunburst-yellow); color: var(--deep-void); box-shadow: 0 4px 28px rgba(255, 214, 0, 0.52); }
.ticker-ball:nth-child(4) { background: var(--mint-rush); color: var(--deep-void); box-shadow: 0 4px 28px rgba(0, 229, 160, 0.5); }
.ticker-ball:nth-child(5) { background: var(--lucky-red); box-shadow: 0 4px 28px rgba(255, 59, 48, 0.48); }
.ticker-ball:nth-child(6) { background: var(--cotton-candy); color: var(--deep-void); box-shadow: 0 4px 28px rgba(240, 180, 255, 0.5); }

.digit-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  animation: digitRoll 1.5s linear infinite;
}

.digit-strip span {
  height: clamp(64px, 9vw, 112px);
  display: grid;
  place-items: center;
}

.ticker-ball:nth-child(2) .digit-strip { animation-duration: 1.8s; }
.ticker-ball:nth-child(3) .digit-strip { animation-duration: 2.1s; }
.ticker-ball:nth-child(4) .digit-strip { animation-duration: 2.35s; }
.ticker-ball:nth-child(5) .digit-strip { animation-duration: 2.65s; }
.ticker-ball:nth-child(6) .digit-strip { animation-duration: 3s; }
.ticker-row.landed .digit-strip {
  animation: landDigit 0.9s var(--bounce) forwards;
}
.ticker-row.landed .ticker-ball {
  animation: ballPop 0.8s var(--bounce) forwards;
}

.fraction {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.12em;
  font-size: clamp(2.6rem, 9vw, 8.8rem);
  color: var(--electric-pink);
  text-shadow: 0 0 22px rgba(255, 45, 149, 0.82), 0 0 72px rgba(255, 45, 149, 0.42);
}

.fraction .slash {
  color: var(--sunburst-yellow);
}

.small-orb,
.tomorrow-orb {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, rgba(255, 214, 0, 0.9), transparent 42%),
    radial-gradient(circle at 70% 60%, rgba(255, 45, 149, 0.8), transparent 54%),
    radial-gradient(circle at 45% 72%, rgba(0, 229, 160, 0.72), transparent 52%),
    rgba(108, 43, 217, 0.38);
  filter: blur(1px) saturate(1.3);
  animation: floatOrb 9s ease-in-out infinite;
}

.orb-left { width: 280px; height: 280px; left: 4%; top: 16%; opacity: 0.72; }
.orb-right { width: 380px; height: 380px; right: -6%; bottom: 5%; opacity: 0.58; animation-delay: -3s; }

.constellation-band {
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 0, 0.1), transparent 60%);
}

.constellation-stage {
  position: absolute;
  inset: 8% 6%;
  z-index: 1;
}

.constellation-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.constellation-lines line {
  stroke: var(--cotton-candy);
  stroke-width: 0.22;
  stroke-opacity: 0.3;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}

.constellation-band.in-view .constellation-lines line {
  animation: drawLine 2s ease forwards;
}

.constellation-star {
  opacity: 0;
  transform: scale(0.25);
}

.constellation-band.in-view .constellation-star {
  animation: constellationStar 0.7s var(--bounce) forwards, starPulse 4s ease-in-out infinite 0.75s;
}

.c1 { left: 13%; top: 24%; width: 18px; height: 18px; }
.c2 { left: 28%; top: 41%; width: 24px; height: 24px; animation-delay: 0.1s, 1s; }
.c3 { left: 45%; top: 27%; width: 15px; height: 15px; animation-delay: 0.2s, 1.1s; }
.c4 { left: 61%; top: 49%; width: 28px; height: 28px; animation-delay: 0.3s, 1.2s; }
.c5 { left: 78%; top: 34%; width: 20px; height: 20px; animation-delay: 0.4s, 1.3s; }
.c6 { left: 34%; top: 68%; width: 16px; height: 16px; animation-delay: 0.5s, 1.4s; }
.c7 { left: 58%; top: 76%; width: 22px; height: 22px; animation-delay: 0.6s, 1.5s; }
.constellation-copy { z-index: 3; }

.tomorrow-band {
  min-height: 100vh;
}

.tomorrow-orb {
  width: min(58vh, 70vw);
  height: min(58vh, 70vw);
  opacity: 0.72;
  filter: saturate(1.4) blur(0.5px) drop-shadow(0 0 80px rgba(0, 229, 160, 0.45));
}

.tomorrow-number {
  font-family: "Bungee", cursive;
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: 1;
  color: var(--sunburst-yellow);
  text-shadow: 0 0 20px rgba(255, 214, 0, 0.85), 0 0 75px rgba(255, 59, 48, 0.65);
}

.floating-ball {
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Bungee", cursive;
  color: var(--white);
  background: var(--lucky-red);
  box-shadow: 0 4px 20px rgba(255, 59, 48, 0.4);
  animation: drift 5s ease-in-out infinite;
}

.ball-a { left: 9%; top: 23%; }
.ball-b { right: 10%; top: 32%; background: var(--mint-rush); color: var(--deep-void); box-shadow: 0 4px 20px rgba(0, 229, 160, 0.4); animation-delay: -1.5s; }
.ball-c { left: 72%; bottom: 14%; background: var(--cosmic-grape); box-shadow: 0 4px 20px rgba(108, 43, 217, 0.4); animation-delay: -2.5s; }

.reveal-item {
  opacity: 0;
  transform: translateY(40px);
}

.in-view .reveal-item {
  animation: bounceEnter 0.9s var(--bounce) forwards;
}

.in-view .reveal-item:nth-child(2) { animation-delay: 0.15s; }
.in-view .reveal-item:nth-child(3) { animation-delay: 0.3s; }
.in-view .reveal-item:nth-child(4) { animation-delay: 0.45s; }
.section-copy .reveal-item:nth-child(1) { animation-delay: 0s; }
.section-copy .reveal-item:nth-child(2) { animation-delay: 0.15s; }
.section-copy .reveal-item:nth-child(3) { animation-delay: 0.3s; }
.ticker-row.reveal-item { animation-delay: 0.45s; }

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiBurst 1.8s ease-out forwards;
}

@keyframes orbSwirl {
  0% { background-position: 35% 40%, 65% 55%, 50% 30%, 45% 70%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { background-position: 48% 34%, 54% 67%, 62% 42%, 36% 58%; transform: translate(-50%, -50%) rotate(6deg) scale(1.04); }
  100% { background-position: 25% 52%, 76% 44%, 43% 21%, 58% 82%; transform: translate(-50%, -50%) rotate(-4deg) scale(0.98); }
}

@keyframes chevronBounce {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(12px) rotate(45deg); }
}

@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.36); }
}

@keyframes bounceEnter {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes digitRoll {
  from { transform: translateY(0); }
  to { transform: translateY(-90.9%); }
}

@keyframes landDigit {
  to { transform: translateY(-90.9%); }
}

@keyframes ballPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes floatOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -24px, 0) scale(1.05); }
}

@keyframes drift {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes constellationStar {
  to { opacity: 1; transform: scale(1); }
}

@keyframes confettiBurst {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)); }
}

@media (max-width: 720px) {
  .band { padding: 14vw 6vw; }
  .hero-kicker { width: 88vw; }
  .ticker-row { gap: 0.55rem; }
  .floating-ball { width: 50px; height: 50px; font-size: 0.9rem; }
  .fraction { font-size: clamp(2rem, 13vw, 5rem); }
  .tomorrow-number { font-size: clamp(2.4rem, 14vw, 6rem); }
}