/* ==========================================================================
   The film, v2 — scenes that hold.
   Two zones on one sticky stage: FOOD (the plate) and WORDS (the number, then
   one block of text per scene). Every scene has a hold where its words stand
   still and only the food moves; the page snaps to holds (film.js).
   Stage composition uses physical left/right on purpose: it is a picture.
   ========================================================================== */

.film { position: relative; }

/* ---------------- static storyboard: no JS, or reduced motion ---------------- */
html:not(.js) .film__book, html:not(.js) .film__bg, html:not(.js) .odo,
html:not(.js) .notes, html:not(.js) .steam, html:not(.js) .plate video { display: none; }
html:not(.js) .film__stage { display: flex; flex-direction: column; }
html:not(.js) .hero { display: grid; gap: 28px; align-content: center; padding: calc(110px + env(safe-area-inset-top, 0px)) var(--gutter) 72px; min-block-size: 92vh; }
html:not(.js) .film__poster { order: -1; display: block; }
html:not(.js) .film__poster img { inline-size: min(340px, 66vw); block-size: auto; margin-inline: auto; }
html:not(.js) .beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px 56px; align-items: center; padding: 72px var(--gutter); }
html:not(.js) .beat > :not(.plate) { grid-column: 1; }
html:not(.js) .beat .plate { grid-column: 2; grid-row: 1 / span 6; }
html:not(.js) .plate img { inline-size: 100%; block-size: auto; }
html:not(.js) .beat[data-beat="diet"] { background: var(--steel); color: var(--steel-type); }
html:not(.js) .dish__nums { color: var(--cream-2); }
html:not(.js) .dish__nums b { font-family: var(--num); font-weight: 700; font-size: 28px; color: var(--gold); }
html:not(.js) .finale { display: grid; gap: 22px; justify-items: start; padding: 96px var(--gutter) 120px; }
@media (max-width: 760px) {
  html:not(.js) .beat { grid-template-columns: minmax(0, 1fr); }
  html:not(.js) .beat .plate { grid-column: 1; grid-row: auto; order: -1; }
}

/* ---------------- the cinema ---------------- */
.js .film { block-size: var(--film-h, 1000vh); }
.js .film__stage {
  position: sticky; top: 0; block-size: 100vh; block-size: 100svh; overflow: hidden; isolation: isolate;
  --plate: min(60vh, 38vw);
  --pcx: 28.5vw; --pcy: 53vh;
  --zr: 7vw;             /* the words zone, from the right edge */
  --zw: 44vw;            /* and its width */
  --odo-top: 15vh;
  --say-top: 43vh;
}
@media (max-aspect-ratio: 1/1) {
  .js .film { --film-h: 960vh; }
  .js .film__stage {
    --plate: min(80vw, 37svh);
    --pcx: 50vw; --pcy: 71svh;
    --zr: 6vw; --zw: 88vw;
    --odo-top: calc(9svh + env(safe-area-inset-top, 0px));
    --say-top: calc(27svh + env(safe-area-inset-top, 0px));
  }
}

.js .film__bg, .js .film__bg .bg { position: absolute; inset: 0; }
.js .film__bg { z-index: 0; }
.js .bg--warm { background: radial-gradient(90% 70% at 30% 45%, #211D19 0%, var(--ink) 60%, #100E0C 100%); }
.js .bg--cold { background: radial-gradient(110% 80% at 72% 0%, #2B3541 0%, var(--steel) 52%, #12171D 100%); opacity: 0; }
.js .bg--glow {
  background: radial-gradient(calc(var(--plate) * .95) calc(var(--plate) * .95) at var(--pcx) var(--pcy), rgba(230, 165, 59, .30), rgba(230, 165, 59, .07) 55%, transparent 78%);
  opacity: 0;
}
.js .film__book { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 2; }
.js .film__poster { display: none; }
.js.no-webgl .film__book { display: none; }
.js.no-webgl .film__poster { display: block; position: absolute; z-index: 2; left: 14vw; top: 50%; translate: 0 -50%; inline-size: 30vw; }
.js.no-webgl .film__poster img { inline-size: 100%; block-size: auto; }
@media (max-aspect-ratio: 1/1) { .js.no-webgl .film__poster { left: 50%; top: 9svh; translate: -50% 0; inline-size: 50vw; } }

.js .beat { display: contents; }
.js .dish__nums { display: none; }

/* FOOD */
.js .plate {
  position: absolute; z-index: 3; inline-size: var(--plate); block-size: var(--plate);
  left: calc(var(--pcx) - var(--plate) / 2); top: calc(var(--pcy) - var(--plate) / 2);
  opacity: 0; will-change: transform, opacity;
}
.plate__spin { position: relative; inline-size: 100%; block-size: 100%; }
.js .plate img { inline-size: 100%; block-size: 100%; filter: drop-shadow(0 34px 38px rgba(0, 0, 0, .55)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.js .plate--cold img { filter: drop-shadow(0 34px 38px rgba(5, 10, 16, .6)); }
/* the living loop sits inside the rim of its own still, so the rim and the shadow stay crisp */
.plate video {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; pointer-events: none;
  /* a soft edge just past the rim: the loop's steam fades out instead of being cut */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 90%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 90%, transparent 100%);
}
.plate video.is-live { opacity: 1; }

.steam { display: none; }
.js .steam {
  display: block; position: absolute; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  inline-size: var(--plate); block-size: var(--plate);
  left: calc(var(--pcx) - var(--plate) / 2); top: calc(var(--pcy) - var(--plate) / 2);
}
.steam i {
  position: absolute; left: 30%; top: 18%; inline-size: 38%; block-size: 58%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 248, 235, .42), rgba(255, 248, 235, 0) 66%);
  filter: blur(18px); opacity: 0; animation: steam 7s ease-in-out infinite;
}
.steam i:nth-child(2) { left: 50%; animation-duration: 8.5s; animation-delay: -2.6s; }
.steam i:nth-child(3) { left: 14%; animation-duration: 9.5s; animation-delay: -5.2s; }
@keyframes steam { 0% { transform: translate(0, 18%) scale(.7, .6); opacity: 0 } 35% { opacity: .5 } 100% { transform: translate(9%, -62%) scale(1.25, 1.35); opacity: 0 } }

/* WORDS */
.js .say { position: absolute; z-index: 5; right: var(--zr); inline-size: var(--zw); top: var(--say-top); opacity: 0; display: grid; justify-items: start; gap: 16px; }
.js .say--diet { top: 50%; translate: 0 -50%; }
.say p { margin: 0; }
.say__big { font-weight: 900; font-size: clamp(44px, 5.1vw, 92px); line-height: 1.02; text-wrap: balance; }
.say__mid { font-weight: 800; font-size: clamp(22px, 2.2vw, 38px); line-height: 1.2; text-wrap: balance; }
.say__mid bdi { font-family: var(--num); font-weight: 700; }
/* the diet is thin and pale; everything after "באמת" is heavy and warm */
.say--diet .say__when { font-weight: 300; font-size: clamp(22px, 2.1vw, 36px); color: var(--steel-2); }
.say--diet .say__big { font-weight: 200; color: var(--steel-type); font-size: clamp(46px, 5.6vw, 100px); }
.say--diet .say__mid { font-weight: 300; color: var(--steel-type); }

.swaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; inline-size: 100%; }
.swaps li { display: flex; align-items: baseline; gap: 18px; font-weight: 700; font-size: clamp(20px, 1.85vw, 32px); line-height: 1.3; }
.swaps .cut { margin-inline-start: auto; font-family: var(--num); font-weight: 700; font-size: 1.15em; color: var(--gold); direction: ltr; white-space: nowrap; }
.js .say--swaps .swaps li { opacity: .22; }

.js .odo { position: absolute; z-index: 5; right: var(--zr); top: var(--odo-top); opacity: 0; display: grid; justify-items: start; }
.odo__num {
  display: flex; direction: ltr; justify-content: flex-end; align-items: flex-start;
  font-family: var(--num); font-weight: 700; font-size: min(9.2vw, 17vh); line-height: 1; letter-spacing: -.02em; color: var(--gold);
}
.js .odo::before { content: ""; position: absolute; z-index: -1; inset: -10% -20% -10% -30%; background: radial-gradient(closest-side, rgba(230, 165, 59, .16), transparent); pointer-events: none; }
.odo__col { position: relative; display: block; block-size: 1em; inline-size: .62em; overflow: hidden; transition: inline-size .45s var(--ease), opacity .45s; }
.odo__col.is-off { inline-size: 0; opacity: 0; }
.odo__strip { display: flex; flex-direction: column; will-change: transform; }
.odo__strip span { display: block; block-size: 1em; line-height: 1; text-align: center; }
.odo__comma { display: block; inline-size: .26em; block-size: 1em; line-height: 1; transition: inline-size .45s var(--ease), opacity .45s; }
.odo__comma.is-off { inline-size: 0; opacity: 0; }
.odo__unit { margin: .35em 0 0; font-size: clamp(18px, 1.6vw, 26px); font-weight: 500; color: var(--cream-2); transition: color .4s; }
.odo__unit.is-book { color: var(--gold); }

.js .notes { position: absolute; inset: 0; z-index: 4; inline-size: 100%; block-size: 100%; pointer-events: none; overflow: visible; }
.notes path { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.notes path.under { stroke: rgba(12, 10, 8, .6); stroke-width: 4.5; }
.notes .dot { fill: var(--cream); stroke: rgba(12, 10, 8, .7); stroke-width: 2.5; }
.notes .ring { fill: none; stroke: var(--cream); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 1.8s var(--ease) infinite; }
@keyframes ring { from { transform: scale(.6); opacity: .9 } to { transform: scale(2.4); opacity: 0 } }

/* frame zero */
.js .hero { position: absolute; z-index: 6; right: var(--zr); top: 50%; translate: 0 -50%; inline-size: min(44vw, 700px); }
.hero__title { margin: 0 0 26px; font-weight: 900; font-size: clamp(56px, 6.8vw, 124px); line-height: .95; }
/* the logo as the title: its two lines are two images of one width, each in a word mask, so it
   rises like the words do; the heading's font-size still sets the scale at every breakpoint */
.brand-lines { display: block; inline-size: 4.2em; max-inline-size: 100%; line-height: 0; }
.brand-lines .w { display: block; padding: 0; margin: 0; }
.brand-lines .w > span { display: block; }
.brand-lines img { display: block; inline-size: 100%; block-size: auto; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__sub { max-inline-size: 30em; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; color: var(--cream-2); margin: 0 0 34px; }
.hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero__assure { margin-top: 18px; font-size: 16px; color: var(--cream-3); }

.js .finale { position: absolute; z-index: 6; right: var(--zr); top: 50%; translate: 0 -50%; inline-size: min(44vw, 680px); display: grid; justify-items: start; gap: 22px; opacity: 0; visibility: hidden; }
.finale__title { margin: 0; font-weight: 900; font-size: clamp(52px, 6.2vw, 112px); line-height: .95; }
.finale__line { margin: 0 0 8px; font-size: clamp(18px, 1.5vw, 24px); color: var(--cream-2); }

@media (max-aspect-ratio: 1/1) {
  .js .hero, .js .finale { left: var(--zr); inline-size: auto; top: auto; translate: none; bottom: calc(4svh + env(safe-area-inset-bottom, 0px)); }
  .hero__title { font-size: clamp(40px, 12.2vw, 64px); margin-bottom: 14px; }
  .hero__sub { font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
  .hero__buy { gap: 12px; }
  .hero__buy .btn { flex: 1 1 100%; }
  .hero__buy .tag { flex: 1 1 100%; justify-content: center; }
  .hero__assure { margin-top: 10px; font-size: 13px; text-align: center; }
  .finale__title { font-size: clamp(40px, 12vw, 62px); }
  .js .finale { gap: 14px; }
  .js .say { left: var(--zr); inline-size: auto; justify-items: center; text-align: center; }
  .js .say--diet { top: 40svh; }
  .say__big { font-size: clamp(30px, 9.4vw, 46px); }
  .say--diet .say__big { font-size: clamp(34px, 10.4vw, 50px); }
  .say__mid { font-size: clamp(19px, 5.4vw, 26px); }
  .swaps { gap: 10px; }
  .swaps li { font-size: clamp(15px, 4.2vw, 18px); gap: 12px; text-align: start; }
  .js .odo { left: var(--zr); justify-items: center; }
  .odo__num { font-size: min(19vw, 11.5svh); }
  .odo__unit { font-size: 15px; }
}

/* a phone on its side: everything tightens */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .js .film__stage { --odo-top: 14vh; --say-top: 46vh; }
  .hero__sub { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
  .hero__title { font-size: clamp(30px, 10.5vh, 56px); margin-bottom: 10px; }
  .hero__assure { display: none; }
  .hero .btn, .finale .btn { min-block-size: 46px; font-size: 15px; }
  .finale__title { font-size: clamp(30px, 11vh, 56px); }
  .finale__line { font-size: 14px; }
  .say__big { font-size: clamp(22px, 8vh, 42px); }
  .say--diet .say__big { font-size: clamp(24px, 9vh, 46px); }
  .say__mid { font-size: clamp(15px, 4.6vh, 24px); }
  .swaps li { font-size: 14px; }
  .odo__num { font-size: min(9vw, 20vh); }
  .odo__unit { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .js .steam { display: none; } }