/* Template 1 · the 3 hero animations (templates/storefront/template1/heroes/hero_1-3.html, hero1.js, hero2.js).
   Colours: the layout's --t1-accent / --t1-accent-2 / --t1-bg (with fallbacks) and --hero-slide, each featured
   dish's colour (written inline). 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-accent-2, color-mix(in srgb, var(--hero-accent) 72%, #fff));
  --hero-bg: var(--t1-bg, #0E0F12);
  --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: #fff;
}
@media (max-width: 899px) {
  .t1-hero { --hero-safe-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.t1-hero :focus-visible { outline: 3px solid #fff; 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 rgba(255,255,255,.3);
  border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.86); 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 rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff;
  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: rgba(255,255,255,.24); color: #fff; }
.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.
   --------------------------------------------------------------------------------------------------------- */
.t1-hero1 { --h1-bottom: max(clamp(104px, 13vh, 150px), calc(var(--hero-safe-bottom) + 20px));
  height: calc(var(--hero-n, 1) * 100vh); height: calc(var(--hero-n, 1) * 100svh); background: #0B0A0C; }
.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%, #1C1214) 0%, color-mix(in srgb, var(--hero-slide) 3%, #140D0F) 58%, #0B0A0C 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: rgba(255,255,255,.13);
  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__visual { width: auto; max-width: 86vw; aspect-ratio: 4 / 3; }
.t1-hero1.is-photo .t1-hero1__float { filter: none; }
.t1-hero1.is-photo .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%, #fff); 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: rgba(255,255,255,.7); 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: rgba(255,255,255,.72);
  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: rgba(255,255,255,.32);
  transition: height .3s var(--hero-out), background-color .3s ease; }
.t1-hero1__dot[aria-current="true"]::before { height: 22px; background: #fff; }
.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: rgba(255,255,255,.58); 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%, #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, #fff 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%, #fff); 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__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__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: rgba(255,255,255,.12); 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%, #fff);
  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; }
.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: rgba(255,255,255,.24); }
.t1-hero2__dot > span > i { position: absolute; inset: 0; border-radius: 99px; background: #fff; transform: scaleX(0); transform-origin: left; }
.t1-hero2__dot[aria-current="true"] { width: 56px; }
.t1-hero2__dot[aria-current="true"] > span { background: rgba(255,255,255,.45); }
.t1-hero2__btn { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  transition: transform .35s var(--hero-spring), background-color .25s ease, color .25s ease; }
.t1-hero2__btn:hover { background: #fff; color: #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), the restaurant's name, staggered entrance.
   Pure CSS; 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, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 34%, rgba(0,0,0,.25) 58%, color-mix(in srgb, var(--hero-bg) 96%, transparent) 100%); }
.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: rgba(255,255,255,.14);
  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: rgba(255,255,255,.86); 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; }

@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 { animation: none; }
  .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; } }