/* INSTAFOOD HERO CINEMATIC V11.48.101 · THE CRAVING AWAKENS
   Rail narratif sticky pilote par --ifhp (progression 0..1) + data-phase 0..4.
   Sans JavaScript ou sous prefers-reduced-motion : hero statique une hauteur d'ecran,
   image + texte + CTA parfaitement servis. Aucune dependance externe. */

/* ── Base statique (toujours active) ── */
.ifh-craving{position:relative;background:#070503}
.ifh-stage{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ifh-media{position:absolute;inset:0;z-index:0}
.ifh-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;transform:scale(calc(1.03 + var(--ifhp,0)*.09)) translateY(calc(var(--ifhp,0)*-2.2%));transform-origin:50% 45%;will-change:transform}
.ifh-copy{position:relative;z-index:3;padding:0 clamp(18px,5vw,64px) clamp(72px,11svh,120px);max-width:760px;background:linear-gradient(180deg,transparent 0%,rgba(6,4,2,.55) 46%,rgba(6,4,2,.86) 100%);margin-top:auto;padding-top:22svh}
.ifh-eyebrow{font-family:var(--font-hand,'Caveat',cursive);font-size:clamp(1.15rem,2.6vw,1.6rem);color:var(--cheddar,#ffb100);margin:0 0 8px}
.ifh-copy h2{font-family:var(--font-chunk,'Bagel Fat One',Impact,sans-serif);font-size:clamp(1.9rem,5vw,3.4rem);line-height:.98;text-transform:uppercase;color:#fff6e6;text-shadow:3px 3px 0 rgba(0,0,0,.5);margin:0 0 12px}
.ifh-copy p{color:var(--creme-2,#e6dcc8);line-height:1.55;max-width:52ch;margin:0 0 20px;font-size:clamp(.98rem,1.5vw,1.1rem)}
.ifh-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ifh-live{position:relative;z-index:3;padding:0 clamp(18px,5vw,64px) 16px}
.ifh-vestige{display:none!important}

/* ── Couches cinematiques (creees par JS, animees seulement hors reduced-motion) ── */
@media (prefers-reduced-motion: no-preference){
html.ifh-on .ifh-wrap{height:200vh}
html.ifh-on .ifh-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
@media (max-width:820px){html.ifh-on .ifh-wrap{height:150vh}}

.ifh-p{position:absolute;z-index:2;border-radius:50%;pointer-events:none;
  left:calc(var(--px)*1%);top:calc(var(--py)*1%);width:calc(var(--ps)*1px);height:calc(var(--ps)*1px);
  background:radial-gradient(circle at 34% 30%,var(--pc,#ffcf7a),rgba(150,62,12,.65) 70%,transparent 78%);
  filter:blur(calc(var(--pb)*1px));opacity:calc(var(--po)*var(--ifhdec,1));
  transform:translate3d(calc(var(--ifhx,0)*var(--pv)*5px),calc(var(--ifhp,0)*var(--pv)*-34vh + var(--ifhy,0)*var(--pv)*4px),0) rotate(calc(var(--ifhp,0)*var(--pr)*1deg));
  transition:opacity .6s ease}
.ifh-steam{position:absolute;z-index:1;pointer-events:none;width:46vw;height:70vh;bottom:-8vh;
  background:radial-gradient(46% 60% at 50% 78%,rgba(255,214,150,.13),transparent 70%);
  filter:blur(26px);opacity:calc(.5*var(--ifhdec,1));mix-blend-mode:screen;
  animation:ifhSteam var(--sd,17s) ease-in-out infinite alternate;transition:opacity .8s ease}
@keyframes ifhSteam{from{transform:translateY(2.5%) scaleX(1)}to{transform:translateY(-4%) scaleX(1.09)}}
.ifh-bokeh{position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  width:calc(var(--bs)*1px);height:calc(var(--bs)*1px);left:calc(var(--bx)*1%);top:calc(var(--by)*1%);
  background:radial-gradient(circle,rgba(255,196,96,.5),transparent 70%);filter:blur(15px);
  opacity:calc(.5*var(--ifhdec,1));animation:ifhBok 12s ease-in-out infinite alternate;
  transform:translate3d(calc(var(--ifhx,0)*3px),calc(var(--ifhy,0)*3px),0)}
@keyframes ifhBok{from{opacity:.28}to{opacity:.6}}
.ifh-glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(70% 55% at 62% 40%,rgba(255,177,0,.10),transparent 65%);
  opacity:calc(.8*var(--ifhdec,1));animation:ifhGlow 9s ease-in-out infinite alternate;
  transform:translate3d(calc(var(--ifhx,0)*6px),calc(var(--ifhy,0)*6px),0)}
@keyframes ifhGlow{from{opacity:.55}to{opacity:.95}}
.ifh-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* Intensites par phase : 2 = explosion sensorielle, 4 = fondu vers le contenu */
.ifh-stage[data-phase="0"]{--ifhdec:.55}
.ifh-stage[data-phase="1"]{--ifhdec:.8}
.ifh-stage[data-phase="2"]{--ifhdec:1.25}
.ifh-stage[data-phase="3"]{--ifhdec:.7}
.ifh-stage[data-phase="4"]{--ifhdec:0}
.ifh-stage[data-phase="2"] .ifh-glow{animation-duration:6s}
.ifh-stage[data-phase="3"] .ifh-ctas .btn--primary,
.ifh-stage[data-phase="4"] .ifh-ctas .btn--primary{transform:scale(1.045)}
.ifh-ctas .btn--primary{transition:transform .5s var(--easing,cubic-bezier(.16,1,.3,1))}
}

@media (prefers-reduced-motion: reduce){
.ifh-p,.ifh-steam,.ifh-bokeh,.ifh-glow,.ifh-grain{display:none!important}
.ifh-media img{transform:none!important}
}

/* ── 48.98 : banniere VIDEO ── */
.ifh-medallion{position:absolute;right:clamp(20px,6vw,90px);top:50%;transform:translateY(-53%);height:min(76svh,740px);aspect-ratio:480/848;border-radius:26px;overflow:hidden;border:1px solid rgba(245,166,35,.42);box-shadow:0 30px 90px rgba(0,0,0,.62);z-index:2;background:#000}
.ifh-medallion video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
.ifh-medallion{position:absolute;inset:0;transform:none;height:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;right:auto;top:auto}
.ifh-media{display:none}
}
@media (prefers-reduced-motion: no-preference){
html.ifh-on .ifh-medallion{transform:translateY(calc(-53% + var(--ifhp,0)*-3.5%)) }
@media (max-width:820px){html.ifh-on .ifh-medallion{transform:none}}
}

/* ── 48.101 : bouton son accessible + copy qui laisse place ── */
.ifh-sound{position:absolute;top:10px;right:10px;z-index:4;width:48px;height:48px;border-radius:50%;border:1px solid rgba(245,166,35,.55);background:rgba(10,7,4,.62);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:transform .25s ease,background .25s ease}
.ifh-sound:active{transform:scale(.92)}
.ifh-sound svg{width:22px;height:22px;fill:none;stroke:var(--cheddar,#ffb100);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ifh-sound .ifh-son-on{display:none}
.ifh-sound[aria-pressed="true"]{background:rgba(255,177,0,.2)}
.ifh-sound[aria-pressed="true"] .ifh-son-on{display:block}
.ifh-sound[aria-pressed="true"] .ifh-son-off{display:none}
@media (max-width:820px){.ifh-sound{top:calc(env(safe-area-inset-top,0px) + 86px);right:14px}}
.ifh-copy,.ifh-live{transition:opacity .55s ease,transform .55s var(--easing,cubic-bezier(.16,1,.3,1))}
@media (prefers-reduced-motion: no-preference){
.ifh-stage[data-phase="3"] .ifh-copy,.ifh-stage[data-phase="4"] .ifh-copy,
.ifh-stage[data-phase="3"] .ifh-live,.ifh-stage[data-phase="4"] .ifh-live{opacity:0;transform:translateY(-9svh);pointer-events:none}
}