/* hero-cine.css: project styling for the 10K scene-engine hero (scene.css stays unchanged). */
.cine-page .trust-bar{position:relative;z-index:101}
.hero.cine{position:relative;z-index:0;padding:0;margin:0;max-width:none;background:var(--cine-bg,#0d0b09);color:#fff;display:block;overflow:visible}
.hero.cine:before,.hero.cine:after{content:none}
.cine .k-stage{background-color:var(--cine-bg,#0d0b09)}
.cine .k-stage>video[data-k-scrub]{scale:1}
.cine .shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgb(var(--cine-rgb,10 8 6)/.88) 0%,rgb(var(--cine-rgb,10 8 6)/.62) 32%,rgb(var(--cine-rgb,10 8 6)/.12) 58%,rgb(var(--cine-rgb,10 8 6)/0) 72%),linear-gradient(0deg,rgb(var(--cine-rgb,10 8 6)/.7),transparent 38%);
  opacity:calc(.9 + var(--k-p,0)*.1)}
.cine .k-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--cine-bg,#0d0b09);opacity:1}
.cine.cine-intro .k-veil{opacity:0;transition:opacity 1.3s cubic-bezier(.22,1,.36,1) .05s}
.cine.cine-intro .k-stage>video[data-k-scrub]{animation:cineIn 2s cubic-bezier(.22,1,.36,1) both}
@keyframes cineIn{from{scale:1.08}to{scale:1}}
.cine .k-band{z-index:3;top:auto;left:max(1.25rem,calc((100vw - var(--cine-max,1200px))/2 + 1.25rem));right:auto;width:min(34rem,38vw);max-width:none;
  bottom:calc(var(--acts-h,64px) + clamp(5rem,13vh,8rem));color:#fff;text-shadow:0 1px 2px rgb(8 7 6/.85),0 3px 12px rgb(8 7 6/.6),0 10px 40px rgb(8 7 6/.5)}
.cine .k-band::before{content:"";position:absolute;inset:-30% -14%;z-index:-1;background:radial-gradient(closest-side,rgb(var(--cine-rgb,10 8 6)/.5),transparent);pointer-events:none}
.cine .k-band .btn{text-shadow:none}
.cine .hacts{position:absolute;z-index:4;left:max(1.25rem,calc((100vw - var(--cine-max,1200px))/2 + 1.25rem));bottom:clamp(3.5rem,8vh,5.5rem);display:flex;flex-wrap:wrap;gap:.75rem;margin:0;max-width:min(40rem,60vw)}
.cine .hero-h{font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;margin:.15em 0 0;color:#fff}
.cine .hero-h .mv{display:block;transform:translate(var(--tx,0),0) scale(var(--sc,1));transform-origin:0 70%;opacity:var(--op,1);will-change:transform}
.cine .hero-kicker{font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.06;margin:0 0 .35em;color:#fff;font-weight:600}
.cine .hero-lead-k{font-size:clamp(1.15rem,1.75vw,1.6rem);line-height:1.45;color:rgba(255,255,255,.93);max-width:32ch;margin:0}
.cine .scrollcue{position:absolute;z-index:3;left:50%;bottom:20px;translate:-50% 0;margin:0;display:grid;justify-items:center;opacity:calc(1 - var(--k-p,0)*8)}
.cine .scrollcue span{width:1px;height:40px;background:linear-gradient(var(--cine-accent,#e2c27a),transparent);animation:cineCue 2s cubic-bezier(.22,1,.36,1) infinite}
@keyframes cineCue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cine .k-ring{color:var(--cine-accent,#e2c27a)}
@media (max-width:760px){
  .cine .shade{background:linear-gradient(0deg,rgb(var(--cine-rgb,10 8 6)/.96) 0%,rgb(var(--cine-rgb,10 8 6)/.86) 38%,rgb(var(--cine-rgb,10 8 6)/.15) 62%,rgb(var(--cine-rgb,10 8 6)/0) 75%)}
  .cine .k-band{left:1.25rem;right:1.25rem;width:auto;bottom:calc(var(--cine-bottom,0px) + var(--acts-h,64px) + 2rem)}
  .cine .hacts{left:1.25rem;right:1.25rem;max-width:none;bottom:calc(var(--cine-bottom,0px) + 1rem)}
  .cine .hacts .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .cine .hero-h{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .cine .hero-kicker{font-size:clamp(1.6rem,7vw,2.1rem)}
  .cine .hero-lead-k{font-size:1.08rem}
  .cine .scrollcue{display:none}
  /* landscape film on a phone: the picture sits in the upper part and melts into the dark stage */
  .cine.cine-band-media .k-stage{background-position:50% var(--cine-top,72px);background-size:auto 56svh}
  .cine.cine-band-media .k-stage>video[data-k-scrub]{top:var(--cine-top,72px);height:56svh;bottom:auto;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
}
/* static hero (reduced motion, failed media): stack everything over the poster */
.cine.k-static .k-stage{padding-top:calc(var(--cine-top,72px) + 30svh)}
.cine.k-static .k-band,.cine.k-static .hacts{position:relative;left:auto;right:auto;bottom:auto;width:auto;max-width:42rem}
.cine.k-static .k-veil,.cine.k-static .scrollcue{display:none}
.cine.k-static .hero-h .mv{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.cine .k-veil{display:none}.cine .scrollcue span{animation:none}}
/* Folli-Fix */
.cine .eyebrow{color:#e8cf8f;margin-bottom:.6rem}.cine .eyebrow::before{background:#e8cf8f}
.cine .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.cine .btn-ghost:hover{color:#fff;border-color:#fff}
.cine .hero-note{color:rgba(255,255,255,.9)}
/* layout fixes (all sites) */
@media (max-width:760px){.cine .hacts{width:auto}.cine .hacts .btn{min-width:0;max-width:100%}}
/* wide screens: slide the film right so the product sits beside the words */
@media (min-width:761px){
  .cine .k-stage>video[data-k-scrub]{translate:10vw 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
  .cine .k-stage{background-position:calc(50% + 10vw) 50%}
}
/* poster painted from CSS at first render (scene.js sets the same value later) */
.hero.cine{--k-poster:url("/assets/k/hero-poster-v2.webp")}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){.hero.cine{--k-poster:url("/assets/k/hero-m-poster-v2.webp")}}

/* ===== v2 (2026-11-09): no empty areas, stronger scroll motion, ingredient particles ===== */
/* the poster is painted by a layer with the same geometry and motion as the film, so nothing jumps when the film arrives */
.cine .k-stage{background:var(--cine-bg,#0d0b09) var(--k-poster,none) center/cover no-repeat}
.cine{--cine-op:50% 0%;--cine-zoom:.09;--cine-lift:1.5%}
.cine .k-stage::before{content:"";position:absolute;top:0;bottom:0;left:var(--cine-vx,0px);width:var(--cine-vw,100%);z-index:0;pointer-events:none;
  background:var(--k-poster,none) var(--cine-op,50% 50%)/cover no-repeat}
.cine .k-stage::before,.cine .k-stage>video[data-k-scrub]{transform-origin:var(--cine-zo-d,50% 75%);
  transform:translate3d(0,calc(var(--k-p,0)*var(--cine-lift,-3%)),0) scale(calc(1 + var(--k-p,0)*var(--cine-zoom,.18)));will-change:transform}
.cine .k-stage>video[data-k-scrub]{left:var(--cine-vx,0px);width:var(--cine-vw,100%);right:auto;object-position:var(--cine-op,50% 50%);
  translate:none;-webkit-mask-image:none;mask-image:none}
/* phones: the phone clip is a full 9:16 frame, so it fills the whole stage */
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .cine .k-stage::before,.cine .k-stage>video[data-k-scrub]{left:0;width:100%;top:0;height:100%;-webkit-mask-image:none;mask-image:none}
  .cine .k-stage::before{background-position:50% 50%}
  .cine .k-stage>video[data-k-scrub]{object-position:50% 50%}
  .cine{--cine-zoom:.14;--cine-lift:1%}
  .cine .k-stage::before,.cine .k-stage>video[data-k-scrub]{transform-origin:50% 50%}
}
/* the pinned stage uses the large viewport, so the hero never shows a strip of empty background below it
   when a phone's toolbar hides or shows; bottom content keeps clear of the toolbar */
@supports (height:100lvh){
  .cine:not(.k-static) .k-stage{height:100lvh}
  .cine:not(.k-static){--cine-tb:calc(100lvh - 100svh)}
  .cine:not(.k-static) .hacts{margin-bottom:var(--cine-tb,0px)}
  .cine:not(.k-static) .k-band{margin-bottom:var(--cine-tb,0px)}
}
/* hand-off: the last part of the scroll melts the stage into the next section's colour */
.cine .k-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:2;pointer-events:none;
  background:linear-gradient(transparent,var(--cine-next,transparent));opacity:calc((var(--k-p,0) - .9)*10)}
/* ingredient particles */
.cine .fx-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;contain:strict}
.cine .fx-p{position:absolute;left:0;top:0;max-width:none;opacity:0;will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden}
.cine.k-static .fx-layer,.cine.k-media-failed .fx-layer{display:none}
/* text beats: each caption rises in and lifts out with the scroll (hero-fx.js sets --ki / --ko) */
.cine .k-band>*{transform:translate3d(0,calc((1 - var(--ki,1))*72px - var(--ko,0)*64px),0) scale(calc(.92 + var(--ki,1)*.08 + var(--ko,0)*.05));
  transform-origin:0 100%;opacity:calc(var(--ki,1)*(1 - var(--ko,0)*.9));will-change:transform}
.cine .k-band>*:nth-child(2){transform:translate3d(0,calc((1 - var(--ki,1))*110px - var(--ko,0)*40px),0)}
.cine .k-band>*:nth-child(3){transform:translate3d(0,calc((1 - var(--ki,1))*150px - var(--ko,0)*24px),0)}
.cine.k-static .k-band>*{transform:none;opacity:1}
.cine.k-static .k-stage::before{display:none}
.cine.k-static .k-stage{background:var(--k-poster,none) center/cover no-repeat}
@media (prefers-reduced-motion:reduce){.cine .k-band>*{transform:none;opacity:1}.cine .k-stage::before,.cine .k-stage>video[data-k-scrub]{transform:none}}

/* Minimal CTA chrome so the injected hero works on any host stylesheet */
.cine .hacts .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.85rem 1.25rem;border-radius:999px;font:600 .95rem/1.2 system-ui,sans-serif;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
}
.cine .hacts .btn-wa{background:var(--cine-accent,#c6a36a);color:#111}
.cine .hacts .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cine .eyebrow{margin:0 0 .4rem;font:650 .72rem/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cine-accent,#c6a36a)}


/* ---- batch fix: header readable + clear floating bottom chrome ---- */
.cine .shade{
  background:
    linear-gradient(180deg, rgb(var(--cine-rgb,10 8 6)/.82) 0%, rgb(var(--cine-rgb,10 8 6)/.45) 10%, transparent 22%),
    linear-gradient(90deg,rgb(var(--cine-rgb,10 8 6)/.88) 0%,rgb(var(--cine-rgb,10 8 6)/.62) 32%,rgb(var(--cine-rgb,10 8 6)/.12) 58%,rgb(var(--cine-rgb,10 8 6)/0) 72%),
    linear-gradient(0deg,rgb(var(--cine-rgb,10 8 6)/.78),transparent 42%);
}
@media (max-width:760px){
  .cine .hacts{bottom:calc(var(--cine-bottom,0px) + 1.15rem) !important}
  .cine .k-band{bottom:calc(var(--acts-h,64px) + var(--cine-bottom,0px) + clamp(4.5rem,12vh,7rem)) !important}
  .cine .k-stage>video[data-k-scrub],
  .cine .k-stage::before{object-position:var(--cine-op,50% 18%); background-position:var(--cine-op,50% 18%)}
}
/* sticky stage needs document scrollport, not nested overflow on html/body */
html.cine-page, html.cine-page body{
  overflow-x:clip !important;
  overflow-y:visible !important;
}
html.cine-page .k-stage{position:sticky !important; top:0 !important}


/* ---- portrait large cover (gemini-lg1): big film, compact copy, flush pin end ---- */
.cine .cine-fill{display:none}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  /* stage sits under the sticky header and fills the dynamic visible viewport
     (svh/dvh, not lvh) so the Android Chrome URL bar cannot leave a blank strip */
  html.cine-page .cine .k-stage{
    position:sticky !important;
    top:var(--cine-hdr, 0px) !important;
    height:var(--cine-stage-h, calc(100svh - var(--cine-hdr, 0px))) !important;
  }
  @supports (height:100dvh){
    html.cine-page .cine .k-stage{
      height:var(--cine-stage-h, calc(100dvh - var(--cine-hdr, 0px))) !important;
    }
  }
  .hero.cine:not(.k-static){
    height:var(--cine-hero-h, 400svh) !important;
    --cine-tb:0px;
  }

  /* no Ken Burns / intro zoom: those tighten the crop */
  .cine.cine-intro .k-stage>video[data-k-scrub]{animation:none!important}
  .cine .k-stage::before,
  .cine .k-stage>video[data-k-scrub]{transform:none!important;will-change:auto;translate:none!important;scale:1!important}

  /* film: cover, most of the stage, object-position pans via --cine-op */
  .cine .k-stage>video[data-k-scrub]{
    object-fit:cover !important;
    object-position:var(--cine-op, 80% 50%) !important;
    left:0 !important;right:auto !important;width:100% !important;
    top:0 !important;bottom:auto !important;
    height:var(--cine-film-h, 64dvh) !important;
    z-index:1;
    -webkit-mask-image:none !important;mask-image:none !important
  }
  .cine .k-stage::before{
    content:"";
    inset:auto !important;
    left:0 !important;top:0 !important;right:auto !important;bottom:auto !important;
    width:100% !important;
    height:var(--cine-film-h, 64dvh) !important;
    background:var(--k-poster,none) var(--cine-op, 80% 50%) / cover no-repeat !important;
    filter:none;
    z-index:0 !important;pointer-events:none;transform:none !important
  }
  .cine .cine-fill{display:none !important}

  /* soft gradient only where copy sits, so the subject stays clear */
  .cine .shade,
  .cine .k-stage::after{
    top:auto !important;
    left:0;right:0;bottom:0;
    height:calc(100% - var(--cine-film-h, 64dvh) + 4.25rem) !important;
    inset:auto 0 0 0;
    background:linear-gradient(180deg,rgb(var(--cine-rgb,10 8 6)/0) 0%,rgb(var(--cine-rgb,10 8 6)/.45) 28%,rgb(var(--cine-rgb,10 8 6)/.92) 68%,rgb(var(--cine-rgb,10 8 6)/.98) 100%) !important;
    opacity:1 !important;
    z-index:2;
  }

  /* compact copy dock packed under the film, no stretched empty well */
  .cine .k-band{
    left:1.15rem !important;right:1.15rem !important;width:auto !important;max-width:none !important;
    top:auto !important;
    bottom:calc(var(--acts-h, 64px) + var(--cine-safe-b, 0.7rem) + 0.5rem) !important;
    margin-bottom:0 !important;
    overflow:visible;
  }
  .cine .hacts{
    left:1.15rem !important;right:1.15rem !important;width:auto !important;max-width:none !important;
    top:auto !important;
    bottom:var(--cine-safe-b, 0.7rem) !important;
    margin-bottom:0 !important;
    gap:.55rem;
    /* keep CTAs visible through the handoff so the dock is never empty */
    opacity:1 !important;
    pointer-events:auto;
  }
  .cine .hero-lead-k{max-width:none;font-size:1rem;line-height:1.35}
  .cine .hero-h{font-size:clamp(1.7rem, 7vw, 2.35rem)}
  .cine .scrollcue{display:none}
}

@media (min-width:761px){
  .cine .cine-fill{display:none !important}
}