:root {
  --deep: #07132D;
  --cyan: #39E6D3;
  --violet: #8C5CFF;
  --coral: #FF6B7A;
  --pearl: #F7F0E3;
  --gold: #F6C45B;
  --ink: #123C69;
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Zen Kaku Gothic New", Inter, system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--pearl);
  background: var(--deep);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

body::before {
  background:
    radial-gradient(circle at 12% 22%, rgba(57, 230, 211, .12), transparent 23rem),
    radial-gradient(circle at 82% 78%, rgba(140, 92, 255, .15), transparent 25rem),
    linear-gradient(120deg, rgba(7, 19, 45, .35), rgba(18, 60, 105, .2), rgba(7, 19, 45, .5));
}

body::after {
  opacity: .14;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(247, 240, 227, .7) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(247, 240, 227, .5) 0 1px, transparent 1px);
  background-size: 43px 47px, 71px 67px;
  mix-blend-mode: soft-light;
}

.watercolor-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--deep), #061029 47%, var(--ink));
}

.wash {
  position: absolute;
  width: 70vw;
  height: 42vh;
  border-radius: 47% 53% 61% 39%;
  filter: blur(42px);
  opacity: .32;
  mix-blend-mode: screen;
  animation: drift 18s ease-in-out infinite alternate;
}

.wash-cyan { left: -18vw; top: 9vh; background: rgba(57, 230, 211, .55); }
.wash-violet { right: -16vw; top: 33vh; background: rgba(140, 92, 255, .58); animation-duration: 22s; }
.wash-coral { left: 35vw; bottom: -12vh; background: rgba(255, 107, 122, .28); animation-duration: 26s; }
.grain { position: absolute; inset: 0; background: repeating-linear-gradient(9deg, rgba(247,240,227,.025) 0 1px, transparent 1px 7px); }

@keyframes drift { to { transform: translate3d(7vw, -4vh, 0) rotate(9deg) scale(1.08); } }

.buoy-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  z-index: 20;
}

.buoy {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(247, 240, 227, .25);
  border: 1px solid rgba(247, 240, 227, .4);
  text-decoration: none;
  position: relative;
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.buoy span {
  position: absolute;
  right: 1.3rem;
  top: -.38rem;
  color: rgba(247, 240, 227, .55);
  font-family: var(--display);
  letter-spacing: .18em;
  font-size: .8rem;
  opacity: 0;
  transition: opacity .35s ease;
}

.buoy.active { background: var(--gold); box-shadow: 0 0 24px rgba(246, 196, 91, .8); transform: scale(1.2); }
.buoy.active span, .buoy:hover span { opacity: 1; }

.lap {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  z-index: 2;
}

.lap::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(247, 240, 227, .04);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}

.lap-kana, .lap-number {
  font-family: var(--display);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(57, 230, 211, .68);
}

.lap-start { display: grid; place-items: center; }
.fogbank { position: absolute; width: 82vw; height: 20vh; top: 49%; left: 8vw; background: linear-gradient(90deg, transparent, rgba(247,240,227,.08), rgba(57,230,211,.11), transparent); filter: blur(18px); transform: rotate(-3deg); }
.lap-kana { position: absolute; top: 18%; left: 12%; font-size: .82rem; }
.wordmark {
  margin: 0;
  transform: translateY(10vh);
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 19rem);
  line-height: .76;
  letter-spacing: .045em;
  color: var(--pearl);
  text-shadow: 0 0 44px rgba(57, 230, 211, .18), 0 28px 70px rgba(0,0,0,.45);
}

.start-stripe {
  position: absolute;
  top: 57%;
  left: -30vw;
  width: 36vw;
  height: 8px;
  background: linear-gradient(90deg, transparent, var(--coral), rgba(255,107,122,.45), transparent);
  border-radius: 999px;
  filter: blur(.2px) drop-shadow(0 0 18px rgba(255,107,122,.5));
  animation: stripeRun 4.4s cubic-bezier(.44,0,.18,1) infinite;
}

@keyframes stripeRun { 0%, 18% { transform: translateX(0) rotate(-2deg); opacity: 0; } 30%, 74% { opacity: 1; } 100% { transform: translateX(160vw) rotate(-2deg); opacity: 0; } }

.whisper { font-family: var(--serif); font-style: italic; color: rgba(247,240,227,.76); font-size: clamp(1.05rem, 1.7vw, 1.7rem); }
.start-note { position: absolute; right: 13%; bottom: 14%; }

.route { position: absolute; fill: none; stroke: rgba(57,230,211,.65); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 14px rgba(57,230,211,.45)); }
.route-start { width: 58vw; left: 7vw; bottom: 10vh; opacity: .45; }
.route.drawn path { animation: routeDraw 2.8s ease forwards; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }

.lap-lantern { min-height: 112vh; }
.bend-ribbon { position: absolute; width: 105vw; height: 30vh; left: -9vw; top: 33vh; background: linear-gradient(100deg, transparent 4%, rgba(140,92,255,.17), rgba(57,230,211,.3), rgba(255,107,122,.12), transparent 90%); border-radius: 50%; transform: rotate(-16deg); filter: blur(2px); }
.bend-ribbon::before { content:""; position:absolute; inset: 22% 4%; border-top: 2px solid rgba(247,240,227,.22); border-radius: 50%; filter: blur(1px); }
.lanterns span { position:absolute; left:var(--x); top:var(--y); width: clamp(12px, 2vw, 30px); height: clamp(12px, 2vw, 30px); border-radius:50%; background: radial-gradient(circle, var(--gold), rgba(246,196,91,.35) 45%, transparent 72%); filter: blur(1px); animation: pulse 3.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes pulse { 50% { transform: scale(1.7); opacity: .42; } }
.caption-cluster { position: absolute; max-width: 27rem; }
.left-edge { left: 8%; top: 18%; }
.right-edge { right: 10%; top: 18%; text-align: right; }
.caption-cluster h2 { margin: .4rem 0 0; font-family: var(--display); font-size: clamp(4rem, 10vw, 10rem); line-height: .82; letter-spacing: .08em; font-weight: 400; }
.caption-cluster p { margin: 1.1rem 0 0; color: rgba(247,240,227,.75); font-size: 1rem; letter-spacing: .18em; text-transform: lowercase; }
.bend-note { position: absolute; left: 52%; bottom: 16%; width: 23rem; }
.route-bend { width: 58vw; right: 4vw; bottom: 11vh; opacity: .55; stroke: rgba(246,196,91,.55); }

.lap-fishline { min-height: 108vh; }
.fish-field { position: absolute; inset: 0; }
.fish { position: absolute; width: 18vw; height: 5vw; opacity: .72; filter: drop-shadow(0 0 22px rgba(57,230,211,.4)); animation: dart 7s cubic-bezier(.2,.65,.18,1) infinite; }
.fish::before { content:""; position:absolute; inset: 10% 20% 10% 4%; border-radius: 55% 45% 50% 50%; background: linear-gradient(90deg, rgba(57,230,211,.05), rgba(57,230,211,.75), rgba(247,240,227,.2)); clip-path: polygon(0 50%, 18% 14%, 76% 26%, 100% 50%, 76% 74%, 18% 86%); }
.fish::after { content:""; position:absolute; right: 2%; top: 0; width: 24%; height: 100%; background: rgba(255,107,122,.62); clip-path: polygon(0 50%, 100% 0, 72% 50%, 100% 100%); }
.fish i { position:absolute; left:-58%; top: 42%; width: 72%; height: 2px; background: linear-gradient(90deg, transparent, rgba(57,230,211,.75)); }
.fish-a { left: -24vw; top: 44%; animation-delay: .2s; }
.fish-b { left: -28vw; top: 58%; transform: scale(.62); animation-delay: 2.1s; }
.fish-c { left: -30vw; top: 34%; transform: scale(.42); animation-delay: 4s; }
@keyframes dart { 0%, 24% { translate: 0 0; opacity: 0; } 32% { opacity: .8; } 62%, 100% { translate: 132vw -4vh; opacity: 0; } }
.speed-streaks span { position:absolute; height: 1px; width: 34vw; background: linear-gradient(90deg, transparent, rgba(247,240,227,.35), transparent); left: 18%; transform: rotate(-2deg); opacity:.35; }
.speed-streaks span:nth-child(1) { top: 41%; } .speed-streaks span:nth-child(2) { top: 49%; left: 30%; } .speed-streaks span:nth-child(3) { top: 59%; left: 9%; } .speed-streaks span:nth-child(4) { top: 66%; left: 42%; }
.straight-note { position:absolute; left: 9%; bottom: 17%; width: 28rem; }

.lap-apex { min-height: 122vh; perspective: 1200px; }
.margin-script { position:absolute; left: 7%; top: 12%; font-family: var(--serif); font-style: italic; color: rgba(247,240,227,.5); font-size: 1.35rem; }
.slab-field { position:absolute; inset: 16% 8%; transform-style: preserve-3d; }
.paper-slab { position:absolute; width: min(38vw, 560px); min-height: 36vh; padding: 2.1rem; color: var(--deep); background: linear-gradient(135deg, rgba(247,240,227,.94), rgba(247,240,227,.68)); border: 1px solid rgba(247,240,227,.66); box-shadow: 0 42px 90px rgba(0,0,0,.32), inset 0 0 55px rgba(57,230,211,.12); transform-style: preserve-3d; transition: transform .18s ease-out; }
.paper-slab::before { content:""; position:absolute; inset: -1px; background: radial-gradient(circle at 18% 14%, rgba(57,230,211,.28), transparent 34%), radial-gradient(circle at 82% 90%, rgba(140,92,255,.22), transparent 37%); mix-blend-mode: multiply; pointer-events:none; }
.paper-slab h2 { margin: 2rem 0 1rem; font-family: var(--display); font-size: clamp(2.8rem, 5.6vw, 6.8rem); line-height: .85; letter-spacing: .06em; font-weight: 400; color: var(--ink); }
.paper-slab .lap-number { color: var(--coral); }
.paper-slab .whisper { color: rgba(7,19,45,.72); }
.slab-one { left: 2%; top: 13%; transform: rotateZ(-5deg) rotateY(9deg); }
.slab-two { right: 14%; top: 0; transform: rotateZ(7deg) rotateY(-11deg); }
.slab-three { left: 34%; top: 43%; transform: rotateZ(-2deg) rotateX(8deg); }
.apex-dots { position:absolute; right: 12%; bottom: 13%; display:flex; gap:1.4rem; transform: rotate(-14deg); }
.apex-dots span { width: 16px; height: 16px; border-radius:50%; background: var(--coral); box-shadow:0 0 28px rgba(255,107,122,.8); opacity:.76; }

.lap-finish { display: grid; place-items: center; min-height: 108vh; }
.finish-brushes { position:absolute; width: 54vw; height: 24vh; top: 36%; left: 23vw; filter: blur(.3px); }
.finish-brushes span { position:absolute; width: 100%; height: 9px; left:0; background: linear-gradient(90deg, transparent, rgba(247,240,227,.83), transparent); border-radius: 999px; animation: dissolve 5s ease-in-out infinite alternate; }
.finish-brushes span:nth-child(1){ top: 10%; transform: rotate(-3deg); } .finish-brushes span:nth-child(2){ top: 34%; width: 74%; left: 12%; transform: rotate(2deg); animation-delay:.5s; } .finish-brushes span:nth-child(3){ top: 59%; width: 82%; left: 6%; transform: rotate(-1deg); animation-delay:1s; } .finish-brushes span:nth-child(4){ top: 82%; width: 46%; left: 28%; transform: rotate(4deg); animation-delay:1.5s; }
@keyframes dissolve { 50% { opacity: .34; filter: blur(6px); } }
.finish-copy { text-align:center; transform: translateY(10vh); }
.finish-copy h2 { margin: 1rem 0 0; font-family: var(--display); font-size: clamp(5rem, 15vw, 16rem); letter-spacing: .07em; line-height: .75; font-weight: 400; }
.thin-reflection { position:absolute; bottom: 18%; width: 48vw; height: 2px; background: linear-gradient(90deg, transparent, rgba(57,230,211,.6), rgba(140,92,255,.45), transparent); box-shadow: 0 0 24px rgba(57,230,211,.32); }

.lap.in-view .caption-cluster,
.lap.in-view .whisper,
.lap.in-view .paper-slab,
.lap.in-view .finish-copy { animation: bloomIn 1.2s ease both; }
@keyframes bloomIn { from { opacity: 0; filter: blur(14px); transform: translateY(18px) scale(.98); } to { opacity: 1; filter: blur(0); } }

@media (max-width: 760px) {
  .buoy-nav { right: 1rem; }
  .wordmark { font-size: 23vw; }
  .caption-cluster, .left-edge, .right-edge { left: 8%; right: auto; text-align: left; max-width: 78vw; }
  .bend-note, .straight-note, .start-note { left: 8%; right: auto; width: 74vw; bottom: 11%; }
  .paper-slab { width: 76vw; min-height: 26vh; }
  .slab-one { left: 0; top: 4%; } .slab-two { right: 0; top: 33%; } .slab-three { left: 7%; top: 62%; }
  .finish-brushes { width: 78vw; left: 11vw; }
}