/* Edge-to-edge scenes with floating controls, shared by every preview and gift. */
.template-creator.is-cinematic{padding:0;min-height:100dvh;width:100%;overflow-x:clip}
.template-creator.is-cinematic .wizard-stage,.template-creator.is-cinematic .gift-full{max-width:none;width:100%;margin:0;padding:0;min-height:100dvh}
.is-cinematic .wizard-experience{position:relative;width:100%;max-width:none;min-height:100dvh;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent!important;overflow:hidden}
.is-cinematic .wizard-experience .exp-body{position:relative;z-index:2;min-height:100dvh;width:100%;max-width:1100px;margin:auto;padding:125px 45px 115px;animation:cinema-arrive .65s cubic-bezier(.22,.7,.25,1) both}
.is-cinematic .wizard-experience .exp-body h2{font-size:clamp(35px,4.3vw,68px);line-height:1.12;letter-spacing:-1.5px;max-width:900px;text-wrap:balance}
.is-cinematic .wizard-experience .exp-body .exp-name{font-size:clamp(37px,5vw,78px);line-height:1.3}
.is-cinematic .wizard-experience .exp-body>p{font-size:16px;line-height:1.75;max-width:550px}
.is-cinematic .exp-step{font-size:11px;letter-spacing:2.3px;margin-bottom:23px}
.is-cinematic .exp-emoji{font-size:110px;margin-block:25px}
.is-cinematic .exp-top{position:absolute;z-index:45;top:0;left:0;right:0;pointer-events:none}
.is-cinematic .exp-top>span{display:none}
.is-cinematic .exp-top .sound{position:fixed;right:22px;top:20px;width:56px;height:56px;border-radius:50%;border:1px solid #ffffff38;background:#392c3b50;backdrop-filter:blur(12px);color:white;font-size:21px;pointer-events:auto;box-shadow:0 4px 15px #00000012;cursor:pointer}
.is-cinematic .wizard-preview-toolbar{position:fixed;inset:0 0 auto;height:150px;margin:0;z-index:40;padding:20px 96px 70px 22px;display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;background:linear-gradient(#332537a6,#57444850 50%,transparent);pointer-events:none}
.is-cinematic .wizard-preview-toolbar button{pointer-events:auto;min-height:56px;padding:15px 19px;border-radius:999px;background:#392c3b50;backdrop-filter:blur(12px);border:1px solid #ffffff38;color:white;font-size:15px;font-weight:600;box-shadow:0 4px 15px #00000008}
.is-cinematic .wizard-preview-toolbar>span{position:absolute;top:22px;left:50%;transform:translateX(-50%);padding:11px 20px;border-radius:999px;background:linear-gradient(135deg,#f8d98a,#efbf58);color:#785122;font:700 13px/1.5 Outfit,sans-serif;letter-spacing:1.4px;white-space:nowrap;box-shadow:0 4px 15px #6548291a}
.is-cinematic .wizard-preview-toolbar [data-action=replay]{font-size:12px;background:#ffffff12;min-height:44px;margin-top:6px}
.is-cinematic .wizard-preview-bottom{position:fixed;right:25px;bottom:23px;left:auto;z-index:35;margin:0;padding:0;background:none;width:auto;max-width:calc(100% - 35px);pointer-events:none}
.is-cinematic .wizard-preview-bottom .wizard-primary{pointer-events:auto;width:auto;min-height:48px;padding:13px 25px;font-size:15px;box-shadow:0 8px 30px #85503025}
.is-cinematic .wizard-preview-bottom>p{display:none}
.is-cinematic .progress-dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3}
.is-cinematic .progress-dots i{width:6px;height:6px;background:#71536440}.is-cinematic .progress-dots i.active{background:var(--accent);width:24px}
.is-cinematic .exp-body>.btn,.is-cinematic .interaction-buttons .btn{min-height:52px;padding:14px 28px;font-size:16px;box-shadow:0 8px 25px #75453815;transition:transform .2s,box-shadow .2s}
.is-cinematic .exp-body>.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px #75453820}
.is-cinematic .moment-wrapped-gift{width:310px;height:310px;margin:45px 0 22px;transform:rotate(-4deg);box-shadow:0 30px 65px #794f3630;animation:cinema-gift-float 5s ease-in-out infinite}
.is-cinematic .moment-ribbon-band:after{width:310px;left:-137px;top:127px;height:38px}.is-cinematic .moment-bow{font-size:94px;top:81px;left:calc(50% - 53px)}.is-cinematic .moment-gift-tag{bottom:32px;left:25px;right:25px;font-size:25px}
.is-cinematic .moment-wrapped-gift.unwrapped{animation:none;transform:scale(1.18) rotate(7deg);opacity:0;filter:blur(5px)}
.is-cinematic .moment-birthday-reveal{position:relative;z-index:2;margin-right:22vw;text-align:left;padding:15px 0;max-width:650px}
.is-cinematic .moment-birthday-reveal>span{font-size:clamp(19px,2vw,31px);color:#a86570}.is-cinematic .moment-birthday-reveal h2{font-size:clamp(65px,8vw,128px)!important;color:#935764;letter-spacing:-5px;animation:cinema-title .9s ease both}
.is-cinematic .moment-birthday-reveal .exp-name{font-size:clamp(32px,3.6vw,57px)!important}.is-cinematic .moment-birthday-reveal>div{font-size:30px}
.is-cinematic #candle{width:320px;height:260px;margin:40px 0}.is-cinematic #candle .mini-cake{transform:scale(3.7);filter:drop-shadow(0 15px 15px #7d493415)}
.is-cinematic .balloons{max-width:900px;gap:25px;margin:45px 0}.is-cinematic .balloon{font-size:85px;filter:drop-shadow(0 12px 12px #80565310)}.is-cinematic .balloon.popped{font-family:'Shantell Sans',cursive;font-size:16px;line-height:1.7;max-width:220px;min-height:90px;padding:20px;background:#fffdf6e6;border-radius:15px;box-shadow:0 12px 30px #80565310;animation:cinema-note-open .4s ease both}
.is-cinematic .gallery-frame{max-width:520px;margin:30px 0 20px;box-shadow:0 20px 55px #61403725;background:#fffdf6}.is-cinematic .gallery-frame img{height:clamp(180px,36dvh,380px)}.is-cinematic .gallery-frame small{font-size:15px;line-height:1.6}.is-cinematic .gallery-nav{gap:30px}.is-cinematic .gallery-nav button{width:42px;height:42px;font-size:19px}.is-cinematic .gallery-placeholder{height:280px}
.is-cinematic .scratch{height:calc(100% - 55px)}
.is-cinematic .envelope{width:330px;height:210px;margin:45px 0;box-shadow:0 22px 60px #80565320;animation:cinema-gift-float 5s ease-in-out infinite}.is-cinematic .moment-wax-seal{width:65px;height:65px;left:calc(50% - 32px);top:85px;font-size:37px}.is-cinematic .letter{max-width:650px;max-height:53dvh;padding:35px 40px;box-shadow:0 20px 55px #80565315;animation:cinema-note-open .6s ease both}.is-cinematic .letter p{font-family:'Shantell Sans',cursive;font-size:18px;line-height:1.95}.is-cinematic .letter strong{font-size:14px}
.is-cinematic .notes{max-width:720px;gap:20px;margin-top:35px}.is-cinematic .note{font-size:18px;min-height:125px;padding:25px;box-shadow:0 15px 30px #80565312;transition:transform .25s}.is-cinematic .promises{max-width:650px;gap:13px}.is-cinematic .promises label{font-size:16px;line-height:1.7;padding:15px 20px;background:#fffcf7d9;border-radius:15px}.is-cinematic .promises input{width:17px;height:17px}
.is-cinematic .puzzle{max-width:420px;gap:6px;margin-block:35px}.is-cinematic .puzzle button{border-radius:10px;box-shadow:0 5px 10px #0001;transition:transform .15s,box-shadow .15s}.is-cinematic .puzzle button.selected{transform:scale(.95);box-shadow:0 0 0 3px var(--accent)}
.is-cinematic .timeline{max-width:630px;padding-left:35px;margin-block:35px}.is-cinematic .timeline div{padding:15px 0;animation:cinema-note-open .6s ease both}.is-cinematic .timeline div:nth-child(2n){animation-delay:.1s}.is-cinematic .timeline strong{font-size:17px}.is-cinematic .timeline small{font-size:15px;line-height:1.7}.is-cinematic .counter{font-size:clamp(65px,10vw,130px);font-family:'Bricolage Grotesque',sans-serif;font-weight:700}
.is-cinematic .moment-door{width:245px;height:330px;border-radius:130px 130px 8px 8px;padding-top:50px;box-shadow:0 25px 75px #0004}.is-cinematic .moment-door-plaque{font-size:16px;padding:15px 12px}.is-cinematic .moment-door-plaque small{font-size:11px}.is-cinematic .moment-door-ring{width:42px;height:52px;border-width:7px;margin-top:30px}.is-cinematic .moment-door:after{height:115px;bottom:23px;left:25px;right:25px}
.is-cinematic .wizard-experience[data-stage=door]{background:radial-gradient(ellipse at top,#365846,#17382e 50%,#102a25)!important}.is-cinematic [data-stage=door] .cinema-particle{color:#d5c789}.is-cinematic [data-stage=door] .cinema-bokeh{background:#edd897;opacity:.08}
.gift-view.is-cinematic .gift-brand{position:absolute;bottom:20px;left:20px;z-index:5;margin:0;font-size:11px}.gift-view.is-cinematic .exp-top{position:fixed;height:145px;background:linear-gradient(#33253780,transparent)}.gift-view.is-cinematic .exp-top>span{display:block;position:fixed;left:50%;top:24px;transform:translateX(-50%);padding:11px 20px;border-radius:30px;background:#f4ce7d;color:#785122;font-size:11px;letter-spacing:1.5px}
.cinema-scenery{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.cinema-particles{position:absolute;inset:0}.cinema-particle{position:absolute;left:var(--x);top:var(--y);font-size:var(--size);color:#de8294;opacity:.12;animation:cinema-drift var(--duration) ease-in-out var(--delay) infinite;will-change:transform}.cinema-bokeh{position:absolute;width:clamp(130px,18vw,350px);height:clamp(130px,18vw,350px);border-radius:50%;background:#fffdd8;filter:blur(38px);opacity:.65;transform:translate(-50%,-50%);animation:cinema-glow 9s ease-in-out var(--delay) infinite alternate}.cinema-garden{position:absolute;right:11vw;bottom:-50px;height:min(76dvh,700px);width:auto;color:#845866;opacity:.75;z-index:1;overflow:visible}.cinema-stems path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:cinema-grow 2.3s ease forwards}.cinema-blossom>g{opacity:0;animation:cinema-bloom .9s ease var(--delay) forwards}.cinema-blossom ellipse{fill:#e7a5ae;stroke:#f7dbcf;stroke-width:1}.cinema-blossom circle{fill:#f6d187}
[data-template=friendship] .cinema-particle{color:#669c7a}[data-template=apology] .cinema-particle{color:#7e8fb7}[data-template=puzzle] .cinema-particle,[data-template=upi] .cinema-particle{color:#c5a35f}[data-template=girlfriend] .cinema-bokeh{background:#ffe8e0}[data-template=anniversary] .cinema-particle{color:#a46468}[data-template=mother] .cinema-particle{color:#cf8aaa}
@keyframes cinema-arrive{from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes cinema-drift{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(calc(var(--drift)*25px),-65px) rotate(12deg)}}@keyframes cinema-glow{from{opacity:.3;transform:translate(-50%,-50%) scale(.8)}to{opacity:.7;transform:translate(-40%,-60%) scale(1.25)}}@keyframes cinema-grow{to{stroke-dashoffset:0}}@keyframes cinema-bloom{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes cinema-title{from{opacity:0;transform:translateX(-30px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes cinema-note-open{from{opacity:0;transform:scale(.85) rotate(-7deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes cinema-gift-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
@media(max-width:760px){.is-cinematic .wizard-experience .exp-body{padding:115px 24px 100px}.is-cinematic .wizard-experience .exp-body h2{font-size:38px;letter-spacing:-1px}.is-cinematic .wizard-experience .exp-body .exp-name{font-size:46px}.is-cinematic .moment-birthday-reveal{margin-right:0;text-align:center}.cinema-garden{right:-70px;height:62dvh;opacity:.28}.is-cinematic .moment-birthday-reveal h2{font-size:70px!important;letter-spacing:-2px}.is-cinematic .moment-birthday-reveal>span{font-size:20px}.is-cinematic .wizard-preview-toolbar{padding:16px 78px 70px 16px;height:130px;gap:8px}.is-cinematic .wizard-preview-toolbar button{min-height:44px;padding:12px 15px;font-size:13px}.is-cinematic .wizard-preview-toolbar>span{font-size:10px;padding:10px 13px;top:18px}.is-cinematic .wizard-preview-toolbar [data-action=replay]{display:none}.is-cinematic .exp-top .sound{width:45px;height:45px;right:16px;top:16px;font-size:18px}.is-cinematic .wizard-preview-bottom{right:16px;bottom:16px}.is-cinematic .wizard-preview-bottom .wizard-primary{font-size:13px;min-height:45px;padding:12px 18px}.is-cinematic .progress-dots{left:22px;transform:none;bottom:36px}.is-cinematic .moment-wrapped-gift{width:255px;height:255px}.is-cinematic .moment-ribbon-band:after{width:255px;left:-109px;top:106px}.is-cinematic .moment-bow{font-size:79px;top:65px;left:calc(50% - 45px)}.is-cinematic .moment-gift-tag{font-size:20px}.is-cinematic .envelope{width:270px;height:175px}.is-cinematic .moment-wax-seal{top:70px;width:56px;height:56px;left:calc(50% - 28px);font-size:32px}.is-cinematic .notes{gap:12px}.is-cinematic .note{font-size:14px;padding:17px 13px;min-height:110px}.is-cinematic .balloons{gap:16px;margin-block:30px}.is-cinematic .balloon{font-size:64px}.is-cinematic .balloon.popped{font-size:14px;max-width:155px;padding:15px}.is-cinematic .letter{padding:24px;max-height:49dvh}.is-cinematic .letter p{font-size:15px;line-height:1.9}.is-cinematic .promises label{font-size:14px}.is-cinematic .exp-emoji{font-size:85px}.is-cinematic .moment-door{width:205px;height:280px}.is-cinematic .moment-door-plaque{font-size:14px}.is-cinematic .moment-door-ring{width:35px;height:44px}.is-cinematic .moment-door:after{height:88px}.gift-view.is-cinematic .gift-brand{font-size:9px;bottom:12px;left:16px}.gift-view.is-cinematic .exp-top>span{font-size:9px;padding-inline:13px}}
@media(max-width:350px){.is-cinematic .wizard-experience .exp-body{padding:110px 18px 95px}.is-cinematic .wizard-experience .exp-body h2{font-size:32px}.is-cinematic .wizard-experience .exp-body .exp-name{font-size:39px}.is-cinematic .wizard-experience .exp-body>p{font-size:14px}.is-cinematic .wizard-preview-toolbar{padding-left:12px}.is-cinematic .wizard-preview-toolbar>span{font-size:9px;padding:9px 10px;top:20px}.is-cinematic .wizard-preview-toolbar button{font-size:11px;padding-inline:12px}.is-cinematic .exp-top .sound{right:12px}.is-cinematic .moment-birthday-reveal h2{font-size:58px!important}.is-cinematic #candle{width:260px;height:220px}.is-cinematic #candle .mini-cake{transform:scale(3.1)}}
@media(prefers-reduced-motion:reduce){.cinema-scenery *,.is-cinematic *{animation:none!important;transition:none!important}.cinema-stems path{stroke-dashoffset:0}.cinema-blossom>g{opacity:1}.cinema-particle{will-change:auto}}
