/* =========================================================
   Invitation film: a continuous, video-like opening sequence
   Themes: .th-garden (light, photo, pastel) and .th-night (midnight rose + gold + fireworks)
   ========================================================= */
html.film-lock,html.film-lock body{overflow:hidden;height:100%}
html.has-film .hero{display:none}
.film{position:fixed;inset:0;z-index:95;overflow:hidden;opacity:0;transition:opacity 1.1s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation;cursor:default;
  --serif:'Cormorant Garamond',Georgia,serif;--script:'Pinyon Script',cursive;--sans:'Jost',system-ui,sans-serif;--ar:'Amiri',serif}
.film.show{opacity:1}
.film[hidden]{display:none}
.film *{-webkit-tap-highlight-color:transparent}

/* ----- backgrounds (cross-fading "shots") ----- */
.film .bgs,.film .bgs .b{position:absolute;inset:0}
.film .b{background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease;will-change:opacity,transform}
.film .b.on{opacity:1;animation:kb 18s ease-out forwards}
@keyframes kb{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.22) translate3d(-3%,-2%,0)}}
.film::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none}
.film #fwFilm{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.film .lans{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.film .scs{position:absolute;inset:0;z-index:3}
.film.paused *{animation-play-state:paused!important}

/* ----- scenes ----- */
.sc{position:absolute;inset:0;display:grid;place-items:center;padding:max(64px,calc(env(safe-area-inset-top) + 40px)) 24px max(96px,calc(env(safe-area-inset-bottom) + 76px));
  text-align:center;opacity:0;pointer-events:none;transition:opacity .9s ease}
.sc.on{opacity:1;pointer-events:auto}
.sc .c{max-width:620px;width:100%}
.sc .r{opacity:0}
.sc.on .r{animation:rin 1.5s var(--d,0s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rin{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
.sc.on .r.pop{animation-name:rpop;animation-duration:1.2s;animation-timing-function:cubic-bezier(.2,1.2,.3,1)}
@keyframes rpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.bsm{font-family:var(--ar);font-size:clamp(2.5rem,12vw,4rem);line-height:1.55}
.bsm-tr{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,4.4vw,1.4rem);max-width:28ch;margin:12px auto 0;line-height:1.4}
.eb{font-family:var(--sans);font-weight:500;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;font-size:clamp(.8rem,3.2vw,.95rem)}
.inv{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,5.6vw,1.9rem);max-width:21ch;line-height:1.4;margin:14px auto 0}
.mono{width:min(46vw,190px);margin:0 auto 18px}
.mono .mono-svg{width:100%;height:auto}
.who .n{display:block;font-family:var(--script);font-size:clamp(3.8rem,18vw,6.2rem);line-height:1.02}
.who .s{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,5.4vw,1.85rem);letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;margin-top:-.1em}
.par{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,4.2vw,1.35rem);max-width:26ch;margin:8px auto 0;line-height:1.35}
.wd{margin:18px 0 14px;font-family:var(--script);font-size:clamp(2.3rem,10vw,3.4rem);line-height:1.1}
.wd svg{width:30px;height:30px;display:block;margin:2px auto 0}
.dwk{font-family:var(--sans);font-weight:500;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;font-size:clamp(.95rem,4vw,1.2rem)}
.dnum{font-family:var(--serif);font-weight:600;font-size:clamp(7.5rem,40vw,12.5rem);line-height:.92;margin:4px 0}
.dmon{font-family:var(--sans);font-weight:500;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;font-size:clamp(1rem,4.6vw,1.45rem)}
.dnote{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,5vw,1.6rem);max-width:24ch;margin:16px auto 0;line-height:1.35}
.cdline{display:inline-block;margin-top:18px;padding:10px 22px;border-radius:999px;font-family:var(--sans);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;font-size:.85rem;font-weight:500}
.vname{font-family:var(--ar);font-weight:700;font-size:clamp(2.7rem,13vw,4.4rem);line-height:1.4}
.ven{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,5.4vw,1.8rem);margin-top:2px}
.vcity{font-family:var(--sans);font-weight:500;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;font-size:clamp(.85rem,3.4vw,1rem);margin-top:14px}
.vaddr{font-family:var(--serif);font-size:clamp(1.1rem,4.4vw,1.4rem);margin-top:6px;line-height:1.4}
.duaar{font-family:var(--ar);font-size:clamp(2.1rem,9.4vw,3.2rem);line-height:1.7;max-width:16em;margin:0 auto}
.duaen{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,5vw,1.6rem);max-width:24ch;margin:14px auto 0;line-height:1.4}
.fin .script{font-family:var(--script);font-size:clamp(3.4rem,15vw,5.4rem);line-height:1.1}
.fin .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,5vw,1.55rem);max-width:24ch;margin:12px auto 22px;line-height:1.4}
.fin .open{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;border-radius:999px;border:1.5px solid currentColor;font:500 .85rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;animation:glow 2.6s ease-in-out infinite}
.fin .again{display:block;margin:16px auto 0;background:none;border:0;color:inherit;font:400 .95rem var(--sans);letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 14px;cursor:pointer;opacity:.85}
.fin .hint{margin-top:10px;font:500 .8rem var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
@keyframes glow{50%{box-shadow:0 0 34px 6px var(--gl,rgba(255,214,150,.45));transform:scale(1.03)}}

/* ----- progress + controls ----- */
.fprog{position:absolute;top:max(10px,env(safe-area-inset-top));left:14px;right:14px;display:flex;gap:4px;z-index:6;pointer-events:none}
.fprog b{flex:1;height:3px;border-radius:3px;overflow:hidden;background:var(--seg,rgba(255,255,255,.28))}
.fprog i{display:block;height:100%;background:var(--seg-on,#fff);transform-origin:0 50%;transform:scaleX(0)}
.fctl{position:absolute;left:12px;right:12px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));z-index:7;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.fctl .g{display:flex;gap:8px;pointer-events:auto}
.fbtn{min-width:46px;min-height:46px;padding:0 14px;border-radius:999px;border:1px solid var(--bd,rgba(255,255,255,.55));background:var(--bg,rgba(20,6,16,.45));color:var(--fg,#fff);
  display:inline-flex;align-items:center;justify-content:center;font:500 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto}
.fbtn svg{width:18px;height:18px;fill:currentColor}
.fbtn:focus-visible{outline:3px solid var(--fg,#fff);outline-offset:3px}
.fpaused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;padding:12px 24px;border-radius:999px;font:500 .85rem var(--sans);letter-spacing:.22em;text-transform:uppercase;background:var(--bg,rgba(20,6,16,.55));color:var(--fg,#fff);border:1px solid var(--bd,rgba(255,255,255,.5));pointer-events:none;opacity:0;transition:opacity .25s}
.film.paused .fpaused{opacity:1}

/* ----- lanterns ----- */
.lan{position:absolute;left:var(--x,50%);bottom:-80px;width:calc(30px*var(--s,1));height:calc(42px*var(--s,1));border-radius:40% 40% 30% 30%/30% 30% 14% 14%;opacity:0;
  background:linear-gradient(180deg,var(--l1,#fff2cf),var(--l2,#ffb668));box-shadow:0 0 calc(26px*var(--s,1)) calc(8px*var(--s,1)) var(--lg,rgba(255,190,100,.5));
  animation:lanUp var(--dur,14s) linear var(--del,0s) infinite}
.lan::before{content:"";position:absolute;left:18%;right:18%;top:-6%;height:10%;border-radius:4px 4px 0 0;background:rgba(80,40,20,.55)}
.lan::after{content:"";position:absolute;left:30%;right:30%;bottom:-8%;height:14%;border-radius:0 0 6px 6px;background:rgba(80,40,20,.45)}
@keyframes lanUp{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.95}85%{opacity:.9}100%{transform:translate3d(var(--sw,30px),-118vh,0);opacity:0}}

/* ----- stars, moon, skyline (night) ----- */
.stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.15;animation:tw var(--td,3s) ease-in-out var(--tl,0s) infinite}
@keyframes tw{50%{opacity:.95;transform:scale(1.7)}}
.moon{position:absolute;top:9%;right:11%;z-index:1;width:clamp(54px,14vw,84px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fffaf0,#f6e3b0 55%,#dcbc72);box-shadow:0 0 70px 22px rgba(255,226,160,.22);animation:moonf 12s ease-in-out infinite alternate}
@keyframes moonf{to{transform:translateY(10px)}}
.sky{position:absolute;left:0;right:0;bottom:0;z-index:2;height:24vh;min-height:110px;pointer-events:none}
.sky svg{width:100%;height:100%;display:block}
.sky .win{animation:tw 4s ease-in-out infinite}

/* ----- light leaks (garden) ----- */
.leaks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.leaks b{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;animation:lk 16s ease-in-out infinite alternate}
@keyframes lk{from{transform:translate3d(-6%,0,0) scale(1)}to{transform:translate3d(8%,-6%,0) scale(1.25)}}

/* ============ THEME: GARDEN (light, photographic) ============ */
.th-garden{color:#5a2340;background:#fde9ef;--seg:rgba(110,44,75,.22);--seg-on:#a84f73;--bg:rgba(255,247,250,.72);--fg:#8a3b60;--bd:rgba(168,79,115,.5);--gl:rgba(216,142,170,.55)}
.th-garden::before{background:radial-gradient(ellipse at 50% 46%,rgba(255,255,255,0) 52%,rgba(168,79,115,.22) 100%)}
.th-garden .bgs::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,246,249,.78),rgba(250,214,226,.7))}
.th-garden .b.g1{background:linear-gradient(160deg,#fff6f8,#f7cddb 60%,#f0b4c9)}
.th-garden .gold{background:linear-gradient(100deg,#7a2a50 20%,#c08a2e 48%,#7a2a50 76%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gs 7s linear infinite}
.th-garden .s,.th-garden .dwk,.th-garden .dmon,.th-garden .eb,.th-garden .vcity{color:#7a2a50}
.th-garden .cdline{background:rgba(255,255,255,.66);border:1px solid rgba(168,79,115,.45);color:#7a2a50}
.th-garden .fin .open{background:linear-gradient(180deg,#d88eaa,#a84f73);color:#fff;border-color:#a84f73;box-shadow:0 14px 30px -12px rgba(168,79,115,.8)}
.th-garden .fin .again{color:#7a2a50}
.th-garden .lan{--l1:#fff5e6;--l2:#f5a9c4;--lg:rgba(240,150,185,.5)}

/* ============ THEME: NIGHT (midnight rose, gold, fireworks) ============ */
.th-night{color:#f6e8c8;background:#12040f;--seg:rgba(255,255,255,.25);--seg-on:#f6dfaa;--bg:rgba(20,6,16,.5);--fg:#f6e8c8;--bd:rgba(246,223,170,.5);--gl:rgba(255,214,150,.5)}
.th-night::before{background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.th-night .gold{background:linear-gradient(100deg,#b8893b 8%,#fff0c4 38%,#d4aa55 62%,#b8893b 92%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gs 7s linear infinite}
.th-night .s,.th-night .dwk,.th-night .dmon,.th-night .eb,.th-night .vcity{color:#f1d9a2}
.th-night .par,.th-night .bsm-tr,.th-night .inv,.th-night .dnote,.th-night .ven,.th-night .vaddr,.th-night .duaen,.th-night .fin .sub{color:#f7dfe9}
.th-night .cdline{background:rgba(255,255,255,.08);border:1px solid rgba(246,223,170,.5);color:#f6dfaa}
.th-night .fin .open{background:linear-gradient(180deg,#f6dfaa,#c9a050);color:#2a0b20;border-color:#f6dfaa;box-shadow:0 14px 34px -10px rgba(246,223,170,.55)}
.th-night .mono .mono-svg text{fill:#f6dfaa}
.th-night .mono .m-ring2{stroke:#f6dfaa}
@keyframes gs{from{background-position:140% 0}to{background-position:-140% 0}}

/* ----- calm fallbacks ----- */
html.lowp .film .b.on{animation:none}
html.lowp .stars i:nth-child(n+40){display:none}
@media (max-height:520px) and (orientation:landscape){
  .sc{padding:44px 20px 70px;align-items:center}
  .dnum{font-size:5.4rem}.who .n{font-size:3.2rem}.mono{width:90px}.bsm{font-size:2.2rem}.duaar{font-size:1.8rem}
}


/* ----- "send a blessing" lantern (on the invitation page) ----- */
.wish-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:20px}
.wish-form input{flex:1 1 230px;max-width:380px;min-height:52px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #E7B9C9;border-radius:999px;padding:0 20px}
.wish-form input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px rgba(216,142,170,.35)}
.wish-form .btn{margin:0}
.wl{position:fixed;left:var(--x,40%);bottom:-140px;z-index:93;display:grid;justify-items:center;gap:8px;pointer-events:none;animation:wlUp 10s cubic-bezier(.3,.1,.3,1) forwards}
.wl i{display:block;width:44px;height:60px;border-radius:40% 40% 30% 30%/30% 30% 14% 14%;background:linear-gradient(180deg,#fff2cf,#ffab66);box-shadow:0 0 40px 12px rgba(255,185,100,.6)}
.wl span{max-width:200px;padding:6px 14px;border-radius:14px;background:rgba(255,250,252,.92);color:#6E2C4B;font:italic 1rem/1.3 'Cormorant Garamond',serif;text-align:center;box-shadow:0 8px 20px -10px rgba(110,44,75,.6)}
@keyframes wlUp{0%{transform:translate3d(0,0,0);opacity:0}6%{opacity:1}85%{opacity:1}100%{transform:translate3d(30px,-125vh,0);opacity:0}}
html.rm .wl{display:none}

.th-garden .par,.th-garden .s,.th-garden .inv,.th-garden .bsm-tr,.th-garden .dnote,.th-garden .ven,.th-garden .vaddr,.th-garden .duaen,.th-garden .eb,.th-garden .dwk,.th-garden .dmon,.th-garden .vcity,.th-garden .fin .sub,.th-garden .fin .hint{text-shadow:0 0 10px rgba(255,246,249,.95),0 0 22px rgba(255,246,249,.85)}