/* An open doorway, a breath of nature. Decorative motion never controls reading. */
.cinema-hero { display:flex; align-items:center; height:100svh; min-height:720px; padding:0; isolation:isolate; background:#272921; }
.nature-stage { position:absolute; inset:0; overflow:hidden; perspective:1500px; }
.nature-landscape { position:absolute; inset:0; display:block; }
.nature-landscape img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:saturate(.68) brightness(.8); }
.nature-atmosphere { position:absolute; inset:0; background:linear-gradient(180deg,#c9b88e0a,transparent 55%,#171e1766); }
.opening-door { position:absolute; z-index:3; top:-1%; bottom:-1%; width:50.2%; background:repeating-linear-gradient(90deg,#ffffff03 0px,#ffffff00 1px,#00000006 3px,#ffffff00 5px),linear-gradient(90deg,#29251f,#393229 68%,#4e4232); box-shadow:inset 0 0 50px #0d0c0b99,0 0 25px #0008; backface-visibility:hidden; }
.opening-door::before { content:''; position:absolute; inset:6% 8%; border:1px solid #b6a17b25; box-shadow:inset 0 0 0 6px #12110d15; }
.opening-door::after { content:''; position:absolute; top:48%; width:3px; height:76px; background:linear-gradient(90deg,#756950,#d2bb8b,#514b3b); box-shadow:1px 2px 5px #0008; }
.door-left { left:0; transform-origin:left center; transform:rotateY(-84deg); border-right:1px solid #dacaab; }
.door-right { right:0; transform-origin:right center; transform:rotateY(84deg); border-left:1px solid #dacaab; }
.door-left::after { right:7%; }.door-right::after { left:7%; }
.door-frame { position:absolute; z-index:4; inset:0; border:18px solid #1e1c17; border-top-width:10px; box-shadow:inset 0 0 35px #211e1a70; pointer-events:none; }
.motion-ready .door-left { animation:door-open-left 7.5s cubic-bezier(.22,.65,.2,1) .35s both; }
.motion-ready .door-right { animation:door-open-right 7.5s cubic-bezier(.22,.65,.2,1) .35s both; }
@keyframes door-open-left { from{transform:rotateY(0)} to{transform:rotateY(-84deg)} }
@keyframes door-open-right { from{transform:rotateY(0)} to{transform:rotateY(84deg)} }
.landscape-pinwheel { position:absolute; left:73%; top:43%; width:clamp(110px,12vw,190px); aspect-ratio:1; transform:translate(-50%,-50%); filter:drop-shadow(2px 4px 3px #25301b30); }
.pinwheel-rotor { position:relative; z-index:1; display:block; width:100%; height:100%; filter:brightness(.92); }
.pinwheel-stem { position:absolute; left:calc(50% - 2px); top:48%; width:4px; height:clamp(230px,33vh,390px); background:linear-gradient(90deg,#675b3f,#b2a17c 50%,#776848); transform:rotate(-1deg); transform-origin:top center; }
.motion-ready .pinwheel-rotor { animation:pinwheel-turn 16s linear infinite; }
@keyframes pinwheel-turn { to{transform:rotate(360deg)} }
.cinema-hero .hero-shade { display:block; z-index:4; background:linear-gradient(90deg,#101b17c9 0%,#152019a6 28%,#15201942 52%,transparent 74%),linear-gradient(0deg,#161b16ad,transparent 30%,transparent 75%,#181e176b); }
.cinema-hero .hero-copy { z-index:5; width:58%; max-width:850px; padding:100px 0 100px 8%; }
.cinema-hero .hero-copy h1 { font-size:clamp(2.6rem,4.3vw,5.3rem); line-height:1.4; text-shadow:0 2px 30px #0b170f22; }
.cinema-hero .hero-description { max-width:34em; }
.cinema-hero .hero-bottom { z-index:5; bottom:32px; margin:0; }
.cinema-hero .video-caption { z-index:5; right:5%; bottom:94px; max-width:none; color:#eee8d8b0; }
#nature-toggle { border:1px solid #f3ece166; color:#f3ece1; background:#17180e38; padding:8px 16px; font-size:.8125rem; min-height:44px; cursor:pointer; }
#nature-toggle:hover { background:#17180e80; }
#nature-toggle:focus-visible { outline:2px solid #f3ece1; outline-offset:5px; }
.motion-paused .opening-door,.motion-paused .pinwheel-rotor,.motion-paused .scroll-line::after { animation-play-state:paused; }
/* Restore the edge-to-edge macro: complete material relationships, not an icon panel. */
#material-closeup .scene-stage { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); padding:6rem 8% 7rem; min-height:max(100svh,760px); background:#211d1a; }
#material-closeup .scene-stage picture { grid-column:auto; grid-row:auto; position:absolute; inset:0; display:block; width:100%; height:100%; }
#material-closeup .scene-stage .scene-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 44%; transform:scale(1.32)!important; transform-origin:65% 42%; }
#material-closeup .scene-shade { display:block; background:linear-gradient(0deg,#15120fec 0%,#1a1713b8 25%,transparent 62%),linear-gradient(90deg,#19161266,transparent 65%); }
#material-closeup .scene-stage .scene-content { grid-column:1/8; grid-row:1; align-self:end; z-index:2; }
#material-closeup .scene-content h2 { font-size:clamp(2.4rem,4vw,4.8rem); }
#material-closeup .scene-bottom { z-index:2; }
@media(max-width:1000px) and (min-width:721px) { .cinema-hero .hero-copy { width:65%; padding-left:8%; }.landscape-pinwheel{left:77%;} }
@media(max-width:720px) {
 .cinema-hero { height:100svh; min-height:780px; padding:0; align-items:flex-end; }
 .nature-landscape img { object-position:61% center; }
 .door-frame { border-width:10px; border-top-width:8px; }
 .landscape-pinwheel { left:68%; top:30%; width:115px; }
 .pinwheel-stem { height:200px; width:3px; }
 .cinema-hero .hero-shade { background:linear-gradient(0deg,#111c17f2 0%,#18251bdf 29%,#17231b5c 58%,#17231b05 78%,#171f1650); }
 .cinema-hero .hero-copy { width:100%; max-width:none; padding:0 8% 155px; }
 .cinema-hero .hero-copy .eyebrow { font-size:.6875rem; letter-spacing:.15em; margin-bottom:18px; }
 .cinema-hero .hero-copy h1 { font-size:clamp(2.1rem,8.2vw,3.3rem); }
 .cinema-hero .hero-description { font-size:.875rem; margin:18px 0 22px; }
 .cinema-hero .hero-bottom { position:absolute; bottom:26px; left:8%; right:8%; margin:0; font-size:.625rem; gap:12px; }
 .cinema-hero .hero-bottom>span { letter-spacing:.05em; gap:9px; }
 .cinema-hero .video-caption { position:absolute; right:auto; left:8%; bottom:86px; margin:0; font-size:.625rem; }
 #nature-toggle { padding:6px 10px; font-size:.75rem; }
 #material-closeup .scene-stage { display:grid; grid-template-columns:1fr; padding:0 8% 100px; min-height:850px; }
 #material-closeup .scene-stage picture { grid-column:auto; grid-row:auto; position:absolute; inset:0; width:100%; height:100%; }
 #material-closeup .scene-stage .scene-image { position:absolute; width:100%; height:72%; object-fit:cover; object-position:61% 40%; transform:scale(1.15)!important; transform-origin:60% 30%; }
 #material-closeup .scene-stage .scene-content { position:relative; grid-column:1; grid-row:1; align-self:end; padding:0; margin:0; }
 #material-closeup .scene-shade { display:block; background:linear-gradient(0deg,#211d1a 0%,#211d1af7 21%,#211d1a92 40%,transparent 70%); }
 #material-closeup .scene-content h2 { font-size:clamp(2.1rem,8.3vw,3rem); }
 #material-closeup .scene-bottom { position:absolute; bottom:28px; margin:0; left:8%; right:8%; }
}
@media(prefers-reduced-motion:reduce) { .opening-door,.pinwheel-rotor { animation:none!important; }.door-left{transform:rotateY(-84deg)}.door-right{transform:rotateY(84deg)}#nature-toggle{display:none} }

/* Window vignette: approved v6 render on the sill; fragrance colors stay in the distance. */
.cinema-hero { background:#28271f; }
.nature-stage { background:radial-gradient(ellipse at 77% 35%,#605a44 0%,#37352b 38%,#25271f 75%); }
.nature-landscape { inset:12% 5% 18% 44%; overflow:hidden; }
.nature-landscape img { object-position:61% center; filter:saturate(.72) brightness(.9); }
.nature-atmosphere { inset:12% 5% 18% 44%; background:linear-gradient(180deg,#f5e9c521,transparent 52%,#20251c20); }
.window-frame { position:absolute; inset:12% 5% 18% 44%; border:16px solid #635c49; border-bottom-width:20px; box-shadow:0 0 0 2px #24261e,0 15px 50px #171b1550,inset 0 0 30px #181d164d; z-index:1; pointer-events:none; }
.window-frame::after { content:''; position:absolute; left:50%; top:0; bottom:0; width:9px; background:linear-gradient(90deg,#554e3d,#867b5f,#5b5545); box-shadow:2px 0 8px #272b212a; }
.window-sill { position:absolute; left:41%; right:2%; top:81%; height:7%; z-index:1; background:linear-gradient(178deg,#aaa18c 0%,#8d8472 28%,#6d6656 30%,#585448 77%,#393a30 80%); clip-path:polygon(5% 0,95% 0,100% 30%,100% 76%,0 76%,0 30%); box-shadow:0 20px 35px #10181066; }
.window-product { position:absolute; z-index:2; width:46%; aspect-ratio:1512/1040; left:52%; top:calc(81% - 24.6vw); filter:drop-shadow(0 8px 5px #14191355); }
.window-product img { display:block; width:100%; height:auto; clip-path:polygon(18.35% 18.4%,20% 17.8%,79.8% 17.4%,81.65% 18.6%,81.65% 76.7%,80.6% 78%,19.5% 78%,18.35% 76.2%); }
.landscape-pinwheel { z-index:0; left:77%; top:40%; width:clamp(35px,4vw,63px); filter:drop-shadow(1px 2px 1px #29392330); }
.pinwheel-stem { width:2px; left:calc(50% - 1px); height:clamp(75px,12vh,115px); background:linear-gradient(90deg,#798071,#b2b7a3,#737b69); }
.pinwheel-rotor { filter:brightness(.92) saturate(.94); }
.cinema-hero .hero-shade { background:linear-gradient(90deg,#182219e8 0%,#1e271fc9 32%,#1e271f40 53%,transparent 72%),linear-gradient(0deg,#191f179c,transparent 25%,transparent 80%,#151c1340); }
.cinema-hero .hero-copy { width:53%; padding-left:7%; }
.cinema-hero .hero-copy h1 { font-size:clamp(2.5rem,4vw,4.9rem); }
.cinema-hero .hero-description { margin-bottom:15px; }
.hero-fragrance-note { font:400 .875rem/1.9 var(--serif); color:#d3c8aa; margin:0 0 26px; }
.cinema-hero .video-caption { font-size:.6875rem; bottom:94px; line-height:1.8; }
@media(min-width:1800px) { .window-product { top:calc(81% - 24.6vw); } }
@media(max-width:1000px) and (min-width:721px) {
 .cinema-hero .hero-copy { width:56%; padding-left:6%; }
 .cinema-hero .hero-copy h1 { font-size:clamp(2rem,4vw,2.7rem); }
 .cinema-hero .hero-description { font-size:.875rem; }
 .hero-fragrance-note { font-size:.8125rem; }
}
@media(max-width:720px) {
 .cinema-hero { height:auto; min-height:950px; }
 .nature-stage { bottom:auto; height:550px; }
 .nature-landscape,.nature-atmosphere { inset:18% 8% 18% 8%; }
 .window-frame { inset:18% 8% 18% 8%; border-width:10px; border-bottom-width:13px; }
 .window-frame::after { width:6px; }
 .window-sill { left:4%; right:4%; top:81%; height:7%; }
 .window-product { left:-10%; width:120%; top:calc(81% - 64.37vw); }
 .landscape-pinwheel { left:65%; top:33%; width:36px; }
 .pinwheel-stem { width:1px; height:67px; }
 .cinema-hero .hero-shade { background:linear-gradient(0deg,#172019fa 0%,#1c251cf2 39%,#1c251c30 49%,transparent 69%,#1720154d); }
 .cinema-hero .hero-copy { width:100%; padding:0 8% 172px; }
 .cinema-hero .hero-copy .eyebrow { margin-bottom:13px; }
 .cinema-hero .hero-copy h1 { font-size:clamp(2rem,7.7vw,3rem); }
 .cinema-hero .hero-description { margin:16px 0 10px; font-size:.8125rem; }
 .hero-fragrance-note { font-size:.8125rem; margin-bottom:20px; }
 .cinema-hero .video-caption { bottom:83px; font-size:.625rem; }
}
/* Anchor the original render's clipped base to the sill, independent of scrollbar width. */
@supports (width:1cqw) {
 .nature-stage { container-type:inline-size; }
 .window-product { top:calc(81% - 24.68cqw); }
 @media(max-width:720px) { .window-product { top:calc(81% - 64.38cqw); } }
}