/* The invite: the "Save ME" reel plays over the site, then lifts away to the cover. */
html.intro-on,html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;background:#f4f4f4;overflow:hidden;transition:opacity .8s ease,transform .8s ease}
.intro.out{opacity:0;transform:scale(1.03);pointer-events:none}
.intro[hidden]{display:none}
.i-reel{position:absolute;z-index:1}
.i-reel video{display:block;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.5%);mask-image:linear-gradient(180deg,transparent 0,#000 2.5%)}
.i-reel.right video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.5%),linear-gradient(90deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 2.5%),linear-gradient(90deg,transparent 0,#000 14%);mask-composite:intersect}
/* a snow bank along the bottom (it also hides where the reel's frame ended) */
.i-bank,.i-bank-r{position:absolute;left:0;bottom:-1px;width:100%;height:16.7%;overflow:visible}
.i-bank-r,.i-reel.right .i-bank{display:none}
.i-reel.right .i-bank-r{display:block}
.i-field{position:absolute;left:0;right:0;bottom:0;z-index:1;background:#fbfaf9}
.i-snow{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.i-snow i{position:absolute;top:-20px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);filter:blur(var(--b));box-shadow:0 0 5px rgba(190,190,200,.6);animation:i-snow var(--dur) linear var(--del) infinite}
.i-snow i.spark{border-radius:0;background:none;box-shadow:none;filter:none;width:calc(var(--s) * 1.6);height:calc(var(--s) * 1.6)}
.i-snow i.spark::before,.i-snow i.spark::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:22%;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.i-snow i.spark::after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes i-snow{to{transform:translate(var(--dx),calc(100vh + 40px)) rotate(180deg)}}

/* The words, typed in like the reel */
.i-head{position:absolute;left:50%;top:0;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;white-space:nowrap;--fs:min(13vw,7.4vh,76px)}
.i-ch{display:inline-block;opacity:0;transform-origin:50% 75%}
.i-l1,.i-l2{font:400 var(--fs)/1.08 'Anton',var(--sans);color:#1e2c5c;letter-spacing:.005em}
.i-me{position:relative;display:inline-block}
.i-strike{position:absolute;left:-2%;top:-14%;width:112%;height:118%;overflow:visible}
.i-strike path{fill:none;stroke:#d8345f;stroke-width:3.4px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 2;stroke-dashoffset:1;visibility:hidden}
html[lang=hi] .i-l2{font:800 calc(var(--fs) * .78)/1.3 'Noto Sans Devanagari',var(--sans);margin-top:.1em}
.i-l3{margin-top:.32em;font:400 calc(var(--fs) * .56)/1.2 'Great Vibes',var(--serif);color:#2b2f45;min-height:1.2em}
.i-l3 .sp{width:.3em}
.i-l3 sup{font-size:.6em;vertical-align:.7em;line-height:0}
html[lang=hi] .i-l3{font:500 calc(var(--fs) * .4)/1.4 'Noto Serif Devanagari',var(--serif)}
.i-l4{margin-top:16px;font:500 15px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#4a4f6a;opacity:0}
html[lang=hi] .i-l4{letter-spacing:0;font-size:17px}
.intro.wide .i-head{transform:none;--fs:min(5.4vw,9vh,104px)}

/* Top bar, Skip and the fallbacks */
.i-bar{position:absolute;left:0;right:0;top:calc(14px + env(safe-area-inset-top,0px));z-index:4;display:flex;align-items:center;gap:12px;padding:0 16px;max-width:1180px;margin:0 auto}
.i-for{font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--red);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:auto}
html[lang=hi] .i-for{letter-spacing:0}
.i-bar .lang{min-height:44px;font-size:15px;background:rgba(255,253,248,.85)}
.i-bar .lang span{display:flex;align-items:center;padding:0 15px}
.i-skip{position:absolute;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;align-items:center;gap:6px;min-height:52px;padding:0 24px;border-radius:28px;background:rgba(255,253,248,.9);border:1px solid var(--line-2);color:var(--ink);font:500 17px var(--sans);box-shadow:0 6px 18px rgba(33,31,58,.08);cursor:pointer}
.i-play,.i-continue{position:absolute;left:50%;z-index:5;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:60px;padding:0 32px;border:0;border-radius:40px;background:var(--ink);color:var(--paper);font:600 18px var(--sans);box-shadow:0 12px 30px rgba(33,31,58,.25);cursor:pointer}
.i-play{top:50%;transform:translate(-50%,-50%)}
.i-continue{bottom:calc(22px + env(safe-area-inset-bottom,0px));display:none}
.intro.still .i-continue{display:inline-flex}
.intro.still .i-skip{display:none}
.i-play[hidden]{display:none}
@media (min-width:900px){.i-skip{right:32px;bottom:28px}}

/* The WhatsApp preview still (?og) */
.intro.og .i-bar,.intro.og .i-skip,.intro.og .i-l2,.intro.og .i-l3{display:none}
.intro.og .i-head{--fs:118px}
.intro.og .i-l4{opacity:1!important;transform:none!important;font-size:24px;margin-top:22px}
.intro.og .i-snow i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.i-snow i{animation:none}.intro{transition:none}}