:root {
  /* Fraunces, Nunito Sans, and Space Grotesk from Google Fonts shape the cafe voice. */
  --abyss: #061826;
  --cream: #F5EAD2;
  --night: #0B2E4A;
  --coral: #FF6B5A;
  --teal: #1FB7A6;
  --lemon: #F7D84A;
  --plum: #33235B;
  --display: "Fraunces", Georgia, serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --stamp: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.watergrain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 18%, rgba(31,183,166,.16), transparent 24%),
    radial-gradient(circle at 86% 72%, rgba(51,35,91,.32), transparent 28%),
    linear-gradient(180deg, var(--abyss), var(--night) 48%, var(--abyss));
}

.watergrain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: radial-gradient(rgba(245,234,210,.18) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

.receipt-tab {
  position: fixed;
  top: 24px;
  right: 26px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 10px 18px;
  background: var(--cream);
  color: var(--abyss);
  border-radius: 8px 8px 24px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.receipt-tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--coral), var(--coral) 4px, transparent 4px, transparent 8px);
}

.tab-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--abyss);
  text-decoration: none;
  font-family: var(--stamp);
  font-weight: 700;
  background: rgba(31,183,166,.22);
  transition: transform .4s ease, background .4s ease;
}

.tab-icon:hover { transform: rotate(-18deg) scale(1.08); background: var(--lemon); }

.scene {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
}

.ma-field { min-height: calc(100vh - 120px); position: relative; }

.title-bend {
  position: absolute;
  left: 9vw;
  top: 34vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.8rem, 13vw, 13rem);
  font-variation-settings: "wght" var(--titleWeight, 650), "SOFT" var(--titleSoft, 70), "WONK" 1;
  letter-spacing: -.08em;
  line-height: .8;
  color: var(--cream);
  transform: rotate(-4deg) skewY(var(--titleSkew, -2deg));
  text-shadow: 0 14px 0 rgba(11,46,74,.65);
}

.whirlpool {
  position: absolute;
  width: clamp(270px, 38vw, 520px);
  aspect-ratio: 1;
  right: 11vw;
  top: 12vh;
  border-radius: 50%;
  transform: rotate(var(--ringRotation, 0deg));
}

.ring-svg { width: 100%; height: 100%; filter: drop-shadow(0 22px 45px rgba(0,0,0,.25)); }
.ring { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ring-one { stroke: var(--cream); stroke-width: 13; opacity: .82; stroke-dasharray: 730 80; }
.ring-two { stroke: var(--teal); stroke-width: 9; opacity: .9; stroke-dasharray: 390 50; }
.ring-three { stroke: var(--lemon); stroke-width: 7; opacity: .95; stroke-dasharray: 150 32; }

.orb { position: absolute; display: grid; place-items: center; border-radius: 999px; font-family: var(--stamp); }
.dot-a { width: 18px; height: 18px; background: var(--coral); left: 13%; top: 26%; }
.dot-b { width: 13px; height: 13px; background: var(--lemon); right: 24%; bottom: 18%; }
.fish-a { width: 42px; height: 28px; color: var(--teal); right: 3%; top: 46%; font-size: 44px; }

.napkin {
  display: inline-block;
  color: var(--abyss);
  background: var(--cream);
  border-radius: 28px 18px 34px 14px;
  padding: 18px 24px;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 800;
  box-shadow: 0 18px 0 rgba(11,46,74,.5);
}

.line-one { position: absolute; left: 15vw; bottom: 13vh; transform: rotate(3deg); }

.coral-zigzag {
  position: absolute;
  left: 7vw;
  top: 22vh;
  width: 138px;
  height: 54px;
  background: linear-gradient(135deg, transparent 0 35%, var(--coral) 35% 50%, transparent 50% 100%);
  background-size: 46px 54px;
  transform: rotate(180deg);
}

.counter-scene { display: grid; place-items: center; }
.counter-band { width: min(1050px, 84vw); height: 210px; position: relative; border-top: 2px solid rgba(245,234,210,.18); border-bottom: 2px solid rgba(245,234,210,.18); }
.tiny-stamp { font-family: var(--stamp); color: var(--lemon); text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 700; }
.counter-band .tiny-stamp { position: absolute; top: -44px; left: 9%; }
.conveyor { position: absolute; inset: 0; display: flex; align-items: center; gap: 42px; transform: translateX(var(--conveyorX, 0px)); transition: transform .12s linear; }

.icon { flex: 0 0 auto; position: relative; filter: drop-shadow(0 14px 0 rgba(6,24,38,.35)); }
.cup { width: 86px; height: 70px; border: 10px solid var(--cream); border-top: 0; border-radius: 6px 6px 28px 32px; }
.cup::after { content: ""; position: absolute; right: -30px; top: 12px; width: 26px; height: 30px; border: 8px solid var(--cream); border-left: 0; border-radius: 0 18px 18px 0; }
.cup span { position: absolute; left: 11px; top: -20px; width: 50px; height: 16px; border: 5px solid var(--teal); border-radius: 50%; }
.cup.small { transform: scale(.72) rotate(8deg); }
.crumb { width: 26px; height: 20px; background: var(--lemon); border-radius: 50% 45% 55% 40%; }
.c1 { transform: translateY(-42px); } .c2 { transform: translateY(36px); background: var(--coral); }
.shell { width: 76px; height: 58px; background: var(--teal); border-radius: 60px 60px 14px 14px; }
.shell::before { content: ""; position: absolute; inset: 10px 13px; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(245,234,210,.8) 10px 14px); }
.shell.plum { background: var(--plum); }
.arrow-ribbon { color: var(--coral); font-size: 88px; font-family: var(--display); line-height: 1; transform: rotate(-12deg); }
.leaf { width: 72px; height: 42px; border-radius: 72px 0 72px 0; background: var(--teal); transform: rotate(-28deg); }
.leaf::after { content: ""; position: absolute; width: 54px; height: 4px; background: var(--abyss); left: 10px; top: 20px; transform: rotate(-18deg); }
.cube { width: 72px; height: 72px; background: var(--cream); transform: rotate(11deg); border-radius: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 13px; }
.cube i { background: var(--lemon); border-radius: 50%; }
.bubble-note { padding: 15px 18px; border-radius: 20px 20px 20px 4px; background: var(--coral); color: var(--abyss); font-family: var(--stamp); font-weight: 700; }
.counter-copy { position: absolute; left: 8vw; bottom: 9vh; max-width: 420px; }

.tide-copy { position: absolute; left: 9vw; top: 20vh; max-width: 540px; }
.tide-copy h2 { margin: 12px 0 0; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 7rem); line-height: .9; font-variation-settings: "wght" 430, "SOFT" 90, "WONK" 1; }
.current-paths { position: absolute; inset: 10vh 2vw auto; width: 96vw; height: 70vh; }
.trail { fill: none; stroke: var(--teal); stroke-width: 4; stroke-dasharray: 12 18; opacity: .42; stroke-linecap: round; animation: reverseTrail 6s linear infinite; }
.trail-b { stroke: var(--cream); opacity: .24; animation-duration: 8s; } .trail-c { stroke: var(--coral); opacity: .28; animation-duration: 7s; }
.peel-marks { position: absolute; right: 12vw; top: 25vh; display: grid; gap: 17px; transform: translateX(var(--peelX, 0px)); }
.peel-marks span { width: 220px; height: 13px; border-radius: 20px; background: var(--coral); transform-origin: right; transform: scaleX(var(--markScale, 1)) rotate(var(--markRotate, -5deg)); opacity: var(--markOpacity, 1); }
.peel-marks span:nth-child(even) { background: var(--cream); transform: scaleX(var(--markScale, 1)) rotate(4deg); }
.drift-dot { position: absolute; border-radius: 50%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.drift-dot.lemon { width: 20px; height: 20px; background: var(--lemon); right: 17vw; bottom: 22vh; }
.drift-dot.teal { width: 32px; height: 32px; background: var(--teal); left: 23vw; bottom: 18vh; }
.drift-dot.coral { width: 16px; height: 16px; background: var(--coral); right: 38vw; top: 17vh; }

.garden-scene { display: grid; place-items: center; }
.blank-center { width: min(520px, 72vw); min-height: 300px; display: grid; place-items: center; }
.garden-copy { max-width: 430px; transform: rotate(-2deg); }
.kelp, .fern, .garden-shell, .pebbles, .checker-fragment, .receipt-curl { position: absolute; }
.cluster-left { left: 12vw; bottom: 17vh; width: 150px; height: 240px; }
.kelp i { position: absolute; bottom: 0; width: 26px; height: 160px; background: var(--teal); border-radius: 30px; transform-origin: bottom; }
.kelp i:nth-child(1) { left: 30px; transform: rotate(-18deg); } .kelp i:nth-child(2) { left: 67px; height: 210px; transform: rotate(8deg); background: var(--lemon); } .kelp i:nth-child(3) { left: 102px; transform: rotate(24deg); }
.cluster-right { right: 12vw; top: 18vh; width: 190px; height: 160px; }
.fern i { position: absolute; width: 92px; height: 19px; background: var(--coral); border-radius: 30px 0 30px 0; transform-origin: left center; }
.fern i:nth-child(1) { transform: rotate(-38deg); } .fern i:nth-child(2) { top: 42px; transform: rotate(-12deg); background: var(--teal); } .fern i:nth-child(3) { top: 82px; transform: rotate(18deg); background: var(--cream); } .fern i:nth-child(4) { top: 120px; transform: rotate(42deg); background: var(--lemon); }
.garden-shell { left: 24vw; top: 19vh; transform: rotate(-19deg); }
.pebbles { right: 22vw; bottom: 18vh; display: flex; gap: 12px; }
.pebbles span { width: 46px; height: 34px; border-radius: 50%; background: var(--plum); } .pebbles span:nth-child(2) { background: var(--teal); transform: translateY(-13px); } .pebbles span:nth-child(3) { background: var(--cream); }
.checker-fragment { left: 17vw; top: 33vh; width: 104px; height: 52px; background: conic-gradient(var(--lemon) 25%, var(--abyss) 0 50%, var(--lemon) 0 75%, var(--abyss) 0); background-size: 26px 26px; transform: rotate(13deg); border-radius: 12px; }
.receipt-curl { right: 18vw; bottom: 35vh; padding: 18px 28px; background: var(--cream); color: var(--plum); font-family: var(--stamp); font-weight: 700; border-radius: 8px 30px 8px 30px; transform: rotate(8deg); }

.sip-scene { display: grid; place-items: center; }
.table-island { position: relative; width: min(78vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,234,210,.18) 0 33%, rgba(31,183,166,.18) 34% 35%, rgba(245,234,210,.08) 36% 100%); box-shadow: inset 0 0 0 3px rgba(245,234,210,.26), 0 35px 90px rgba(0,0,0,.34); display: grid; place-items: center; }
.rim-text { position: absolute; inset: -2%; width: 104%; height: 104%; animation: slowBack 24s linear infinite; }
.rim-text text { fill: var(--cream); font-family: var(--display); font-size: 25px; font-variation-settings: "wght" 520, "SOFT" 80, "WONK" 1; letter-spacing: .04em; }
.cup-top { width: 138px; height: 138px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; box-shadow: 0 0 0 18px rgba(255,107,90,.3); }
.cup-top span { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 45% 45%, var(--night), var(--abyss)); border: 8px solid var(--teal); }
.final-note { position: absolute; bottom: 25%; max-width: 260px; text-align: center; color: var(--cream); font-weight: 800; font-size: 1.15rem; }
.hand-note { position: absolute; bottom: 11%; color: var(--abyss); background: var(--lemon); border-radius: 999px; padding: 14px 22px; text-decoration: none; font-family: var(--stamp); font-weight: 700; transform: rotate(-3deg); }

.float-push { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }

@keyframes reverseTrail { to { stroke-dashoffset: -180; } }
@keyframes slowBack { to { transform: rotate(-360deg); } }

@media (max-width: 760px) {
  .receipt-tab { right: 14px; top: 14px; transform: scale(.86); transform-origin: top right; }
  .title-bend { left: 6vw; top: 41vh; }
  .whirlpool { right: -9vw; top: 8vh; width: 360px; }
  .line-one, .counter-copy { left: 6vw; right: 6vw; }
  .counter-band { width: 100vw; }
  .conveyor { gap: 28px; }
  .tide-copy { left: 7vw; right: 7vw; }
  .peel-marks { right: 4vw; top: 57vh; }
  .cluster-left { left: 2vw; opacity: .75; }
  .cluster-right { right: -4vw; }
  .garden-shell, .checker-fragment { left: 8vw; }
  .receipt-curl { right: 7vw; }
}