:root {
  /* DESIGN typography scan tokens: Inter Tight** Tight* from Google Fonts in 400/600 weights. Interprets `.in` as an inward journey through a pressure-formed liquid puzzle machine. */
  --cyan: #00D6FF;
  --violet: #6B3CFF;
  --foam: #F4FBFF;
  --plum: #261044;
  --magenta: #FF3EB5;
  --lime: #C8FF3D;
  --ink: #08111F;
  --coral: #FF765C;
  --display: "Bebas Neue", Impact, sans-serif;
  --condensed: "Barlow Condensed", Arial Narrow, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--foam);
  background: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

.inlet-noise,
.gradient-flood {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.inlet-noise {
  z-index: 30;
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(244,251,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 48%, rgba(200,255,61,.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 42% 76%, rgba(0,214,255,.42) 0 1px, transparent 1.4px);
  background-size: 43px 51px, 67px 59px, 37px 45px;
}

.gradient-flood {
  z-index: 0;
  opacity: .78;
  background:
    radial-gradient(circle at var(--flood-x, 12%) var(--flood-y, 15%), rgba(0,214,255,.42), transparent 34rem),
    radial-gradient(circle at calc(var(--flood-x, 12%) + 55%) calc(var(--flood-y, 15%) + 34%), rgba(255,62,181,.34), transparent 32rem);
}

.progress-rail {
  position: fixed;
  right: 28px;
  top: 50%;
  z-index: 40;
  display: grid;
  gap: 18px;
  transform: translateY(-50%) rotate(-12deg);
  padding: 16px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244,251,255,.14), rgba(38,16,68,.42));
  box-shadow: inset 0 0 0 1px rgba(244,251,255,.18), 0 22px 50px rgba(8,17,31,.28);
}

.progress-rail::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--cyan), var(--magenta), var(--lime));
  transform: translateX(-50%);
  opacity: .55;
}

.rail-bead {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 50% 45% 55% 50%;
  background: radial-gradient(circle at 32% 24%, var(--foam), var(--cyan) 55%, var(--violet));
  box-shadow: 0 10px 22px rgba(0,214,255,.24);
  font-family: var(--condensed);
  font-weight: 700;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.rail-bead span { position: relative; z-index: 1; font-size: 15px; }
.rail-bead::after {
  content: attr(data-label);
  position: absolute;
  right: 54px;
  top: 8px;
  color: var(--foam);
  background: rgba(8,17,31,.78);
  border: 1px solid rgba(244,251,255,.16);
  border-radius: 999px;
  padding: 5px 12px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .22s ease, transform .22s ease;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rail-bead:hover,
.rail-bead.active { transform: translateY(-10px) rotate(8deg); box-shadow: 0 22px 35px rgba(200,255,61,.28); background: radial-gradient(circle at 30% 25%, var(--foam), var(--lime)); }
.rail-bead:hover::after { opacity: 1; transform: translateX(0); }

.machine { position: relative; z-index: 1; }
.gate {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 12vh 9vw;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
  margin-top: -7vh;
  opacity: .28;
  transform: translateY(34px);
  filter: saturate(.8) blur(8px);
  transition: opacity .85s ease, transform .85s ease, filter .85s ease;
}
.gate:first-child { margin-top: 0; }
.gate:nth-child(even) { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); }
.gate.visible { opacity: 1; transform: translateY(0); filter: saturate(1) blur(0); }

.intake { background: radial-gradient(circle at 18% 20%, rgba(0,214,255,.28), transparent 34rem), linear-gradient(130deg, var(--ink) 0%, var(--plum) 48%, #121053 100%); }
.split { grid-template-columns: .9fr 1.1fr; background: linear-gradient(128deg, var(--violet), var(--plum) 42%, var(--magenta)); }
.drift { grid-template-columns: 1.1fr .9fr; background: linear-gradient(128deg, #05325a, var(--cyan) 42%, var(--violet)); color: var(--ink); }
.pressure { grid-template-columns: 1.2fr .8fr; background: radial-gradient(circle at 55% 50%, rgba(200,255,61,.28), transparent 20rem), linear-gradient(135deg, var(--plum), var(--ink) 54%, #280d34); }
.click-in { place-items: center; text-align: center; background: linear-gradient(130deg, var(--cyan), var(--violet) 35%, var(--magenta) 66%, var(--coral)); }

.blob-chamber,
.giant-blob,
.diagonal-copy,
.seal-wrap,
.compressor {
  box-shadow: 0 38px 90px rgba(8,17,31,.34), inset 0 0 0 2px rgba(244,251,255,.2);
}

.blob-chamber {
  width: min(980px, 88vw);
  min-height: 650px;
  padding: clamp(42px, 7vw, 92px);
  border-radius: 42% 58% 60% 40% / 48% 38% 62% 52%;
  background:
    radial-gradient(circle at 18% 24%, rgba(244,251,255,.28), transparent 17rem),
    radial-gradient(circle at 72% 62%, rgba(255,62,181,.32), transparent 20rem),
    linear-gradient(140deg, rgba(0,214,255,.82), rgba(107,60,255,.68) 54%, rgba(38,16,68,.92));
  transform: rotate(-3deg);
}

.capsule-label {
  display: inline-block;
  margin: 0 0 24px;
  padding: 10px 18px;
  border-radius: 999px 70% 999px 80%;
  background: rgba(244,251,255,.14);
  color: var(--lime);
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-5deg);
  box-shadow: 0 15px 26px rgba(8,17,31,.18);
  transition: transform .24s ease, box-shadow .24s ease;
}
.buoyant:hover,
.capsule-label:hover { transform: translateY(-10px) rotate(-9deg); box-shadow: 0 24px 35px rgba(200,255,61,.22); }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
h1 {
  max-width: 900px;
  color: var(--foam);
  font-size: clamp(6.5rem, 19vw, 17rem);
  text-shadow: 10px 14px 0 rgba(38,16,68,.35);
  transform: scaleX(.82);
  transform-origin: left center;
}
h2 { font-size: clamp(4rem, 10vw, 9.4rem); }
.microcopy,
.diagonal-copy p,
.seal-wrap p {
  max-width: 610px;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.55;
  font-weight: 600;
}

.letter-current {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.letter-current span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50% 42% 58% 50%;
  background: radial-gradient(circle at 30% 20%, var(--foam), var(--cyan) 62%, var(--violet));
  color: var(--plum);
  font-family: var(--display);
  font-size: 4rem;
  box-shadow: 0 18px 35px rgba(0,214,255,.24);
  animation: letterDive 1.7s cubic-bezier(.2,.8,.2,1) forwards, floatSlab 4s ease-in-out infinite;
}
.letter-current span:nth-child(1) { left: 7%; top: 13%; --tx: 180px; --ty: 210px; animation-delay: .05s, 1.8s; }
.letter-current span:nth-child(2) { right: 20%; top: 8%; --tx: -290px; --ty: 240px; animation-delay: .13s, 2s; }
.letter-current span:nth-child(3) { left: 54%; top: 22%; --tx: -130px; --ty: 120px; animation-delay: .22s, 1.9s; }
.letter-current span:nth-child(4) { right: 6%; top: 43%; --tx: -410px; --ty: -10px; animation-delay: .31s, 2.1s; }
.letter-current span:nth-child(5) { left: 15%; bottom: 14%; --tx: 300px; --ty: -170px; animation-delay: .4s, 2.05s; }
.letter-current span:nth-child(6) { right: 26%; bottom: 6%; --tx: -30px; --ty: -220px; animation-delay: .5s, 1.95s; }
.letter-current span:nth-child(7) { left: 46%; bottom: 14%; --tx: 10px; --ty: -210px; animation-delay: .58s, 2.18s; }
.letter-current span:nth-child(8) { left: 73%; bottom: 22%; --tx: -100px; --ty: -245px; animation-delay: .67s, 2.12s; }
.letter-current span:nth-child(9) { left: 82%; top: 24%; --tx: -140px; --ty: 100px; animation-delay: .76s, 2.22s; }
@keyframes letterDive { to { transform: translate(var(--tx), var(--ty)) scale(.32) rotate(-12deg); opacity: .42; filter: blur(1px); } }
@keyframes floatSlab { 50% { margin-top: -12px; margin-left: 8px; } }

.wave-lock { position: absolute; right: 6vw; bottom: 10vh; width: min(520px, 46vw); fill: var(--lime); filter: drop-shadow(0 26px 28px rgba(8,17,31,.36)); opacity: .9; transform: rotate(-10deg); }
.wave-lock circle { fill: var(--magenta); }
.sluice-lines i { position: absolute; width: 120vw; height: 3px; left: -10vw; background: linear-gradient(90deg, transparent, rgba(244,251,255,.32), transparent); transform: rotate(-12deg); }
.sluice-lines i:nth-child(1){ top: 18%; }.sluice-lines i:nth-child(2){ top: 49%; }.sluice-lines i:nth-child(3){ top: 78%; }

.diagonal-copy {
  position: relative;
  z-index: 3;
  padding: clamp(28px, 5vw, 62px);
  border-radius: 42% 58% 34% 66% / 48% 34% 66% 52%;
  background: rgba(8,17,31,.42);
  backdrop-filter: blur(7px);
  transform: rotate(-7deg);
}
.drift .diagonal-copy { background: rgba(244,251,255,.62); color: var(--ink); }
.right-copy, .pressure-copy { transform: rotate(7deg); }
.left-copy h2, .pressure-copy h2 { color: var(--foam); }
.drift h2 { color: var(--plum); }

.tile-channel {
  position: relative;
  z-index: 4;
  min-height: 560px;
  transform: rotate(-12deg);
}
.wave-tile {
  position: absolute;
  width: clamp(130px, 16vw, 230px);
  height: clamp(92px, 10vw, 150px);
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(4rem, 8vw, 8rem);
  border-radius: 35% 65% 40% 60% / 58% 42% 58% 42%;
  background:
    radial-gradient(circle at 25% 20%, var(--foam), transparent 38%),
    linear-gradient(135deg, var(--cyan), var(--lime));
  box-shadow: 0 24px 44px rgba(8,17,31,.32);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.wave-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%; background: var(--magenta); border-radius: 0 0 48% 52%; clip-path: polygon(0 45%, 14% 8%, 28% 45%, 42% 85%, 56% 45%, 70% 8%, 84% 45%, 100% 84%, 100% 100%, 0 100%); opacity: .85; }
.wave-tile:hover,
.wave-tile.lifted { transform: translateY(-14px) rotate(5deg) scale(1.03); box-shadow: 0 40px 55px rgba(200,255,61,.24); filter: saturate(1.2); }
.wave-tile:nth-child(1){ left: 5%; top: 12%; }.wave-tile:nth-child(2){ left: 31%; top: 27%; }.wave-tile:nth-child(3){ right: 9%; top: 8%; }.wave-tile:nth-child(4){ left: 13%; bottom: 17%; }.wave-tile:nth-child(5){ right: 13%; bottom: 20%; background: linear-gradient(135deg, var(--coral), var(--magenta)); }
.giant-blob { position: absolute; right: -16vw; bottom: -20vh; width: 56vw; height: 64vh; border-radius: 60% 40% 30% 70% / 48% 58% 42% 52%; background: radial-gradient(circle at 30% 24%, rgba(244,251,255,.2), transparent 30%), linear-gradient(135deg, rgba(0,214,255,.55), rgba(255,62,181,.45)); }
.flow-arrow { position: absolute; font-family: var(--display); font-size: 9rem; color: rgba(200,255,61,.5); text-shadow: 0 18px 30px rgba(8,17,31,.2); animation: arrowPulse 2.2s ease-in-out infinite; }
.a-one { left: 45%; top: 12%; }.a-two { left: 12%; bottom: 8%; animation-delay: .8s; }
@keyframes arrowPulse { 50% { transform: translate(22px, 18px); opacity: .42; } }

.ramp-illustration svg { width: min(760px, 82vw); overflow: visible; filter: drop-shadow(0 28px 35px rgba(8,17,31,.24)); }
.ramp-main,
.ramp-second { fill: none; stroke-linecap: round; stroke-width: 64; }
.ramp-main { stroke: url(#none); stroke: var(--plum); opacity: .6; }
.ramp-second { stroke: rgba(244,251,255,.55); stroke-width: 38; }
.buoy-beads circle { fill: var(--lime); stroke: var(--plum); stroke-width: 8; transition: transform .25s ease; transform-origin: center; }
.ramp-illustration:hover .buoy-beads circle { transform: translateY(-12px); }
.floating-fragments i { position: absolute; display: grid; place-items: center; width: 118px; height: 58px; border-radius: 999px 70% 999px 80%; background: rgba(244,251,255,.58); color: var(--plum); font-family: var(--condensed); font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-12deg); box-shadow: 0 18px 25px rgba(8,17,31,.16); transition: transform .24s ease; }
.floating-fragments i:hover { transform: translateY(-12px) rotate(-18deg); }
.floating-fragments i:nth-child(1){ left: 8%; top: 16%; }.floating-fragments i:nth-child(2){ left: 36%; bottom: 12%; }.floating-fragments i:nth-child(3){ right: 11%; top: 18%; }.floating-fragments i:nth-child(4){ right: 32%; bottom: 21%; }

.compressor { position: relative; min-height: 620px; border-radius: 38% 62% 44% 56% / 52% 42% 58% 48%; background: radial-gradient(circle at 50% 48%, rgba(200,255,61,.22), transparent 22rem), rgba(244,251,255,.08); overflow: hidden; }
.wall { position: absolute; top: 6%; bottom: 6%; width: 34%; border-radius: 45% 55% 60% 40%; background: linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow: inset 0 0 0 3px rgba(244,251,255,.18); transition: transform .4s ease; }
.wall-left { left: -7%; }.wall-right { right: -7%; background: linear-gradient(135deg, var(--magenta), var(--coral)); }
.pressure.visible .wall-left { transform: translateX(5vw); }.pressure.visible .wall-right { transform: translateX(-5vw); }
.pressure-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; font-family: var(--display); font-size: clamp(4rem, 8vw, 9rem); transform: rotate(-8deg) scaleX(.86); }
.pressure-word span { padding: 8px 18px; color: var(--ink); background: var(--lime); border-radius: 34% 66% 40% 60%; box-shadow: 0 20px 30px rgba(8,17,31,.28); }
.gauge { position: absolute; right: 9%; bottom: 11%; width: 150px; height: 150px; border-radius: 50%; background: var(--foam); color: var(--ink); box-shadow: 0 20px 35px rgba(8,17,31,.3); }
.gauge::before { content: ""; position: absolute; inset: 18px; border: 10px solid var(--plum); border-bottom-color: var(--lime); border-radius: 50%; }
.gauge b { position: absolute; left: 72px; top: 74px; width: 56px; height: 6px; border-radius: 99px; background: var(--coral); transform-origin: 3px center; transform: rotate(var(--needle, -40deg)); transition: transform .3s ease; }
.gauge em { position: absolute; left: 28px; right: 28px; bottom: 24px; font-family: var(--condensed); font-style: normal; text-transform: uppercase; font-weight: 700; font-size: 15px; }

.final-surge { position: absolute; inset: -12%; background: radial-gradient(circle at 48% 48%, rgba(244,251,255,.3), transparent 18rem), linear-gradient(118deg, transparent 12%, rgba(200,255,61,.3) 12% 21%, transparent 21% 32%, rgba(38,16,68,.32) 32% 43%, transparent 43%); transform: rotate(-7deg); }
.seal-wrap { position: relative; z-index: 2; width: min(900px, 86vw); min-height: 690px; display: grid; justify-items: center; align-content: center; padding: 54px; border-radius: 44% 56% 38% 62% / 58% 42% 58% 42%; background: rgba(8,17,31,.38); backdrop-filter: blur(8px); }
.wave-seal { position: relative; width: min(420px, 72vw); height: 260px; border: 0; cursor: pointer; background: transparent; transition: transform .28s ease, filter .28s ease; }
.wave-seal:hover,
.wave-seal.clicked { transform: translateY(-14px) rotate(-3deg); filter: drop-shadow(0 35px 38px rgba(200,255,61,.22)); }
.wave-seal span { position: absolute; left: 0; right: 0; height: 54%; border-radius: 999px; box-shadow: inset 0 0 0 4px rgba(244,251,255,.22); }
.seal-top { top: 0; background: linear-gradient(90deg, var(--cyan), var(--lime)); clip-path: polygon(0 0, 100% 0, 100% 64%, 88% 86%, 75% 64%, 63% 42%, 50% 64%, 38% 86%, 25% 64%, 13% 42%, 0 64%); }
.seal-bottom { bottom: 0; background: linear-gradient(90deg, var(--magenta), var(--coral)); clip-path: polygon(0 36%, 13% 14%, 25% 36%, 38% 58%, 50% 36%, 63% 14%, 75% 36%, 88% 58%, 100% 36%, 100% 100%, 0 100%); }
.wave-seal b { position: absolute; inset: 78px 128px; display: grid; place-items: center; border-radius: 50%; background: var(--plum); color: var(--foam); font-family: var(--display); font-size: 5rem; font-weight: 400; }
.foam-field i { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: rgba(244,251,255,.62); animation: foamRise 4.5s ease-in-out infinite; }
.foam-field i:nth-child(1){ left: 12%; bottom: 18%; }.foam-field i:nth-child(2){ left: 24%; top: 20%; animation-delay: .6s; }.foam-field i:nth-child(3){ left: 48%; bottom: 8%; animation-delay: 1.1s; }.foam-field i:nth-child(4){ right: 20%; top: 17%; animation-delay: 1.6s; }.foam-field i:nth-child(5){ right: 12%; bottom: 22%; animation-delay: 2s; }.foam-field i:nth-child(6){ left: 68%; top: 56%; animation-delay: 2.5s; }
@keyframes foamRise { 50% { transform: translateY(-24px) scale(1.25); opacity: .42; } }

@media (max-width: 880px) {
  .progress-rail { right: 10px; transform: translateY(-50%) rotate(-8deg) scale(.82); }
  .gate, .split, .drift, .pressure { display: block; padding: 13vh 6vw; }
  .blob-chamber { min-height: 620px; }
  h1 { font-size: clamp(5rem, 28vw, 10rem); }
  h2 { font-size: clamp(3.8rem, 17vw, 7rem); }
  .tile-channel { min-height: 620px; margin-top: 32px; }
  .wave-tile:nth-child(3){ right: 0; top: 37%; }
  .compressor { min-height: 520px; margin-bottom: 34px; }
  .pressure-word { flex-wrap: wrap; padding: 110px 30px; }
  .diagonal-copy, .right-copy, .pressure-copy { transform: rotate(-4deg); }
  .hero-lock { width: 72vw; right: -12vw; bottom: 4vh; }
}