:root {
  --ink: #071013;
  --cream: #FFF4D8;
  --coral: #FF4F2E;
  --cyan: #00B8C8;
  --banana: #FFD23F;
  --kelp: #2E7D4F;
  --violet: #6C3BFF;
  --display: "Fraunces", serif;
  --body: "Alegreya Sans", sans-serif;
  --accent: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .16;
  background-image: radial-gradient(var(--ink) .7px, transparent .9px), radial-gradient(var(--cream) .6px, transparent .8px);
  background-size: 19px 17px, 29px 31px;
  mix-blend-mode: multiply;
}

.chapter-fobs {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 30;
  display: flex;
  gap: 10px;
}

.fob {
  width: 46px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 18px 18px 20px 6px;
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  font: 900 12px/29px var(--accent);
  text-align: center;
  transition: transform .25s, background .25s;
}

.fob.is-active, .fob:hover { background: var(--banana); transform: translateY(-4px) rotate(-4deg); }

.tank {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-bottom: 8px solid var(--ink);
  isolation: isolate;
}

.reef-back, .fish-mid, .poster-front { position: absolute; inset: 0; will-change: transform; }
.reef-back { z-index: 1; }
.fish-mid { z-index: 2; pointer-events: none; }
.poster-front { z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 9vw; }

.tank--lobby {
  background:
    radial-gradient(circle at 18% 24%, var(--banana) 0 8%, transparent 22%),
    radial-gradient(circle at 80% 18%, var(--violet) 0 9%, transparent 25%),
    linear-gradient(135deg, var(--cyan), #75e5dc 45%, var(--cream));
}

.tank--reef { background: linear-gradient(115deg, var(--cream) 0 47%, var(--cyan) 47% 72%, var(--banana) 72%); }
.tank--lagoon { color: var(--cream); background: radial-gradient(circle at 70% 30%, var(--coral), transparent 20%), linear-gradient(145deg, var(--violet), var(--ink)); }
.tank--cabana { color: var(--cream); background: linear-gradient(90deg, var(--kelp) 0 54%, var(--cyan) 54%); }
.tank--night { color: var(--cream); background: var(--ink); }

.mesh {
  position: absolute;
  border-radius: 45% 55% 60% 40%;
  filter: blur(1px);
  animation: currentDrift 14s ease-in-out infinite alternate;
}

.mesh--one { width: 55vw; height: 45vh; left: -10vw; bottom: 4vh; background: radial-gradient(circle at 30% 30%, var(--coral), transparent 35%), radial-gradient(circle at 80% 55%, var(--violet), transparent 40%), var(--banana); opacity: .72; }
.mesh--two { width: 38vw; height: 38vw; right: -8vw; top: 16vh; background: radial-gradient(circle at 50% 50%, var(--cyan), transparent 45%), var(--violet); opacity: .55; animation-delay: -4s; }
.mesh--error { width: 80vw; height: 70vh; left: 10vw; top: 8vh; background: radial-gradient(circle at 20% 40%, var(--coral), transparent 30%), radial-gradient(circle at 80% 50%, var(--banana), transparent 25%), var(--violet); opacity: .55; }

.kidney, .pool-oval {
  position: absolute;
  border: 5px solid var(--ink);
  border-radius: 55% 45% 62% 38% / 42% 60% 40% 58%;
  background: rgba(255, 244, 216, .36);
}
.kidney--big { width: 58vw; height: 42vh; right: 8vw; bottom: 9vh; transform: rotate(-11deg); }
.pool-oval { width: 62vw; height: 42vh; left: -10vw; top: 16vh; background: var(--banana); opacity: .9; }

.tile-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(7,16,19,.16) 2px, transparent 2px), linear-gradient(90deg, rgba(7,16,19,.16) 2px, transparent 2px);
  background-size: 58px 58px;
  transform: rotate(-5deg) scale(1.08);
}
.tile-grid--cream { opacity: .25; background-image: linear-gradient(rgba(255,244,216,.45) 2px, transparent 2px), linear-gradient(90deg, rgba(255,244,216,.45) 2px, transparent 2px); }

.eyebrow, .boomerang-label, .warning-tag, .feed-tag, .instruction-card, .room-number, .bell-button {
  font-family: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.eyebrow { font-size: clamp(.76rem, 1.4vw, 1.1rem); margin: 0 0 18px; }

.motel-title, h2 {
  font-family: var(--display);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.06em;
  margin: 0;
  text-shadow: 5px 5px 0 var(--cream), 10px 10px 0 var(--ink);
}

.motel-title { font-size: clamp(5.3rem, 18vw, 18.5rem); max-width: 92vw; color: var(--banana); -webkit-text-stroke: 4px var(--ink); }
h2 { font-size: clamp(4rem, 11vw, 13rem); }

.intro-copy, .error-copy, .night-front p, .cabana-copy p, .route-plaque p {
  max-width: 690px;
  font-size: clamp(1.3rem, 2.4vw, 2.25rem);
  line-height: 1.02;
  font-weight: 700;
}

.sign-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 28px 0; }
.boomerang-label { display: inline-block; padding: 13px 22px; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 100px 14px 100px 14px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-2deg); }
.feed-tag, .bell-button { display: inline-block; width: max-content; padding: 16px 24px; background: var(--coral); color: var(--cream); border: 4px solid var(--ink); border-radius: 9px 30px 30px 9px; box-shadow: 7px 7px 0 var(--ink); transform-origin: top center; animation: tagSwing 3s ease-in-out infinite; }
.feed-tag--night { background: var(--cyan); color: var(--ink); }
.bell-button { cursor: pointer; font-size: 1rem; }

.fish {
  position: absolute;
  width: 110px;
  height: 54px;
  border: 4px solid var(--ink);
  border-radius: 62% 42% 48% 54%;
  background: var(--cyan);
  box-shadow: inset -18px -8px 0 rgba(255,255,255,.25), 6px 6px 0 rgba(7,16,19,.22);
}
.fish::before { content: ""; position: absolute; right: -34px; top: 9px; border-left: 38px solid var(--ink); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.fish::after { content: ""; position: absolute; right: -26px; top: 14px; border-left: 28px solid currentColor; border-top: 13px solid transparent; border-bottom: 13px solid transparent; color: inherit; }
.fish i { position: absolute; left: 18px; top: 15px; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.fish i::after { content: ""; position: absolute; left: 38px; top: 28px; width: 34px; height: 22px; border: 4px solid var(--ink); border-top: 0; border-radius: 0 0 30px 30px; background: rgba(255,244,216,.35); }
.fish--small { transform: scale(.65); }
.fish--cyan { background: var(--cyan); color: var(--banana); }
.fish--coral { background: var(--coral); color: var(--banana); }
.fish--yellow { background: var(--banana); color: var(--coral); }
.fish--violet { background: var(--violet); color: var(--cyan); }
.fish--green { background: var(--kelp); color: var(--banana); }

.fish--loop { left: -150px; top: 24vh; animation: swimLoop var(--fish-speed) linear infinite; }
.fish--panic { right: -180px; top: 56vh; animation: panicSwim 9s cubic-bezier(.7,-.2,.3,1.2) infinite; }
.fish--backwards { right: -130px; top: 32vh; animation: backwardsSwim 24s linear infinite; }
.fish--lost { left: 6vw; top: 58vh; animation: lostRoute 13s ease-in-out infinite; }
.fish--wise { left: -140px; top: 42vh; animation: wiseSwim var(--fish-speed) linear infinite; }

.cursor { position: absolute; color: var(--cream); background: var(--ink); padding: 8px 10px; border-radius: 0 18px 18px; font: 900 12px var(--accent); text-transform: uppercase; animation: cursorJitter .35s steps(2) infinite; }
.cursor--one { left: 64vw; top: 24vh; }
.cursor--two { left: 18vw; top: 70vh; }

.split-front { flex-direction: row; align-items: center; justify-content: space-between; gap: 4vw; }
.route-plaque { width: min(650px, 52vw); padding: 36px; background: var(--cream); border: 6px solid var(--ink); border-radius: 42px 12px 70px 18px; box-shadow: 12px 12px 0 var(--ink); }
.room-number { display: inline-grid; place-items: center; width: 74px; height: 74px; background: var(--banana); border: 4px solid var(--ink); border-radius: 50%; }
.route-plaque h2 { color: var(--coral); font-size: clamp(4rem, 8vw, 9rem); text-shadow: 4px 4px 0 var(--banana), 8px 8px 0 var(--ink); margin: 18px 0; }
.instruction-stack { display: grid; gap: 22px; transform: rotate(4deg); }
.instruction-card { min-width: 260px; padding: 22px; background: var(--banana); border: 5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); font-size: 1.2rem; }
.instruction-card strong { color: var(--coral); }
.card--tilt { transform: translateX(-48px) rotate(-8deg); background: var(--cyan); }

.reef-shape { position: absolute; bottom: -8vh; width: 34vw; height: 48vh; background: var(--kelp); border: 5px solid var(--ink); border-radius: 55% 45% 0 0; opacity: .86; }
.reef-shape--left { left: -5vw; }
.reef-shape--right { right: 7vw; transform: scaleX(-1) rotate(6deg); }
.speckles { position: absolute; inset: 0; background-image: radial-gradient(var(--coral) 2px, transparent 3px), radial-gradient(var(--ink) 1px, transparent 2px); background-size: 37px 41px, 23px 29px; opacity: .23; }
.dotted-path { position: absolute; left: 18vw; top: 40vh; width: 52vw; height: 22vh; border-top: 9px dotted var(--ink); border-radius: 50%; transform: rotate(-13deg); }

.error-front { align-items: flex-start; }
.warning-tag { background: var(--banana); color: var(--ink); padding: 14px 20px; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-5deg); margin-bottom: 20px; }
.tank--lagoon h2 { color: var(--cream); -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--coral), 12px 12px 0 var(--ink); }
.alert-halo { position: absolute; inset: 15vh 12vw; border: 7px solid var(--coral); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,79,46,.12), inset 0 0 80px rgba(255,79,46,.35); animation: alertPulse 1.4s ease-in-out infinite; }
.starburst { position: absolute; right: 15vw; top: 15vh; width: 150px; height: 150px; display: grid; place-items: center; color: var(--ink); background: var(--banana); clip-path: polygon(50% 0,60% 34%,98% 20%,70% 50%,98% 80%,60% 66%,50% 100%,40% 66%,2% 80%,30% 50%,2% 20%,40% 34%); font: 900 5rem var(--accent); }
.bubble-trail { position: absolute; width: 260px; height: 160px; right: 22vw; bottom: 12vh; background: radial-gradient(circle at 15% 70%, var(--cream) 0 7px, transparent 8px), radial-gradient(circle at 45% 40%, var(--cream) 0 10px, transparent 11px), radial-gradient(circle at 82% 18%, var(--cream) 0 6px, transparent 7px); animation: bubbleRise 2.8s linear infinite; }

.cabana-front { flex-direction: row; align-items: center; justify-content: space-around; gap: 5vw; }
.dial-board { display: flex; gap: 22px; padding: 34px; background: var(--cream); border: 6px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); transform: rotate(-3deg); }
.dial { position: relative; width: 128px; height: 128px; border: 6px solid var(--ink); border-radius: 50%; background: var(--banana); }
.dial span { position: absolute; left: 57px; top: 12px; width: 10px; height: 52px; background: var(--coral); border: 3px solid var(--ink); border-radius: 10px; transform-origin: 50% 52px; transition: transform .6s cubic-bezier(.3,1.5,.4,1); }
.dial--two { background: var(--cyan); }
.dial--three { background: var(--violet); }
.cabana-copy { max-width: 620px; }
.cabana-copy h2 { color: var(--banana); text-shadow: 5px 5px 0 var(--ink), 10px 10px 0 var(--coral); }

.night-gradient { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(108,59,255,.75), transparent 28%), radial-gradient(circle at 72% 62%, rgba(0,184,200,.55), transparent 30%), radial-gradient(circle at 50% 85%, rgba(255,79,46,.35), transparent 20%); animation: currentDrift 18s ease-in-out infinite alternate; }
.vector-path { position: absolute; left: 8vw; right: 8vw; height: 36vh; border: 5px solid var(--cyan); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; opacity: .75; }
.vector-path--one { top: 24vh; transform: rotate(-6deg); }
.vector-path--two { top: 42vh; border-color: var(--banana); transform: rotate(8deg) scaleX(.8); }
.night-front { justify-content: flex-end; padding-bottom: 12vh; }
.night-front h2 { color: var(--cyan); text-shadow: 6px 6px 0 var(--violet), 12px 12px 0 var(--ink); }

.is-shaking { animation: shakeError .38s linear 2; }
.is-blinking { filter: drop-shadow(0 0 18px var(--coral)); }

@keyframes currentDrift { from { transform: translate3d(-2vw, -1vh, 0) scale(1); background-position: 0 0; } to { transform: translate3d(3vw, 2vh, 0) scale(1.05); background-position: 80px 50px; } }
@keyframes swimLoop { from { transform: translateX(0) rotate(2deg); } to { transform: translateX(118vw) rotate(2deg); } }
@keyframes panicSwim { 0% { transform: translateX(0) translateY(0) rotate(180deg); } 45% { transform: translateX(-62vw) translateY(-12vh) rotate(190deg); } 48%, 54% { transform: translateX(-64vw) translateY(-12vh) rotate(180deg); } 100% { transform: translateX(-125vw) translateY(8vh) rotate(174deg); } }
@keyframes backwardsSwim { from { transform: translateX(0) scaleX(-1); } to { transform: translateX(-120vw) scaleX(-1); } }
@keyframes lostRoute { 0%,100% { transform: translate(0,0) rotate(0); } 30% { transform: translate(36vw,-18vh) rotate(16deg); } 58% { transform: translate(50vw,8vh) rotate(-22deg); } 80% { transform: translate(22vw,18vh) rotate(10deg); } }
@keyframes wiseSwim { from { transform: translateX(0) translateY(0); } to { transform: translateX(115vw) translateY(-8vh); } }
@keyframes cursorJitter { from { transform: translate(0,0); } to { transform: translate(4px,-3px); } }
@keyframes tagSwing { 0%,100% { transform: rotate(2deg); } 50% { transform: rotate(-3deg); } }
@keyframes alertPulse { 0%,100% { transform: scale(.96); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes bubbleRise { from { transform: translateY(20px); opacity: .25; } to { transform: translateY(-90px); opacity: .9; } }
@keyframes shakeError { 0%,100% { transform: translateX(0); } 20% { transform: translateX(calc(var(--shake-distance) * -1)); } 40% { transform: translateX(var(--shake-distance)); } 60% { transform: translateX(calc(var(--shake-distance) * -.55)); } 80% { transform: translateX(calc(var(--shake-distance) * .55)); } }

@media (max-width: 840px) {
  .chapter-fobs { right: 10px; top: 10px; gap: 5px; }
  .fob { width: 38px; height: 30px; line-height: 25px; }
  .poster-front { padding: 96px 24px 48px; }
  .split-front, .cabana-front { flex-direction: column; align-items: flex-start; }
  .route-plaque { width: 100%; padding: 24px; }
  .instruction-stack { transform: none; }
  .dial-board { transform: scale(.75) rotate(-3deg); transform-origin: left top; }
  .motel-title { font-size: clamp(4.1rem, 25vw, 7.6rem); -webkit-text-stroke: 2px var(--ink); }
  h2 { font-size: clamp(3.3rem, 18vw, 6rem); }
}