/* Atelier /09: film-directed storytelling layer; existing commerce stays intact. */
:root{--film-ease:cubic-bezier(.18,.75,.19,1)}
.film-hero{min-height:clamp(740px,100svh,1200px);height:100svh;max-height:none;overflow:hidden}
.film-hero>img{animation:filmEstablish 15s ease-out both;object-position:58% 48%}
.film-hero::before{background:linear-gradient(90deg,rgba(5,6,6,.91) 0%,rgba(9,9,9,.71) 44%,rgba(13,11,10,.14) 83%),linear-gradient(0deg,rgba(4,5,6,.58),transparent 35%)}
.film-hero .hero-copy{padding:clamp(80px,10vh,170px) 0 clamp(80px,8vh,130px) 8vw;max-width:920px;align-self:center}
.film-hero .hero-copy h1{font-size:clamp(5rem,10vw,10.7rem);letter-spacing:-.082em;line-height:.87;margin:24px 0 33px;text-shadow:0 8px 70px rgba(0,0,0,.15)}
.film-hero .hero-copy h1 em{color:#f0c89b}
.film-hero .hero-copy>p:not(.eyebrow){font-size:clamp(15px,1.45vw,18px);line-height:1.85;max-width:395px}
.film-hero .hero-side{position:absolute;right:4.5vw;bottom:45px}
.film-hero .hero-copy .eyebrow{letter-spacing:.28em}
.film-hero .hero-copy .button-row{gap:25px}
.film-hero .film-index{position:absolute;bottom:42px;left:8vw;color:#f0e7dcaa;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:15px}
.film-hero .film-index::before{content:'';display:block;width:42px;height:1px;background:#efca99}
@keyframes filmEstablish{from{transform:scale(1.16) translateX(-1.5%);filter:brightness(.66)}to{transform:scale(1.01) translateX(0);filter:brightness(1)}}
.film-sequence{position:relative;isolation:isolate;background:#11110f;color:#fff}
.film-intro-title{position:absolute;top:18px;left:5%;z-index:3;color:#ead5bc99;font-size:10px;letter-spacing:.2em}
.film-frames{position:relative}
.film-frame{position:relative;display:grid;align-items:end;min-height:100svh;overflow:hidden;isolation:isolate;padding:12vh max(7%,calc((100vw - 1450px)/2)) 11vh;background:#0b0c0a}
.film-frame picture,.film-frame .film-backdrop{position:absolute;inset:0;z-index:-2;overflow:hidden}
.film-frame picture img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.film-frame::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,4,.89),rgba(6,7,5,.18) 62%,rgba(6,7,5,.15)),linear-gradient(90deg,rgba(6,7,6,.6),transparent 76%);z-index:-1;pointer-events:none}
.film-frame:nth-child(2)::before{background:linear-gradient(90deg,rgba(12,10,7,.79),rgba(12,10,7,.1) 85%),linear-gradient(0deg,rgba(12,9,7,.66),transparent 60%)}
.film-frame:nth-child(3){background:radial-gradient(circle at 70% 45%,#7b5043 0,#2a2824 38%,#080a0a 85%)}
.film-frame:nth-child(3)::before{background:linear-gradient(90deg,rgba(9,8,8,.92),rgba(9,8,8,.05) 95%)}
.film-frame .film-backdrop{background:radial-gradient(circle at 70% 49%,#b9826f88,transparent 42%)}
.film-frame-copy{max-width:min(820px,85vw);position:relative;z-index:2}
.film-frame-copy .eyebrow{color:#f6cfa1}
.film-frame-copy h2{color:#fff;font-size:clamp(4.2rem,9vw,10rem);line-height:.88;letter-spacing:-.072em;margin:19px 0 28px;text-wrap:balance}
.film-frame-copy h2 em{color:#e8ba91}
.film-frame-copy p:not(.eyebrow){max-width:465px;font-size:clamp(14px,1.3vw,17px);line-height:1.9;color:#ebded2}
.film-frame-copy .chapter-no{font-size:12px;letter-spacing:.17em;color:#f8e5cfb3;margin-bottom:35px}
.film-frame .shot-label{position:absolute;bottom:35px;right:5%;color:#e7cdb3aa;font-size:10px;letter-spacing:.19em}
.film-frame-bottle{position:absolute;z-index:1;left:64%;top:20%;width:22vw;max-width:320px;min-width:220px;aspect-ratio:.7;filter:drop-shadow(38px 38px 25px rgba(0,0,0,.55))}
.film-frame-bottle .bottle-wrap{width:100%;height:100%;max-width:none;min-width:0}
.film-frame-bottle .bottle-sticker strong{font-size:clamp(24px,3vw,34px)}
.film-frame-bottle::before{content:'';position:absolute;inset:-22%;border:1px solid rgba(236,185,136,.4);border-radius:50%;transform:rotateX(64deg);box-shadow:0 0 90px rgba(225,164,119,.22)}
/* Enhance only if the user wants motion and the browser can animate. */
.film-sequence.film-active{height:350svh}
.film-active .film-frames{position:sticky;top:0;height:100svh;overflow:hidden}
.film-active .film-frame{position:absolute;inset:0;height:100svh;min-height:0;pointer-events:none;opacity:var(--shot-opacity,0)}
.film-active .film-frame:first-child{--shot-opacity:1}
.film-active .film-frame picture img{transform:scale(var(--shot-scale,1.04)) translate3d(0,var(--shot-y,0px),0);transform-origin:56% 42%;will-change:transform}
.film-active .film-frame-copy{opacity:var(--copy-opacity,1);transform:translate3d(0,var(--copy-y,0px),0)}
.film-active .film-frame-bottle{transform:translate3d(0,var(--bottle-y,0px),0) rotate(var(--bottle-angle,0deg))}
.film-active .film-intro-title{position:absolute}
.film-sequence .film-progress{position:absolute;z-index:4;right:35px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.film-progress span{height:3px;width:28px;background:rgba(255,255,255,.35)}
.film-progress span.active{background:#f1cda5;width:50px}

.film-next{position:absolute;bottom:35px;left:7%;z-index:5;color:#f0dcc4a8;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.film-pause{position:absolute;bottom:30px;right:5%;z-index:6;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#f4dfc7;text-decoration:underline;background:#15141382;padding:10px;border:1px solid #eee4d755}
.film-transition{height:25vh;background:linear-gradient(#11110f,#e9e1d7)}
@media(max-width:900px){
 .film-hero .hero-copy{padding:90px 6vw 100px}
 .film-hero .hero-copy h1{font-size:clamp(4.2rem,13vw,7rem)}
 .film-frame{padding:15vh 7% 12vh}
 .film-frame-copy h2{font-size:clamp(4rem,12vw,8rem)}
 .film-frame-bottle{left:56%;top:13%;width:33vw;min-width:160px}
 .film-progress{right:18px!important}
 .film-frame-copy{max-width:90vw}
}
@media(max-width:600px){
 .film-hero{min-height:680px;max-height:950px}
 .film-hero .hero-copy{padding:90px 22px 120px}
 .film-hero .hero-copy h1{font-size:clamp(4rem,14vw,6rem)}
 .film-hero .hero-side{display:none}
 .film-hero .film-index{left:25px;bottom:28px;font-size:9px}
 .film-frame{min-height:80svh;padding:90px 7% 80px}
 .film-frame-copy h2{font-size:clamp(3.6rem,13vw,5.5rem)}
 .film-frame-copy p:not(.eyebrow){font-size:14px}
 .film-frame-bottle{left:43%;top:13%;min-width:160px;width:39vw;opacity:.74}
 .film-sequence.film-active{height:295svh}
 .film-active .film-frame{padding-bottom:16vh}
 .film-active .film-frame-copy{margin-top:auto}
 .film-progress{display:none!important}
 .film-frame .shot-label{display:none}
 .film-frames{height:auto}
 .film-next{bottom:17px}
}
@media(prefers-reduced-motion:reduce){
 .film-hero>img{animation:none!important}
 .film-sequence{height:auto!important}
 .film-frames{position:static!important;height:auto!important}
 .film-frame{position:relative!important;height:auto!important;min-height:78svh!important;opacity:1!important;transform:none!important}
 .film-frame picture img,.film-frame-copy,.film-frame-bottle{transform:none!important;opacity:1!important}
 .film-progress,.film-pause{display:none!important}
}

/* Subtle cinema framing and moving light, not a fake video player. */
.film-frames::before,.film-frames::after{content:'';position:absolute;left:0;right:0;height:clamp(12px,2.6vh,28px);background:#080808;z-index:6;pointer-events:none}
.film-frames::before{top:0}.film-frames::after{bottom:0}
.film-frame::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 55% 35%,transparent 24%,rgba(0,0,0,.23) 95%);mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.film-frames::before,.film-frames::after{display:none}}