/* ============================================================
   CINEMATIC HERO — fitted to le-fournil-hero-fitted.html
   ============================================================ */
.chero {
  --c-navy: #080D1A;
  --c-navy2: #0C1528;
  --c-gold: #CBA24A;
  --c-gold-hi: #EBCB7E;
  --c-cream: #F3ECDD;
  --c-ember: #E8863A;
  --c-muted: #9FA9BE;

  /* exactly full viewport on phones (no next-section peek); capped only on
     very tall desktop windows so the column doesn't stretch.
     svh (not dvh): dvh grows when the mobile URL bar collapses, which eats
     the first scroll gesture. */
  position: relative; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 130px clamp(20px, 6vw, 48px) 92px;
  overflow: hidden;
  overflow: clip;
  touch-action: pan-y pinch-zoom;
  background: var(--c-navy); color: var(--c-cream);
  font-family: var(--chero-body, 'Heebo', sans-serif);
}
body[data-lang="he"] .chero { --chero-display: 'Frank Ruhl Libre', serif; --chero-body: 'Heebo', sans-serif; }
body[data-lang="en"] .chero { --chero-display: 'Frank Ruhl Libre', serif; --chero-body: 'Heebo', sans-serif; }
body[data-lang="ar"] .chero { --chero-display: 'Amiri', serif; --chero-body: 'Cairo', sans-serif; }
body[data-lang="ru"] .chero { --chero-display: 'PT Serif', serif; --chero-body: 'Inter', sans-serif; }

/* ---- background stack ---- */
.chero-bg { position: absolute; inset: 0; z-index: 0; }
.chero-bg video, .chero-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chero-base { position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(232,134,58,.28), transparent 55%),
    radial-gradient(90% 70% at 50% -10%, rgba(203,162,74,.12), transparent 60%),
    linear-gradient(180deg, #0A1020 0%, #080D1A 55%, #05080F 100%); }
.chero-glow { position: absolute; left: 50%; bottom: -30%; width: 90vw; height: 60vh; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232,134,58,.35), rgba(232,134,58,0) 70%);
  will-change: transform, opacity; animation: ch-breathe 6s ease-in-out infinite; }
@keyframes ch-breathe { 0%,100% { opacity:.55; transform:translateX(-50%) scale(1) } 50% { opacity:.9; transform:translateX(-50%) scale(1.08) } }
.chero-embers { position: absolute; inset: 0; overflow: hidden; }
.chero-embers .ember { position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-gold-hi), rgba(232,134,58,.2) 60%, transparent 70%);
  opacity: 0; animation: ch-rise linear infinite; }
@keyframes ch-rise {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  12% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-88vh) translateX(var(--drift, 0)) scale(1.1); }
}
.chero-grain { position: absolute; inset: 0; opacity: .05; pointer-events: none; }
.chero-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.65) 100%); }
.chero-media-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,13,26,.7) 0%, rgba(8,13,26,.35) 45%, rgba(8,13,26,.8) 100%); }

/* ---- floating transparent header ---- */
.chero-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top) + 12px) clamp(16px, 5vw, 28px) 12px;
  background: linear-gradient(180deg, rgba(6,10,20,.85), rgba(6,10,20,0));
  text-align: start;
}
.chero-head .row1 { display: flex; align-items: center; justify-content: space-between; }
.chero-logo { font-family: var(--chero-display); font-weight: 700; font-size: clamp(18px, 5vw, 22px); color: var(--c-gold); }
.chero-menu-btn {
  background: none; border: none; color: var(--c-cream);
  font: 500 14px var(--chero-body); display: inline-flex; align-items: center; gap: .4em;
  cursor: pointer; opacity: .85; padding: 4px 2px;
}
.chero-menu-btn .bars { display: inline-block; width: 18px; height: 12px; position: relative; }
.chero-menu-btn .bars i { position: absolute; left: 0; right: 0; height: 2px; background: var(--c-cream); border-radius: 2px; }
.chero-menu-btn .bars i:nth-child(1) { top: 0 }
.chero-menu-btn .bars i:nth-child(2) { top: 5px }
.chero-menu-btn .bars i:nth-child(3) { top: 10px }
.chero-head .row2 { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.chero-branch-lbl { font-size: 12px; color: var(--c-muted); font-weight: 500; }
.chero-pill {
  flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  font-family: var(--chero-body); cursor: pointer; border: 1px solid rgba(203,162,74,.4);
  background: rgba(255,255,255,.04); color: var(--c-cream); transition: all .2s;
  display: inline-block;
}
.chero-pill.active { background: linear-gradient(135deg, var(--c-gold-hi), var(--c-gold)); color: #211803; border-color: transparent; }

/* ---- content ---- */
.chero-wrap { position: relative; z-index: 2; max-width: 640px; width: 100%; }
.chero-eyebrow { font-size: clamp(11px, 3vw, 13px); letter-spacing: .3em; font-weight: 500; color: var(--c-gold); margin-bottom: clamp(14px, 3vh, 24px); }
body[data-lang="he"] .chero-eyebrow, body[data-lang="ar"] .chero-eyebrow { letter-spacing: .12em; }
.chero-pre { font-family: var(--chero-display); font-weight: 500; font-size: clamp(22px, 7vw, 34px); color: var(--c-cream); margin-bottom: .12em; }
.chero-hook {
  font-family: var(--chero-display); font-weight: 900;
  font-size: clamp(38px, 12.5vw, 84px); line-height: 1.03; letter-spacing: -.01em;
  position: relative; display: inline-block; margin: 0;
}
body[data-lang="en"] .chero-hook, body[data-lang="ru"] .chero-hook { font-weight: 700; }
.chero-hook .word { display: inline-block; }
.chero-hook .ignite { color: var(--c-gold); position: relative; }
.chero-hook .ignite::after { content: ""; position: absolute; inset: -8% -12%; border-radius: 12px;
  background: radial-gradient(closest-side, rgba(235,203,126,.55), transparent 70%); opacity: 0; z-index: -1; }
.chero-hook::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; z-index: 3; pointer-events: none;
  inset-inline-end: -45%;
  background: linear-gradient(100deg, transparent, rgba(255,247,224,.55), transparent); filter: blur(2px); opacity: 0; }
.chero-sub { margin: clamp(16px, 3.5vh, 26px) 0 0; font-size: clamp(15px, 4.4vw, 19px); line-height: 1.6; color: var(--c-muted); }
.chero-sub b { color: var(--c-cream); font-weight: 700; }
.chero-ctas { margin-top: clamp(24px, 4.5vh, 36px); display: flex; flex-direction: column; gap: 12px; }
.chero-cta {
  display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; border-radius: 14px;
  font-family: var(--chero-body); font-weight: 700; font-size: clamp(16px, 4.6vw, 18px); cursor: pointer;
  transition: transform .15s ease; border: 1px solid transparent; width: 100%;
}
.chero-cta:active { transform: scale(.98); }
.chero-cta.primary { color: #211803; background: linear-gradient(135deg, var(--c-gold-hi), var(--c-gold)); box-shadow: 0 10px 30px -8px rgba(203,162,74,.6); }
.chero-cta.secondary { color: var(--c-gold); background: transparent; border-color: rgba(203,162,74,.5); }
.chero-social { margin-top: clamp(14px, 3vh, 22px); font-size: 13px; font-weight: 500; color: var(--c-gold-hi); }
.chero-cert { margin-top: clamp(12px, 2.5vh, 20px); font-size: clamp(11px, 3.2vw, 13px); color: var(--c-muted); line-height: 1.5; }
.chero-cert .seal { color: var(--c-gold); font-weight: 500; }
.chero-cue {
  all: unset; cursor: pointer; position: absolute; bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); z-index: 4;
  color: var(--c-muted); font-size: 11px; letter-spacing: .2em; text-align: center;
}
.chero-cue .chev { display: block; margin: 6px auto 0; width: 10px; height: 10px;
  border-right: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold);
  transform: rotate(45deg); animation: ch-bob 1.6s ease-in-out infinite; }
@keyframes ch-bob { 0%,100% { transform: rotate(45deg) translateY(0) } 50% { transform: rotate(45deg) translateY(4px) } }
.chero-replay {
  position: absolute; z-index: 21; bottom: calc(14px + env(safe-area-inset-bottom)); inset-inline-start: 14px;
  display: inline-flex; align-items: center; gap: .4em; background: rgba(255,255,255,.06);
  border: 1px solid rgba(203,162,74,.35); color: var(--c-gold); font: 500 12px var(--chero-body);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; background-color: rgba(8,13,26,.55);
}

/* ---- motion timeline — runs when .anim.is-in ---- */
.chero.anim .el { opacity: 0; }
.chero.anim .word { opacity: 0; transform: translateY(46px) scale(.92); will-change: transform, opacity; }
.chero.anim.is-in .chero-eyebrow { animation: c-fadeup .7s ease forwards .10s; }
.chero.anim.is-in .chero-pre    { animation: c-fadeup .7s ease forwards .45s; }
.chero.anim.is-in .word         { animation: c-jump .72s cubic-bezier(.2,.8,.2,1.05) forwards; }
.chero.anim.is-in .ignite::after { animation: c-ignite 1.1s ease forwards 1.5s; }
.chero.anim.is-in .chero-hook::before { animation: c-sweep 1.1s ease-out forwards 1.65s; }
.chero.anim.is-in .chero-sub    { animation: c-fadeup .8s ease forwards 2.05s; }
.chero.anim.is-in .chero-ctas   { animation: c-fadeup .8s ease forwards 2.30s; }
.chero.anim.is-in .chero-social { animation: c-fadeup .8s ease forwards 2.45s; }
.chero.anim.is-in .chero-cert   { animation: c-fadeup .8s ease forwards 2.60s; }
.chero.anim.is-in .chero-cue    { opacity: 0; animation: c-fadeup .8s ease forwards 2.80s; }

@keyframes c-fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes c-jump {
  0% { opacity: 0; transform: translateY(46px) scale(.92); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes c-ignite { 0% { opacity: 0 } 40% { opacity: 1 } 100% { opacity: .5 } }
@keyframes c-sweep {
  0% { inset-inline-end: -45%; opacity: 0; }
  15% { opacity: 1; }
  100% { inset-inline-end: 115%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chero-glow, .chero-embers .ember, .chero-cue .chev { animation: none !important; }
}

/* ============================================================
   FOOD REEL — fitted to le-fournil-food-reel.html
   ============================================================ */
.reel { position: relative; height: min(100vh, 720px); height: min(100svh, 720px); width: 100%; overflow: hidden; overflow: clip; touch-action: pan-y pinch-zoom; background: #05080f; color: #F3ECDD; }
.reel .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.reel .slide.active { opacity: 1; }
.reel .slide img, .reel .slide video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.reel .slide.active img { animation: kb 4.2s ease-out forwards; }
.reel .slide:nth-child(2n).active img { animation: kb2 4.2s ease-out forwards; }
.reel .slide video { transform: none; }
@keyframes kb { from { transform: scale(1.04) translate(0,0) } to { transform: scale(1.13) translate(-1.5%,-2%) } }
@keyframes kb2 { from { transform: scale(1.04) translate(0,0) } to { transform: scale(1.13) translate(1.5%,2%) } }
.reel .grade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,13,26,.72) 0%, rgba(8,13,26,.15) 32%, rgba(8,13,26,.25) 60%, rgba(8,13,26,.92) 100%); }
.reel .grade2 { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(0,0,0,.55) 100%),
              radial-gradient(80% 60% at 15% 8%, rgba(232,134,58,.14), transparent 55%); }
.reel .grain { position: absolute; inset: 0; opacity: .05; pointer-events: none; }
.reel .top { position: absolute; top: calc(env(safe-area-inset-top) + 22px); right: 0; left: 0; text-align: center; z-index: 5; }
.reel .top .ey { font-size: 12px; letter-spacing: .34em; color: #CBA24A; font-weight: 500; }
body[data-lang="he"] .reel .top .ey, body[data-lang="ar"] .reel .top .ey { letter-spacing: .14em; }
.reel .top .h { font-family: var(--chero-display, 'Frank Ruhl Libre'), serif; font-weight: 900; font-size: clamp(28px, 8.5vw, 46px); margin-top: 8px; }
.reel .top .h .g { color: #CBA24A; }
.reel .cap { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 74px);
  right: clamp(22px, 7vw, 48px); left: clamp(22px, 7vw, 48px);
  text-align: end; z-index: 6; opacity: 0; transform: translateY(20px); }
.reel .slide.active .cap { animation: capIn .8s ease forwards .35s; }
@keyframes capIn { to { opacity: 1; transform: none } }
.reel .cap .ce { display: block; font-size: 13px; letter-spacing: .2em; color: #CBA24A; font-weight: 500; margin-bottom: 4px; }
body[data-lang="he"] .reel .cap .ce, body[data-lang="ar"] .reel .cap .ce { letter-spacing: .08em; }
.reel .cap .cn { font-family: var(--chero-display, 'Frank Ruhl Libre'), serif; font-weight: 900; font-size: clamp(30px, 9vw, 56px); line-height: 1; color: #F3ECDD; }
.reel .dots { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 40px); inset-inline-end: clamp(22px, 7vw, 48px); display: flex; gap: 7px; z-index: 6; }
.reel .dot { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); transition: background .3s; }
.reel .dot.on { background: #CBA24A; }
.reel .tag { position: absolute; top: calc(env(safe-area-inset-top) + 20px); inset-inline-start: clamp(18px, 6vw, 32px); z-index: 6;
  font-size: 10px; letter-spacing: .15em; color: #CBA24A; border: 1px solid rgba(203,162,74,.4);
  padding: 5px 10px; border-radius: 999px; background: rgba(8,13,26,.6); }
.reel .tag .rec { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E8863A; margin-inline-start: 6px; animation: blink 1.4s infinite; }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
  .reel .slide img, .reel .slide.active img { animation: none; transform: scale(1.05); }
  .reel .slide.active .cap { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   DARK CINEMATIC WORLD — no cream sections below the hero
   ============================================================ */
.page {
  background: #080D1A;
  color: #F3ECDD;
}
body { background: #05080F; }
.section h2, .section h3, .quote, .loc-name { color: #F3ECDD; }
.eyebrow-lt, .section .eyebrow-lt { color: #CBA24A; }
.section p.body, .rating-meta, .loc-hours, .loc-addr { color: #9FA9BE; }
.trust-card { background: #0C1528; border-color: rgba(203,162,74,.5); box-shadow: 0 18px 34px -20px rgba(0,0,0,.8); }
.trust-cert { background: #0C1528; border-color: #CBA24A; }
.trust-title { color: #F3ECDD; }
.trust-body { color: #9FA9BE; }
.rating-num { color: #F3ECDD; }
.rating-card { background: #0C1528; }
.rating-card .name { color: #F3ECDD; }
.rating-card .count { color: #9FA9BE; }
.cater-card, .aud-card, .branch-card { background: #0C1528; border-color: rgba(203,162,74,.22); }
.cater-item { background: #12203C; }
.cater-item .t { color: #F3ECDD; }
.cater-item .d, .aud-card p, .branch-card .meta { color: #9FA9BE; }
.branch-card .name { color: #F3ECDD; }
.checklist { color: #F3ECDD; }
.step .t { color: #F3ECDD; }
.step .n { background: #CBA24A; color: #211803; }
.btn-outline { border-color: rgba(203,162,74,.55); color: #EBCB7E; }
.btn-soft { background: #12203C; color: #F3ECDD; }
.order-btn { background: #0C1528; color: #F3ECDD; border: 1px solid rgba(203,162,74,.25); }
.order-btn .go { color: #EBCB7E; }
.order-block { background: transparent; }
.order-block h2 { color: #F3ECDD; }
.loc-phone { color: #EBCB7E; }
.map-frame { border-color: rgba(203,162,74,.25); }
.supervision-strip { background: #0C1528; border-bottom: 1px solid rgba(203,162,74,.15); color: #9FA9BE; }
.footer, .footer-mini { background: #05080F; }
.cta-block { background: transparent; }
.media-box.ph-light { background: repeating-linear-gradient(45deg, #0C1528, #0C1528 9px, #12203C 9px, #12203C 18px); }
.media-box.ph-light .label { background: rgba(8,13,26,.85); color: #9FA9BE; }
.order-sheet { background: #0C1528; color: #F3ECDD; }
.order-sheet .grab { background: #2b3a5c; }
.order-sheet h3 { color: #F3ECDD; }
.order-sheet .order-btn { background: #12203C; border-color: rgba(203,162,74,.25); }