/* ============ ZELUMA — HighTide-style flavor site ============ */
:root {
  --accent: #e0762f;
  --accent-deep: #b4531a;
  --cream: #f7f0e3;
  --ink: #2b2320;
  --teal: #1e7a6f;
  --teal-deep: #14584f;
  --trans: 600ms cubic-bezier(.4,0,.2,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Fredoka", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}
h1,h2 { font-family: "Shrikhand", serif; font-weight: 400; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}
/* two stacked layers; a flavor change slides one out and the next in */
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.14));
  pointer-events: none;
}

/* cut-out collage pieces floating above the flat background */
#stickerLayer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sticker-group {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
}
.sticker-group.on { opacity: 1; visibility: visible; }
.sticker {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .22));
}
.sticker-group.on .sticker { animation: stickPop 620ms cubic-bezier(.3, 1.5, .45, 1) backwards; }
@keyframes stickPop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-group.on .sticker { animation: none; }
}

.nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px clamp(20px, 4vw, 56px);
  z-index: 6;
}
.nav-logo {
  font-family: "Shrikhand", serif;
  font-size: 30px; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  color: #fff; text-decoration: none; font-weight: 600;
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.nav-cta {
  background: var(--accent); border-radius: 999px;
  padding: 10px 20px; text-shadow: none !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
  transition: background var(--trans);
}

.hero-word {
  position: absolute;
  top: 8vh; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(34px, 11vw, 150px);
  color: #fff;
  white-space: nowrap;
  max-width: 94vw;
  letter-spacing: .01em;
  text-shadow: 0 4px 0 rgba(0,0,0,.15);
  z-index: 1;
  -webkit-text-stroke: 2px rgba(0,0,0,.06);
}

/* carbonation, behind the can */
#fizz {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* fixed can */
#canWrap {
  position: fixed; inset: 0;
  z-index: 4;
  pointer-events: none;
}
#canBob {
  position: absolute; inset: 0;
  animation: canbob 6.5s ease-in-out infinite;   /* same period as the sway */
}
@keyframes canbob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.1vh); }
}
/* owns the idle roll + the scroll lie-down; transform written from tick() */
#canRoll {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
#canWrap model-viewer {
  width: 100%; height: 100%;
  --poster-color: transparent;
  opacity: 0;
  transition: opacity 500ms;
}
body.can-ready #canWrap model-viewer { opacity: 1; }

/* grab target — only the can's own box, so nav/arrows stay clickable */
#canGrab {
  position: absolute;
  left: 50%; top: 4vh;
  width: clamp(190px, 23vw, 340px);
  height: 84vh;
  transform: translateX(-50%);
  pointer-events: none;
  cursor: url(../assets/cursor-spin.svg) 17 17, grab;
  touch-action: pan-y;
}
body.can-grabbable #canGrab { pointer-events: auto; }
body.dragging #canGrab { cursor: url(../assets/cursor-spin.svg) 17 17, grabbing; }
body.dragging { user-select: none; }

/* “drag to spin” hint — retires after the first successful spin */
#spinHint {
  position: fixed;
  left: 50%; bottom: calc(5vh + 74px);
  transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: rgba(247, 240, 227, .93);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms;
  animation: hintfloat 2.4s ease-in-out infinite;
}
#spinHint svg { width: 16px; height: 16px; }
body.hint-on #spinHint { opacity: 1; }
body.dragging #spinHint { opacity: 0; transition-duration: 150ms; }
@keyframes hintfloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  #canBob, #spinHint { animation: none; }
  .marquee-track, .badge-star svg { animation: none; }
}

/* flavor controls */
.flavor-ui {
  position: absolute;
  bottom: 5vh; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  z-index: 6;
}
.arrow {
  width: 54px; height: 54px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--cream); color: var(--accent-deep);
  display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  transition: transform 150ms, color var(--trans);
}
.arrow:hover { transform: scale(1.08); }
.arrow:active { transform: scale(.95); }
.arrow svg { width: 22px; height: 22px; }
.flavor-pill {
  background: var(--accent);
  color: #fff;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  font-size: clamp(13px, 1.4vw, 17px);
  padding: 15px 34px; border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
  min-width: 250px; text-align: center;
  transition: background var(--trans);
}

/* ---------- torn edges ---------- */
.tear {
  display: block;
  width: 100%; height: 52px;
  position: absolute;
  bottom: 100%; left: 0;
  z-index: 2;
}
.strip, .features, .products, .footer,
.numbers, .gallery, .join, .manifesto { position: relative; }
.strip .tear { fill: var(--accent); transition: fill var(--trans); }
.features .tear { fill: var(--teal); }
.products .tear { fill: var(--cream); }
.footer .tear { fill: var(--teal); }
.numbers .tear { fill: var(--teal-deep); }
.gallery .tear { fill: var(--cream); }
.join .tear { fill: var(--accent); transition: fill var(--trans); }
.manifesto .tear { fill: var(--cream); }

/* ---------- marquee strip ---------- */
.strip { position: relative; background: var(--accent); transition: background var(--trans); }
.marquee { overflow: hidden; padding: 34px 0 42px; }
.marquee-track {
  display: inline-flex; white-space: nowrap;
  will-change: transform;
  font-family: "Shrikhand", serif;
  font-size: clamp(30px, 4.6vw, 58px);
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
}
/* .marquee-track is driven from JS so its speed can react to scrolling */
.marquee { transition: transform 400ms cubic-bezier(.2,.8,.3,1); }

/* ---------- features ---------- */
.features {
  position: relative;
  background: var(--teal);
  color: var(--cream);
  padding: 90px 24px 130px;
  text-align: center;
}
.features-title {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.12;
  margin-bottom: 70px;
  text-shadow: 0 3px 0 rgba(0,0,0,.14);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 320px));
  justify-content: center;
  gap: clamp(28px, 5vw, 80px);
  position: relative; z-index: 1;
}
.feature h3 {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: 18px; margin: 18px 0 12px; font-weight: 700;
}
.feature p { font-size: 15.5px; line-height: 1.55; opacity: .88; }
.f-icon { width: 52px; height: 52px; color: var(--cream); }
.bubbles i {
  position: absolute;
  border: 2px solid rgba(247,240,227,.25);
  border-radius: 50%;
  pointer-events: none;
}
.bubbles i:nth-child(1){ width:60px;height:60px;left:6%;top:20%; }
.bubbles i:nth-child(2){ width:26px;height:26px;left:12%;top:64%; }
.bubbles i:nth-child(3){ width:44px;height:44px;left:22%;bottom:10%; }
.bubbles i:nth-child(4){ width:34px;height:34px;right:8%;top:16%; }
.bubbles i:nth-child(5){ width:64px;height:64px;right:14%;top:52%; }
.bubbles i:nth-child(6){ width:22px;height:22px;right:26%;bottom:12%; }
.bubbles i:nth-child(7){ width:30px;height:30px;left:40%;top:12%; }
.bubbles i:nth-child(8){ width:40px;height:40px;right:40%;bottom:6%; }

/* ---------- products ---------- */
.products {
  position: relative;
  background: var(--cream);
  padding: 80px clamp(20px, 5vw, 70px) 110px;
}
.products-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 30px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto 54px;
}
.products-head h2 { font-size: clamp(30px, 4.4vw, 54px); color: var(--ink); }
.products-head p { margin-top: 10px; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.badge-star { position: relative; width: 150px; height: 150px; flex: 0 0 auto; transform: rotate(8deg); }
.badge-star svg { width: 100%; height: 100%; fill: var(--accent); transition: fill var(--trans); animation: slowspin 26s linear infinite; }
@keyframes slowspin { to { transform: rotate(360deg); } }
.badge-star span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
  text-align: center; line-height: 1.35;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1200px; margin: 0 auto;
}
.card {
  position: relative;
  border-radius: 18px;
  padding: 26px 18px 24px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  transition: transform 250ms cubic-bezier(.3,1.4,.4,1);
}
.card:hover { transform: translateY(-8px) rotate(-1deg); }
.card img {
  width: 74%; max-width: 190px;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.28));
  transition: transform 300ms cubic-bezier(.3,1.4,.4,1);
}
.card:hover img { transform: scale(1.05) rotate(2deg); }
.card h3 {
  font-family: "Shrikhand", serif; font-weight: 400;
  font-size: 21px; margin: 14px 0 4px;
  text-shadow: 0 2px 0 rgba(0,0,0,.16);
}
.card small { display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 16px; }
.card .view {
  display: inline-block;
  background: var(--cream); color: var(--ink);
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 11px 22px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.card .cart {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.card .cart svg { width: 19px; height: 19px; }

/* ---------- reviews ---------- */
.reviews {
  background: var(--cream);
  padding: 30px clamp(20px, 5vw, 70px) 120px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr);
  gap: 50px;
  max-width: 1200px; margin: 0 auto;
  align-items: center;
}
.reviews-title {
  font-size: clamp(30px, 4vw, 50px);
  color: var(--teal);
  line-height: 1.15;
}
.review { margin-bottom: 30px; }
.stars { color: var(--accent); font-size: 21px; letter-spacing: 4px; transition: color var(--trans); }
.review blockquote { font-size: 19px; font-weight: 500; margin: 6px 0 4px; }
.review figcaption { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; font-weight: 600; }

/* ---------- footer ---------- */
.footer {
  position: relative;
  background: var(--teal);
  color: var(--cream);
  text-align: center;
  padding: 90px 24px 40px;
}
.footer h2 { font-size: clamp(34px, 5vw, 62px); line-height: 1.12; text-shadow: 0 3px 0 rgba(0,0,0,.14); }
.footer > p { margin: 16px 0 26px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: 15px; }
.locator-btn {
  display: inline-block;
  background: var(--accent); color: #fff;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 16px 38px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.22);
  transition: background var(--trans), transform 150ms;
}
.locator-btn:hover { transform: scale(1.05); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 220px));
  justify-content: center;
  gap: 34px;
  margin: 80px auto 50px;
  text-align: left;
}
.fcol h4 { text-transform: uppercase; letter-spacing: .1em; font-size: 14px; margin-bottom: 14px; }
.fcol a { display: block; color: var(--cream); opacity: .8; text-decoration: none; font-size: 15px; margin-bottom: 9px; }
.fcol a:hover { opacity: 1; }
.fcol.brand p { font-size: 14px; opacity: .75; margin-top: 10px; line-height: 1.5; }
.tiny { font-size: 12.5px; opacity: .55; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: minmax(220px, 420px); }
  .footer-cols { grid-template-columns: repeat(2, minmax(140px, 220px)); }
  .nav-links a:not(.nav-cta) { display: none; }
}
@media (max-width: 640px) {
  .hero-word {
    white-space: normal;
    text-align: center;
    line-height: .94;
    font-size: clamp(28px, 10.5vw, 90px);
    top: 6vh;
  }
}
@media (max-width: 540px) {
  .cards { grid-template-columns: 1fr; }
  .flavor-pill { min-width: 180px; padding: 13px 20px; }
  .arrow { width: 46px; height: 46px; }
}

/* ============================================================
   V4 SECTIONS
   ============================================================ */

/* ---------- curved ritual intro ---------- */
.manifesto {
  position: relative;
  z-index: 1;
  min-height: 96vh;
  background: var(--teal);
  display: grid;
  place-items: start center;
  overflow: hidden;
  padding: 22vh clamp(22px, 7vw, 130px) 10vh;
  isolation: isolate;
}
.manifesto-oval {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -4vh;
  width: 156vw;
  height: 116vh;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50% / 0 0 14% 14%;
  background: var(--cream);
}
.manifesto-copy { text-align: center; position: relative; z-index: 2; }
.manifesto-kicker,
.manifesto-note {
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.manifesto-kicker { color: var(--accent); margin-bottom: 22px; }
.manifesto-note { margin-top: 30px; letter-spacing: .04em; text-transform: none; opacity: .62; }
.manifesto-line {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 6.2vw, 92px);
  line-height: .98;
  max-width: 17ch;
  text-align: center;
  letter-spacing: -.045em;
}
.manifesto-line .w {
  color: rgba(43, 35, 32, .15);
  transition: color 240ms linear;
}
.manifesto-line .w.lit { color: var(--ink); }
.manifesto-line .w.key.lit { color: var(--accent); }
.manifesto-bubble {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.manifesto-bubble.bubble-a { width: 38px; height: 38px; left: 12vw; top: 42%; }
.manifesto-bubble.bubble-b { width: 18px; height: 18px; right: 14vw; top: 30%; }

/* ---------- brew / sparkle / pour circular scroll story ---------- */
.ritual {
  position: relative;
  z-index: 1;
  height: 360vh;
  background: var(--teal);
}
.ritual-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--teal);
  isolation: isolate;
}
.ritual-shell {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 3vh;
  width: 172vw;
  height: 148vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cream);
  box-shadow:
    0 -5px 0 rgba(247,240,227,.62),
    0 -12px 0 rgba(43,35,32,.09),
    0 -22px 0 rgba(247,240,227,.24),
    0 -34px 44px rgba(43,35,32,.12);
}
.ritual-shell::before,
.ritual-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ritual-shell::before {
  inset: -15px;
  border: 1px solid rgba(247,240,227,.52);
}
.ritual-shell::after {
  inset: -30px;
  border: 1px solid rgba(247,240,227,.2);
}
.ritual-curves,
.ritual-curves i {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ritual-curves {
  z-index: 1;
  left: 50%;
  top: 54%;
  width: 120vmax;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(43,35,32,.08);
}
.ritual-curves i { inset: 7%; border: 1px solid rgba(43,35,32,.07); }
.ritual-curves i:nth-child(2) { inset: 18%; border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.ritual-curves i:nth-child(3) { inset: 32%; border-color: rgba(43,35,32,.08); }
.ritual-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: transform;
}
.ritual-card {
  --card-rot: -5deg;
  position: absolute;
  width: clamp(245px, 23vw, 345px);
  min-height: clamp(300px, 47vh, 430px);
  border: 1px solid rgba(43,35,32,.12);
  border-radius: 5px;
  background: rgba(255,255,255,.96);
  padding: clamp(20px, 2.2vw, 34px);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 20px 48px rgba(43,35,32,.10);
  will-change: transform, opacity;
  overflow: hidden;
}
.ritual-card-1 { left: 50%; top: 8vh; --card-rot: -6deg; }
.ritual-card-2 { left: 50%; top: 10vh; --card-rot: 5deg; }
.ritual-card-3 { left: 50%; top: 7vh; --card-rot: -2deg; }
.ritual-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 146px;
  border-radius: 999px;
  background: var(--teal-deep);
  color: var(--cream);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ritual-card p {
  max-width: 25ch;
  margin: 17px auto 2px;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.4;
}
.ritual-card img {
  position: absolute;
  left: 50%;
  bottom: -15%;
  width: 88%;
  max-height: 67%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 20px rgba(43,35,32,.16));
  pointer-events: none;
}
.ritual-progress {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 4.5vh;
  width: min(280px, 62vw);
  height: 3px;
  transform: translateX(-50%);
  background: rgba(43,35,32,.16);
  border-radius: 999px;
}
.ritual-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.ritual-whisper {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 6.5vh;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- full-bleed lifestyle pair ---------- */
.lifestyle-duo {
  position: relative;
  z-index: 7;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.lifestyle-shot {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.lifestyle-shot + .lifestyle-shot { border-left: 1px solid var(--ink); }
.lifestyle-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.04);
  will-change: transform;
}
.lifestyle-shot figcaption {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 44px);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(247,240,227,.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- flavors lead-in ---------- */
.flavor-intro {
  position: relative;
  z-index: 7;
  min-height: 84vh;
  overflow: hidden;
  background: var(--cream);
  display: grid;
  align-items: end;
  padding: 0 clamp(24px, 4vw, 66px) 8vh;
}
.flavor-word {
  position: absolute;
  inset: 4vh -2vw auto;
  display: flex;
  justify-content: space-between;
  font-size: clamp(110px, 20vw, 340px);
  line-height: .82;
  font-weight: 400;
  letter-spacing: -.075em;
  white-space: nowrap;
}
.flavor-word span:nth-child(3n+1) { color: var(--accent); }
.flavor-word span:nth-child(3n+2) { color: var(--teal); }
.flavor-word span:nth-child(3n) { color: #6c66bf; }
.flavor-intro-copy {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: end;
  gap: 5vw;
  max-width: 1180px;
}
.flavor-intro-copy .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -3vh;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.flavor-intro-copy h2 {
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .92;
  letter-spacing: -.05em;
}
.flavor-intro-copy > p:last-child {
  max-width: 34ch;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.4;
}

/* ---------- recommended products ---------- */
.products {
  position: relative;
  z-index: 7;
  background: var(--cream);
  padding: 0;
  border-top: 1px solid rgba(43,35,32,.5);
}
.products-head {
  max-width: none;
  min-height: 178px;
  margin: 0;
  padding: 30px clamp(26px, 4vw, 66px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 28px;
}
.products-head h2 {
  justify-self: center;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 40px);
  white-space: nowrap;
}
.all-products {
  justify-self: start;
  display: inline-flex;
  width: fit-content;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: none;
  margin: 0;
  border-top: 1px solid rgba(43,35,32,.55);
}
.card {
  position: relative;
  min-width: 0;
  min-height: min(70vw, 760px);
  border-radius: 0;
  padding: clamp(28px, 3vw, 52px) clamp(18px, 2.4vw, 38px);
  color: var(--ink);
  overflow: hidden;
  text-align: center;
  transition: none;
}
.card + .card { border-left: 1px solid rgba(43,35,32,.5); }
.card:hover { transform: none; }
.card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 52px);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-shadow: none;
}
.card img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 7%;
  width: auto;
  height: 65%;
  max-width: 72%;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 20px rgba(43,35,32,.24));
  transition: transform 450ms cubic-bezier(.2,.8,.3,1);
}
.card:hover img { transform: translateX(-50%) translateY(-14px) rotate(2deg) scale(1.035); }
.card small,
.card .cart { display: none; }
.card .view {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 11px 18px;
  background: rgba(247,240,227,.94);
  color: var(--ink);
  box-shadow: none;
  opacity: 0;
  transition: opacity 240ms, transform 320ms;
}
.card:hover .view { opacity: 1; transform: translateX(-50%) translateY(-8px); }
.product-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
}
.product-arrow.prev { left: 5%; }
.product-arrow.next { right: 5%; }

/* ---------- numbers ---------- */
.numbers {
  position: relative;
  background: var(--teal-deep);
  color: var(--cream);
  padding: 92px clamp(20px, 5vw, 70px) 96px;
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1140px; margin: 0 auto;
  text-align: center;
}
.stat b {
  display: block;
  font-family: "Shrikhand", serif;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.16);
}
.stat span {
  display: block; margin-top: 10px;
  font-size: 13.5px; letter-spacing: .16em;
  text-transform: uppercase; opacity: .82;
}

/* ---------- gallery ---------- */
.gallery {
  position: relative;
  background: var(--cream);
  padding: 84px 0 104px;
  overflow: hidden;
}
.gallery-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap;
  padding: 0 clamp(20px, 5vw, 70px);
  max-width: 1400px; margin: 0 auto 40px;
}
.gallery-head h2 { font-size: clamp(28px, 4vw, 52px); }
.gallery-head p {
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; opacity: .55;
}
.gallery-track {
  display: flex; gap: 20px; align-items: stretch;
  padding-left: clamp(20px, 5vw, 70px);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
}
.gallery-track.dragging { cursor: grabbing; }
.gcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 330px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
  transition: transform 320ms cubic-bezier(.3,1.3,.4,1);
  user-select: none;
}
.gcard:nth-child(odd)  { transform: rotate(-2deg); }
.gcard:nth-child(even) { transform: rotate(2deg); }
.gallery-track:not(.dragging) .gcard:hover { transform: rotate(0) translateY(-10px) scale(1.02); }
.gcard img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gcard.cutout { background: var(--cream); }
.gcard.cutout img { object-fit: contain; padding: 12% 10% 16%; }
.gcard b {
  position: absolute; left: 14px; bottom: 13px;
  background: rgba(247,240,227,.94);
  color: var(--ink);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
}

/* ---------- join ---------- */
.join {
  position: relative;
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 96px clamp(20px, 5vw, 70px) 104px;
  transition: background var(--trans);
  overflow: hidden;
}
.join h2 { font-size: clamp(32px, 5vw, 68px); text-shadow: 0 3px 0 rgba(0,0,0,.14); }
.join > p { margin: 14px 0 30px; font-size: 16px; letter-spacing: .04em; opacity: .92; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.join-form {
  position: relative; z-index: 1;
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.join-form input {
  font: inherit; font-size: 16px;
  padding: 15px 22px; width: min(360px, 76vw);
  border: none; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.join-form input::placeholder { color: rgba(43,35,32,.45); }
.join-form button {
  font: inherit; font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 34px; border: none; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.28);
  transition: transform 160ms;
}
.join-form button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.join-form.sent { display: none; }
.join-done {
  display: none;
  font-family: "Shrikhand", serif;
  font-size: clamp(22px, 2.6vw, 34px);
  margin-top: 6px;
}
.join-done.on { display: block; }

.hero-word .lw { display: inline-block; white-space: nowrap; }
.hero-word .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(6deg);
}
body.hero-in .hero-word .lw { display: inline-block; white-space: nowrap; }
.hero-word .l {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(.2,.8,.3,1), transform 620ms cubic-bezier(.2,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-word .lw { display: inline-block; white-space: nowrap; }
.hero-word .l { opacity: 1; transform: none; }
}

/* ---------- scroll reveals ---------- */
.rv .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(3deg);
}
.rv.in .w {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(.2,.7,.3,1), transform 560ms cubic-bezier(.2,.9,.3,1);
}

@media (max-width: 900px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .manifesto { min-height: 82vh; padding-top: 16vh; }
  .manifesto-oval { width: 210vw; height: 102vh; }
  .ritual { height: 320vh; }
  .ritual-card { width: min(76vw, 340px); min-height: 390px; }
  .ritual-card-1 { left: 50%; }
  .ritual-card-2 { left: 50%; }
  .ritual-card-3 { left: 50%; }
  .lifestyle-duo { min-height: auto; }
  .lifestyle-shot { min-height: 72vw; }
  .flavor-intro { min-height: 70vh; }
  .flavor-intro-copy { grid-template-columns: 1fr 1fr; }
  .products-head { grid-template-columns: 1fr 1fr; }
  .products-head h2 { justify-self: end; }
  .products-head > span { display: none; }
  .card { min-height: 72vw; }
  .card h3 { font-size: clamp(22px, 3.6vw, 34px); }
}
@media (max-width: 680px) {
  .manifesto { min-height: 78vh; padding: 14vh 20px 8vh; }
  .manifesto-line { font-size: clamp(38px, 12vw, 64px); }
  .manifesto-note { margin-top: 20px; }
  .ritual { height: 300vh; }
  .ritual-card { width: min(82vw, 330px); min-height: 375px; top: 8vh; }
  .ritual-card-1 { left: 50%; }
  .ritual-card-2 { left: 50%; }
  .ritual-card-3 { left: 50%; }
  .lifestyle-duo { grid-template-columns: 1fr; }
  .lifestyle-shot { min-height: 88vh; }
  .lifestyle-shot + .lifestyle-shot { border-left: 0; border-top: 1px solid var(--ink); }
  .flavor-intro { min-height: 74vh; padding-bottom: 6vh; }
  .flavor-word { top: 7vh; font-size: 28vw; width: 140vw; gap: .02em; }
  .flavor-intro-copy { grid-template-columns: 1fr; gap: 16px; }
  .flavor-intro-copy .eyebrow { margin-bottom: 8px; }
  .flavor-intro-copy h2 { font-size: clamp(46px, 14vw, 76px); }
  .products-head {
    min-height: 150px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .products-head h2 { justify-self: center; grid-row: 1; white-space: normal; }
  .all-products { justify-self: center; grid-row: 2; }
  .cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card {
    flex: 0 0 86vw;
    min-height: 118vw;
    scroll-snap-align: start;
  }
  .card + .card { border-left: 1px solid rgba(43,35,32,.5); }
  .card h3 { font-size: clamp(28px, 9vw, 48px); }
  .card .view { opacity: 1; }
  .product-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv .w { opacity: 1; transform: none; }
  .gcard { transition: none; }
}

/* ---------- magnetic + custom cursor (fine pointers only) ---------- */
.mag { will-change: transform; }

#cursorDot, #cursorRing {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity 220ms, width 200ms, height 200ms, background 400ms;
}
/* the accent alone disappears on same-hue backgrounds (purple on purple),
   so both parts carry a cream outline that reads on any surface */
#cursorDot {
  width: 9px; height: 9px;
  background: var(--accent);
  box-shadow:
    0 0 0 2px var(--cream),
    0 0 0 3px rgba(43,35,32,.28),
    0 2px 5px rgba(43,35,32,.35);
}
#cursorRing {
  width: 30px; height: 30px;
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 1.5px rgba(247,240,227,.92),
    inset 0 0 0 1.5px rgba(247,240,227,.92),
    0 2px 6px rgba(43,35,32,.28);
}
body.cursor-on #cursorDot, body.cursor-on #cursorRing { opacity: 1; }
body.cursor-hot #cursorRing { width: 52px; height: 52px; }
body.cursor-hot #cursorDot  { opacity: .35; }
body.cursor-hide #cursorDot, body.cursor-hide #cursorRing { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  body.cursor-on,
  body.cursor-on a,
  body.cursor-on button,
  body.cursor-on .gallery-track { cursor: none; }
  body.cursor-on #canGrab { cursor: url(../assets/cursor-spin.svg) 17 17, grab; }
}
@media (prefers-reduced-motion: reduce) {
  #cursorDot, #cursorRing { display: none; }
}

/* ---------- preloader ---------- */
#loader {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--cream);
  display: grid; place-items: center;
  cursor: pointer;
  overflow: hidden;
}
.loader-inner { position: relative; display: grid; justify-items: center; gap: 26px; }
.loader-word {
  position: relative;
  font-family: "Shrikhand", serif;
  font-size: clamp(46px, 9vw, 132px);
  line-height: 1;
  color: rgba(43, 35, 32, .12);
}
/* the fill rises through the wordmark */
/* the fill is the whole range: one quarter per flavor, bottom to top */
.loader-word::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: transparent;
  background-image: linear-gradient(to top,
    #e0762f 0%,   #e0762f 25%,
    #6c66bf 25%,  #6c66bf 50%,
    #2f8e7e 50%,  #2f8e7e 75%,
    #a34a60 75%,  #a34a60 100%);
  -webkit-background-clip: text;
  background-clip: text;
  clip-path: inset(100% 0 0 0);
  animation: fillUp 1200ms cubic-bezier(.5,.05,.25,1) forwards;
}
@keyframes fillUp {
  to { clip-path: inset(0 0 0 0); }
}
.loader-cans {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 26px);
}
.loader-cans img {
  width: clamp(46px, 5.4vw, 78px);
  opacity: 0;
  transform: translateY(-70vh);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.26));
  animation: canDrop 950ms cubic-bezier(.3,1.5,.5,1) forwards;
}
.loader-cans img:nth-child(1) { animation-delay: 560ms; }
.loader-cans img:nth-child(2) { animation-delay: 680ms; }
.loader-cans img:nth-child(3) { animation-delay: 800ms; }
.loader-cans img:nth-child(4) { animation-delay: 920ms; }
@keyframes canDrop {
  0%   { opacity: 0; transform: translateY(-70vh) rotate(-9deg); }
  40%  { opacity: 1; }
  58%  { transform: translateY(0) rotate(2deg); }
  74%  { transform: translateY(-16%) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
.loader-skip {
  position: absolute; bottom: 6vh; left: 0; right: 0;
  text-align: center;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(43,35,32,.38);
  opacity: 0;
  animation: fadeIn 400ms 1500ms forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

#loader.out {
  transform: translateY(-100%);
  transition: transform 760ms cubic-bezier(.72,0,.24,1);
}
#loader.quick { animation: none; }
#loader.quick .loader-word::after,
#loader.quick .loader-cans img,
#loader.quick .loader-skip { animation: none; }
#loader.quick .loader-word::after { clip-path: inset(0 0 0 0); }
#loader.quick .loader-cans img { opacity: 1; transform: translateY(0); }
#loader.gone { display: none; }
body.loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .loader-word::after { animation: none; clip-path: inset(0 0 0 0); }
  .loader-cans img { animation: none; opacity: 1; transform: translateY(0); }
  #loader.out { transition-duration: 300ms; }
}

/* ---------- sound toggle ---------- */
.sound-btn {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 220ms;
}
.sound-btn:hover { background: rgba(255,255,255,.32); }
.sound-btn svg { width: 19px; height: 19px; }
.sound-btn .snd-on  { opacity: 0; }
.sound-btn .snd-off { opacity: 1; }
.sound-btn[aria-pressed="true"] .snd-on  { opacity: 1; }
.sound-btn[aria-pressed="true"] .snd-off { opacity: 0; }

/* ---------- idle easter egg ---------- */
#peeker {
  position: absolute;
  bottom: -4vh;
  width: clamp(120px, 15vw, 230px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.3));
  transition: transform 780ms cubic-bezier(.3,1.3,.4,1), opacity 380ms;
}
#peeker.left  { left: -14vw;  transform: translateX(0) rotate(-8deg); }
#peeker.right { right: -14vw; transform: translateX(0) rotate(8deg); }
#peeker.peek { opacity: 1; }
#peeker.left.peek  { transform: translateX(11vw) rotate(-3deg); }
#peeker.right.peek { transform: translateX(-11vw) rotate(3deg); }

@media (prefers-reduced-motion: reduce) {
  #peeker { display: none; }
}

/* ============================================================
   V5 — ORBITAL STORY, CAROUSEL, FEED + PAGE TRANSITIONS
   ============================================================ */

/* the curved hand-off is an actual orbital cutout, not a rounded rectangle */
.manifesto { min-height: 112vh; padding-top: 20vh; overflow: hidden; }
.manifesto-copy {
  transform-origin: 50% 180vh;
  will-change: transform, opacity;
}
.manifesto-oval {
  width: 176vw;
  height: 132vh;
  border-radius: 0 0 50% 50% / 0 0 11% 11%;
}

/* V6 — the cream field itself forms the orbital cutout */
.manifesto {
  min-height: 112vh;
  padding: 24vh clamp(22px, 7vw, 130px) 10vh;
  background: var(--teal);
  isolation: isolate;
}
.manifesto-oval {
  z-index: 0;
  top: 3vh;
  width: 172vw;
  height: 148vh;
  border-radius: 50%;
  background: var(--cream);
  box-shadow:
    0 -5px 0 rgba(247,240,227,.62),
    0 -12px 0 rgba(43,35,32,.09),
    0 -22px 0 rgba(247,240,227,.24),
    0 -34px 44px rgba(43,35,32,.12);
}
.manifesto-oval::before,
.manifesto-oval::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.manifesto-oval::before {
  inset: -15px;
  border: 1px solid rgba(247,240,227,.52);
}
.manifesto-oval::after {
  inset: -30px;
  border: 1px solid rgba(247,240,227,.2);
}
.manifesto-copy { z-index: 2; }
.manifesto-bubble { z-index: 3; }

@media (max-width: 680px) {
  .manifesto { min-height: 86vh; padding: 20vh 20px 8vh; }
  .manifesto-oval {
    top: 2vh;
    width: 226vw;
    height: 108vh;
    box-shadow:
      0 -4px 0 rgba(247,240,227,.62),
      0 -10px 0 rgba(43,35,32,.09),
      0 -18px 30px rgba(43,35,32,.11);
  }
}
.orbital-cutout {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -1px;
  width: 178vw;
  height: 26vh;
  overflow: visible;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  will-change: transform;
}
.orbital-fill { fill: var(--cream); }
.orbital-line {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.orbital-line-b {
  stroke: rgba(43,35,32,.14);
  stroke-dasharray: 8 15;
}

.ritual { height: 430vh; }
.ritual-sticky {
  background:
    radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    var(--cream);
}
.ritual-curves {
  width: 138vmax;
  border: 2px solid rgba(43,35,32,.10);
  box-shadow:
    0 0 0 7vmax rgba(247,240,227,.78),
    0 0 0 calc(7vmax + 1px) rgba(43,35,32,.065),
    0 0 0 19vmax rgba(247,240,227,.44);
  transform-origin: center;
}
.ritual-curves::before,
.ritual-curves::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ritual-curves::before {
  inset: -10%;
  border: 1px dashed color-mix(in srgb, var(--teal) 24%, transparent);
}
.ritual-curves::after {
  inset: 25%;
  border: 2px solid rgba(43,35,32,.055);
}
.ritual-orbit {
  transform-origin: 50% 50%;
  will-change: transform;
}
.ritual-card { z-index: 2; }
.ritual-finale {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 33%;
  width: max-content;
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: .025em;
  opacity: 0;
  font-size: clamp(58px, 7.8vw, 120px);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 400;
  white-space: nowrap;
  will-change: transform, opacity;
  pointer-events: none;
}
.ritual-finale span:nth-of-type(4n+1) { color: var(--ink); }
.ritual-finale span:nth-of-type(4n+2) { color: var(--accent); }
.ritual-finale span:nth-of-type(4n+3) { color: #6c66bf; }
.ritual-finale span:nth-of-type(4n) { color: var(--teal); }
.ritual-finale i { width: .27em; }

/* keep the display word inside its stage at every breakpoint */
.flavor-word {
  inset: 5vh 3vw auto;
  justify-content: center;
  gap: .012em;
  font-size: min(17vw, 260px);
  letter-spacing: -.065em;
  will-change: transform;
}
.flavor-intro-copy {
  will-change: transform;
  transition: transform 180ms linear;
}
.flavor-intro-copy h2 {
  background:
    linear-gradient(105deg,
      var(--ink) 0 34%,
      var(--accent) 46%,
      #6c66bf 58%,
      var(--ink) 72% 100%);
  background-size: 260% 100%;
  background-position: var(--flavor-shift, 0%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(43,35,32,.08));
}
.flavor-intro-copy h2 .w {
  transition:
    opacity 520ms cubic-bezier(.2,.7,.3,1),
    transform 560ms cubic-bezier(.2,.9,.3,1),
    text-shadow 300ms;
}
.flavor-intro-copy h2 .w:nth-child(2n) { transform-origin: 50% 100%; }
.flavor-intro-copy:hover h2 .w:nth-child(2n) {
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 34%, transparent);
}
.flavor-intro-copy > p:last-child {
  position: relative;
  padding: 22px 24px 22px 28px;
  border-left: 3px solid var(--accent);
  border-radius: 0 18px 18px 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1px rgba(43,35,32,.07);
}
.flavor-intro-copy > p:last-child::after {
  content: "✦";
  position: absolute;
  right: 18px;
  top: -15px;
  color: var(--accent);
  font-size: 26px;
  animation: flavorTwinkle 2.8s ease-in-out infinite;
}
@keyframes flavorTwinkle {
  0%,100% { transform: rotate(0) scale(.75); opacity: .42; }
  50% { transform: rotate(40deg) scale(1.12); opacity: 1; }
}

/* five products; viewport moves by one exact card per arrow press */
.products-carousel {
  position: relative;
  border-top: 1px solid rgba(43,35,32,.55);
}
.cards-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cards-viewport:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.cards-viewport::-webkit-scrollbar { display: none; }
.cards {
  display: flex;
  grid-template-columns: none;
  width: auto;
  border-top: 0;
}
.card {
  flex: 0 0 33.333333%;
  min-height: min(70vw, 760px);
  cursor: pointer;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.card-index {
  position: absolute;
  z-index: 4;
  left: 24px;
  top: 22px;
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 700;
}
.card h3 {
  z-index: 5;
  max-width: 12ch;
  margin: 0 auto;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), color 300ms;
}
.card:hover h3 { transform: translateY(-8px); color: var(--cream); }
.card .card-can {
  z-index: 3;
  height: 65%;
  transition: transform 700ms cubic-bezier(.2,.85,.2,1), filter 400ms;
}
.card:hover .card-can {
  transform: translateX(-50%) translateY(-18px) rotate(4deg) scale(1.055);
  filter: drop-shadow(0 28px 28px rgba(43,35,32,.34));
}
.card .view {
  z-index: 6;
  opacity: 1;
  transform: translateX(-50%) translateY(18px);
  transition: transform 480ms cubic-bezier(.2,.8,.2,1), background 300ms, color 300ms;
}
.card:hover .view,
.card:focus-within .view {
  transform: translateX(-50%) translateY(-7px);
  background: var(--ink);
  color: var(--cream);
}
.can-cluster {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8%;
  width: 78%;
  height: 70%;
  transform: translateX(-50%);
}
.can-cluster img {
  position: absolute;
  bottom: 2%;
  width: 31%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 16px 18px rgba(43,35,32,.24));
  transition: transform 650ms cubic-bezier(.2,.85,.2,1);
}
.can-cluster img:nth-child(1) { left: 2%; transform: rotate(-8deg); }
.can-cluster img:nth-child(2) { left: 23%; bottom: 6%; transform: rotate(-3deg); }
.can-cluster img:nth-child(3) { left: 44%; bottom: 6%; transform: rotate(3deg); }
.can-cluster img:nth-child(4) { left: 65%; transform: rotate(8deg); }
.card-bundle:hover .can-cluster img:nth-child(1) { transform: translateY(7px) rotate(-13deg) scale(1.04); }
.card-bundle:hover .can-cluster img:nth-child(2) { transform: translateY(-7px) rotate(-5deg) scale(1.04); }
.card-bundle:hover .can-cluster img:nth-child(3) { transform: translateY(-7px) rotate(5deg) scale(1.04); }
.card-bundle:hover .can-cluster img:nth-child(4) { transform: translateY(7px) rotate(13deg) scale(1.04); }
.carousel-arrow {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 58px;
  height: 58px;
  margin-top: -29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(43,35,32,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-size: 25px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(43,35,32,.12);
  transition: opacity 240ms, transform 240ms;
}
.carousel-arrow:hover { transform: scale(1.08); }
.carousel-arrow:disabled { opacity: .25; cursor: default; transform: none; }
.carousel-prev { left: 24px; }
.carousel-next { right: 24px; }
.carousel-dots {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid rgba(43,35,32,.12);
}
.carousel-dots button {
  width: 7px;
  height: 7px;
  min-width: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(43,35,32,.22);
  cursor: pointer;
  transition: width 280ms, background 280ms;
}
.carousel-dots button.on { width: 28px; border-radius: 99px; background: var(--accent); }
.carousel-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.product-arrow { display: none; }

/* a social chapter with an asymmetrical, orbit-drawn cutout */
.feed-push {
  position: relative;
  z-index: 6;
  min-height: 92vh;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 20vh 24px 12vh;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.22), transparent 38%),
    #f0bd55;
  color: var(--ink);
  text-align: center;
}
.feed-cutout {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 24vh;
}
.feed-cutout path:first-child { fill: var(--cream); }
.feed-cutout-line { fill: none; stroke: rgba(43,35,32,.22); stroke-width: 2; }
.feed-handle {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.feed-push h2 {
  margin-top: 30px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: clamp(58px, 8.5vw, 132px);
  line-height: .88;
  letter-spacing: -.065em;
}
.feed-sub { margin-top: 26px; font-size: clamp(15px, 1.35vw, 20px); }
.feed-button {
  margin-top: 28px;
  padding: 14px 25px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.feed-orbit {
  position: absolute;
  border: 1px solid rgba(43,35,32,.14);
  border-radius: 50%;
  pointer-events: none;
}
.feed-orbit-a { width: 84vw; aspect-ratio: 2 / 1; transform: rotate(-11deg); }
.feed-orbit-b { width: 56vw; aspect-ratio: 2 / 1; transform: rotate(18deg); }
.feed-float {
  position: absolute;
  width: clamp(100px, 14vw, 220px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 8px solid var(--cream);
  box-shadow: 0 18px 42px rgba(43,35,32,.22);
  will-change: transform;
}
.feed-float-1 { left: 5vw; top: 33%; }
.feed-float-2 { right: 5vw; top: 20%; }
.feed-float-3 { right: 13vw; bottom: -10%; }

/* three expanding botanical discs form the inter-page wipe */
.page-transition {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
}
.page-transition i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
}
.page-transition i:nth-child(1) { background: var(--accent); }
.page-transition i:nth-child(2) { background: var(--teal); }
.page-transition i:nth-child(3) { background: var(--cream); }
.page-transition span {
  position: relative;
  z-index: 2;
  font-family: "Shrikhand", serif;
  font-size: clamp(54px, 10vw, 142px);
  color: var(--ink);
  opacity: 0;
  transform: translateY(18px);
}
.page-transition.is-entering,
.page-transition.is-leaving { visibility: visible; }
.page-transition.is-leaving i:nth-child(1) { animation: transitionGrow 740ms cubic-bezier(.65,0,.35,1) forwards; }
.page-transition.is-leaving i:nth-child(2) { animation: transitionGrow 740ms 90ms cubic-bezier(.65,0,.35,1) forwards; }
.page-transition.is-leaving i:nth-child(3) { animation: transitionGrow 740ms 180ms cubic-bezier(.65,0,.35,1) forwards; }
.page-transition.is-leaving span { animation: transitionWord 420ms 410ms ease-out forwards; }
.page-transition.is-entering { background: var(--cream); animation: transitionLift 820ms 90ms cubic-bezier(.72,0,.24,1) forwards; }
.page-transition.is-entering span { opacity: 1; }
@keyframes transitionGrow { to { transform: translate(-50%,-50%) scale(18); } }
@keyframes transitionWord { to { opacity: 1; transform: translateY(0); } }
@keyframes transitionLift { to { transform: translateY(-105%); visibility: hidden; } }

@media (max-width: 1020px) {
  .card { flex-basis: 50%; min-height: 76vw; }
  .ritual-finale { font-size: 8.5vw; }
}
@media (max-width: 680px) {
  .manifesto { min-height: 88vh; }
  .orbital-cutout { width: 250vw; height: 18vh; }
  .ritual { height: 360vh; }
  .ritual-finale {
    top: 39%;
    font-size: 8.7vw;
  }
  .flavor-word {
    inset: 8vh 3vw auto;
    width: auto;
    font-size: 19.5vw;
    gap: 0;
  }
  .flavor-intro-copy > p:last-child { padding: 17px 20px; }
  .cards { overflow-x: visible; scroll-snap-type: none; }
  .card { flex-basis: 86vw; min-height: 118vw; }
  .carousel-prev { left: 10px; }
  .carousel-next { right: 10px; }
  .carousel-arrow { width: 48px; height: 48px; margin-top: -24px; }
  .feed-push { min-height: 86vh; padding-top: 18vh; }
  .feed-push h2 { font-size: 16vw; }
  .feed-float { width: 24vw; border-width: 4px; opacity: .74; }
  .feed-float-1 { left: -4vw; top: 28%; }
  .feed-float-2 { right: -4vw; top: 19%; }
  .feed-float-3 { right: 2vw; bottom: -5%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  .flavor-intro-copy > p:last-child::after { animation: none; }
}

/* V7 — short sticky orbit: the ellipse rim stays in view while copy follows it */
.manifesto {
  height: 220vh;
  min-height: 0;
  display: block;
  padding: 0;
  overflow: visible;
  background: var(--teal);
}
.manifesto-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--teal);
  isolation: isolate;
}
.manifesto-sticky .manifesto-oval {
  z-index: 0;
  top: 3vh;
}
.manifesto-orbit {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-origin: 50% 77vh;
  will-change: transform;
}
.manifesto-copy {
  position: absolute;
  left: 50%;
  top: 24vh;
  width: min(88vw, 1120px);
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.manifesto-sticky .manifesto-bubble { z-index: 3; }
.card:hover h3 { color: var(--ink); }

@media (max-width: 680px) {
  .manifesto {
    height: 185vh;
    min-height: 0;
    padding: 0;
  }
  .manifesto-sticky { height: 100svh; }
  .manifesto-sticky .manifesto-oval {
    top: 2vh;
    width: 226vw;
    height: 108vh;
  }
  .manifesto-orbit { transform-origin: 50% 56vh; }
  .manifesto-copy {
    top: 21vh;
    width: 91vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto { height: 100vh; }
  .manifesto-orbit,
  .manifesto-copy { transform: none !important; }
  .manifesto-copy { left: 6vw; width: 88vw; }
}

/* V8 — keep the layered orbital shell through the complete ritual. */
@media (max-width: 680px) {
  .ritual-shell {
    top: 2vh;
    width: 226vw;
    height: 108vh;
    box-shadow:
      0 -4px 0 rgba(247,240,227,.62),
      0 -10px 0 rgba(43,35,32,.09),
      0 -18px 30px rgba(43,35,32,.11);
  }
}

/* The original circular photo reveal returns for single flavors, not the bundle. */
.card-reveal {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center;
  background-size: cover;
  clip-path: circle(0 at 50% 62%);
  filter: saturate(.84) contrast(.95);
  transition:
    clip-path 760ms cubic-bezier(.2,.8,.2,1),
    filter 500ms;
}
.card-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247,240,227,.68), transparent 34%, rgba(43,35,32,.16));
}
.card-bundle:hover h3 { color: var(--ink); }
@media (hover: hover) {
  .card:not(.card-bundle):hover .card-reveal,
  .card:not(.card-bundle):focus-within .card-reveal {
    clip-path: circle(86% at 50% 62%);
    filter: saturate(1) contrast(1);
  }
  .card:not(.card-bundle):hover h3,
  .card:not(.card-bundle):focus-within h3 {
    color: var(--cream);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-reveal { transition: none; }
}

/* V9 — one physical ellipse spans the intro and the complete ritual orbit. */
.orbital-sequence {
  position: relative;
  z-index: 1;
  background: var(--teal);
  isolation: isolate;
}
.orbital-frame {
  position: sticky;
  z-index: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  background: var(--teal);
  pointer-events: none;
  will-change: transform;
}
.orbital-frame-shell {
  position: absolute;
  left: 50%;
  top: 5.5vh;
  width: 172vw;
  height: 148vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cream);
  box-shadow:
    0 -5px 0 rgba(247,240,227,.74),
    0 -11px 0 rgba(43,35,32,.13),
    0 -19px 0 rgba(247,240,227,.22),
    0 -23px 30px rgba(43,35,32,.11);
}
.orbital-frame-shell::before,
.orbital-frame-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.orbital-frame-shell::before {
  inset: -15px;
  border: 1px solid rgba(247,240,227,.6);
}
.orbital-frame-shell::after {
  inset: -29px;
  border: 1px solid rgba(247,240,227,.24);
}
.orbital-sequence .manifesto,
.orbital-sequence .ritual,
.orbital-sequence .manifesto-sticky,
.orbital-sequence .ritual-sticky {
  background: transparent;
}
.orbital-sequence .manifesto,
.orbital-sequence .ritual {
  z-index: 1;
}

@media (max-width: 680px) {
  .orbital-frame { height: 100svh; margin-bottom: -100svh; }
  .orbital-frame-shell {
    top: 4vh;
    width: 226vw;
    height: 108vh;
    box-shadow:
      0 -4px 0 rgba(247,240,227,.74),
      0 -9px 0 rgba(43,35,32,.13),
      0 -16px 24px rgba(43,35,32,.11);
  }
}

/* V10 — fixed spokes on one deep, off-screen wheel. */
.ritual-sticky {
  perspective: 1200px;
}
.ritual-curves {
  display: none;
}
.ritual-orbit {
  inset: auto;
  left: 50%;
  top: 0;
  width: 450vw;
  height: 450vw;
  translate: -50% 0;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}
.ritual-spoke {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.ritual-spoke-1 { transform: rotate(25deg); }
.ritual-spoke-2 { transform: rotate(50deg); }
.ritual-spoke-3 { transform: rotate(75deg); }
.ritual-spoke-finale { transform: rotate(125deg); }
.ritual-card {
  left: 50%;
  top: clamp(64px, 8vh, 88px);
  transform-origin: 50% 16%;
  transition: opacity 90ms linear;
  backface-visibility: hidden;
  pointer-events: none;
}
.ritual-card-1,
.ritual-card-2,
.ritual-card-3 {
  left: 50%;
  top: clamp(64px, 8vh, 88px);
}
.ritual-finale {
  left: 50%;
  top: clamp(126px, 17vh, 176px);
  transform-origin: 50% 50%;
  font-size: clamp(56px, 7.7vw, 118px);
  backface-visibility: hidden;
}

@media (max-width: 680px) {
  .ritual-orbit {
    width: 760vw;
    height: 760vw;
  }
  .ritual-card,
  .ritual-card-1,
  .ritual-card-2,
  .ritual-card-3 {
    top: 8svh;
    width: min(82vw, 330px);
    min-height: min(54svh, 390px);
  }
  .ritual-finale {
    top: 18svh;
    font-size: clamp(36px, 10vw, 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-card,
  .ritual-finale {
    transition: none;
  }
}

/* ============================================================
   V7 — ONE GIANT WHEEL (MANA geometry)
   Radius = 260vh below the viewport: flat, gentle arcs; a seat is
   fully off-screen by ±34°, tilted only ~±18° at the screen edges.
   ============================================================ */
.wheel { height: 600vh; }
.wheel-sticky { isolation: isolate; }
.wheel-rotor,
.wheel-seat {
  position: absolute;
  inset: 0;
  transform-origin: 50% 260vh;
  will-change: transform;
  pointer-events: none;
}
.wheel-seat { transform: rotate(calc(var(--seat) * 34deg)); }
.wheel-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  will-change: opacity;
}
.wheel-seat .manifesto-copy {
  position: absolute;
  top: 22vh;
  width: min(92vw, 1100px);
  text-align: center;
  transform: translateX(-50%);
  transform-origin: center;
}
.wheel-seat .ritual-card {
  position: absolute;
  left: 50%;
  top: 9vh;
  transform: translateX(-50%);
  pointer-events: auto;
}
.wheel-seat .ritual-finale {
  position: absolute;
  left: 50%;
  top: 30vh;
  transform: translateX(-50%);
  opacity: 1;
}
@media (max-width: 680px) {
  .wheel { height: 520vh; }
  .wheel-rotor, .wheel-seat { transform-origin: 50% 200vh; }
  .wheel-seat { transform: rotate(calc(var(--seat) * 40deg)); }
  .wheel-seat .manifesto-copy { top: 19vh; width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel { height: auto; }
  .wheel-sticky { position: static; height: auto; }
  .wheel-rotor, .wheel-seat { position: static; transform: none !important; }
  .wheel-content { position: static; transform: none; margin: 60px auto; opacity: 1 !important; }
}

/* ---- V7.1: the ritual cards are part of the page, not cut-out cards ---- */
.wheel-seat .ritual-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  width: clamp(260px, 26vw, 380px);
  padding: 0 clamp(8px, 1vw, 18px);
}
.wheel-seat .ritual-card img {
  position: relative;
  left: auto;
  bottom: auto;
  width: 84%;
  max-height: none;
  margin: 18px auto 0;
  display: block;
  transform: none;
}
.wheel-seat .ritual-card p {
  max-width: 24ch;
  font-size: clamp(15px, 1.2vw, 18px);
}