/* The hero takes on the color of whichever cup is up, with that cup's toppings
   floating around it. Sections melt into one another on the way down the page. */

/* ---------- The hero, in the color of the cup ---------- */
.scoop-hero{
  --hero-bg:#FFDFE9;--hero-disc:#F9B5CB;--hero-pop:#FADD8C;--hero-seal:#FADD8C;
  background-color:var(--hero-bg);
  background-image:radial-gradient(rgba(21,54,90,.075) 1.1px,transparent 1.2px);
  background-size:15px 15px;
  transition:background-color .9s ease;
}
.scoop-hero:has([data-hero-flavor="oreo"]){--hero-bg:#D6EDFA;--hero-disc:#A9D6F1;--hero-pop:#F8BCD0}
.scoop-hero:has([data-hero-flavor="chocolate"]){--hero-bg:#FDECBB;--hero-disc:#F7D36C;--hero-pop:#F8BCD0;--hero-seal:#F8BCD0}
.scoop-hero__defs{position:absolute;width:0;height:0}
.scoop-hero__lot:before{background:var(--hero-pop);transition:background-color .9s ease}
.scoop-hero__grid{padding-top:22px;padding-bottom:70px;min-height:0}
.scoop-hero .scoop-stage{max-width:575px}

/* the bar sits clear on the color until the page moves */
.nav:not(.is-stuck):not(.is-open){background:transparent;border-bottom-color:transparent}
.nav{transition:background-color .3s,border-color .25s,box-shadow .25s}

/* the plate behind the cup, with a slow sunburst turning on it */
.scoop-hero .scoop-stage[data-hero-flavor] .scoop-stage__circle{background:var(--hero-disc);border:2px solid var(--ink);transition:background-color .9s ease}
.scoop-stage__circle::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.5) 0 10deg,transparent 10deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0 30%,transparent 72%);mask:radial-gradient(circle,#000 0 30%,transparent 72%);
  animation:spin 80s linear infinite;
}
.scoop-stage__circle>span{color:rgba(21,54,90,.13)}
.scoop-stage__seal{background:var(--hero-seal);transition:background-color .9s ease}
.scoop-stage__cup{translate:calc(var(--px,0) * -12px) calc(var(--py,0) * -9px);transition:translate .7s cubic-bezier(.2,.8,.2,1)}

/* toppings in the air; each one drifts on its own and leans away from the pointer */
.scoop-stage__toppings{position:absolute;inset:0;z-index:2;pointer-events:none}
.top{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;color:var(--c,#F17E96);
  translate:calc(var(--px,0) * var(--d,20) * 1px) calc(var(--py,0) * var(--d,20) * 1px);
  transition:translate .7s cubic-bezier(.2,.8,.2,1),scale .22s ease-in,opacity .22s;
}
.top svg{
  display:block;width:100%;height:100%;overflow:visible;rotate:var(--r,0deg);
  filter:drop-shadow(3px 5px 0 rgba(21,54,90,.14));
  animation:top-in .75s cubic-bezier(.2,1.6,.4,1) calc(var(--i,0) * 70ms) backwards,
            top-float var(--t,6s) ease-in-out calc(var(--i,0) * -.8s) infinite alternate;
}
.scoop-stage__toppings.is-out .top{scale:0;opacity:0}
@keyframes top-in{from{scale:0;opacity:0}}
@keyframes top-float{from{transform:translateY(-6px) rotate(-5deg)}to{transform:translateY(8px) rotate(6deg)}}
/* small marks are drawn, not typed: iPhones turn ✳ and ↗ into colour emoji */
.glyph{display:inline-block;width:.8em;height:.8em;vertical-align:-.06em;overflow:visible}
.scoop-stage__spark .glyph{display:block;stroke-width:1.5}

/* flavor names on the switcher, where there is room for them */
.scoop-stage__choice-name{display:none}
.scoop-stage__choices,.scoop-stage__pause{border:1.6px solid var(--ink);box-shadow:2px 3px 0 var(--ink)}
@media(min-width:1101px){
  .scoop-stage__choices{gap:3px;padding:4px}
  .scoop-stage__choice{width:auto;height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 15px 0 11px;border-radius:30px;
    font:700 .82rem/1 var(--font-ui);color:var(--ink);transition:background .2s,color .2s}
  .scoop-stage__choice-name{display:inline}
  .scoop-stage__choice:hover{background:rgba(21,54,90,.08)}
  .scoop-stage__choice[aria-pressed="true"]{background:var(--ink);color:#fff}
  .scoop-stage__choice[aria-pressed="true"]::before{box-shadow:0 0 0 2px #fff;transform:none;border-color:#fff}
  .scoop-stage__pause{width:46px;height:46px}
}

/* three promises on tickets along the bottom of the hero */
.scoop-hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding-top:2px;padding-bottom:30px}
.scoop-hero__facts li{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 14px;
  border:1.7px solid var(--ink);border-radius:17px 11px 16px 10px / 11px 16px 10px 15px;
  background:var(--paper);box-shadow:3px 4px 0 var(--ink)}
.scoop-hero__facts li:nth-child(1){rotate:-1deg}
.scoop-hero__facts li:nth-child(2){rotate:.7deg}
.scoop-hero__facts li:nth-child(3){rotate:-.6deg}
.scoop-hero__facts svg{flex:none;width:52px;height:52px}
.scoop-hero__facts b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:-.01em;color:var(--ice)}
.scoop-hero__facts div>span{display:block;font-family:var(--font-hand);font-weight:700;font-size:1.2rem;line-height:1.15;color:var(--ink)}
body.ready .scoop-hero__facts li{animation:riseIn .7s var(--ease) backwards}
body.ready .scoop-hero__facts li:nth-child(2){animation-delay:.1s}
body.ready .scoop-hero__facts li:nth-child(3){animation-delay:.2s}

/* the shop's door sign, hung by the address */
.scoop-hero__location{align-items:center;gap:6px 24px}
.scoop-hero__location .sign{margin-top:-6px}
.scoop-hero__location>a{font-weight:700;font-size:.86rem;color:var(--ink)}

/* and a smaller one hung from the top edge of the bar, on a wide screen.
   The box keeps its place in the row; the sign inside hangs from a nail
   four pixels below the top of the bar, whatever the bar's height. */
.nav__open{display:none}
@media(min-width:1240px){
  .nav__open{display:block;position:relative;width:176px;height:40px;flex:none}
  .nav__open .sign{position:absolute;left:0;top:calc(4px - (var(--nav-h) - 40px) / 2)}
  .nav__open .sign--mini{--sw:176px;--cord:20px;--eye-x:13px;--eye-y:9px}
  .nav__open .sign__card{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:7px 22px 4px}
  .nav__open .sign__lead,.nav__open .sign__flake{display:none}
  .nav__open .sign__wrap{padding-bottom:5px}
  .nav__open .sign__word{font-size:1.55rem}
  .nav__open .sign__sub{font-size:1rem;white-space:nowrap}
}

@media(max-width:1100px){
  .scoop-hero__grid{padding-top:26px;padding-bottom:66px}
  .scoop-hero__facts{gap:12px}
  .scoop-hero__facts li{padding:10px 12px;gap:10px}
  .scoop-hero__facts svg{width:44px;height:44px}
  .scoop-hero__facts b{font-size:1.1rem}
  .scoop-hero__facts div>span{font-size:1.05rem}
}
@media(max-width:700px){
  .scoop-hero__grid{padding-top:26px;padding-bottom:38px}
  .scoop-hero__facts{display:none}
  .scoop-stage__toppings{inset:5% 0 0}
  .top:nth-child(n+7){display:none}
}

/* ---------- Sections melt into the one below ---------- */
.drip{position:absolute;left:0;right:0;top:0;height:96px;overflow:hidden;z-index:2;pointer-events:none;color:var(--drip,var(--paper))}
.drip svg{display:block;position:absolute;left:0;max-width:none}
.drip path{fill:currentColor;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .35s}
#kinds,#gallery{padding-top:118px}
#menu{padding-top:118px;border-block:0}
/* the color above "what we make" follows the flavor that was picked there */
.flavor-finder{border-bottom:0}
#kinds .drip{--drip:#f8bcd0}
.flavor-finder[data-flavor="chocolatey"] ~ #kinds .drip{--drip:#c7eaf8}
.flavor-finder[data-flavor="crunchy"] ~ #kinds .drip{--drip:#fadd8c}
#menu .drip{--drip:var(--paper)}
#gallery .drip{--drip:#DCECF6}
/* the footer rises into the page in scoops */
#visit::after{content:'';position:absolute;inset-inline:0;bottom:0;height:13px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--ice) 69%,transparent 72%) 0 0 / 26px 26px repeat-x}
@media(max-width:700px){
  .drip{height:64px}
  #kinds,#gallery,#menu{padding-top:88px}
}

@media(prefers-reduced-motion:reduce){
  .scoop-stage__circle::before,.top svg{animation:none}
  .top,.scoop-stage__cup{translate:none;transition:none}
}