:root {
  --chrome: #F5F7FA;
  --steel: #A7ADB8;
  --garage: #232733;
  --cyan: #00D6FF;
  --pink: #FF5CCF;
  --yellow: #FFE45E;
  --green: #27F59A;
  --orange: #FF7A2F;
  --shine: linear-gradient(115deg, #F5F7FA 0%, #A7ADB8 18%, #00D6FF 34%, #F5F7FA 46%, #FF5CCF 62%, #FFE45E 78%, #F5F7FA 100%);
  --oil: conic-gradient(from 30deg, #00D6FF, #FF5CCF, #FFE45E, #27F59A, #FF7A2F, #00D6FF);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--chrome);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 92, 207, .35), transparent 28vw),
    radial-gradient(circle at 82% 24%, rgba(0, 214, 255, .32), transparent 25vw),
    linear-gradient(135deg, #232733 0%, #151821 44%, #2f3444 100%);
  overflow-x: hidden;
}

.chrome-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .42;
  background-image:
    linear-gradient(120deg, transparent 0 12%, rgba(245,247,250,.12) 13%, transparent 15% 44%, rgba(255,255,255,.1) 45%, transparent 47%),
    radial-gradient(circle, rgba(245,247,250,.16) 1px, transparent 1.5px);
  background-size: 170px 170px, 18px 18px;
  mix-blend-mode: screen;
}

.shutter {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  pointer-events: none;
  animation: liftShutter 2.2s cubic-bezier(.72, 0, .2, 1) .3s forwards;
}

.shutter span {
  background: linear-gradient(180deg, #F5F7FA, #A7ADB8 34%, #232733 38%, #F5F7FA 44%, #00D6FF 68%, #FF5CCF 100%);
  border-bottom: 5px solid rgba(35,39,51,.8);
  box-shadow: inset 0 -16px 18px rgba(35,39,51,.24), inset 0 8px 14px rgba(255,255,255,.8);
}

@keyframes liftShutter { to { transform: translateY(-115%); filter: blur(5px); } }

.top-dock {
  position: fixed;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.dock-chip, .nav-stickers a, .sticker, .stamped, .key-button {
  font-family: "Fredoka", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dock-chip, .nav-stickers a, .sticker, .stamped {
  color: var(--garage);
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  border: 2px solid var(--chrome);
  border-radius: 999px;
  box-shadow: 0 10px 0 rgba(0,0,0,.22), inset 0 4px 0 rgba(255,255,255,.55);
  padding: 10px 15px;
}

.tilted { transform: rotate(-4deg); }

.nav-stickers { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.nav-stickers a { color: var(--garage); text-decoration: none; font-size: 12px; background: linear-gradient(135deg, var(--chrome), var(--cyan)); transition: transform .2s ease; }
.nav-stickers a:nth-child(2n) { background: linear-gradient(135deg, var(--pink), var(--chrome)); transform: rotate(3deg); }
.nav-stickers a:hover { transform: translateY(5px) rotate(-2deg); }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(86px, 10vw, 140px) clamp(18px, 5vw, 74px);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: -2;
  opacity: .28;
  background: var(--oil);
  filter: blur(72px) saturate(1.4);
  border-radius: 45% 55% 58% 42%;
  transform: rotate(var(--scene-tilt, 0deg));
}

.scene-hero { --scene-tilt: -18deg; }
.scene-islands { --scene-tilt: 24deg; background: linear-gradient(160deg, rgba(0,214,255,.08), rgba(255,92,207,.1)); }
.scene-tuneup { --scene-tilt: -32deg; }
.scene-party { --scene-tilt: 44deg; background: radial-gradient(circle at 50% 90%, rgba(39,245,154,.2), transparent 42%), #232733; }

.garage-glow {
  position: absolute;
  inset: 18% 6% auto;
  height: 44vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,228,94,.45), rgba(0,214,255,.22) 45%, transparent 70%);
  filter: blur(18px);
}

.chrome-panel {
  border: 2px solid rgba(245,247,250,.9);
  background:
    linear-gradient(135deg, rgba(245,247,250,.92), rgba(167,173,184,.74) 28%, rgba(0,214,255,.38) 43%, rgba(255,92,207,.32) 62%, rgba(245,247,250,.86)),
    var(--shine);
  color: var(--garage);
  box-shadow: 0 26px 0 rgba(0,0,0,.23), 0 42px 70px rgba(0,0,0,.38), inset 0 4px 0 rgba(255,255,255,.9), inset 0 -18px 30px rgba(35,39,51,.18);
  backdrop-filter: blur(8px);
}

.hero-plate {
  width: min(940px, 90vw);
  padding: clamp(26px, 6vw, 68px);
  border-radius: 46px 92px 36px 76px;
  transform: rotate(-2.2deg);
  position: relative;
  z-index: 3;
}

.hero-plate::after, .final-badge::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 3px dashed rgba(35,39,51,.28);
  border-radius: inherit;
  pointer-events: none;
}

.eyebrow { display: inline-flex; margin: 0 0 14px; font-size: 13px; background: linear-gradient(135deg, var(--green), var(--yellow)); }

.wordmark, .scene-title h2, .final-badge h2 {
  font-family: "DynaPuff", "Fredoka", system-ui, sans-serif;
  line-height: .9;
  margin: 0;
}

.wordmark {
  font-size: clamp(56px, 13vw, 166px);
  letter-spacing: .015em;
  background: linear-gradient(100deg, #232733 0%, #F5F7FA 10%, #00D6FF 24%, #F5F7FA 37%, #FF5CCF 50%, #FFE45E 68%, #A7ADB8 82%, #232733 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 0 rgba(35,39,51,.75)) drop-shadow(0 16px 14px rgba(255,92,207,.45));
}

.hero-copy, .island p, .note-strip p {
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.45;
  max-width: 760px;
  font-weight: 800;
}

.fish-layer, .bubble-layer, .sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.bubble-layer, .sparkle-layer { z-index: 5; }

.fish {
  position: absolute;
  width: var(--size, 72px);
  height: calc(var(--size, 72px) * .52);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--rot, 0deg)) scaleX(var(--dir, 1));
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.16));
  transition: filter .2s ease;
}
.fish::before {
  content: "";
  position: absolute;
  inset: 10% 19% 8% 0;
  border: 3px solid var(--chrome);
  border-radius: 65% 46% 52% 70%;
  background: linear-gradient(135deg, var(--c1), var(--c2) 58%, var(--chrome));
  box-shadow: inset 8px 0 0 rgba(255,255,255,.45), inset -8px -4px 0 rgba(35,39,51,.16);
}
.fish::after {
  content: "";
  position: absolute;
  right: 0;
  top: 11%;
  width: 35%;
  height: 75%;
  clip-path: polygon(0 50%, 100% 0, 72% 50%, 100% 100%);
  background: linear-gradient(135deg, var(--c2), var(--c3));
  border: 2px solid var(--chrome);
}
.fish i { position: absolute; left: 18%; top: 32%; width: 7px; height: 7px; border-radius: 50%; background: var(--garage); z-index: 2; }
.fish b { position: absolute; left: 45%; top: -10%; width: 22%; height: 50%; border-radius: 80% 20%; background: linear-gradient(var(--c3), transparent); transform: rotate(20deg); }

.bubble, .sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.bubble { width: var(--s); height: var(--s); border: 2px solid rgba(245,247,250,.8); background: rgba(0,214,255,.14); animation: popBubble 2.2s ease-out forwards; }
.sparkle { width: var(--s); height: var(--s); background: var(--shine); clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); animation: popSparkle 1.1s ease-out forwards; }
@keyframes popBubble { to { opacity: 0; transform: translate(-50%, -120px) scale(1.6); } }
@keyframes popSparkle { to { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0); } }

.floating-tool { position: absolute; z-index: 1; display: grid; place-items: center; color: var(--garage); background: var(--shine); border: 3px solid var(--chrome); box-shadow: 0 18px 0 rgba(0,0,0,.23); }
.wrench-tool { left: 8%; bottom: 18%; width: 150px; height: 55px; border-radius: 999px; transform: rotate(-28deg); font-size: 70px; }
.socket-tool { right: 9%; top: 26%; width: 118px; height: 118px; border-radius: 34px; transform: rotate(18deg); font-size: 60px; }
.gauge-tool { right: 15%; bottom: 12%; width: 155px; height: 155px; border-radius: 50%; background: radial-gradient(circle, var(--garage) 0 32%, var(--cyan) 34% 38%, var(--chrome) 40%); }
.needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 43%; background: var(--pink); transform-origin: top center; transform: rotate(var(--needle, 35deg)); border-radius: 999px; }
.keychain { position: absolute; left: 68%; top: 18%; width: 96px; height: 118px; display: grid; place-items: center; text-align: center; border-radius: 24px 24px 44px 44px; background: linear-gradient(145deg, rgba(255,92,207,.75), rgba(0,214,255,.72)); border: 3px solid var(--chrome); font-family: "Fredoka"; font-weight: 800; text-transform: uppercase; color: var(--garage); transform: rotate(11deg); box-shadow: 0 16px 0 rgba(0,0,0,.23); }

.scene-title { position: absolute; z-index: 3; max-width: 600px; }
.title-left { left: clamp(20px, 6vw, 82px); top: 14%; transform: rotate(-4deg); }
.title-right { right: clamp(20px, 6vw, 82px); top: 14%; text-align: right; transform: rotate(4deg); }
.scene-title h2 { font-size: clamp(42px, 8vw, 102px); color: var(--chrome); text-shadow: 0 7px 0 var(--garage), 0 18px 22px rgba(255,92,207,.45); }
.stamped { display: inline-block; margin-bottom: 9px; background: linear-gradient(135deg, var(--pink), var(--yellow)); font-size: 13px; }

.island { position: absolute; z-index: 2; padding: 26px; }
.island h3, .note-strip h3, .aquarium-card h3 { margin: 0 0 8px; font-family: "Fredoka"; font-size: clamp(26px, 3vw, 42px); color: var(--garage); }
.label { font-family: "Fredoka"; text-transform: uppercase; color: var(--garage); background: var(--green); border-radius: 999px; padding: 8px 12px; display: inline-block; margin-bottom: 10px; }
.panel-a { width: min(470px, 76vw); left: 8%; top: 37%; border-radius: 34px 76px 30px 48px; transform: rotate(7deg); }
.panel-b { width: 310px; height: 360px; right: 12%; top: 30%; border-radius: 64px 34px 80px 36px; transform: rotate(-9deg); }
.panel-c { left: 41%; bottom: 12%; display: grid; gap: 9px; transform: rotate(14deg); }
.sticker-stack b { display: block; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--garage); font-family: "Fredoka"; font-size: 24px; text-transform: uppercase; background: var(--yellow); color: var(--garage); box-shadow: 0 7px 0 rgba(0,0,0,.24); }
.sticker-stack b:nth-child(2) { background: var(--cyan); transform: translateX(-24px) rotate(-5deg); }
.sticker-stack b:nth-child(3) { background: var(--pink); transform: translateX(18px) rotate(4deg); }

.porthole { width: 205px; height: 205px; margin: 6px auto 22px; border-radius: 50%; border: 11px solid var(--steel); background: radial-gradient(circle at 38% 30%, rgba(245,247,250,.82), transparent 14%), linear-gradient(145deg, rgba(0,214,255,.8), rgba(39,245,154,.55), rgba(35,39,51,.28)); box-shadow: inset 0 0 0 8px var(--chrome), 0 15px 0 rgba(0,0,0,.22); position: relative; overflow: hidden; }
.mini-fish { position: absolute; left: 26px; top: 86px; width: 68px; height: 28px; border-radius: 60%; background: var(--orange); box-shadow: 0 0 0 3px var(--chrome); animation: miniSwim 4s ease-in-out infinite; }
.mini-fish::after { content: ""; position: absolute; right: -23px; top: 2px; border-left: 28px solid var(--pink); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.mini-fish.two { top: 128px; left: 86px; background: var(--yellow); animation-delay: -1.4s; transform: scale(.75); }
@keyframes miniSwim { 50% { transform: translateX(70px) translateY(-20px); } }

.checker-ribbon { position: absolute; left: -5%; top: 25%; width: 58vw; height: 70px; transform: rotate(-19deg); background: repeating-conic-gradient(var(--chrome) 0 25%, var(--garage) 0 50%) 0 / 38px 38px; opacity: .78; border: 3px solid var(--chrome); box-shadow: 0 16px 0 rgba(0,0,0,.18); }
.gauge-window { position: absolute; right: 32%; bottom: 18%; width: 180px; height: 180px; border-radius: 50%; border: 10px solid var(--chrome); background: radial-gradient(circle, var(--garage) 0 45%, var(--yellow) 46% 50%, var(--steel) 51%); box-shadow: 0 20px 0 rgba(0,0,0,.24), inset 0 0 30px rgba(0,214,255,.5); }
.gauge-window em { position: absolute; bottom: 38px; left: 0; right: 0; text-align: center; color: var(--chrome); font-family: "Fredoka"; font-style: normal; }

.torque-altar { width: min(620px, 86vw); height: min(620px, 86vw); border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,228,94,.7) 0 12%, rgba(255,92,207,.28) 14% 28%, rgba(0,214,255,.22) 30% 48%, transparent 50%); border: 3px dashed rgba(245,247,250,.7); box-shadow: inset 0 0 50px rgba(245,247,250,.25); }
.torque-wrench { width: 72%; height: 70px; border-radius: 999px; background: var(--shine); border: 4px solid var(--chrome); transform: rotate(-34deg); box-shadow: 0 24px 0 rgba(0,0,0,.22), 0 0 50px rgba(255,228,94,.62); position: relative; }
.torque-wrench::before, .torque-wrench::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); border: 4px solid var(--chrome); background: var(--cyan); }
.torque-wrench::before { left: -38px; width: 92px; height: 92px; border-radius: 50%; }
.torque-wrench::after { right: -44px; width: 96px; height: 48px; border-radius: 40px; background: var(--pink); }
.orbit { position: absolute; inset: 9%; border-radius: 50%; animation: orbit 12s linear infinite; }
.orbit-two { inset: 22%; animation-duration: 8s; animation-direction: reverse; }
.orbit span { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--shine); border: 3px solid var(--chrome); color: var(--garage); font-family: "Fredoka"; font-weight: 800; box-shadow: 0 8px 0 rgba(0,0,0,.22); }
.orbit span:nth-child(1) { left: 50%; top: -20px; }
.orbit span:nth-child(2) { right: -10px; top: 58%; }
.orbit span:nth-child(3) { left: 4%; bottom: 8%; }
@keyframes orbit { to { transform: rotate(360deg); } }
.note-strip { position: absolute; left: 7%; bottom: 12%; width: min(420px, 80vw); padding: 24px; border-radius: 36px 30px 68px 28px; transform: rotate(5deg); }
.diagnostic-lights { position: absolute; right: 9%; bottom: 17%; display: flex; gap: 16px; transform: rotate(-12deg); }
.diagnostic-lights i { width: 35px; height: 35px; border-radius: 50%; display: block; background: var(--green); box-shadow: 0 0 26px currentColor, 0 8px 0 rgba(0,0,0,.24); animation: blink 1.3s steps(2) infinite; }
.diagnostic-lights i:nth-child(2) { background: var(--pink); animation-delay: .15s; }.diagnostic-lights i:nth-child(3) { background: var(--cyan); animation-delay: .3s; }.diagnostic-lights i:nth-child(4) { background: var(--yellow); animation-delay: .45s; }.diagnostic-lights i:nth-child(5) { background: var(--orange); animation-delay: .6s; }
@keyframes blink { 50% { opacity: .28; transform: translateY(8px); } }

.coral-field { position: absolute; inset: 16% 5% 0; }
.coral { position: absolute; bottom: 0; width: 22px; height: var(--h, 280px); border-radius: 999px 999px 0 0; background: linear-gradient(var(--pink), var(--orange)); box-shadow: 0 0 0 4px rgba(245,247,250,.38), 0 0 28px rgba(255,92,207,.6); transform-origin: bottom; }
.coral::before, .coral::after { content: ""; position: absolute; bottom: 36%; width: 18px; height: 110px; border-radius: 999px 999px 0 0; background: linear-gradient(var(--cyan), var(--green)); transform-origin: bottom; }
.coral::before { left: -36px; transform: rotate(-38deg); }.coral::after { right: -36px; transform: rotate(38deg); }
.c1 { left: 9%; --h: 260px; transform: rotate(-7deg); }.c2 { left: 31%; --h: 390px; background: linear-gradient(var(--yellow), var(--green)); transform: rotate(6deg); }.c3 { right: 27%; --h: 320px; transform: rotate(-4deg); }.c4 { right: 8%; --h: 430px; background: linear-gradient(var(--cyan), var(--pink)); transform: rotate(8deg); }
.hose { position: absolute; bottom: 20%; width: 260px; height: 115px; border: 15px solid var(--steel); border-top-color: transparent; border-left-color: var(--cyan); border-radius: 50%; transform: rotate(var(--r)); filter: drop-shadow(0 14px 0 rgba(0,0,0,.2)); }
.h1 { left: 15%; --r: 12deg; }.h2 { right: 20%; bottom: 34%; --r: -26deg; }.h3 { left: 46%; bottom: 12%; --r: 42deg; }
.final-badge { position: relative; z-index: 3; width: min(760px, 88vw); padding: clamp(26px, 5vw, 58px); border-radius: 86px 36px 72px 34px; transform: rotate(-3deg); }
.final-badge h2 { color: var(--garage); font-size: clamp(38px, 7vw, 86px); margin-bottom: 24px; }
.key-button { display: inline-block; color: var(--garage); text-decoration: none; background: linear-gradient(135deg, var(--pink), var(--yellow)); border: 3px solid var(--chrome); border-radius: 24px 24px 46px 46px; padding: 17px 24px; box-shadow: 0 13px 0 rgba(0,0,0,.26), inset 0 4px 0 rgba(255,255,255,.55); transform: rotate(3deg); }

.drift-card, .rotate-on-scroll, .torque-altar, .coral { transition: transform .18s linear; }

@media (max-width: 780px) {
  .top-dock { position: absolute; flex-direction: column; }
  .nav-stickers { justify-content: flex-start; }
  .nav-stickers a { font-size: 10px; padding: 8px 10px; }
  .hero-plate { transform: rotate(0deg); }
  .floating-tool { opacity: .65; }
  .panel-a, .panel-b, .panel-c, .gauge-window, .note-strip, .diagnostic-lights { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 14px auto; }
  .scene-islands, .scene-tuneup { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .scene-title { position: relative; left: auto; right: auto; top: auto; text-align: left; align-self: flex-start; }
  .panel-b { height: auto; }
  .torque-altar { width: 82vw; height: 82vw; }
  .coral-field { inset: 26% 0 0; opacity: .72; }
}