@font-face{font-family:'Wedding Script';src:url('./fonts/great-vibes-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.cinematic-hero{height:100svh;min-height:480px;isolation:isolate;background:#3f3026}
.cinematic-hero .hero-paper{inset:0;max-width:none;width:100%;height:100%;background:url('./media/staircase-poster.webp') center 48%/cover no-repeat;transform:none!important}
.cinematic-hero .hero-paper::after{display:none}
#hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%;opacity:0;transition:opacity .8s ease}
.cinematic-hero.has-video #hero-video{opacity:1}
.cinematic-hero.is-prepared #hero-video{opacity:1;transition:none}
.opening.handoff{transition:opacity 1.9s cubic-bezier(.4,0,.2,1)}
.opening .cinema{transform-origin:center;transition:transform 1.9s cubic-bezier(.4,0,.2,1),filter 1.9s ease}
.opening.handoff .cinema{transform:scale(1.025);filter:blur(3px)}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#20150f1a 0%,#21180f4a 32%,#20171170 68%,#17100c88 100%)}
.cinematic-hero::after{z-index:2}
.hero.cinematic-hero .hero-content{z-index:1;width:100%;padding:0 1.4rem;position:absolute;top:48%;transform:translateY(-50%);text-align:center;overflow-wrap:normal;color:#fff8e8;transition:none}
.cinematic-hero .script-names{--name-size:clamp(4.6rem,20vw,10rem);display:grid;grid-template-columns:repeat(10,minmax(0,1fr));width:min(100%,calc(var(--name-size)*4.35));margin:0 auto;font-family:'Wedding Script',cursive;font-size:var(--name-size);font-weight:400;line-height:1.08;letter-spacing:0;color:#fff9ed;text-shadow:0 2px 3px #21170d80,0 8px 24px #21170d4d,0 0 12px #fff0c85c,0 0 28px #f2dba72e;text-align:left}
.script-names .groom-name{grid-column:1/9;grid-row:1;justify-self:start;white-space:nowrap}
.cinematic-hero .script-names .name-join{grid-column:5/7;grid-row:2;justify-self:center;font-family:'Wedding Script',cursive;font-size:.34em;font-weight:400;font-style:normal;line-height:1;margin:-.06em 0 .04em;color:#f3dfb8;text-shadow:0 2px 3px #21170d73,0 0 10px #ffe9b65c}
.script-names .bride-name{grid-column:6/11;grid-row:3;justify-self:start;white-space:nowrap;font-size:.97em}
.cinematic-hero .fine-rule{width:32px;margin:1.65rem auto 1.1rem;background:#e5cfaa80}
.cinematic-hero .wedding-date{font-family:var(--serif);font-size:clamp(.95rem,3.8vw,1.2rem);letter-spacing:.28em;color:#f6e5c7;text-shadow:0 1px 8px #21170d55}
.cinematic-hero .scroll-cue{z-index:3;bottom:max(2rem,env(safe-area-inset-bottom));color:#fff7e7;text-shadow:0 1px 8px #21170d88;font-size:.95rem}
.cinematic-hero .hero-content h1>*,.cinematic-hero .fine-rule,.cinematic-hero .wedding-date,.cinematic-hero .scroll-cue{opacity:0;animation:none}
.cinematic-hero.hero-ready .groom-name{animation:script-reveal 1.8s .15s both}
.cinematic-hero.hero-ready .name-join{animation:script-reveal 1.7s .6s both}
.cinematic-hero.hero-ready .bride-name{animation:script-reveal 1.9s .95s both}
.cinematic-hero.hero-ready .fine-rule{animation:script-reveal 1.6s 1.4s both}
.cinematic-hero.hero-ready .wedding-date{animation:script-reveal 1.6s 1.6s both}
.cinematic-hero.hero-ready .scroll-cue{animation:script-reveal 1.6s 2s both}
@keyframes script-reveal{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero-playback{position:absolute;z-index:4;top:max(1rem,env(safe-area-inset-top));right:1.2rem;padding:.35rem .65rem;background:#20170f24;color:#fff7e7;border:1px solid #fff5dc45;border-radius:2rem;font-family:var(--arabic);font-size:.8rem;backdrop-filter:blur(6px)}
@media(min-width:700px){.cinematic-hero .hero-content{top:49%}.cinematic-hero .script-names{--name-size:clamp(7rem,12vw,10rem)}#hero-video,.cinematic-hero .hero-paper{object-position:center 44%;background-position:center 44%}}
@media(max-height:600px){.cinematic-hero{min-height:360px}.cinematic-hero .script-names{--name-size:clamp(3.7rem,13svh,5.4rem)}.cinematic-hero .fine-rule{margin:.8rem auto .6rem}.cinematic-hero .hero-content{top:46%}.cinematic-hero .scroll-cue{bottom:1rem}}
@media(prefers-reduced-motion:reduce){.hero.cinematic-hero .hero-content{transform:translateY(-50%)!important}.cinematic-hero .hero-content h1>*,.cinematic-hero .fine-rule,.cinematic-hero .wedding-date,.cinematic-hero .scroll-cue{opacity:1;transform:none;filter:none;animation:none!important}#hero-video{transition:none}}