/* ============================================================
   Cocoa & Crumb by Ray - core stylesheet
   Palette: cream #fefcf8 - yellow #ffed9c - pink #fec1d0
            brown #6d412a - peach #fed1c1
   ============================================================ */

/* Self-hosted, OFL licensed (see fonts/OFL-*.txt).
   Atma carries the hero name only - Fredoka still runs every other heading,
   which is the "clean and simple" Ray wanted elsewhere. */
@font-face{
  font-family:"Atma";
  src:url("../fonts/Atma-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Yuyu";
  src:url("../fonts/Yuyu-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --cream:#fefcf8;
  --yellow:#ffed9c;
  --pink:#fec1d0;
  --brown:#6d412a;
  --peach:#fed1c1;

  --pink-soft:#fed8e2;
  --pink-deep:#f7a8bf;
  /* depth only, never text: the new --brown already clears AA everywhere */
  --brown-deep:#4e2f1e;
  --ink:#4a2415;

  --font-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --font-hero:"Atma","Fredoka","Trebuchet MS",system-ui,sans-serif;
  --font-script:"Yuyu","Segoe Script",cursive;
  --font-body:"Nunito","Segoe UI",system-ui,sans-serif;

  --r-lg:2.5rem;
  --r-pill:999px;
  --shadow-lift:0 30px 60px -20px rgba(109,65,42,.45);
  --wrap-max:1200px;
  --gutter:clamp(1.25rem,4vw,2.5rem);

  /* one display size for every section heading */
  --fs-display:clamp(2.2rem,6vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--brown);
  line-height:1.02;
  margin:0;
  letter-spacing:-.01em;
}

img{max-width:100%;display:block}
a{color:var(--brown);text-decoration:none}

.wrap{max-width:var(--wrap-max);margin-inline:auto}
.section{padding:clamp(4rem,9vw,7.5rem) var(--gutter);position:relative}

.eyebrow{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brown);
  margin:0 0 .9rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:1.125rem;
  padding:.95rem 2rem;border-radius:var(--r-pill);
  border:2.5px solid var(--brown);
  background:var(--brown);color:var(--cream);
  cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
  box-shadow:0 6px 0 -1px var(--brown-deep);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 -1px var(--brown-deep)}
/* GSAP writes an inline transform on these, so the lift would fight the pull */
.btn[data-magnetic]:hover,.btn[data-magnetic]:active{transform:none}
.btn:active{transform:translateY(2px);box-shadow:0 3px 0 -1px var(--brown-deep)}
.btn--ghost{background:transparent;color:var(--brown);box-shadow:0 6px 0 -1px var(--pink-deep)}
.btn--ghost:hover{background:var(--pink-soft)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem clamp(1rem,4vw,2.5rem);
  /* At the top of the page the header is invisible so the hero reads as one
     clean field. The bar and its line fade in once the page scrolls. */
  background:transparent;
  border-bottom:2px solid transparent;
  transition:background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav--stuck{
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--pink-soft);
}
.nav__brand{display:flex;align-items:center;gap:.7rem}
.nav__brand img{width:46px;height:46px;border-radius:50%}
.nav__brand span{font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--brown);line-height:1.1}
.nav__links{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);list-style:none;margin:0;padding:0}
.nav__links a:not(.btn){
  font-family:var(--font-display);font-weight:500;font-size:1.125rem;
  padding:.4rem .2rem;position:relative;
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--pink-deep);border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.nav__links a:not(.btn):hover::after{transform:scaleX(1)}
@media (max-width:720px){
  .nav__links li:not(.nav__cta){display:none}
  .nav__brand span{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  padding:7rem var(--gutter) 5rem;overflow:hidden;
  background:var(--pink);
}
.hero__inner{max-width:var(--wrap-max);margin-inline:auto;text-align:center;position:relative;z-index:3}
.hero__title{
  font-family:var(--font-hero);
  font-size:clamp(3rem,12vw,9.5rem);
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.9;
}
/* Each line is a flex row so "by Ray" can sit beside the last word. The
   slide-up reveal is clipped by .mask, not .line - putting overflow on the
   row itself would crop the rotated signature. */
.hero__title .line{
  display:flex;align-items:flex-end;justify-content:center;
}
.hero__title .mask{display:block;overflow:hidden;padding-bottom:.04em}
.hero__by{
  font-family:var(--font-script);
  font-size:clamp(1.15rem,2.4vw,2.1rem);
  text-transform:none;letter-spacing:0;line-height:1;
  transform:rotate(-8deg) translateX(.4em);
  white-space:nowrap;
  padding-bottom:.75em;
  color:var(--brown);
  /* Zero-width so the signature hangs off the wordmark instead of pushing
     "& CRUMB" off-centre from "COCOA" - it was 37px out otherwise. */
  flex:0 0 0;
  width:0;
  overflow:visible;
}
.hero__sub{
  max-width:44ch;margin:1.6rem auto 2.2rem;
  font-size:clamp(1.05rem,.95rem + .6vw,1.45rem);
  color:var(--brown);
}
.hero__actions{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}

/* cookies launching up from the bottom edge */
.hero__stage{
  position:absolute;inset:0;
  z-index:1;pointer-events:none;overflow:hidden;
}
.fly{
  position:absolute;top:100%;left:0;
  width:var(--fly-size,86px);
  will-change:transform;
  filter:drop-shadow(0 12px 18px rgba(109,65,42,.25));
  opacity:0;
}

/* rotating game badge */
.badge{
  position:fixed;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);
  z-index:70;width:clamp(104px,11vw,140px);aspect-ratio:1;
  display:grid;place-items:center;border:none;background:none;cursor:pointer;
  padding:0;
}
.badge__blob{position:absolute;inset:0;color:var(--yellow);filter:drop-shadow(0 10px 20px rgba(109,65,42,.3))}
.badge__blob svg{width:100%;height:100%;display:block}
.badge__label{
  position:relative;z-index:2;text-align:center;
  font-family:var(--font-display);font-weight:700;color:var(--brown);
  font-size:clamp(.95rem,1.5vw,1.125rem);line-height:1;text-transform:uppercase;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.badge__label small{display:block;font-size:max(11px,.62em);letter-spacing:.12em;margin:.18em 0}
.badge:hover .badge__label{transform:scale(1.06)}

/* ---------- flavours (no cards - blobs + curved names) ---------- */
.flavours{background:var(--cream);position:relative}
.flavours__head{text-align:center;max-width:52ch;margin:0 auto clamp(2.5rem,6vw,4.5rem)}
.flavours__head h2{font-size:var(--fs-display)}

.flavour-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3rem);
}

.flavour{text-align:center;position:relative}
.flavour__stage{
  position:relative;width:min(320px,80vw);aspect-ratio:1;
  margin:0 auto 1.2rem;display:grid;place-items:center;
  cursor:pointer;
}
/* The blob morph runs in CSS, not GSAP: GSAP's string interpolation drops the
   "/" half of an 8-value border-radius, which flattens the blob into a squircle. */
@keyframes blobMorph{
  0%,100%{border-radius:64% 36% 43% 57% / 38% 58% 42% 62%}
  25%    {border-radius:38% 62% 66% 34% / 61% 38% 62% 39%}
  50%    {border-radius:57% 43% 33% 67% / 44% 65% 35% 56%}
  75%    {border-radius:44% 56% 59% 41% / 63% 37% 63% 37%}
}
.flavour__blob{
  position:absolute;inset:5%;
  background:var(--pink);
  border-radius:64% 36% 43% 57% / 38% 58% 42% 62%;
  animation:blobMorph 20s ease-in-out infinite;
  will-change:border-radius;
}
.flavour:nth-child(2) .flavour__blob{animation-delay:-5s}
.flavour:nth-child(3) .flavour__blob{animation-delay:-10s}
.flavour:nth-child(4) .flavour__blob{animation-delay:-15s}
.flavour:nth-child(5) .flavour__blob{animation-delay:-7s}
.flavour:nth-child(6) .flavour__blob{animation-delay:-13s}
@media (prefers-reduced-motion:reduce){
  .flavour__blob{animation:none}
}
.flavour:nth-child(even) .flavour__blob{background:var(--peach)}
.flavour:nth-child(3n) .flavour__blob{background:var(--yellow)}

.flavour__ring{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible;pointer-events:none}
.flavour__ring text{
  font-family:var(--font-display);font-weight:600;
  font-size:18px;letter-spacing:.16em;text-transform:uppercase;
  fill:var(--brown);
}
.flavour__cookie{
  position:relative;z-index:2;width:66%;
  filter:drop-shadow(0 16px 22px rgba(109,65,42,.3));
  will-change:transform;
}
.flavour__crumb{position:absolute;width:16px;z-index:1;opacity:0;pointer-events:none}
.flavour h3{font-size:1.45rem;margin-bottom:.35rem}
.flavour p{margin:0 auto;max-width:30ch;color:var(--brown)}

.flavour--soon .flavour__cookie{opacity:.3;filter:none;width:46%}
.flavour__soon{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-weight:700;color:var(--brown);
  background:var(--cream);border:2.5px dashed var(--brown);
  padding:.55rem 1.15rem;border-radius:var(--r-pill);
  font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}

/* ---------- story ---------- */
/* The full pink carries this section; cream becomes the accent, showing up as
   cutout doodles in the background. */
.story{
  background:var(--pink);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  position:relative;
  overflow:hidden;
}
.story .wrap{position:relative;z-index:2}

.doodles{position:absolute;inset:0;z-index:1;pointer-events:none}
.doodle{
  position:absolute;
  fill:var(--cream);
  stroke:var(--cream);
  width:var(--d-size,44px);
  opacity:.9;
}
/* scattered, deliberately uneven - it should read as hand-placed */
.doodle--a{--d-size:52px; top:9%;  left:4%;   transform:rotate(-12deg)}
.doodle--b{--d-size:104px;top:62%; left:2%;   opacity:.65}
.doodle--c{--d-size:76px; top:26%; left:44%;  transform:rotate(8deg); opacity:.7}
.doodle--d{--d-size:34px; top:76%; left:38%;  transform:rotate(20deg)}
.doodle--e{--d-size:22px; top:16%; left:30%;  opacity:.8}
.doodle--f{--d-size:68px; top:84%; right:8%;  left:auto; transform:rotate(-6deg); opacity:.7}
.doodle--g{--d-size:150px;top:-6%; right:-3%; left:auto; opacity:.5}

@media (max-width:900px){
  /* fewer shapes on small screens so they never crowd the copy */
  .doodle--c,.doodle--e,.doodle--d{display:none}
}
.story__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.story__grid{grid-template-columns:1.05fr .95fr}}
.story h2{font-size:var(--fs-display);margin-bottom:1.2rem}
.story p{color:var(--brown);margin:0 0 1.1rem;max-width:52ch}
.story em{color:var(--brown);font-style:italic;font-weight:700}
.story__photo img{
  border-radius:58% 42% 52% 48% / 48% 55% 45% 52%;
  box-shadow:var(--shadow-lift);
  aspect-ratio:1;object-fit:cover;width:100%;
}

/* ---------- boxes / pricing ---------- */
/* story is now the full pink, so boxes reads as its own lighter step and
   needs its top padding back */
.boxes{background:var(--pink-soft)}
.boxes__head{text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem)}
.boxes__head h2{font-size:var(--fs-display)}
.box-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));max-width:760px;margin-inline:auto}
.box{
  background:var(--cream);border:3px solid var(--brown);
  border-radius:var(--r-lg);padding:2.2rem 1.5rem;text-align:center;
  box-shadow:0 10px 0 -2px var(--brown);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.box:hover{transform:translateY(-6px)}
.box__count{font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--brown)}
.box__price{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);color:var(--brown);line-height:1;margin:.4rem 0}
.box__note{color:var(--brown);opacity:.85}
.boxes__foot{text-align:center;margin-top:2.5rem;color:var(--brown)}
.boxes__foot strong{color:var(--brown)}

/* ---------- order / instagram ---------- */
.order{background:var(--brown);color:var(--cream);text-align:center;border-radius:var(--r-lg) var(--r-lg) 0 0}
.order h2{color:var(--cream);font-size:var(--fs-display);margin-bottom:1rem}
.order p{max-width:46ch;margin:0 auto 2rem;opacity:.92}
.order .btn{background:var(--yellow);color:var(--brown);border-color:var(--yellow);box-shadow:0 6px 0 -1px #e6ce77}
.order .btn:hover{box-shadow:0 10px 0 -1px #e6ce77}

/* ---------- footer ---------- */
.footer{
  background:var(--brown);color:var(--cream);
  padding:2.5rem var(--gutter) 3.5rem;text-align:center;
  position:relative;overflow:hidden;
  /* Overlap the order section by 1px. Both are brown, but ScrollSmoother
     translates by fractional pixels, so the seam between them rounds
     independently and flashes a hairline of the cream body during scroll. */
  margin-top:-1px;
}
.footer .wrap{position:relative;z-index:2}

/* peach cutout doodles, same idea as the story section */
.footer .doodles .doodle{color:var(--peach)}
.footer .doodle--a{--d-size:44px; top:14%; left:7%;  transform:rotate(-14deg); opacity:.55}
.footer .doodle--b{--d-size:78px; top:52%; left:16%; opacity:.4}
.footer .doodle--c{--d-size:62px; top:20%; right:12%; left:auto; transform:rotate(10deg); opacity:.45}
.footer .doodle--d{--d-size:30px; top:66%; right:24%; left:auto; transform:rotate(18deg); opacity:.6}
.footer .doodle--e{--d-size:18px; top:30%; left:30%; opacity:.5}
@media (max-width:900px){
  .footer .doodle--b,.footer .doodle--e{display:none}
}
.footer img{width:64px;height:64px;border-radius:50%;margin:0 auto 1rem}
.footer p{margin:.3rem 0;font-size:1.125rem;opacity:.92}
.footer a{color:var(--yellow)}

/* ---------- cursor follower ---------- */
.cursor-cookie{
  position:fixed;top:0;left:0;
  width:34px;height:auto;
  pointer-events:none;          /* never eat a click */
  z-index:200;                  /* above the nav and the game badge */
  opacity:0;
  will-change:transform;
  filter:drop-shadow(0 4px 8px rgba(109,65,42,.35));
}
/* no cursor to follow on touch, and it is pure decoration */
@media (hover:none),(pointer:coarse){.cursor-cookie{display:none}}
@media (prefers-reduced-motion:reduce){.cursor-cookie{display:none}}

/* ---------- utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--brown);outline-offset:3px;border-radius:6px}
.order :focus-visible,.footer :focus-visible{outline-color:var(--yellow)}