/* Homepage factory film — scroll-driven chapters (2026-09-19).
   Pure CSS + ~80 lines of vanilla JS; no animation library. */
.yh-film{position:relative;height:calc(var(--yh-film-count,3) * 100svh);margin-block:0;background:#0b0f1d;color:#fff}
.yh-film__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}

.yh-film__media,.yh-film__layer,.yh-film__video,.yh-film__placeholder,.yh-film__shade,.yh-film__grain{position:absolute;inset:0;width:100%;height:100%}
.yh-film *,.yh-film *::before,.yh-film *::after{box-sizing:border-box}
.yh-film__layer{margin:0;opacity:0;transition:opacity 1.2s ease-in-out}
.yh-film__layer.is-active{opacity:1;z-index:1}
.yh-film__video{object-fit:cover;display:block}
.yh-film__placeholder{display:flex;align-items:flex-start;justify-content:flex-end;padding:clamp(96px,11vh,120px) clamp(20px,3vw,40px) 0;background:
  radial-gradient(120% 90% at 78% 30%,rgba(245,162,14,.16),transparent 55%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px),
  linear-gradient(160deg,#18213b,#0b0f1d 70%)}
.yh-film__layer:nth-child(2) .yh-film__placeholder{background-position:0 0,40px 0,0 0}
.yh-film__placeholder span{max-width:min(22rem,80vw);padding:10px 14px;border:1px dashed rgba(255,255,255,.35);border-radius:10px;color:rgba(255,255,255,.7);font:600 11px/1.5 var(--wp--preset--font-family--spec,monospace);letter-spacing:.08em;text-transform:uppercase;text-align:right}
.yh-film__placeholder small{font-size:9px;letter-spacing:.06em;opacity:.7;text-transform:none}
.yh-film__shade{z-index:2;background:linear-gradient(90deg,rgba(8,12,24,.72) 0%,rgba(8,12,24,.35) 48%,rgba(8,12,24,.1) 100%),linear-gradient(0deg,rgba(8,12,24,.55),transparent 40%)}
.yh-film__grain{z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.yh-film__copy{position:absolute;inset:0;z-index:5;display:grid;align-items:center;padding:0 clamp(20px,7vw,112px);pointer-events:none}
.yh-film__chapter{grid-area:1/1;max-width:44rem;visibility:hidden}
.yh-film__chapter.is-active{visibility:visible;pointer-events:auto}
.yh-film__eyebrow{display:flex;gap:16px;align-items:center;margin:0 0 22px;color:#f7bf54;font:600 11px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.26em;text-transform:uppercase;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .35s,transform .8s ease-out .35s}
.yh-film__eyebrow i{display:block;width:48px;height:2px;background:#f5a20e}
.yh-film__title{overflow:hidden;margin:0 0 22px;padding:.08em 0;color:#fff;font-family:var(--wp--preset--font-family--display,inherit);font-size:clamp(38px,6vw,88px);font-weight:470;line-height:.98;letter-spacing:-.035em}
.yh-film__title span{display:block;transform:translateY(105%);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1)}
.yh-film__text{max-width:30rem;margin:0;padding:20px 22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:rgba(255,255,255,.84);font-size:clamp(15px,1.15vw,17px);line-height:1.6;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .45s,transform .8s ease-out .45s}
.yh-film__action{display:inline-flex;gap:14px;align-items:center;margin-top:30px;color:#fff;font:650 11px/1 var(--wp--preset--font-family--body,inherit);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .55s,transform .8s ease-out .55s}
.yh-film__action-icon{position:relative;display:grid;place-items:center;width:46px;height:46px;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:16px;letter-spacing:0;transition:color .3s,border-color .3s,background .3s}
.yh-film__action:hover .yh-film__action-icon,.yh-film__action:focus-visible .yh-film__action-icon{background:#f5a20e;border-color:#f5a20e;color:#1c1406}
.yh-film__chapter.is-active .yh-film__eyebrow,.yh-film__chapter.is-active .yh-film__text,.yh-film__chapter.is-active .yh-film__action,.yh-film__chapter.is-active .yh-film__title span{opacity:1;transform:none}

.yh-film__progress{position:absolute;left:50%;bottom:clamp(18px,3vw,32px);z-index:6;display:flex;gap:16px;align-items:center;padding:8px 8px 8px 22px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(8,12,24,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateX(-50%);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.yh-film__progress-text{display:grid;gap:3px;min-width:150px}
.yh-film__progress-text span{color:rgba(255,255,255,.5);font:600 9px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.16em;text-transform:uppercase}
.yh-film__progress-text b{color:#fff;font-weight:600}
.yh-film__progress-text strong{color:#fff;font-size:12px;font-weight:650;white-space:nowrap}
.yh-film__ring{width:44px;height:44px;transform:rotate(-90deg)}
.yh-film__ring circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.yh-film__ring .yh-film__ring-bar{stroke:#f5a20e;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;transition:stroke-dashoffset .15s linear}

@media(max-width:700px){
  .yh-film__copy{align-items:end;padding-bottom:120px}
  .yh-film__shade{background:linear-gradient(0deg,rgba(8,12,24,.85) 10%,rgba(8,12,24,.25) 70%)}
  .yh-film__progress{padding-left:16px}
  .yh-film__progress-text{min-width:120px}
}
@media(prefers-reduced-motion:reduce){
  .yh-film__layer,.yh-film__eyebrow,.yh-film__title span,.yh-film__text,.yh-film__action,.yh-film__ring .yh-film__ring-bar{transition:none}
}

/* v2 (2026-09-19): layout follows the reference (left column, eyebrow rule, large title,
   bordered description panel, round action, centred progress pill) using YOOAN type tokens:
   Schibsted Grotesk (display) · Fustat (body) · Geist Mono (eyebrow/labels). */
.yh-film__copy{padding:0 clamp(20px,10.5vw,160px)}
.yh-film__chapter{max-width:min(46rem,100%)}
.yh-film__eyebrow{gap:28px;margin-bottom:clamp(28px,4vh,44px);font-size:12px;letter-spacing:.3em}
.yh-film__eyebrow i{width:clamp(56px,6vw,96px);height:3px;border-radius:2px}
.yh-film__title{margin-bottom:clamp(28px,4vh,40px);font-size:clamp(44px,6.2vw,96px);font-weight:560;line-height:.96;letter-spacing:-.045em}
.yh-film__text{max-width:36rem;padding:clamp(22px,2.4vw,34px) clamp(24px,2.8vw,40px);border-color:rgba(255,255,255,.1);border-radius:24px;background:rgba(10,12,20,.55);font-family:var(--wp--preset--font-family--body,inherit);font-size:clamp(16px,1.3vw,20px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.82)}
.yh-film__actions{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;margin-top:clamp(30px,4.5vh,48px)}
.yh-film__actions .yh-film__action{margin-top:0}
.yh-film__action{gap:28px;margin-top:clamp(30px,4.5vh,48px);font-family:var(--wp--preset--font-family--body,inherit);font-size:12px;letter-spacing:.18em}
.yh-film__action-icon{width:56px;height:56px;font-size:18px}
.yh-film__secondary{color:rgba(255,255,255,.72);font:600 11px/1 var(--wp--preset--font-family--spec,monospace);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px;opacity:0;transform:translateY(20px);transition:opacity .8s ease-out .6s,transform .8s ease-out .6s,color .25s,border-color .25s}
.yh-film__secondary:hover,.yh-film__secondary:focus-visible{color:#f7bf54;border-color:#f5a20e}
.yh-film__chapter.is-active .yh-film__secondary{opacity:1;transform:none}

.yh-film__progress{gap:22px;padding:10px 10px 10px 30px;border-color:rgba(255,255,255,.1);background:rgba(6,8,14,.82)}
.yh-film__progress-text span{font-size:10px;letter-spacing:.14em}
.yh-film__progress-text strong{font-family:var(--wp--preset--font-family--body,inherit);font-size:14px}
.yh-film__ring-wrap{position:relative;display:grid;place-items:center;width:56px;height:56px}
.yh-film__ring{position:absolute;inset:0;width:100%;height:100%}
.yh-film__play{width:20px;height:20px;border-radius:50%;background:#fff;position:relative}
.yh-film__play::after{content:"";position:absolute;left:8px;top:6px;border-left:6px solid #0b0f1d;border-top:4px solid transparent;border-bottom:4px solid transparent}

@media(max-width:700px){
  .yh-film__copy{padding:0 20px 128px}
  .yh-film__eyebrow{gap:16px;font-size:10px}
  .yh-film__eyebrow i{width:40px}
  .yh-film__text{padding:18px 20px;border-radius:18px;font-size:15px}
  .yh-film__action-icon{width:46px;height:46px}
  .yh-film__progress{padding-left:20px}
  .yh-film__ring-wrap{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){.yh-film__secondary{transition:none}}

/* v3 (2026-09-28): framed film that grows on scroll (reference: halo-lab.com showreel).
   The film no longer fills the screen: it starts as a smaller rounded card, grows while it scrolls in,
   and settles as a card with a margin all round. --g (0→1) is written by home-factory-film.js.
   Chapter copy fades in only once the card has almost reached full size. */
.yh-film{--g:1;--yh-film-m:clamp(12px,2.8vw,44px);--yh-film-r:clamp(18px,2vw,30px);
  height:calc(var(--yh-film-count,3) * 100svh + 40svh);background:#FBF7E9}
.yh-film.is-grow .yh-film__media{inset:var(--yh-film-m);width:auto;height:auto;overflow:hidden;background:#0b0f1d;
  border-radius:calc(var(--yh-film-r) / (.5 + .5 * var(--g)));
  transform:scale(calc(.5 + .5 * var(--g)));transform-origin:50% 50%;
  box-shadow:0 50px 90px -50px rgba(14,23,51,.6);will-change:transform}
.yh-film.is-grow .yh-film__copy{inset:var(--yh-film-m)}
.yh-film.is-grow .yh-film__copy,.yh-film.is-grow .yh-film__progress{opacity:clamp(0,(var(--g) - .82) * 5.5,1);transition:opacity .2s linear}
.yh-film.is-grow .yh-film__progress{bottom:calc(var(--yh-film-m) + clamp(14px,2.4vw,26px))}
@media(max-width:700px){.yh-film{--yh-film-m:10px;--yh-film-r:18px}}
@media(prefers-reduced-motion:reduce){.yh-film{--g:1!important}.yh-film.is-grow .yh-film__media{will-change:auto}}

/* v3.1 (2026-09-28): smaller card + large rounded corners.
   clip-path (not only border-radius) so the playing <video> layers are clipped too —
   browsers often ignore overflow+radius on composited video. */
.yh-film{--yh-film-m:clamp(16px,6vw,110px);--yh-film-r:clamp(26px,3.4vw,60px)}
.yh-film.is-grow .yh-film__media{
  clip-path:inset(0 round calc(var(--yh-film-r) / (.5 + .5 * var(--g))));
  -webkit-clip-path:inset(0 round calc(var(--yh-film-r) / (.5 + .5 * var(--g))));
  box-shadow:none}
@media(max-width:700px){.yh-film{--yh-film-m:14px;--yh-film-r:24px}}