/* ============================================================
   v2 layout: built on the shop's own meaning.
   Baba ghanoush = "pampered daddy". Mama Ghanoush = mama does the pampering.
   Brand vocabulary: logo circle cut in quarters, stripes, printed placemats,
   "Sound of happiness". Only the scroll-transition feel is borrowed.
   ============================================================ */

canvas.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.t-dark canvas.field, .t-deep canvas.field { --c1: var(--mid); --c2: var(--on-dark); --c3: var(--hot); }
.t-light canvas.field, .t-mid canvas.field { --c1: var(--dark); --c2: var(--mid); --c3: var(--hot); }
/* keep particles quiet where the words are */
.happy canvas.field {
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 50% 50%, rgb(0 0 0 / .12), #000 100%);
  mask-image: radial-gradient(ellipse 46% 40% at 50% 50%, rgb(0 0 0 / .12), #000 100%);
}
.steps canvas.field {
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 40%, #000 62%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 40%, #000 62%);
}

/* ---------- 1. Statement over the particle field ---------- */
.happy {
  position: relative;
  min-height: 130svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18vh var(--gutter);
}
.happy-in { position: relative; max-width: 1100px; text-align: center; }
.happy .label { color: var(--mid); }
.happy h2 {
  margin: 28px 0 0;
  font: 400 clamp(44px, 6.4vw, 104px)/1 var(--display);
  letter-spacing: -.01em;
}
.happy h2 em { font-style: normal; color: var(--mid); }
.happy p { max-width: 34em; margin: 34px auto 0; font-size: 19px; opacity: .85; }

/* ---------- 2. Menu on a printed placemat ---------- */
.placemat-sec { position: relative; padding: 14vh var(--gutter); overflow: hidden; }
.placemat-grid {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 6vw, 110px);
  align-items: start;
}
.placemat-head h2 {
  margin: 14px 0 0;
  font: 400 clamp(52px, 7vw, 116px)/.92 var(--display);
}
.placemat-head p { margin: 26px 0 0; max-width: 24em; opacity: .8; }
.placemat-sec .tabs {
  margin: 44px 0 0;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.placemat-sec .tab-ind { border-radius: 999px; }
.placemat-sec .tab + .tab { border-left: 0; }
.mat {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 62svh;
  padding: clamp(28px, 4vw, 60px);
  background: color-mix(in srgb, var(--mid) 26%, var(--light));
  border-radius: 4px;
}
.mat-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--dark); opacity: .5; }
.mat-lines * { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.js .mat-lines .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--inout); transition-delay: calc(var(--i, 0) * 60ms); }
.js .mat.in .mat-lines .draw { stroke-dashoffset: 0; }
.mat .panel { position: relative; padding: 0; }
.mat .panel li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 20px; }
.mat .panel li b { font-size: clamp(26px, 2.6vw, 38px); }
.mat .panel li span { grid-column: 1; }

/* ---------- 3. Photo closes into the logo circle ---------- */
.cover-circle {
  --a: clamp(0, calc((var(--p) - .2) / .6), 1);
  --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
}
.cover-circle .cover-media {
  clip-path: circle(calc((1 - var(--e)) * 75% + var(--e) * min(30vh, 34vw)) at 50% 48%);
}
.cover-circle .cover-media img { transform: scale(calc(1.15 - var(--e) * .1)) rotate(calc(var(--e) * -8deg)); }
.cover-circle .cover-shade { opacity: calc(1 - var(--e)); }
.cover-circle .cover-title { opacity: clamp(0, calc(1 - var(--e) * 1.8), 1); transform: scale(calc(1 + var(--e) * .2)); }
.cover-logo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: calc(min(30vh, 34vw) * 2);
  color: var(--light);
  opacity: clamp(0, calc((var(--a) - .55) * 3), 1);
  transform: translate(-50%, -50%) rotate(calc((1 - var(--a)) * 90deg));
  pointer-events: none;
}
.cover-logo .emblem .ring, .cover-logo .emblem .cross { stroke-width: 2; }
.emblem.named .ring { stroke-width: 1.4; } /* the printed logo has a thin rim */
.cover-circle .cover-caption {
  bottom: 8vh;
  opacity: clamp(0, calc((var(--a) - .7) * 4), 1);
}

/* ---------- 4. Fry / Roll / Share: one block that changes state ---------- */
.steps { position: relative; height: 330vh; }
.steps-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 70px);
  padding: 90px var(--gutter) 60px;
}
.steps-sticky > div { position: relative; }
.steps-words { position: relative; height: 1em; font: 400 clamp(96px, 15vw, 240px)/.86 var(--display); text-transform: uppercase; }
.step-word { position: absolute; left: 0; bottom: 0; white-space: nowrap; }
.step-word .w { overflow: hidden !important; padding-bottom: .06em; }
.step-word .ch { transform: translateY(110%); transition: transform .9s var(--expo); transition-delay: calc(var(--c) * 35ms); }
.step-word.on .ch { transform: none; }
.step-word.past .ch { transform: translateY(-110%); transition-delay: calc(var(--c) * 20ms); }
.steps-copy { position: relative; min-height: 8em; margin-top: 36px; max-width: 26em; }
.step-text { position: absolute; inset: 0 auto auto 0; margin: 0; font-size: 19px; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--out), transform .8s var(--expo); }
.step-text.on { opacity: 1; transform: none; transition-delay: .15s; }
.steps-nav { display: flex; gap: 10px; margin-top: 30px; }
.steps-nav span {
  position: relative;
  padding: 10px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 12px/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
}
.steps-nav span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mid);
  transform: scaleX(0);
  transform-origin: left;
}
.steps-nav span.past::before { transform: scaleX(1); }
.steps-nav span.on::before { transform: scaleX(var(--sp, 0)); background: color-mix(in srgb, var(--mid) 38%, transparent); }
.steps-nav span.past { color: var(--ink); }
.steps-nav span.on { border-color: var(--mid); }

.steps-photos { position: relative; justify-self: center; width: min(40vw, 62vh); aspect-ratio: 1; }
.step-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(.9) rotate(-8deg);
  transition: opacity .7s var(--out), transform 1.1s var(--expo), border-radius 1.1s var(--expo);
}
.step-photo img { width: 100%; height: 100%; object-fit: cover; }
.step-photo[data-i="0"] { border-radius: 100% 0 0 0; }
.step-photo[data-i="1"] { border-radius: 0 100% 0 0; }
.step-photo[data-i="2"] { border-radius: 0 0 100% 0; }
.step-photo.on { opacity: 1; transform: none; }
.step-photo.past { transform: scale(1.06) rotate(6deg); }
.steps-photos::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: .6;
  transform: rotate(calc(var(--sp, 0) * 90deg));
}

/* ---------- 5. Eat here or order in ---------- */
.order-sec { position: relative; padding: 14vh var(--gutter) 6vh; }
.order-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.order-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  min-height: 70svh;
  padding: clamp(26px, 3.4vw, 54px);
  overflow: hidden;
  border-radius: 4px;
}
.order-card.here { background: var(--dark); color: var(--on-dark); --line: var(--mid); }
.order-card.deliver { background: var(--mid); color: var(--ink); --line: var(--dark); }
.order-card h3 { margin: 0; font: 400 clamp(56px, 7vw, 120px)/.9 var(--display); }
.order-card p { margin: 0; max-width: 22em; font-size: 18px; }
.order-card .btn { justify-self: start; }
/* a card with its own links (e-food, Wolt) instead of being one big link */
.order-card:has(.order-links) { grid-template-rows: auto 1fr auto auto; }
/* the delivery apps' own marks, one in each bottom corner: plain ink until hovered, then their own colour */
.order-card .order-links { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.brand {
  display: block;
  height: var(--h);
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color .4s var(--out);
}
/* the efood file has empty space around its mark (ink is 56% of its height, starting 26% in), so it is
   drawn taller and pulled left until both marks come out about the same width and height */
.brand.efood { --h: clamp(78px, 8.5vw, 140px); margin: 0 0 calc(var(--h) * -.22) calc(var(--h) * -.26); aspect-ratio: 129 / 56; --logo: url("img/logo-efood.svg"); --brand: #ed2e2e; }
.brand.wolt { --h: clamp(40px, 4.4vw, 72px); aspect-ratio: 720 / 262; --logo: url("img/logo-wolt.svg"); --brand: #009de0; }
.brand:hover, .brand:focus-visible { background-color: var(--brand); }
/* on a phone held upright there is no hover, so the marks just show their own colours */
@media (max-width: 860px) and (orientation: portrait) { .brand { background-color: var(--brand); } }
.order-plates { display: flex; gap: 12px; align-self: center; }
.order-plates img {
  width: clamp(90px, 10vw, 150px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transition: transform .9s var(--expo);
}
.order-plates img:nth-child(2) { transform: translateY(18px); }
.order-card:hover .order-plates img { transform: translateY(-8px) rotate(-6deg); }
.order-card:hover .order-plates img:nth-child(2) { transform: translateY(10px) rotate(6deg); }
.order-mark { position: absolute; right: -8%; bottom: -12%; width: 55%; color: var(--line); opacity: .35; transition: transform 1.4s var(--expo); }
.order-card:hover .order-mark { transform: rotate(90deg); }
/* keep the mark in the empty top-right corner so its lines never cross the text */
.order-mark { top: -14%; bottom: auto; width: 46%; }
.order-card > :not(.order-mark) { position: relative; z-index: 1; }

/* Footer tweak: corners become quarter circles, not dots */
.v2 .hours-grid .dot { width: 14px; height: 14px; background: var(--mid); }
.v2 .hours-grid .dot.a { border-radius: 0 0 100% 0; top: 0; left: 0; }
.v2 .hours-grid .dot.b { border-radius: 0 0 0 100%; top: 0; right: 0; }
.v2 .hours-grid .dot.c { border-radius: 0 100% 0 0; bottom: 0; left: 0; }
.v2 .hours-grid .dot.d { border-radius: 100% 0 0 0; bottom: 0; right: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .placemat-grid, .order-grid { grid-template-columns: 1fr; }
  .steps-sticky { grid-template-columns: 1fr; align-content: center; gap: 24px; padding-top: 80px; }
  .steps-photos { order: -1; width: min(70vw, 38vh); }
  .steps-words { font-size: clamp(64px, 20vw, 110px); }
  .steps-copy { margin-top: 18px; min-height: 7em; }
  .order-card { min-height: 56svh; }
  .steps canvas.field {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgb(0 0 0 / .1) 42%, rgb(0 0 0 / .1) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgb(0 0 0 / .1) 42%, rgb(0 0 0 / .1) 100%);
  }
  .mat { min-height: 0; }
}

/* ---------- Reduced motion ---------- */
.reduce .steps { height: auto; }
.reduce .steps-sticky { position: relative; height: auto; }
.reduce .step-word, .reduce .step-text, .reduce .step-photo { position: relative; opacity: 1; transform: none; }
.reduce .step-word .ch { transform: none; }
.reduce .steps-words { height: auto; }
.reduce .steps-photos { aspect-ratio: auto; display: grid; gap: 12px; }
.reduce .steps-copy { min-height: 0; display: grid; gap: 12px; }
.reduce .cover-logo { display: none; }

/* ============================================================
   Sound of happiness: pinned, scrubbed like the "Sit down" cover.
   A dark disc opens from the centre, words rise one by one along
   with a drawn curve, then the disc closes onto the menu.
   ============================================================ */
.hp {
  position: relative;
  height: 280vh;
  background: var(--light);
  --ao: clamp(0, calc(var(--p) / .26), 1);
  --eo: calc(var(--ao) * var(--ao) * (3 - 2 * var(--ao)));
  --ac: clamp(0, calc((var(--p) - .78) / .22), 1);
  --ec: calc(var(--ac) * var(--ac) * (3 - 2 * var(--ac)));
  --draw: clamp(0, calc((var(--p) - .12) / .5), 1);
}
.hp-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--light); }
.hp-disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--dark);
  clip-path: circle(calc((10vmin * (1 - var(--eo)) + var(--eo) * 75%) * (1 - var(--ec))) at 50% calc(50% + var(--ec) * 18%));
}
.hp-disc canvas.field {
  -webkit-mask-image: radial-gradient(ellipse 42% 30% at 50% 50%, rgb(0 0 0 / .08), rgb(0 0 0 / .25) 60%, #000 100%);
  mask-image: radial-gradient(ellipse 42% 30% at 50% 50%, rgb(0 0 0 / .08), rgb(0 0 0 / .25) 60%, #000 100%);
  opacity: calc(var(--eo) * (1 - var(--ec)));
  transform: scale(calc(1.25 - var(--eo) * .25));
}
.hp-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateY(calc((.5 - var(--p)) * 60px));
}
.hp-curve path {
  fill: none;
  stroke: var(--mid);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw));
  opacity: .85;
}
.hp-curve path.thin { stroke-width: 1; opacity: .45; stroke-dashoffset: calc(1 - clamp(0, calc(var(--draw) * 1.15 - .15), 1)); }
.hp-in {
  position: relative;
  max-width: 1100px;
  padding: 0 var(--gutter);
  text-align: center;
  transform: translateY(calc(var(--ec) * -8vh)) scale(calc(1 - var(--ec) * .12));
  opacity: calc(1 - var(--ec) * 1.4);
}
.hp-label {
  color: var(--mid);
  --k: clamp(0, calc((var(--p) - .16) * 10), 1);
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * 14px));
}
.hp h2 {
  margin: 28px 0 0;
  font: 400 clamp(40px, 6vw, 98px)/1.02 var(--display);
  letter-spacing: -.01em;
}
.hp-sub { max-width: 34em; margin: 34px auto 0; font-size: 19px; }
.hp-words .wi {
  --k: clamp(0, calc((var(--p) - var(--o) - var(--c) * .014) * 16), 1);
  opacity: var(--k);
  filter: blur(calc((1 - var(--k)) * 6px));
  transform: translateY(calc((1 - var(--k)) * 60%)) rotate(calc((1 - var(--k)) * 4deg));
  transform-origin: 0 100%;
}
.hp-sub .wi { --k: clamp(0, calc((var(--p) - var(--o) - var(--c) * .008) * 18), 1); opacity: calc(var(--k) * .85); }

@media (max-width: 860px) {
  .hp { height: 240vh; }
  .hp h2 { font-size: clamp(34px, 9.5vw, 52px); }
  .hp-sub { font-size: 17px; }
  .hp-disc canvas.field {
    -webkit-mask-image: radial-gradient(ellipse 60% 26% at 50% 42%, rgb(0 0 0 / .08), rgb(0 0 0 / .2) 70%, #000 100%);
    mask-image: radial-gradient(ellipse 60% 26% at 50% 42%, rgb(0 0 0 / .08), rgb(0 0 0 / .2) 70%, #000 100%);
  }
}

.reduce .hp { height: auto; }
.reduce .hp-sticky { position: relative; height: auto; }
.reduce .hp-disc { position: relative; clip-path: none; padding: 16vh 0; }
.reduce .hp-words .wi, .reduce .hp-label { opacity: 1; transform: none; }
.reduce .hp-in { transform: none; opacity: 1; }
.reduce .hp-curve path { stroke-dashoffset: 0; }

/* ============================================================
   Intro: the hero stays pinned and its logo circle is the transition.
   Timeline (--p over the pinned run):
   0 to .18   wordmark and labels leave, logo stays
   .08 to .32 logo circle grows past the screen, its stripes fade,
              inside it the particle scene is revealed
   .38 to .7  words rise, curve draws
   .84 to 1   circle closes back to nothing over the light menu ground
   ============================================================ */
.intro {
  height: 380vh;
  background: var(--light);
  --hp: clamp(0, calc(var(--p) / .18), 1);
  --ao: clamp(0, calc((var(--p) - .08) / .24), 1);
  --eo: calc(var(--ao) * var(--ao) * (3 - 2 * var(--ao)));
  --ac: clamp(0, calc((var(--p) - .84) / .16), 1);
  --ec: calc(var(--ac) * var(--ac) * (3 - 2 * var(--ac)));
  --draw: clamp(0, calc((var(--p) - .22) / .44), 1);
  --r0: calc(min(30vh, 250px, 46vw) * .46);
}
.hero-end { position: absolute; top: 0; left: 0; width: 1px; height: 100svh; pointer-events: none; }
.intro .hero { position: sticky; top: 0; background: var(--light); }
.intro .hero-curtain { opacity: clamp(0, calc((.33 - var(--p)) * 1000), 1); }

.intro .hp-disc {
  background: var(--deepest);
  clip-path: circle(calc(var(--r0) * (1 + var(--eo) * 9) * (1 - var(--ec))) at 50% 42%);
}
.intro .hp-in { padding-top: 2vh; }
.intro .hp-label { --k: clamp(0, calc((var(--p) - .25) * 12), 1); }

.intro .hero-top {
  transform: translateY(calc(var(--hp) * -60px));
  opacity: calc(1 - var(--hp) * 2.5);
}
.intro .wordmark {
  transform: translateY(calc(var(--hp) * -46svh)) scale(calc(1 - var(--hp) * .8));
  opacity: clamp(0, calc(1.6 - var(--hp) * 1.8), 1);
}
.intro .hero-emblem {
  top: 42%;
  transform: translate(-50%, -50%) scale(calc((1 + var(--eo) * 9) * (1 - var(--ec))));
  pointer-events: none;
}
.intro .hero-emblem .emblem { transform: rotate(calc(var(--eo) * 45deg - var(--ec) * 45deg)); }
.intro .hero-emblem .q1,
.intro .hero-emblem .q4,
.intro .hero-emblem .cross { opacity: clamp(0, calc(1 - var(--ao) * 2.4), 1); transition: none; }
.intro .hero-emblem .ring { vector-effect: non-scaling-stroke; stroke-width: 2.5; }

@media (max-width: 860px) {
  .intro { height: 330vh; }
}

.reduce .intro { height: auto; }
.reduce .intro .hero { position: relative; height: auto; min-height: 0; overflow: visible; }
.reduce .intro .hero-curtain { inset: 0 0 auto; height: 100svh; opacity: 1; }
.reduce .intro .hp-disc { position: relative; margin-top: 100svh; clip-path: none; padding-block: 16vh; }
.reduce .intro .hero-emblem { transform: translate(-50%, -50%); }

/* ============================================================
   "Come round to mama's." and the exit: the circle closes to a plate,
   the cross cuts it in four, the quarters fly to the corners and flip
   their arcs inward, landing on the menu's corner quarters.
   ============================================================ */
.v2 { --r0: calc(min(30vh, 250px, 46vw) * .46); --R: calc(var(--r0) * 1.5); --grow: .6; }

.intro {
  --ac: clamp(0, calc((var(--p) - .74) / .12), 1);
  --ec: calc(var(--ac) * var(--ac) * (3 - 2 * var(--ac)));
  --ax: clamp(0, calc((var(--p) - .85) / .05), 1);
  --as: clamp(0, calc((var(--p) - .9) / .1), 1);
  --es: calc(var(--as) * var(--as) * (3 - 2 * var(--as)));
  --scale: calc((1 + var(--eo) * 9) * (1 - var(--ec)) + 1.5 * var(--ec));
}
.intro .hp-disc {
  clip-path: circle(calc(var(--r0) * var(--scale)) at 50% 42%);
  opacity: clamp(0, calc((.9 - var(--p)) * 1000), 1);
}
.intro .hero-emblem {
  transform: translate(-50%, -50%) scale(var(--scale));
  opacity: clamp(0, calc(1 - var(--as) * 4), 1);
}
.intro .hero-emblem .emblem { transform: rotate(calc(var(--eo) * 45deg - var(--ec) * 45deg)); }
.intro .hero-emblem .cross { opacity: clamp(0, calc(1 - var(--ao) * 2.4 + var(--ax)), 1); }

/* the sentence */
.intro .hp-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px 0 0;
  font: 400 clamp(56px, 8.4vw, 140px)/.92 var(--display);
  letter-spacing: -.01em;
}
.hp-round {
  --k: clamp(0, calc((var(--p) - .37) * 9), 1);
  display: block;
  width: min(60vw, 620px);
  margin: -.05em 0 -.28em;
  opacity: var(--k);
  transform: rotate(calc((1 - var(--k)) * -28deg)) scale(calc(.82 + var(--k) * .18));
  filter: blur(calc((1 - var(--k)) * 6px));
}
.hp-round svg { display: block; width: 100%; height: auto; overflow: visible; }
.hp-round text { font: 400 172px var(--display); fill: var(--mid); }
.hp-round .arc {
  fill: none;
  stroke: var(--mid);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .4) * 5), 1));
  opacity: .55;
}

/* the four quarters */
.hp-quarters { position: absolute; inset: 0; pointer-events: none; opacity: clamp(0, calc((var(--p) - .9) * 1000), 1); }
.hp-quarters i {
  position: absolute;
  width: calc(var(--R) * (1 + var(--es) * var(--grow)));
  height: calc(var(--R) * (1 + var(--es) * var(--grow)));
  background: var(--deepest);
}
.hp-quarters .tl {
  left: calc((50% - var(--R)) * (1 - var(--es)));
  top: calc((42% - var(--R)) * (1 - var(--es)));
  border-top-left-radius: calc((1 - var(--es)) * 100%);
  border-bottom-right-radius: calc(var(--es) * 100%);
}
.hp-quarters .tr {
  right: calc((50% - var(--R)) * (1 - var(--es)));
  top: calc((42% - var(--R)) * (1 - var(--es)));
  border-top-right-radius: calc((1 - var(--es)) * 100%);
  border-bottom-left-radius: calc(var(--es) * 100%);
}
.hp-quarters .bl {
  left: calc((50% - var(--R)) * (1 - var(--es)));
  bottom: calc((58% - var(--R)) * (1 - var(--es)));
  border-bottom-left-radius: calc((1 - var(--es)) * 100%);
  border-top-right-radius: calc(var(--es) * 100%);
}
.hp-quarters .br {
  right: calc((50% - var(--R)) * (1 - var(--es)));
  bottom: calc((58% - var(--R)) * (1 - var(--es)));
  border-bottom-right-radius: calc((1 - var(--es)) * 100%);
  border-top-left-radius: calc(var(--es) * 100%);
}

/* where they land: the menu's top corners, which then tuck away */
.pm-q {
  --t: clamp(0, calc((var(--p) - .04) * 2.6), 1);
  position: absolute;
  top: 0;
  width: calc(var(--R) * 1.6);
  height: calc(var(--R) * 1.6);
  background: var(--deepest);
  transform: scale(calc(1 - var(--t) * .7));
  pointer-events: none;
}
.pm-q.l { left: 0; border-bottom-right-radius: 100%; transform-origin: 0 0; }
.pm-q.r { right: 0; border-bottom-left-radius: 100%; transform-origin: 100% 0; }

@media (max-width: 860px) {
  .intro .hp-line { font-size: clamp(48px, 14vw, 72px); }
  .hp-round { width: 82vw; }
  .v2 { --grow: 0; }
}

.reduce .hp-quarters, .reduce .pm-q { display: none; }
.reduce .hp-round { opacity: 1; transform: none; filter: none; }
.reduce .hp-round .arc { stroke-dashoffset: 0; }

/* ============================================================
   Inside the opened logo circle: the capsule photo row from v1
   ============================================================ */
.hp-gallery {
  position: relative;
  width: 100%;
  overflow: visible;
  transform: translateY(calc(var(--ec) * -6vh)) scale(calc(1 - var(--ec) * .15));
  opacity: calc(1 - var(--ec) * 1.5);
}
.intro .pills-track { transform: translateX(calc((.55 - var(--p)) * 34vw)); }
.intro .pill {
  --k: clamp(0, calc((var(--p) - .26 - var(--i) * .035) * 9), 1);
  opacity: var(--k);
  transform:
    translateY(calc((1 - var(--k)) * 22vh + var(--o) * (var(--p) - .5) * 160px))
    rotate(calc(var(--o) * (var(--p) - .5) * 10deg + (1 - var(--k)) * var(--o) * 12deg))
    scale(calc(.85 + var(--k) * .15));
}
.intro .pill.center { outline-color: var(--mid); }

.reduce .intro .pill { opacity: 1; transform: none; }
.reduce .intro .pills-track { transform: none; }

/* photo row sizing inside the circle */
.intro .pills-track { gap: 1.6vw; transform: translateX(calc((.52 - var(--p)) * 22vw)); }
.intro .pill { width: clamp(110px, 13.5vw, 210px); }
.intro .pill.center { width: clamp(140px, 17vw, 270px); }
@media (max-width: 860px) {
  .intro .pills-track { gap: 10px; transform: translateX(calc((.52 - var(--p)) * 40vw)); }
  .intro .pill { width: 30vw; }
  .intro .pill.center { width: 38vw; }
}

/* No closing transition: the opened circle stays full and the next section simply scrolls in */
.intro {
  height: 300vh;
  --ac: 0;
  --ec: 0;
  --ax: 0;
  --as: 0;
  --es: 0;
}
.intro .hp-disc { opacity: 1; }
.intro .hero-emblem { opacity: 1; }
.hp-quarters { display: none; }
@media (max-width: 860px) {
  .intro { height: 270vh; }
}

/* Sit down is the hero now */
.cover-hero .hero-top { z-index: 2; color: #fff; }
.cover-hero .cover-title { z-index: 1; }
.cover-hero .hero-top { top: 86px; }
@media (max-width: 860px) { .cover-hero .hero-top { top: 78px; } }

/* ============================================================
   Hero opening = the scroll transition played in reverse.
   The logo draws on dark green, the circle opens onto the room,
   the title settles, labels drop. Scrolling later closes it again.
   ============================================================ */
@property --io { syntax: "<number>"; inherits: true; initial-value: 0; }

.cover-hero {
  --io: 1;
  --e: max(calc(var(--a) * var(--a) * (3 - 2 * var(--a))), calc(1 - var(--io)));
}
.js .cover-hero { --io: 0; }
.js .ready .cover-hero { animation: hero-open 1s cubic-bezier(.76, 0, .24, 1) 1.2s both; }
@keyframes hero-open { from { --io: 0; } to { --io: 1; } }
/* the logo draws in about a second here, so the circle can open sooner */
.js .cover-hero .cover-logo .emblem.draw .ring { transition-duration: 1s; }
.js .cover-hero .cover-logo .emblem.draw .cross { transition-duration: .6s; transition-delay: .3s; }
.js .cover-hero .cover-logo .emblem.draw .bar { transition-duration: .6s; transition-delay: calc(400ms + var(--i) * 25ms); }
.js .cover-hero .cover-logo .emblem-name { transition-duration: .5s; transition-delay: .45s; }

.cover-hero .cover-logo {
  opacity: max(clamp(0, calc((var(--a) - .55) * 3), 1), clamp(0, calc(1 - var(--io) * 1.7), 1));
  transform: translate(-50%, -50%) rotate(calc((1 - var(--a)) * 90deg * var(--io)));
}
.cover-hero .cover-media img { transform: scale(calc(1.15 - var(--e) * .1 + (1 - var(--io)) * .12)); }

/* keep the title hidden until fonts are in, then let the letters rise as the circle opens */
.js .cover-hero .cover-title { visibility: hidden; }
.js .ready .cover-hero .cover-title { visibility: visible; }
.cover-hero .cover-title { --d: 1450ms; }

.js .ready .cover-hero .hero-top .drop:nth-child(1) { transition-delay: 1.8s; }
.js .ready .cover-hero .hero-top .drop:nth-child(2) { transition-delay: 1.9s; }
.js .ready .cover-hero .hero-top .drop:nth-child(3) { transition-delay: 2s; }

.reduce .cover-hero { --io: 1 !important; animation: none !important; }
.reduce .cover-hero .cover-title { visibility: visible; }
/* the title letters wait for the opening to start, even if the reveal fired earlier */
.js body:not(.ready) .cover-hero .reveal-chars .ch { opacity: 0; transform: translateY(.45em) rotate(4deg); }

/* ============================================================
   Hero exit: no circle this time. The photo splits into the logo's
   vertical stripes; they slide away, alternating up and down,
   from the centre outwards. The circle belongs only to the opening.
   ============================================================ */
.cover-hero {
  --x: clamp(0, calc((var(--p) - .1) / .75), 1);
  --e: calc(1 - var(--io));
}
.cover-hero .cover-media img { transform: none; }
.cover-hero .slices {
  position: absolute;
  inset: 0;
  transform: scale(calc(1.05 + (1 - var(--io)) * .12 + var(--x) * .06));
}
.cover-hero .slice {
  --k: clamp(0, calc(var(--x) * 1.8 - var(--i2) * .12), 1);
  --ke: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * 100% / var(--n));
  width: calc(100% / var(--n) + .5px);
  overflow: hidden;
  transform: translateY(calc(var(--dir) * var(--ke) * -104%));
}
.cover-hero .slice img {
  position: absolute;
  top: 0;
  left: calc(var(--i) * -100%);
  width: calc(var(--n) * 100%);
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.cover-hero .cover-shade { opacity: calc((1 - var(--e)) * (1 - var(--x))); }
.cover-hero .cover-title {
  opacity: calc(clamp(0, calc(1 - var(--e) * 1.8), 1) * clamp(0, calc(1 - var(--x) * 2.2), 1));
  transform: translateY(calc(var(--x) * -14vh)) scale(calc(1 + var(--e) * .2 - var(--x) * .08));
}
/* The mark wipes itself away instead of fading: the stripes slide out through the top and
   bottom of the circle, the two lines of the name slide out sideways, and everything is cut
   off at the circle's edge. Only the ring is left, and it goes last. */
.cover-hero .cover-logo {
  opacity: 1;
  /* no spin on the way out: turning the mark would send the sliding pieces off sideways
     instead of straight out through the edge they belong to */
  transform: translate(-50%, -50%);
}
.cover-hero .cover-logo .q1 { transform: translateY(calc(var(--io) * -104px)); }
.cover-hero .cover-logo .q4 { transform: translateY(calc(var(--io) * 104px)); }
.cover-hero .cover-logo .emblem-name text:first-child { transform: translateX(calc(var(--io) * -215px)); }
.cover-hero .cover-logo .emblem-name text + text { transform: translateX(calc(var(--io) * 215px)); }
.cover-hero .cover-logo .cross { opacity: clamp(0, calc(1 - var(--io) * 2.4), 1); }
.cover-hero .cover-logo .ring { opacity: clamp(0, calc((.95 - var(--io)) * 6), 1); }
.cover-hero .cover-caption { display: none; }

.reduce .cover-hero .slice { transform: none; }
/* tighter exit: stripes finish just before the pin releases */
.cover-hero { height: 165vh; --x: clamp(0, calc((var(--p) - .06) / .7), 1); }
/* spread the stripes over the whole pinned run: centre leaves first, the outer ones exactly at release */
.cover-hero { --x: clamp(0, calc((var(--p) - .04) / .94), 1); }
.cover-hero .slice { --k: clamp(0, calc(var(--x) * 1.66 - var(--i2) * .12), 1); }

/* ============================================================
   Hero to steps seam: the steps block sits pinned underneath the hero,
   so the sliding stripes uncover it instead of an empty green screen.
   ============================================================ */
.js:not(.reduce) .cover-hero { z-index: 2; background: transparent; pointer-events: none; }
.js:not(.reduce) .steps[data-under] { z-index: 1; margin-top: -165vh; height: calc(330vh + 65vh); }
/* solid ground while the hero sits still, so the opening circle is not drawn over the steps block;
   it drops away the moment the stripes start to leave */
.cover-hero .cover-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dark);
  opacity: clamp(0, calc(1 - var(--x) * 1000), 1);
}

/* Fry / Roll / Share: the word is the progress bar. Letters still rise in one by one;
   as you scroll, colour pours through the word from left to right, letter by letter. */
.steps-words { font-size: clamp(88px, 12.5vw, 200px); }
@media (max-width: 860px) { .steps-words { font-size: clamp(64px, 20vw, 110px); } }
.steps-sticky > div:not(.steps-photos) { z-index: 2; }
/* Client note: the Fry / Sip photo should be bigger and catch the eye. The photo column sizes to the photo,
   the words take what is left. */
.steps-sticky { grid-template-columns: minmax(0, 1fr) auto; }
.steps-photos { width: min(48vw, 78vh); }
@media (max-width: 860px) {
  .steps-sticky { grid-template-columns: 1fr; }
  .steps-photos { width: min(88vw, 46vh); }
}
.step-word .ch {
  --f: clamp(0, calc(var(--sp, 0) * var(--n) - var(--c)), 1);
  color: transparent;
  background: linear-gradient(90deg, var(--mid) calc(var(--f) * 100%), color-mix(in srgb, var(--on-dark) 30%, transparent) calc(var(--f) * 100%));
  -webkit-background-clip: text;
  background-clip: text;
}
.step-word.past .ch { --f: 1; }
.reduce .step-word .ch { --f: 1; }

/* Coffee hero: "Good morning" is longer than "Sit down", so the title scales down on phones instead of breaking MORNING */
.theme-coffee .cover-hero .cover-title { font-size: clamp(52px, 15vw, 250px); }

/* Nav button takes the page's own accent instead of the red: light green on the falafel page, orange on the coffee page.
   On a light nav it turns dark so it never disappears into the ground. */
.nav .btn.solid { background: var(--mid); border-color: var(--mid); color: var(--ink); }
.nav .btn.solid::before { background: var(--on-dark); }
.nav .btn.solid .roll span + span { color: var(--ink); }
body[data-nav="light"] .nav .btn.solid, body[data-nav="mid"] .nav .btn.solid { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
body[data-nav="light"] .nav .btn.solid::before, body[data-nav="mid"] .nav .btn.solid::before { background: var(--mid); }

/* One small line under the hero title: what the shop is and where. Leaves with the title. */
.hero-sub {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 9vh;
  margin: 0;
  padding: 0 var(--gutter);
  text-align: center;
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  opacity: calc(clamp(0, calc(1 - var(--e) * 1.8), 1) * clamp(0, calc(1 - var(--x) * 3), 1));
  transform: translateY(calc(var(--x) * -8vh));
}
.js .cover-hero .hero-sub { visibility: hidden; }
.js .ready .cover-hero .hero-sub { visibility: visible; transition: opacity .8s var(--out) 1.9s; }

/* Arriving from the other shop: the veil's hole settles on the logo circle, then the normal hero opening
   runs from that exact state, a little sooner than on a fresh visit since the veil already did the waiting */
.came-over:not(.hero-go) .cover-hero { animation: none !important; }
.came-over:not(.hero-go) .cover-hero .reveal-chars .ch { opacity: 0 !important; transform: translateY(.45em) rotate(4deg) !important; }
.came-over:not(.hero-go) .cover-hero .hero-sub { opacity: 0 !important; }
.came-over.hero-go .ready .cover-hero { animation-delay: .7s; }
.came-over .cover-hero .cover-title { --d: 700ms; }
.came-over.hero-go .ready .cover-hero .hero-sub { transition-delay: 1.5s; }

/* The top bar slides in with the hero opening. The slide is a keyframe animation that is only attached at the
   moment it should start: a transition jumps straight to the end in Safari when its start state was never painted,
   and a paused animation still spends its delay in Safari, so it would slide in while the veil is still up. */
@keyframes mg-nav-in { from { transform: translateY(-100%); } to { transform: none; } }
.js .nav { transform: translateY(-100%); }
.js .ready .nav { animation: mg-nav-in 1.2s cubic-bezier(.65, 0, .35, 1) 2.95s both; }
.js.came-over:not(.hero-go) .nav { animation: none; }
.js.came-over.hero-go .ready .nav { animation: mg-nav-in 1.2s cubic-bezier(.65, 0, .35, 1) .9s both; }
.reduce .nav, .reduce .ready .nav { animation: none; transform: none; }