/* Website opening film. The rest of the existing shop uses styles.css. */
header{background:#fffef3;position:relative;z-index:10}
.film-hero{position:relative;isolation:isolate;overflow:hidden;min-height:680px;height:calc(100svh - 124px);max-height:960px;background:#243e27;display:flex;align-items:center;color:#fffef3}
.opening-film{position:absolute;inset:0;z-index:-3;width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 50%;pointer-events:none}
.film-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,43,26,.95) 0%,rgba(18,43,26,.85) 25%,rgba(18,43,26,.42) 47%,rgba(18,43,26,.04) 72%),linear-gradient(0deg,rgba(12,28,18,.58),transparent 24%)}
.film-copy{padding:45px 5.6vw 80px;position:relative;width:54%;max-width:800px;z-index:2}
.film-kicker{font-size:12px;line-height:1.4;font-weight:900;letter-spacing:2.4px;margin:0 0 26px;color:#e2eeaa;display:flex;align-items:center;gap:12px}
.film-kicker span{font-size:24px;color:#ffe447}
.film-copy h1{font-family:Fredoka,Arial,sans-serif;font-weight:600;font-size:clamp(64px,5.8vw,98px);letter-spacing:-3.5px;line-height:1.01;color:#fffef3;margin:0}
.film-copy h1 em{font-style:normal;color:#ffe447;position:relative}
.film-intro{font-size:clamp(18px,1.5vw,23px);line-height:1.55;margin:28px 0 32px;font-weight:700;color:#f7f8e6}
.film-button{background:#ffe447;color:#233738;border:0;box-shadow:none;font-size:17px;display:inline-flex;align-items:center;gap:26px;padding:18px 25px}
.film-button:hover{background:#f5d733;transform:translateY(-2px)}
.film-button span{font-size:23px;line-height:1}
.film-bottom{position:absolute;bottom:27px;left:5.6vw;right:3vw;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;font-weight:900;letter-spacing:1.7px;z-index:3}
.film-discover{text-decoration:none;display:flex;align-items:center;gap:20px;color:#fffef3}
.film-discover span{font-size:22px}
#film-toggle{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid #ffffff65;border-radius:99px;background:#10231980;color:white;backdrop-filter:blur(8px);font-size:12px;font-weight:800;letter-spacing:0}
#film-toggle:hover{background:#102319c0}
#film-toggle-icon{font-size:15px;min-width:13px}
.film-hero+.ribbon{margin-top:0;rotate:0;background:#ffe447;color:#233738;border:0;font-size:16px;letter-spacing:1px;padding:18px;gap:60px}
.reveal{opacity:1;transform:none}
@media(min-width:1700px){.film-copy{padding-left:max(5.6vw,calc((100vw - 1550px)/2))}}
@media(max-width:1000px){.film-copy{width:62%}.film-copy h1{font-size:clamp(64px,8.3vw,84px)}.film-kicker{font-size:10px;letter-spacing:1.7px}.film-hero{min-height:640px}.film-shade{background:linear-gradient(90deg,#122b1af5,#122b1ac7 36%,#122b1a22 76%),linear-gradient(0deg,#0c1c1294,transparent 24%)}}
@media(max-width:650px){.film-hero{min-height:780px;height:calc(100svh - 164px);max-height:940px;align-items:flex-start}.film-copy{width:100%;max-width:440px;padding:39px 6vw 60px}.film-copy h1{font-size:clamp(54px,13.5vw,78px);letter-spacing:-2px;line-height:1.04}.film-kicker{margin-bottom:20px;font-size:9px;letter-spacing:1.5px}.film-kicker span{font-size:19px}.film-intro{font-size:17px;margin:22px 0 25px}.film-button{font-size:15px;padding:15px 20px}.opening-film{object-position:78% center}.film-shade{background:linear-gradient(180deg,#102b20ec 0%,#102b20bc 36%,#102b2025 65%,#102b2099 100%)}.film-bottom{left:6vw;right:5vw;bottom:22px}.film-discover{font-size:9px;letter-spacing:1px;gap:10px}#film-toggle{font-size:11px;padding:10px 12px}.film-hero+.ribbon{font-size:12px;gap:30px;padding:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-button:hover{transform:none}}
@media(max-height:700px) and (min-width:651px){.film-hero{min-height:360px;height:calc(100svh - 116px)}.opening-film{left:auto;right:0;width:74%;object-fit:contain;object-position:right center;mask-image:linear-gradient(90deg,transparent,#000 14%)}.film-copy{width:52%;padding:20px 5.6vw 48px}.film-copy h1{font-size:clamp(46px,5vw,62px);letter-spacing:-2px}.film-kicker{font-size:9px;letter-spacing:1.7px;margin-bottom:15px}.film-kicker span{font-size:18px}.film-intro{font-size:16px;line-height:1.5;margin:14px 0 18px}.film-button{font-size:14px;padding:12px 18px}.film-bottom{bottom:15px}.film-discover{font-size:9px}}
@media(max-width:650px){.opening-film{top:auto;bottom:70px;left:-15%;right:auto;width:130%;height:330px;object-fit:contain;object-position:center;mask-image:linear-gradient(0deg,transparent,#000 9%,#000 90%,transparent)}.film-shade{background:linear-gradient(180deg,#102b20f5 0%,#102b20cb 38%,#102b2010 63%,#102b2099 100%)}.film-copy h1{font-size:clamp(50px,12.5vw,68px)}}