:root {
  --ink-plum: #251339;
  --lime-fizz: #B8FF2C;
  --cream-soda: #FFF3D7;
  --mango-pop: #FFB000;
  --bubblegum-coral: #FF4F9A;
  --taffy-violet: #8D5CFF;
  --pool-cyan: #23D7FF;
  --headline: "Fraunces", serif;
  --label: "Grandstander", cursive;
  --body: "Nunito Sans", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-plum);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 79, 154, .28), transparent 26rem),
    radial-gradient(circle at 82% 22%, rgba(35, 215, 255, .32), transparent 28rem),
    var(--cream-soda);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(37, 19, 57, .17) .7px, transparent .8px),
    radial-gradient(circle, rgba(255, 255, 255, .38) .6px, transparent .7px);
  background-size: 11px 11px, 17px 17px;
  mix-blend-mode: multiply;
}

.zine-spine {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 18px;
  transform: translateX(-50%);
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(37, 19, 57, .18), rgba(255, 243, 215, .7), rgba(37, 19, 57, .15), transparent);
  box-shadow: 0 0 42px rgba(37, 19, 57, .18);
}

.reef-zine { width: 100%; }

.spread {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
  isolation: isolate;
  border-bottom: 5px wavy rgba(37, 19, 57, .2);
}

.page {
  min-height: 100vh;
  padding: clamp(28px, 4vw, 76px);
  position: relative;
  overflow: hidden;
}

.left-page { grid-column: 1 / span 6; }
.right-page { grid-column: 7 / span 6; }

.cover-spread { background: linear-gradient(115deg, var(--cream-soda) 0 50%, rgba(35, 215, 255, .28) 50% 100%); }
.menu-spread { background: linear-gradient(90deg, rgba(255, 176, 0, .18), rgba(255, 79, 154, .15)); }
.parade-spread { background: linear-gradient(120deg, var(--pool-cyan), var(--cream-soda) 48%, rgba(141, 92, 255, .38)); }
.ripple-spread { background: radial-gradient(circle at 28% 50%, rgba(35, 215, 255, .72), transparent 33rem), var(--cream-soda); }
.sunset-spread { background: linear-gradient(160deg, var(--cream-soda), rgba(255, 176, 0, .48), rgba(255, 79, 154, .38)); }

.kicker,
.pull-label,
.side-caption,
.vertical-note,
.label-strip,
.caption-bubble,
.sticker-seal,
.domain-stamp,
.menu-tab span {
  font-family: var(--label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kicker { font-size: clamp(.85rem, 1.3vw, 1.15rem); margin: 0 0 1.3rem; color: var(--taffy-violet); }

.masthead,
.spread-title {
  font-family: var(--headline);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: .84;
  margin: 0;
  color: var(--bubblegum-coral);
  text-shadow:
    0 2px 0 var(--cream-soda),
    0 8px 0 var(--taffy-violet),
    0 22px 34px rgba(37, 19, 57, .24);
}

.masthead { font-size: clamp(5rem, 14vw, 15rem); letter-spacing: -.08em; max-width: 8ch; }
.masthead span { color: var(--mango-pop); }
.spread-title { font-size: clamp(3.3rem, 8vw, 8.2rem); max-width: 8ch; }

.dek,
.body-note,
.interaction-note {
  font-size: clamp(1.05rem, 1.65vw, 1.55rem);
  line-height: 1.45;
  max-width: 34rem;
  font-weight: 800;
}

.interaction-note {
  font-family: var(--label);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  color: var(--taffy-violet);
  background: rgba(255, 243, 215, .74);
  border-radius: 24px;
  padding: 14px 18px;
  box-shadow: inset -6px -8px 0 rgba(35, 215, 255, .18);
}

.cover-copy { display: flex; flex-direction: column; justify-content: center; }
.cover-art { background: radial-gradient(circle at 56% 42%, rgba(255, 255, 255, .76), transparent 18rem); }

.vertical-note {
  position: absolute;
  left: 16px;
  bottom: 10vh;
  writing-mode: vertical-rl;
  color: var(--ink-plum);
  background: var(--lime-fizz);
  padding: 16px 9px;
  border-radius: 999px;
  box-shadow: inset -5px -7px 0 rgba(37, 19, 57, .1), 0 16px 18px rgba(37, 19, 57, .16);
}

.label-strip {
  width: max-content;
  margin-top: 2rem;
  padding: 16px 24px;
  border-radius: 28px;
  background: var(--pool-cyan);
  transform: rotate(-4deg);
  box-shadow: inset -8px -9px 0 rgba(141, 92, 255, .45), inset 8px 8px 0 rgba(255, 255, 255, .55), 0 20px 22px rgba(37, 19, 57, .18);
}

.ripple-target {
  position: absolute;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  right: 5%;
  top: 7%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(35, 215, 255, .1) 0 20px, rgba(35, 215, 255, .55) 21px 24px, transparent 25px 54px);
  filter: drop-shadow(0 28px 22px rgba(37, 19, 57, .2));
}

.straw {
  position: absolute;
  width: 42px;
  height: 58%;
  left: 52%;
  top: 16%;
  border-radius: 999px;
  transform: rotate(18deg);
  background: repeating-linear-gradient(135deg, var(--bubblegum-coral) 0 14px, var(--cream-soda) 14px 28px);
  box-shadow: inset -10px 0 0 rgba(37, 19, 57, .12), 0 13px 18px rgba(37, 19, 57, .18);
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, white 0 12%, rgba(35, 215, 255, .82) 15% 54%, rgba(141, 92, 255, .55));
  box-shadow: inset -12px -16px 0 rgba(37, 19, 57, .12), 0 18px 30px rgba(37, 19, 57, .16);
  animation: floatBubble 6s ease-in-out infinite;
}

.bubble.big { width: 120px; height: 120px; right: 20%; top: 18%; }
.bubble.small { width: 62px; height: 62px; left: 21%; bottom: 25%; animation-delay: -2s; }

.counter-scene,
.final-counter {
  position: absolute;
  left: 7%;
  right: 4%;
  bottom: 8%;
  height: 29%;
  border-radius: 54px 54px 22px 22px;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.85), transparent 18%), linear-gradient(145deg, var(--mango-pop), var(--bubblegum-coral));
  box-shadow: inset -20px -24px 0 rgba(141, 92, 255, .5), inset 18px 16px 0 rgba(255, 255, 255, .35), 0 28px 36px rgba(37, 19, 57, .22);
}

.counter-foam {
  position: absolute;
  left: 8%;
  top: -24px;
  width: 74%;
  height: 58px;
  border-radius: 999px;
  background: var(--cream-soda);
  box-shadow: inset -9px -10px 0 rgba(255, 176, 0, .22);
}

.fruit-slice {
  position: absolute;
  right: 11%;
  top: -50px;
  width: 130px;
  height: 66px;
  border-radius: 130px 130px 0 0;
  background: repeating-conic-gradient(from 0deg, var(--lime-fizz) 0 16deg, var(--cream-soda) 16deg 31deg);
  border: 10px solid var(--mango-pop);
}

.fish {
  position: absolute;
  width: 185px;
  height: 105px;
  border-radius: 64% 42% 54% 48%;
  background: radial-gradient(circle at 28% 23%, rgba(255,255,255,.9) 0 9%, transparent 10%), radial-gradient(circle at 58% 62%, rgba(255,255,255,.35) 0 3px, transparent 4px), var(--bubblegum-coral);
  box-shadow: inset -18px -18px 0 rgba(37, 19, 57, .12), inset 12px 10px 0 rgba(255, 255, 255, .34), 0 18px 20px rgba(37, 19, 57, .18);
  filter: drop-shadow(0 14px 10px rgba(37, 19, 57, .16));
  animation: drift 9s ease-in-out infinite;
}

.fish .tail {
  position: absolute;
  right: -48px;
  top: 20px;
  width: 70px;
  height: 65px;
  border-radius: 55% 10% 55% 10%;
  transform: rotate(45deg);
  background: inherit;
  box-shadow: inset -10px -10px 0 rgba(37, 19, 57, .1);
}

.fish .fin { position: absolute; width: 58px; height: 34px; background: rgba(255,255,255,.35); border-radius: 60% 40% 70% 30%; }
.fish .top { top: -18px; left: 58px; transform: rotate(-18deg); }
.fish .bottom { bottom: -17px; left: 65px; transform: rotate(25deg); }
.fish .eye { position: absolute; left: 28px; top: 34px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-plum); box-shadow: 4px -3px 0 white inset; }
.fish em { position: absolute; left: 20px; top: 112px; white-space: nowrap; font-family: var(--label); font-style: normal; background: var(--lime-fizz); border-radius: 999px; padding: 8px 14px; }
.fish-cyan { background-color: var(--pool-cyan); }
.fish-violet { background-color: var(--taffy-violet); }
.fish-mango { background-color: var(--mango-pop); }
.fish-lime { background-color: var(--lime-fizz); }
.fish-pink { background-color: var(--bubblegum-coral); }
.fish-nibble { left: -6%; top: 23%; transform: rotate(-8deg); }
.fish-courier { right: 9%; top: 46%; animation-delay: -1.8s; }
.swimmer-one { left: -12%; top: 18%; animation: swimWide 15s linear infinite; }
.swimmer-two { left: 12%; top: 47%; transform: scale(.72); animation: swimWide 19s linear infinite reverse; }
.swimmer-three { left: 0; bottom: 13%; transform: scale(.58); animation: swimWide 13s linear infinite; }
.final-fish { right: 13%; bottom: 27%; transform: scale(.78); }

.ingredient-page,
.parade-copy,
.interlude-copy,
.sunset-copy { display: flex; flex-direction: column; justify-content: center; }

.ingredient-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.menu-tab {
  min-height: 220px;
  padding: 24px;
  border-radius: 38px;
  background: var(--cream-soda);
  box-shadow: inset -12px -14px 0 rgba(255, 79, 154, .22), inset 10px 9px 0 rgba(255,255,255,.72), 0 20px 24px rgba(37, 19, 57, .15);
  transform: rotate(var(--tilt, -2deg));
  transition: transform .28s cubic-bezier(.2, 1.5, .4, 1), box-shadow .28s;
}
.menu-tab:nth-child(2) { --tilt: 3deg; background: var(--pool-cyan); }
.menu-tab:nth-child(3) { --tilt: -5deg; background: var(--mango-pop); }
.menu-tab h3 { font-family: var(--headline); font-size: 2rem; line-height: .95; margin: 1rem 0; }
.menu-tab p { font-weight: 800; }

.halftone-card {
  position: absolute;
  top: 16%;
  left: 9%;
  right: 12%;
  padding: clamp(30px, 5vw, 64px);
  border-radius: 58px;
  background: radial-gradient(circle, rgba(37,19,57,.16) 1px, transparent 2px) 0 0 / 18px 18px, var(--lime-fizz);
  box-shadow: inset -18px -20px 0 rgba(37, 19, 57, .13), 0 30px 34px rgba(37, 19, 57, .18);
}
.halftone-card blockquote { margin: 0; font-family: var(--headline); font-size: clamp(2.4rem, 5vw, 5.8rem); line-height: .92; }
.side-caption { position: absolute; right: 5%; bottom: 10%; max-width: 15rem; transform: rotate(8deg); color: var(--taffy-violet); }

.scale-pattern {
  width: min(460px, 88%);
  height: 150px;
  margin-top: 2rem;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 100%, transparent 31px, var(--bubblegum-coral) 32px 35px, transparent 36px) 0 0 / 70px 52px, var(--cream-soda);
  box-shadow: inset -14px -14px 0 rgba(141, 92, 255, .24);
}

.parade-stage { overflow: visible; }
.caption-bubble {
  position: absolute;
  right: 14%;
  top: 13%;
  padding: 22px 30px;
  border-radius: 50%;
  background: var(--cream-soda);
  box-shadow: inset -10px -12px 0 rgba(35, 215, 255, .28), 0 19px 20px rgba(37, 19, 57, .15);
}

.giant-ripple {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.giant-ripple span {
  position: absolute;
  border: 7px solid var(--pool-cyan);
  border-radius: 50%;
  width: calc(20% + var(--i, 0px));
  aspect-ratio: 1;
  animation: pulse 4.8s ease-in-out infinite;
}
.giant-ripple span:nth-child(1) { width: 26%; animation-delay: 0s; }
.giant-ripple span:nth-child(2) { width: 46%; animation-delay: -.8s; border-color: var(--bubblegum-coral); }
.giant-ripple span:nth-child(3) { width: 66%; animation-delay: -1.6s; border-color: var(--mango-pop); }
.giant-ripple span:nth-child(4) { width: 86%; animation-delay: -2.4s; border-color: var(--taffy-violet); }
.sticker-seal { width: 160px; height: 160px; display: grid; place-items: center; margin-top: 2rem; text-align: center; border-radius: 50%; background: var(--bubblegum-coral); color: var(--cream-soda); box-shadow: inset -14px -16px 0 rgba(37, 19, 57, .18), inset 12px 10px 0 rgba(255,255,255,.3), 0 20px 20px rgba(37,19,57,.16); }

.sunset-counter { background: radial-gradient(circle at 50% 48%, rgba(255, 176, 0, .6), transparent 20rem); }
.sunset-orb { position: absolute; width: 42vmin; height: 42vmin; border-radius: 50%; left: 20%; top: 16%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.78), var(--mango-pop) 42%, var(--bubblegum-coral)); box-shadow: 0 0 80px rgba(255,176,0,.5); }
.final-counter { height: 24%; bottom: 12%; background: linear-gradient(145deg, var(--pool-cyan), var(--taffy-violet), var(--bubblegum-coral)); }
.domain-stamp { font-size: clamp(2.5rem, 7vw, 6rem); color: var(--pool-cyan); text-shadow: 0 8px 0 var(--taffy-violet), 0 16px 22px rgba(37,19,57,.2); }
.rising-bubbles span { position: absolute; bottom: 24%; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.58); box-shadow: inset -7px -8px 0 rgba(35,215,255,.32); animation: rise 5s linear infinite; }
.rising-bubbles span:nth-child(1) { left: 18%; animation-delay: 0s; }
.rising-bubbles span:nth-child(2) { left: 34%; animation-delay: -1s; width: 52px; height: 52px; }
.rising-bubbles span:nth-child(3) { left: 52%; animation-delay: -2s; }
.rising-bubbles span:nth-child(4) { left: 66%; animation-delay: -3s; width: 46px; height: 46px; }
.rising-bubbles span:nth-child(5) { left: 79%; animation-delay: -4s; }

.cursor-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 3px solid var(--pool-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
}

.surface-ripple {
  position: fixed;
  width: 18px;
  height: 18px;
  border: 3px solid var(--pool-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  animation: rippleOut .7s ease-out forwards;
}

.squash-tab:active,
.squash-tab.is-squashing { transform: rotate(var(--tilt, -3deg)) scale(1.06, .92); }
.menu-tab:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: inset -12px -14px 0 rgba(141, 92, 255, .28), 0 28px 30px rgba(37, 19, 57, .2); }

.bob { animation: bob 4s ease-in-out infinite; }
.breathe { animation: breathe 5.8s ease-in-out infinite; }
.blink .eye { animation: blink 4.5s steps(1) infinite; }

@keyframes breathe { 0%,100% { font-variation-settings: "SOFT" 80, "WONK" 0; transform: scale(1); } 50% { font-variation-settings: "SOFT" 100, "WONK" 1; transform: scale(1.018); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes drift { 0%,100% { translate: 0 0; rotate: -4deg; } 50% { translate: 18px -20px; rotate: 5deg; } }
@keyframes floatBubble { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-24px) scale(1.06); } }
@keyframes swimWide { 0% { translate: -40vw 0; } 100% { translate: 80vw -8vh; } }
@keyframes pulse { 0%,100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes rise { 0% { transform: translateY(0) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-54vh) scale(1.2); opacity: 0; } }
@keyframes rippleOut { to { transform: translate(-50%, -50%) scale(8); opacity: 0; } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }

@media (max-width: 900px) {
  .zine-spine { display: none; }
  .spread { grid-template-columns: 1fr; }
  .left-page,
  .right-page { grid-column: 1; min-height: 74vh; }
  .page { padding: 28px; }
  .masthead { font-size: clamp(4.2rem, 24vw, 8rem); }
  .ingredient-columns { grid-template-columns: 1fr; }
  .ripple-target { width: 86vw; right: -20vw; }
  .fish { transform: scale(.75); }
  .halftone-card { position: relative; inset: auto; margin-top: 2rem; }
}