/* Template 1 · the 3 hero animations (templates/storefront/template1/heroes/hero_1-3.html, hero1.js, hero2.js,
   hero3.js). Colours: the layout's --t1-accent / --t1-accent-2 / --t1-bg (with fallbacks), --t1-hero-bg and
   --t1-hero-ink / --t1-hero-accent-2 (the hero background colour chosen by the team, its text and price colours;
   not set: each hero keeps the design's own dark tints, white text and the page's price colour) and --hero-slide, each slide's colour (written inline). A slide's own
   image is a cut-out (.is-cutout: whole, drop shadow) or a photo (.is-pic: cropped, rounded), whatever the site's
   image style; its floating elements (.t1-hero__part) float around the picture. Fonts by family name (Anton, Figtree: self-hosted by the layout). The layout's
   top bar floats over the hero (--t1-topbar-h); below 900px the bottom content stays above the phone tab bar
   (--hero-safe-bottom). Each hero is a column: the picture area takes the space left by the texts, and the
   texts are sticky to the bottom of the screen, so a banner above the hero (closed restaurant) never pushes
   them off screen. Off screen (.is-paused) or behind a full-screen page (body.shop-locked) the loops pause;
   prefers-reduced-motion drops zooms, drifts and loops (cross-fades stay). */

@property --hero-slide { syntax: "<color>"; inherits: true; initial-value: #D93C2E; }

.t1-hero {
  --hero-accent: var(--t1-accent, #D93C2E);
  --hero-accent-2: var(--t1-hero-accent-2, var(--t1-accent-2, color-mix(in srgb, var(--hero-accent) 72%, #fff)));
  --hero-bg: var(--t1-hero-bg, var(--t1-bg, #0E0F12));
  --hero-ink: var(--t1-hero-ink, #fff);
  --hero-shade: var(--t1-hero-bg, #000);
  --hero-slide: var(--hero-accent);
  --hero-top: var(--t1-topbar-h, 80px);
  --hero-safe-bottom: 0px;
  --hero-display: Anton, Impact, "Arial Narrow Bold", sans-serif;
  --hero-out: cubic-bezier(.23, 1, .32, 1);
  --hero-spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  isolation: isolate;
  color: var(--hero-ink);
}
@media (max-width: 899px) {
  .t1-hero { --hero-safe-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.t1-hero :focus-visible { outline: 3px solid var(--hero-ink); outline-offset: 3px; }
.t1-hero__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.t1-hero.is-paused, .t1-hero.is-paused::before, .t1-hero.is-paused::after,
.t1-hero.is-paused *, .t1-hero.is-paused *::before, .t1-hero.is-paused *::after,
.shop-locked .t1-hero, .shop-locked .t1-hero::before, .shop-locked .t1-hero::after,
.shop-locked .t1-hero *, .shop-locked .t1-hero *::before, .shop-locked .t1-hero *::after { animation-play-state: paused !important; }

/* Buttons shared by the heroes */
.t1-hero__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 30px;
  border: 0; border-radius: 999px; background: var(--hero-accent); color: var(--t1-on-accent, #fff); font: inherit; font-size: 14px; font-weight: 700;
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--hero-accent) 32%, transparent),
              0 22px 48px color-mix(in srgb, var(--hero-accent) 24%, transparent);
  transition: background-color .2s var(--hero-out), transform .14s var(--hero-out); }
.t1-hero__cta:hover { background: color-mix(in srgb, var(--hero-accent) 86%, #fff); color: var(--t1-on-accent, #fff); transform: translateY(-2px) scale(1.02); }
.t1-hero__cta:active { transform: scale(.96); }
.t1-hero__soldout { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--hero-ink) 8%, transparent); color: color-mix(in srgb, var(--hero-ink) 86%, transparent); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.t1-hero__ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 54px;
  padding: 0 28px; border: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s ease; }
.t1-hero__ghost:hover { background: color-mix(in srgb, var(--hero-ink) 24%, transparent); color: var(--hero-ink); }

/* Floating elements of a slide (heroes 1 and 2): positioned in the picture area (a size container) from the
   client's design, each floating on its own rhythm; the far ones are smaller and blurred (depth). Decorative. */
.t1-hero__parts { position: absolute; inset: 0; pointer-events: none; }
.t1-hero__part { position: absolute; left: calc(var(--at-x) * 1%); top: calc(var(--at-y) * 1%); width: calc(var(--s) * 1cqw);
  min-width: calc(var(--s) * 3.6px); aspect-ratio: 1; }
.t1-hero__part img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--r));
  filter: drop-shadow(0 1.2cqw 1.4cqw rgba(0,0,0,.4)); animation: t1h-floaty var(--d, 4.6s) ease-in-out var(--dl, 0s) infinite; }
.t1-hero__part.is-far img { opacity: .85; filter: blur(5px) drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.3)); }
.t1-hero__ghost svg { flex: none; width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------------------------------------
   Animation 1: scroll-driven sticky slideshow. The section is N x 100svh; hero1.js writes --enter, --op and
   --zoom on each slide (before it runs: the first slide only). A slide is a column: top bar room, the picture
   area (word + dish, zoomed), the texts.
   --------------------------------------------------------------------------------------------------------- */
/* The design's tints (#1C1214 → #140D0F → #0B0A0C); a chosen hero colour replaces them, nearly flat. */
.t1-hero1 { --h1-bottom: max(clamp(104px, 13vh, 150px), calc(var(--hero-safe-bottom) + 20px));
  --h1-base: var(--t1-hero-bg, #0B0A0C);
  --h1-top: color-mix(in srgb, var(--t1-hero-bg, #1C1214) 92%, var(--t1-hero-ink, #1C1214));
  --h1-mid: color-mix(in srgb, var(--t1-hero-bg, #140D0F) 96%, var(--t1-hero-ink, #140D0F));
  height: calc(var(--hero-n, 1) * 100vh); height: calc(var(--hero-n, 1) * 100svh); background: var(--h1-base); }
.t1-hero1__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.t1-hero1__slide { --enter: 1; --op: 1; --zoom: 1; position: absolute; inset: 0; display: flex; flex-direction: column;
  padding-top: var(--hero-top); }
.t1-hero1__slide ~ .t1-hero1__slide { --enter: 0; --op: 0; }
.t1-hero1__bg { position: absolute; inset: 0; opacity: var(--enter);
  background:
    radial-gradient(circle at 50% 34%, rgba(255,160,120,.16), transparent 56%),
    radial-gradient(circle at 70% 64%, color-mix(in srgb, var(--hero-slide) 22%, transparent), transparent 52%),
    linear-gradient(165deg, color-mix(in srgb, var(--hero-slide) 6%, var(--h1-top)) 0%, color-mix(in srgb, var(--hero-slide) 3%, var(--h1-mid)) 58%, var(--h1-base) 100%); }
.t1-hero1__orbs { position: absolute; inset: 0; opacity: var(--op); pointer-events: none; }
.t1-hero1__orbs span { position: absolute; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--hero-slide) 24%, transparent);
  filter: blur(12px); animation: t1h-float 5s ease-in-out infinite; }
.t1-hero1__orbs span:nth-child(1) { top: 15%; left: 11%; width: clamp(48px, 9vw, 84px); }
.t1-hero1__orbs span:nth-child(2) { top: 21%; left: 77%; width: clamp(30px, 6vw, 54px); animation-duration: 4.4s; animation-delay: .5s; }
.t1-hero1__orbs span:nth-child(3) { top: 68%; left: 9%; width: clamp(34px, 7vw, 62px); animation-duration: 5.4s; animation-delay: 1s; }
.t1-hero1__orbs span:nth-child(4) { top: 73%; left: 79%; width: clamp(26px, 5vw, 46px); animation-duration: 4.8s; animation-delay: 1.5s; }
.t1-hero1__content { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; opacity: var(--op);
  transform: scale(var(--zoom)); will-change: opacity, transform; }
.t1-hero1__word { position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%); color: color-mix(in srgb, var(--hero-ink) 13%, transparent);
  font: 400 clamp(76px, 17vw, 260px)/.78 var(--hero-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  filter: blur(6px); user-select: none; }
/* --t1-closed-h (t1.js): the part of the closed banner on screen; the texts rise by as much, so the picture
   shrinks by it and moves up by half (heroes 1 and 2). Its size changes: the drift is on the inner __float, without
   percentages (a running animation keeps the box size it started with). */
.t1-hero1__visual { position: absolute; top: calc(50% - var(--t1-closed-h, 0px) / 2); left: 50%; width: min(80vw, 760px);
  height: min(38vh, 420px); height: max(80px, min(38svh, 420px, 94cqh) - var(--t1-closed-h, 0px)); transform: translate(-50%, -50%); }
.t1-hero1__float { width: 100%; height: 100%; filter: drop-shadow(0 34px 52px rgba(0,0,0,.66)); animation: t1h-sway 9s ease-in-out infinite; }
.t1-hero1__visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.t1-hero1.is-photo .t1-hero1__slide:not(.is-cutout) .t1-hero1__visual, .t1-hero1__slide.is-pic .t1-hero1__visual {
  width: auto; max-width: 86vw; aspect-ratio: 4 / 3; }
.t1-hero1.is-photo .t1-hero1__slide:not(.is-cutout) .t1-hero1__float, .t1-hero1__slide.is-pic .t1-hero1__float { filter: none; }
.t1-hero1.is-photo .t1-hero1__slide:not(.is-cutout) .t1-hero1__visual img, .t1-hero1__slide.is-pic .t1-hero1__visual img {
  object-fit: cover; border-radius: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.55); }
/* No photo: the word becomes the visual, sharp and in the slide's colour. */
.t1-hero1__slide.is-noimage .t1-hero1__word { top: calc(50% - var(--t1-closed-h, 0px) / 2); color: color-mix(in srgb, var(--hero-slide) 82%, var(--hero-ink)); filter: none;
  font-size: clamp(44px, min(19vw, 150vw / var(--len, 6)), 260px); text-shadow: 0 24px 60px rgba(0,0,0,.45);
  animation: t1h-drift 9s ease-in-out infinite; }
.t1-hero1__slide.is-sold-out .t1-hero1__visual img { filter: grayscale(.7) brightness(.8); }
.t1-hero1__info { position: sticky; bottom: var(--h1-bottom); z-index: 2; flex: none; margin: 14px 0 var(--h1-bottom); padding: 0 22px;
  text-align: center; opacity: var(--op); }
.t1-hero1__kicker { margin: 0 0 10px; color: color-mix(in srgb, var(--hero-ink) 70%, transparent); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; overflow-wrap: anywhere; }
.t1-hero1__name { margin: 0 0 10px; font: 400 clamp(30px, 4.6vw, 58px)/1.02 var(--hero-display); letter-spacing: -.01em;
  text-transform: uppercase; overflow-wrap: anywhere; }
.t1-hero1__desc { display: -webkit-box; max-width: 380px; margin: 0 auto 18px; overflow: hidden; color: color-mix(in srgb, var(--hero-ink) 72%, transparent);
  font-size: 14px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.t1-hero1__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.t1-hero1__price { color: var(--hero-accent-2); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t1-hero1__dots { position: absolute; top: 50%; right: clamp(2px, 1.4vw, 18px); z-index: 3; display: flex; flex-direction: column;
  transform: translateY(-50%); }
.t1-hero1__dot { display: grid; place-items: center; width: 24px; padding: 9px 0; border: 0; background: none; cursor: pointer; }
.t1-hero1__dot::before { content: ""; width: 5px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--hero-ink) 32%, transparent);
  transition: height .3s var(--hero-out), background-color .3s ease; }
.t1-hero1__dot[aria-current="true"]::before { height: 22px; background: var(--hero-ink); }
.t1-hero1__hint { position: absolute; bottom: 34px; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 7px; margin: 0; color: color-mix(in srgb, var(--hero-ink) 58%, transparent); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  pointer-events: none; transition: opacity .35s ease; }
.t1-hero1__hint::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); animation: t1h-bounce 1.6s ease-in-out infinite; }
.t1-hero1.is-scrolled .t1-hero1__hint { opacity: 0; }
@media (max-width: 899px) {
  .t1-hero1__hint { display: none; }
}

/* ---------------------------------------------------------------------------------------------------------
   Animation 2: poster carousel (hero2.js). --hero-slide is animated between slides (@property). The stage
   (word, dish, shadow, particles) takes the height the bottom row leaves. Phones: the word above the dish.
   --------------------------------------------------------------------------------------------------------- */
.t1-hero2 { --px: 0; --py: 0; --h2-side: clamp(14px, 3.4cqw, 48px); --h2-bottom: max(clamp(18px, 3.2cqw, 44px), var(--hero-safe-bottom));
  display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; overflow: clip;
  container-type: inline-size; background-color: color-mix(in srgb, var(--hero-slide) 8%, var(--t1-hero-bg, #110A09));
  transition: --hero-slide .9s var(--hero-out); }
.t1-hero2::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.t1-hero2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 50%, rgba(0,0,0,.45) 100%); }
.t1-hero2__glow { position: absolute; inset: -20%; pointer-events: none; animation: t1h-breathe 5s ease-in-out infinite;
  background: radial-gradient(36% 42% at 50% 44%, color-mix(in srgb, var(--hero-slide) 55%, transparent) 0%, transparent 70%); }
.t1-hero2__rays { position: absolute; left: 50%; top: 42%; width: 180cqw; height: 180cqw; margin: -90cqw 0 0 -90cqw; opacity: .07;
  pointer-events: none; background: repeating-conic-gradient(from 0deg, var(--hero-ink) 0deg 4deg, transparent 4deg 14deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, transparent 62%); mask-image: radial-gradient(closest-side, #000 12%, transparent 62%);
  animation: t1h-spin 120s linear infinite; }
.t1-hero2__stage { --word-y: 50%; --dish-y: 50%; --dish-h: max(150px, min(74cqh, 36cqw, 580px));
  position: relative; z-index: 5; flex: 1 1 auto; min-height: 0; margin-top: var(--hero-top); container-type: size; pointer-events: none; }
.t1-hero2__word { position: absolute; left: 50%; top: var(--word-y); z-index: 2; width: 0; height: 0;
  transform: translate(calc(var(--px) * -1.2cqw), calc(var(--py) * -.8cqw)); transition: transform .9s var(--hero-out);
  color: color-mix(in srgb, var(--hero-slide) 88%, var(--hero-ink)); font-family: var(--hero-display); font-weight: 400; line-height: .86;
  text-transform: uppercase; white-space: nowrap; text-shadow: 0 .8cqw 3cqw rgba(0,0,0,.18); }
/* One layer per word (the old one flies out while the new one drops in), each sized by its own length (--len). */
.t1-hero2__layer { position: absolute; left: 0; top: 0; display: flex; transform: translate(-50%, -50%);
  font-size: clamp(44px, min(21cqw, 150cqw / var(--len, 6)), 420px); }
.t1-hero2__layer > span { display: inline-block; padding: .08em .01em 0; overflow: hidden; }
.t1-hero2__layer > span > span { display: inline-block; white-space: pre; }
/* The first word is rendered by the server: its letters drop in with CSS (no flash before hero2.js runs). */
.t1-hero2__layer.is-first > span > span { animation: t1h-letter .78s calc(.15s + var(--i, 0) * 55ms) var(--hero-spring) both; }
.t1-hero2__shadow { position: absolute; left: 50%; top: calc(var(--dish-y) + var(--dish-h) / 2 - 2cqw - var(--t1-closed-h, 0px)); z-index: 1; width: clamp(200px, 30cqw, 500px);
  height: clamp(18px, 2.6cqw, 44px); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
  filter: blur(6px); transform: translateX(-50%); animation: t1h-shadow 3.2s ease-in-out infinite; }
.t1-hero2.is-noimage .t1-hero2__shadow { visibility: hidden; }
.t1-hero2__food { position: absolute; left: 50%; top: calc(var(--dish-y) - var(--t1-closed-h, 0px) / 2); z-index: 3;
  width: clamp(240px, 44cqw, 760px); height: max(80px, var(--dish-h) - var(--t1-closed-h, 0px));
  transform: translate(calc(-50% + var(--px) * 2.4cqw), calc(-50% + var(--py) * 2cqw)) rotate(calc(var(--px) * 4deg));
  transition: transform .6s var(--hero-out); }
.t1-hero2__dish { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity, filter; }
.t1-hero2__dish:first-child { opacity: 1; animation: t1h-dish 1.15s .1s var(--hero-out) both; }
.t1-hero2__bob { width: 100%; height: 100%; animation: t1h-bob 3.2s ease-in-out infinite; }
.t1-hero2__bob img { display: block; width: 100%; height: 100%; margin: 0 auto; object-fit: contain;
  filter: drop-shadow(0 2.4cqw 2.2cqw rgba(0,0,0,.45)); }
.t1-hero2.is-photo .t1-hero2__dish:not(.is-cutout) .t1-hero2__bob img, .t1-hero2__dish.is-pic .t1-hero2__bob img {
  width: auto; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: none;
  box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 2.4cqw 4cqw rgba(0,0,0,.45); }
.t1-hero2__dish.is-sold-out img { filter: grayscale(.7) brightness(.8); }
.t1-hero2__parts { position: absolute; inset: 0; z-index: 4;
  transform: translate(calc(var(--px) * -3.5cqw), calc(var(--py) * -3cqw)); transition: transform .8s var(--hero-out); }
.t1-hero2__set { position: absolute; inset: 0; }
/* The first slide's elements spring out of the dish with CSS (hero2.js animates the next ones). */
.t1-hero2__set.is-first .t1-hero__part { animation: t1h-part-in .95s calc(.46s + var(--i, 0) * 45ms) var(--hero-spring) both; }
.t1-hero2__bottom { position: sticky; bottom: var(--h2-bottom); z-index: 20; flex: none; display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin: 18px var(--h2-side) var(--h2-bottom); }
/* The slides' texts share one grid cell: the row keeps the tallest one's height, so the dish never resizes. */
.t1-hero2__slides { display: grid; align-items: end; flex: 1 1 260px; max-width: 360px; }
.t1-hero2__slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.t1-hero2__slide[hidden] { display: flex; visibility: hidden; }
.t1-hero2__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--hero-ink) 12%, transparent); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
  overflow-wrap: anywhere; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t1-hero2__chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--hero-slide) 80%, var(--hero-ink));
  animation: t1h-blink 1.4s ease-in-out infinite; }
.t1-hero2__name { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.t1-hero2__desc { display: -webkit-box; margin: 0; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.55;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.t1-hero2__price { margin: 0; font: 400 clamp(28px, 2.6cqw, 42px)/1 var(--hero-display); font-variant-numeric: tabular-nums; }
.t1-hero2__cta { position: relative; flex: 0 0 auto; min-height: 56px; padding: 0 10px 0 28px; gap: 14px; font-size: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .35s var(--hero-spring), box-shadow .3s ease; }
.t1-hero2__cta:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.t1-hero2__cta::before { content: ""; position: absolute; inset: -5px; border: 2px solid var(--hero-accent); border-radius: 999px; opacity: .6;
  pointer-events: none; animation: t1h-ring 2.2s var(--hero-out) infinite; }
.t1-hero2__arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1C1A14; }
.t1-hero2__arrow svg { width: 18px; height: 18px; }
.t1-hero2__soldout { flex: 0 0 auto; min-height: 56px; }
.t1-hero2__cta[hidden], .t1-hero2__soldout[hidden] { display: none; }
a.t1-hero2__cta { color: var(--t1-on-accent, #fff); }
.t1-hero2__controls { position: relative; flex: 1 1 260px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.t1-hero2__count { min-width: 40px; height: 30px; overflow: hidden; font: 400 24px/30px var(--hero-display); text-align: right; }
.t1-hero2__count span { display: inline-block; }
.t1-hero2__dots { display: flex; align-items: center; }
.t1-hero2__dot { width: 22px; height: 32px; padding: 0 6px; border: 0; background: none; cursor: pointer; transition: width .5s var(--hero-spring); }
.t1-hero2__dot > span { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 99px;
  background: color-mix(in srgb, var(--hero-ink) 24%, transparent); }
.t1-hero2__dot > span > i { position: absolute; inset: 0; border-radius: 99px; background: var(--hero-ink); transform: scaleX(0); transform-origin: left; }
.t1-hero2__dot[aria-current="true"] { width: 56px; }
.t1-hero2__dot[aria-current="true"] > span { background: color-mix(in srgb, var(--hero-ink) 45%, transparent); }
.t1-hero2__btn { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink); cursor: pointer;
  transition: transform .35s var(--hero-spring), background-color .25s ease, color .25s ease; }
.t1-hero2__btn:hover { background: var(--hero-ink); color: var(--t1-hero-bg, #1C1A14); transform: scale(1.1); }
.t1-hero2__btn:active { transform: scale(.9); }
.t1-hero2__btn svg { width: 18px; height: 18px; }
.t1-hero2__play, .t1-hero2.is-stopped .t1-hero2__pause { display: none; }
.t1-hero2.is-stopped .t1-hero2__play { display: block; }
@media (max-width: 640px) {
  .t1-hero2__stage { --word-y: 20%; --dish-y: 59%; --dish-h: max(130px, min(62cqh, 72cqw)); }
  .t1-hero2.is-noimage .t1-hero2__stage { --word-y: 50%; }  /* no photo: the word is the picture */
  .t1-hero2__word { transition: transform .9s var(--hero-out), top .7s var(--hero-out); }
  .t1-hero2__layer { font-size: clamp(40px, min(30cqw, 135cqw / var(--len, 6)), 200px); }
  .t1-hero2__food { width: 88cqw; }
  .t1-hero2__shadow { width: 56cqw; }
  .t1-hero2__bottom { gap: 14px 10px; }
  .t1-hero2__slides { flex-basis: 100%; max-width: none; }
  .t1-hero2__desc { -webkit-line-clamp: 2; }
  .t1-hero2__cta, .t1-hero2__soldout { flex: 1 1 auto; justify-content: space-between; }
  .t1-hero2__soldout { justify-content: center; }
  .t1-hero2__controls { position: static; flex: 0 0 auto; gap: 8px; }
  .t1-hero2__count { display: none; }
  .t1-hero2__bottom:has(.t1-hero2__dots) { padding-top: 42px; }
  .t1-hero2__dots { position: absolute; left: -6px; top: 0; }
  .t1-hero2__btn { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------------------------------------------------
   Animation 3: full-screen photo with a slow zoom (or a gradient), a looping video over that photo (it fades in
   once playing, hero3.js) or the hero background colour (.is-color); the restaurant's name, staggered entrance.
   The shade keeps the texts readable on a photo or video. content-visibility skips its rendering (and the zoom)
   once it is off screen.
   --------------------------------------------------------------------------------------------------------- */
.t1-hero3 { --h3-bottom: max(clamp(70px, 12vh, 130px), calc(var(--hero-safe-bottom) + 24px));
  display: flex; flex-direction: column; justify-content: flex-end; height: 100vh; height: 100svh; min-height: 540px;
  overflow: hidden; overflow: clip; background: var(--hero-bg); content-visibility: auto; contain-intrinsic-size: auto 100vh; }
.t1-hero3__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 45%;
  animation: t1h-zoom 22s ease-in-out infinite alternate; }
.t1-hero3__glow { background:
  radial-gradient(55% 60% at 78% 26%, color-mix(in srgb, var(--hero-accent) 46%, transparent), transparent 72%),
  radial-gradient(45% 50% at 10% 78%, color-mix(in srgb, var(--hero-accent) 24%, transparent), transparent 70%),
  linear-gradient(160deg, color-mix(in srgb, var(--hero-accent) 14%, #1A1214) 0%, var(--hero-bg) 78%); }
.t1-hero3__shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-shade) 55%, transparent) 0%, color-mix(in srgb, var(--hero-shade) 15%, transparent) 34%,
    color-mix(in srgb, var(--hero-shade) 25%, transparent) 58%, color-mix(in srgb, var(--hero-bg) 96%, transparent) 100%); }
.t1-hero3__plain { background: var(--t1-hero-bg, #0B0A0C); animation: none; }
.t1-hero3__video { opacity: 0; animation: none; transition: opacity .8s ease; }
.t1-hero3.is-playing .t1-hero3__video { opacity: 1; }
.t1-hero3__toggle { position: absolute; top: calc(var(--hero-top) + 12px); right: clamp(12px, 3vw, 40px); z-index: 3; display: grid;
  place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--hero-shade) 40%, transparent); color: var(--hero-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.t1-hero3__toggle[hidden] { display: none; }
.t1-hero3__toggle svg { width: 18px; height: 18px; }
.t1-hero3__play, .t1-hero3.is-stopped .t1-hero3__pause { display: none; }
.t1-hero3.is-stopped .t1-hero3__play { display: block; }
.t1-hero3__body { position: sticky; bottom: var(--h3-bottom); z-index: 2; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: flex-start; gap: 18px; width: min(100%, 1240px); margin: 0 auto var(--h3-bottom); padding: 0 clamp(18px, 5vw, 64px); }
.t1-hero3__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--hero-ink) 14%, transparent);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: t1h-up .8s var(--hero-out) both; }
.t1-hero3__chip i { width: 8px; height: 8px; border-radius: 50%; background: #4CC15F; }
.t1-hero3__chip.is-closed i { background: #FF6B5B; }
.t1-hero3__title { max-width: 100%; margin: 0; font: 400 clamp(56px, 12vw, 190px)/.88 var(--hero-display); letter-spacing: -.01em;
  text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; animation: t1h-up .9s .08s var(--hero-out) both; }
.t1-hero3__title.is-long { font-size: clamp(44px, 8vw, 132px); }
.t1-hero3__tagline { max-width: 34ch; margin: 0; color: color-mix(in srgb, var(--hero-ink) 86%, transparent); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5;
  text-wrap: pretty; animation: t1h-up .9s .16s var(--hero-out) both; }
.t1-hero3__actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; animation: t1h-up .9s .24s var(--hero-out) both; }
.t1-hero3 .t1-hero__cta { min-height: 54px; padding: 0 32px; font-size: 15px; }
/* Over a photo or a video (bright footage too), a soft shadow under the big texts. */
.t1-hero3.has-image .t1-hero3__title, .t1-hero3.has-image .t1-hero3__tagline {
  text-shadow: 0 2px 24px color-mix(in srgb, var(--hero-shade) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .t1-hero1__content { transform: none; }
  .t1-hero1__orbs { display: none; }
  .t1-hero1__float { animation: none; }
  .t1-hero1__slide.is-noimage .t1-hero1__word { animation: none; transform: translate(-50%, -50%); }
  .t1-hero1__hint::after, .t1-hero2__glow, .t1-hero2__rays, .t1-hero2__shadow, .t1-hero2__bob, .t1-hero2__chip i,
  .t1-hero2__cta::before, .t1-hero2__dish:first-child, .t1-hero2__layer.is-first > span > span, .t1-hero3__media,
  .t1-hero__part img, .t1-hero2__set.is-first .t1-hero__part { animation: none; }
  .t1-hero3__video, .t1-hero3__toggle { display: none; }  /* never played: the photo stays (hero3.js) */
  .t1-hero2, .t1-hero2__word, .t1-hero2__food, .t1-hero2__parts { transition: none; }
  .t1-hero3__chip, .t1-hero3__title, .t1-hero3__tagline, .t1-hero3__actions { animation-name: t1h-fade; }
}

@keyframes t1h-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.06); } }
@keyframes t1h-drift { 0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); } 50% { transform: translate(-50%, calc(-50% - 16px)) rotate(1.5deg); } }
@keyframes t1h-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes t1h-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(4px, 4px); } }
@keyframes t1h-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes t1h-spin { to { transform: rotate(360deg); } }
@keyframes t1h-letter { from { transform: translateY(130%) rotate(10deg) scaleY(1.3); } to { transform: none; } }
@keyframes t1h-dish {
  0% { transform: translate(34%, 30%) rotate(34deg) scale(.55); opacity: 0; filter: blur(8px); }
  60% { transform: translate(-3%, -4%) rotate(-6deg) scale(1.06); opacity: 1; filter: blur(0); }
  82% { transform: translate(1%, 1%) rotate(2deg) scale(.98); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}
@keyframes t1h-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-1.4cqw) rotate(1.5deg); } }
@keyframes t1h-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; } 50% { transform: translateX(-50%) scale(.82); opacity: .55; } }
@keyframes t1h-blink { 50% { opacity: .25; transform: scale(.6); } }
@keyframes t1h-ring { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes t1h-zoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes t1h-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes t1h-fade { from { opacity: 0; } }
@keyframes t1h-floaty { 0%, 100% { transform: translate(0, 0) rotate(var(--r)); }
  33% { transform: translate(.5cqw, -1.1cqw) rotate(calc(var(--r) + 14deg)); } 66% { transform: translate(-.4cqw, -.4cqw) rotate(calc(var(--r) - 10deg)); } }
@keyframes t1h-part-in { from { opacity: 0; transform: translate(calc((50 - var(--at-x)) * .9cqw), calc((48 - var(--at-y)) * .5cqw)) scale(.2); } }