/* Isolated storefront intro experiment. Existing index intro is unchanged. */
#intro.cinematic{background:#15110e}
.cinema-photo{object-fit:contain;object-position:center;filter:none!important}
.playing .cinema-photo{animation:facadeCamera 10s cubic-bezier(.2,.5,.3,1) both}
.cinema-shade{background:linear-gradient(0deg,#100d0ad9,transparent 32%);pointer-events:none}
.cinema-copy{top:auto!important;bottom:11%;left:6%;max-width:38%}
#intro.cinematic .cinema-copy h2{font-size:clamp(28px,3.2vw,52px);text-shadow:0 2px 25px #0008}
.cinema-copy .eyebrow{margin-bottom:12px}
.playing .cinema-copy{animation:facadeWords 10s both}
.cinema-signature{top:auto!important;bottom:12%;left:6%;max-width:35%;flex-direction:row;gap:18px;align-items:center}
.cinema-signature img{width:90px;height:94px;padding:4px}.cinema-signature span{margin:0;font-size:14px;letter-spacing:2px}.cinema-signature small{display:none}
.playing .cinema-signature{animation:facadeLogo 10s both}
.playing .cinema-light{animation:cinemaSweep 10s both}.playing .cinema-progress i{animation:cinemaProgress 10s linear both}
@keyframes facadeCamera{0%{opacity:0;transform:scale(.96)}12%{opacity:1}85%,100%{opacity:1;transform:scale(1.025)}}
@keyframes facadeWords{0%,20%{opacity:0;transform:translateY(12px)}30%,57%{opacity:1;transform:translateY(0)}67%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes facadeLogo{0%,68%{opacity:0;transform:translateY(10px)}80%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.cinema-copy{top:auto!important;bottom:13%;left:8%;width:84%;max-width:84%}.cinema-signature{bottom:14%;left:8%;width:84%;max-width:84%}.cinema-shade{background:linear-gradient(0deg,#100d0ae6,transparent 35%)}.cinema-signature img{width:72px;height:76px}#intro.cinematic .cinema-copy h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.playing .cinema-photo{animation:none}}
/* Keep all copy in a separate lower band, clear of lettering in the photo. */
#intro.cinematic .cinema-photo{height:calc(100% - 150px);top:0;bottom:auto}
#intro.cinematic .cinema-shade{background:linear-gradient(0deg,#15110e 0px,#15110e 145px,transparent 175px)}
#intro.cinematic .cinema-copy{left:8%;bottom:48px;top:auto!important;width:84%;max-width:84%;text-align:left}
#intro.cinematic .cinema-copy .eyebrow{font-size:9px;margin:0 0 5px;display:block}
#intro.cinematic .cinema-copy h2{font-size:28px;line-height:1.1;letter-spacing:0;display:inline}
#intro.cinematic .cinema-copy h2 br{display:none}
#intro.cinematic .cinema-copy p{display:inline;margin:0 0 0 20px;font-size:12px}
#intro.cinematic .cinema-signature{left:8%;bottom:43px;width:auto;max-width:84%;justify-content:flex-start}
#intro.cinematic .cinema-signature img{width:64px;height:66px}
#intro.cinematic .cinema-bottom{bottom:22px}
@media(max-width:700px){#intro.cinematic .cinema-copy h2{font-size:24px;text-align:left}#intro.cinematic .cinema-copy p{display:block;margin:8px 0 0}#intro.cinematic .cinema-copy{bottom:44px}#intro.cinematic .cinema-copy .eyebrow{font-size:8px}}
/* Warm timber and burgundy tones sampled visually from the storefront. */
#intro.cinematic{background:radial-gradient(ellipse at 18% 100%,#845d3b66,transparent 60%),linear-gradient(115deg,#493426,#593b2c 48%,#35271f)}
#intro.cinematic .cinema-shade{background:linear-gradient(0deg,#493426 0px,#493426ed 120px,#49342655 155px,transparent 185px)}
#intro.cinematic:before{border-color:#e4c89d35}
#intro.cinematic .cinema-copy h2{color:#fff5e7;text-shadow:0 2px 18px #35201755}
#intro.cinematic .cinema-copy h2 em{color:#ead0a7}
#intro.cinematic .cinema-copy p{color:#f0e2d2}
#intro.cinematic .cinema-photo{height:calc(100% - 105px);object-fit:cover;object-position:center center}
#intro.cinematic .cinema-shade{background:linear-gradient(0deg,#493426 0px,#493426ed 75px,#49342655 110px,transparent 140px)}
#intro.cinematic .cinema-copy{bottom:35px}
#intro.cinematic .cinema-signature{bottom:31px}
#intro.cinematic .cinema-signature img{width:52px;height:54px}
#intro.cinematic .cinema-bottom{bottom:16px}
@media(max-width:700px){#intro.cinematic .cinema-photo{height:calc(100% - 120px)}#intro.cinematic .cinema-copy{bottom:35px}}
#intro.cinematic .cinema-photo{object-fit:contain;object-position:center center}
@keyframes facadeCamera{0%{opacity:0;transform:scale(.97)}12%{opacity:1}85%,100%{opacity:1;transform:scale(1)}}
/* Soft photographic backdrop fills the frame without cropping the foreground. */
#intro.cinematic::after{content:"";position:absolute;inset:-40px;z-index:-1;background:linear-gradient(#24170f66,#24170f88),url("cephe-intro-arka.webp") center/cover no-repeat;filter:blur(26px);transform:scale(1.08);pointer-events:none}
#intro.cinematic .cinema-shade{background:linear-gradient(0deg,#38271ee8 0px,#38271ed9 65px,#38271e55 110px,transparent 165px)}