:root {
  /* Compliance typography tokens: Interactions should feel tactile and toy-like: elastic catches Space Grotesk** Grotesk* Grotes for short explanatory labels and technical captions because it adds contemporary AI precision without becoming monospaced or terminal-like. Use **Nunito Sans** Sans* Sans for body copy */
  --aquarium-glass: #B9F7FF;
  --deep-pool: #073B68;
  --aero-sky: #64D8FF;
  --chrome-pearl: #F4FBFF;
  --gel-lime: #B8FF4D;
  --signal-coral: #FF6B8A;
  --violet-refraction: #8C7CFF;
  --transparent-navy: #071827;
  --display: "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --technical: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #071827;
}

body {
  margin: 0;
  min-height: 500vh;
  color: var(--deep-pool);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 8%, rgba(244, 251, 255, .96) 0 9%, transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(140, 124, 255, .22) 0 12%, transparent 34%),
    linear-gradient(145deg, #F4FBFF 0%, #B9F7FF 34%, #64D8FF 72%, #073B68 140%);
}

.aero-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(7, 24, 39, .45) 0 9%, transparent 35%),
    radial-gradient(circle at 12% 28%, rgba(184, 255, 77, .18) 0 8%, transparent 20%),
    radial-gradient(circle at 75% 36%, rgba(255, 107, 138, .16) 0 7%, transparent 24%),
    linear-gradient(180deg, rgba(244, 251, 255, .88), rgba(185, 247, 255, .76) 48%, rgba(100, 216, 255, .64));
}

.aero-stage::before {
  content: "";
  position: absolute;
  inset: 3vh 5vw 7vh;
  border-radius: 48px;
  border: 1px solid rgba(244, 251, 255, .78);
  background:
    linear-gradient(124deg, rgba(244, 251, 255, .58), rgba(185, 247, 255, .16) 32%, rgba(7, 59, 104, .12) 74%, rgba(244, 251, 255, .35)),
    repeating-linear-gradient(115deg, rgba(244, 251, 255, .18) 0 1px, transparent 1px 38px);
  box-shadow: inset 0 1px 34px rgba(244, 251, 255, .82), inset 0 -34px 80px rgba(7, 59, 104, .16), 0 28px 90px rgba(7, 24, 39, .23);
  backdrop-filter: blur(18px) saturate(1.35);
  z-index: -3;
}

.aero-stage::after {
  content: "";
  position: absolute;
  inset: -8%;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(244, 251, 255, .72) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(185, 247, 255, .55) 0 1px, transparent 2px);
  background-size: 128px 128px, 79px 79px;
  animation: bubbleDrift 26s linear infinite;
  z-index: -2;
}

.water-haze {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(244, 251, 255, .28), rgba(100, 216, 255, .2), transparent, rgba(140, 124, 255, .13), transparent);
  filter: blur(32px);
  animation: refract 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.chrome-rail {
  position: absolute;
  left: 9vw;
  right: 9vw;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F4FBFF, #B9F7FF 34%, #073B68 58%, #F4FBFF 88%);
  box-shadow: 0 10px 28px rgba(7, 24, 39, .2), inset 0 2px 5px rgba(255, 255, 255, .9);
  opacity: .72;
}
.rail-top { top: 7vh; }
.rail-bottom { bottom: 9vh; }

.arc-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.arc {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 6 20;
  filter: url(#arcGlow);
  opacity: var(--arc-opacity, .42);
  stroke-dashoffset: var(--dash, 0);
}
.arc-a { stroke: #B8FF4D; }
.arc-b { stroke: #8C7CFF; }
.arc-c { stroke: #64D8FF; }
.arc-d { stroke: #FF6B8A; stroke-width: 3; opacity: .32; }

.wordmark-glass {
  position: absolute;
  top: 15vh;
  left: 50%;
  width: min(78vw, 860px);
  transform: translateX(-50%);
  text-align: center;
  padding: clamp(20px, 4vw, 46px);
  border-radius: 40px;
  border: 1px solid rgba(244, 251, 255, .86);
  background: linear-gradient(145deg, rgba(244, 251, 255, .46), rgba(185, 247, 255, .15) 42%, rgba(7, 59, 104, .08));
  box-shadow: inset 0 0 34px rgba(244, 251, 255, .7), 0 26px 70px rgba(7, 59, 104, .18);
  backdrop-filter: blur(16px) saturate(1.5);
  transition: opacity .4s ease, transform .4s ease;
}

.small-caption, .scene-title span {
  font-family: var(--technical);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--deep-pool);
  font-size: 12px;
  font-weight: 800;
}

h1, h2 {
  font-family: var(--display);
  margin: 0;
  line-height: .94;
}

h1 {
  font-size: clamp(4.2rem, 13vw, 11.5rem);
  letter-spacing: -.08em;
  color: transparent;
  background: linear-gradient(180deg, #F4FBFF 0%, #B9F7FF 22%, #073B68 54%, #F4FBFF 78%, #8C7CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 22px rgba(7, 59, 104, .32));
}

.wordmark-glass p {
  max-width: 590px;
  margin: 18px auto 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(7, 24, 39, .72);
}

.story { position: relative; z-index: 2; }
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
.scene.is-current { opacity: 1; transform: scale(1); }

.scene-title {
  position: absolute;
  width: min(390px, 40vw);
  padding: 19px 22px 20px;
  border-radius: 26px 26px 26px 9px;
  background: linear-gradient(145deg, rgba(244, 251, 255, .64), rgba(185, 247, 255, .22));
  border: 1px solid rgba(244, 251, 255, .9);
  backdrop-filter: blur(14px) saturate(1.55);
  box-shadow: inset 0 1px 20px rgba(244, 251, 255, .68), 0 20px 50px rgba(7, 24, 39, .18);
}
.scene-title h2 {
  margin-top: 7px;
  font-size: clamp(2rem, 4vw, 4.9rem);
  color: var(--deep-pool);
  letter-spacing: -.055em;
}
.left-title { left: 9vw; top: 57vh; transform: rotate(-4deg); }
.apex-title { left: 34vw; top: 15vh; transform: rotate(2deg); }
.right-title { right: 9vw; top: 53vh; transform: rotate(4deg); }
.rebalance-title { left: 13vw; top: 27vh; transform: rotate(-2deg); }

.motion-label {
  position: absolute;
  max-width: 245px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 18px 18px 6px 18px;
  background: rgba(244, 251, 255, .54);
  border: 1px solid rgba(244, 251, 255, .9);
  box-shadow: inset 0 1px 12px rgba(244, 251, 255, .7), 0 14px 30px rgba(7, 59, 104, .14);
  font-family: var(--technical);
  color: rgba(7, 24, 39, .76);
  backdrop-filter: blur(12px);
}
.label-one { left: 30vw; top: 63vh; transform: rotate(-9deg); }
.label-two { left: 56vw; top: 28vh; transform: rotate(8deg); }
.label-three { right: 31vw; top: 68vh; transform: rotate(6deg); }
.label-four { left: 55vw; top: 43vh; transform: rotate(-5deg); }
.label-five { left: 50%; top: 68vh; transform: translateX(-50%) rotate(2deg); text-align: center; }

.orb {
  position: absolute;
  width: clamp(88px, 11vw, 150px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 20%, rgba(244, 251, 255, .96) 0 10%, transparent 17%),
    radial-gradient(circle at 66% 72%, rgba(140, 124, 255, .34) 0 13%, transparent 31%),
    radial-gradient(circle at 40% 54%, rgba(185, 247, 255, .4), rgba(100, 216, 255, .25) 42%, rgba(7, 59, 104, .16) 68%, rgba(244, 251, 255, .36));
  border: 1px solid rgba(244, 251, 255, .85);
  box-shadow: inset -16px -22px 32px rgba(7, 59, 104, .18), inset 16px 18px 34px rgba(244, 251, 255, .78), 0 24px 50px rgba(7, 24, 39, .23), 0 0 28px rgba(185, 247, 255, .42);
  backdrop-filter: blur(5px) saturate(1.3);
  transition: width .28s ease, filter .28s ease, box-shadow .28s ease;
  cursor: pointer;
  z-index: 6;
}
.orb::before {
  content: "";
  position: absolute;
  inset: 10% 16% auto 18%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(244, 251, 255, .88), rgba(244, 251, 255, .08));
  transform: rotate(-18deg);
}
.orb::after {
  content: attr(data-fragment);
  position: absolute;
  left: 50%;
  bottom: -36px;
  transform: translateX(-50%) scale(.82);
  white-space: nowrap;
  opacity: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(244, 251, 255, .74);
  color: var(--deep-pool);
  font-family: var(--technical);
  font-size: 12px;
  letter-spacing: .03em;
  transition: opacity .25s ease, transform .25s ease;
}
.orb:hover, .orb.is-inspected {
  width: clamp(120px, 14vw, 188px);
  filter: saturate(1.2) brightness(1.08);
  box-shadow: inset -16px -22px 32px rgba(7, 59, 104, .16), inset 20px 22px 40px rgba(244, 251, 255, .86), 0 30px 65px rgba(7, 24, 39, .25), 0 0 0 9px rgba(184, 255, 77, .14), 0 0 40px rgba(184, 255, 77, .4);
}
.orb:hover::after, .orb.is-inspected::after { opacity: 1; transform: translateX(-50%) scale(1); }
.orb.coral { background: radial-gradient(circle at 30% 20%, #F4FBFF 0 11%, transparent 18%), radial-gradient(circle at 52% 52%, rgba(255, 107, 138, .72), rgba(140, 124, 255, .32) 60%, rgba(244, 251, 255, .4)); }

.fragment { position: absolute; inset: 29%; opacity: .82; }
.tree span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #B8FF4D; box-shadow: 0 0 0 6px rgba(184,255,77,.16); }
.tree span:nth-child(1) { left: 38%; top: 0; }
.tree span:nth-child(2) { left: 0; bottom: 4%; }
.tree span:nth-child(3) { right: 0; bottom: 4%; }
.tree::before, .tree::after { content:""; position:absolute; top: 31%; width: 46%; height: 2px; background: #073B68; transform-origin: left; opacity:.42; }
.tree::before { left: 44%; transform: rotate(128deg); }
.tree::after { left: 50%; transform: rotate(52deg); }
.note { border-radius: 8px; background: linear-gradient(135deg, #F4FBFF, #B9F7FF); transform: rotate(-17deg); box-shadow: 0 0 0 1px rgba(7,59,104,.14), inset -10px -10px 18px rgba(7,59,104,.1); }
.note::after { content:""; position:absolute; right:0; bottom:0; border: 13px solid transparent; border-left-color: rgba(140,124,255,.55); border-top-color: rgba(140,124,255,.55); }
.compass { border-radius:50%; border:2px solid rgba(7,59,104,.4); }
.compass::before { content:""; position:absolute; left: 45%; top: 6%; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 38px solid #FF6B8A; transform: rotate(24deg); transform-origin: 50% 90%; }
.spark::before, .spark::after { content:""; position:absolute; inset: 47% 5%; height: 4px; border-radius: 99px; background:#F4FBFF; box-shadow:0 0 18px #FF6B8A; }
.spark::after { transform: rotate(90deg); }

.glove {
  position: absolute;
  width: 168px;
  height: 78px;
  border-radius: 50% 50% 28px 28px;
  background: linear-gradient(180deg, rgba(244,251,255,.9), rgba(185,247,255,.42) 55%, rgba(7,59,104,.24));
  box-shadow: inset 0 8px 20px rgba(244,251,255,.8), 0 18px 42px rgba(7,24,39,.2);
  filter: blur(.1px);
  opacity: .76;
}
.glove-left { left: 12vw; bottom: 16vh; transform: rotate(-11deg); }
.glove-right { right: 13vw; bottom: 15vh; transform: rotate(11deg); }

.tray {
  position: absolute;
  bottom: 15vh;
  width: 270px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(244,251,255,.75), rgba(185,247,255,.38) 50%, rgba(7,59,104,.1) 72%, transparent 73%);
  box-shadow: inset 0 -8px 20px rgba(7,59,104,.13), 0 22px 34px rgba(7,24,39,.16);
  opacity: .86;
}
.tray-left { left: 19vw; }
.tray-right { right: 18vw; }
.tray i { position:absolute; inset:15px 35px; border-radius:50%; border:2px solid rgba(184,255,77,.4); animation: catchRipple 2.2s ease-out infinite; }

.timing-dots {
  position: absolute;
  inset: 20vh 12vw auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, rgba(244,251,255,.9) 0 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle, transparent 0 60%, #000 61% 63%, transparent 64%);
  opacity: .55;
  animation: spin 18s linear infinite;
}

.elastic-band {
  position: absolute;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(184,255,77,.56), rgba(255,107,138,.54), transparent);
  filter: blur(1px);
  opacity: .55;
}
.band-one { left: 28vw; top: 55vh; width: 46vw; transform: rotate(-16deg); }
.band-two { left: 30vw; top: 37vh; width: 39vw; transform: rotate(19deg); }

.encore-mark {
  position: absolute;
  left: 50%;
  top: 35vh;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 14px);
  padding: 24px 34px;
  border-radius: 44px;
  background: linear-gradient(145deg, rgba(244,251,255,.66), rgba(185,247,255,.2));
  border: 1px solid rgba(244,251,255,.92);
  box-shadow: inset 0 0 28px rgba(244,251,255,.75), 0 28px 70px rgba(7,24,39,.2);
  backdrop-filter: blur(15px) saturate(1.5);
}
.orb-letter {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.09em;
  color: transparent;
  background: linear-gradient(180deg, #F4FBFF, #64D8FF 32%, #073B68 61%, #F4FBFF 82%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 10px 16px rgba(7,59,104,.27));
}

.pearl-nav {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 13px;
}
.pearl {
  width: 20px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(180deg, rgba(244,251,255,.85), rgba(185,247,255,.45));
  box-shadow: inset 0 1px 8px rgba(255,255,255,.9), 0 8px 18px rgba(7,24,39,.18);
  cursor: pointer;
}
.pearl span {
  display: block;
  width: 100%;
  height: calc(var(--fill, 0) * 100%);
  margin-top: auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #B8FF4D, #64D8FF 70%, #8C7CFF);
  transition: height .25s ease;
}
.pearl.is-active { outline: 2px solid rgba(244,251,255,.85); }

.floor-puddle {
  position: absolute;
  left: 14vw;
  right: 14vw;
  bottom: 6vh;
  height: 13vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(244,251,255,.52), rgba(100,216,255,.22) 48%, rgba(7,24,39,.17) 70%, transparent 72%);
  filter: blur(5px);
  opacity: .74;
  z-index: -1;
}

.ripple-field { position:absolute; inset:0; pointer-events:none; z-index: 5; }
.ripple {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(244,251,255,.72);
  transform: translate(-50%, -50%) scale(.25);
  animation: rippleOut .7s ease-out forwards;
}

@keyframes bubbleDrift { to { transform: translate3d(-80px, -90px, 0); } }
@keyframes refract { from { transform: rotate(0deg) scale(1); } to { transform: rotate(14deg) scale(1.08); } }
@keyframes catchRipple { from { transform: scale(.45); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rippleOut { to { transform: translate(-50%, -50%) scale(5); opacity: 0; } }

@media (max-width: 760px) {
  .wordmark-glass { top: 11vh; width: 88vw; }
  .scene-title { width: 78vw; }
  .left-title, .apex-title, .right-title, .rebalance-title { left: 8vw; right: auto; top: 18vh; }
  .motion-label { max-width: 210px; }
  .label-one, .label-two, .label-three, .label-four, .label-five { left: 12vw; right: auto; top: 72vh; transform: rotate(-3deg); }
  .pearl-nav { right: 12px; }
  .tray { width: 180px; }
  .tray-left { left: 8vw; }
  .tray-right { right: 7vw; }
}