/* fx.css: layout + motion for the full-invite sections every template shares.
   It owns NO look of its own: every colour, font and edge is a --fx-* token, and each
   template sets those tokens (and may override any rule) in its own style.css so the
   sections are made of the template's own material. Defaults = Ivory Lake (pearl on satin). */
:root{
  --fx-ink:#4e3b2a; --fx-muted:#7d6650; --fx-accent:#7c5a2c; --fx-accent-2:#d9bb83; --fx-soft:#c98f80; --fx-err:#a5523f;
  --fx-head:"Cormorant",Georgia,serif; --fx-caps-font:"Bodoni Moda",Georgia,serif;
  --fx-card:linear-gradient(180deg,rgba(252,248,240,.92),rgba(243,234,219,.92));
  --fx-line:rgba(176,138,79,.45);
  /* the beaded ring drawn around cards, photos, the film and the scratch card */
  --fx-edge:radial-gradient(circle at 45% 40%,#fffef9 0 1.3px,#efe2c8 2.2px,#bb9b68 3.1px,transparent 3.6px) 0 0/7.5px 7.5px;
  --fx-edge-w:4.5px;
  --fx-radius:18px; --fx-shadow:0 6px 16px rgba(90,60,25,.12); --fx-shadow-lg:0 12px 28px rgba(90,60,25,.25);
  --fx-btn:linear-gradient(180deg,#fbf6ec,#efe3cd); --fx-btn-ink:#7c5a2c;
  --fx-on:linear-gradient(180deg,#c9a660,#9c7638); --fx-on-ink:#fffaf0; --fx-on-line:#e8d3a2;
  --fx-field:rgba(252,248,240,.78); --fx-card-solid:#f6efe3; --fx-langs-bg:rgba(250,244,233,.9); --fx-langs-ink:#7c5a2c;
  --fx-foil-1:#8a6630; --fx-foil-2:#c9a35a; --fx-foil-3:#f0dca6; --fx-foil-dots:#fffef8; --fx-foil-ink:rgba(92,62,24,.85); --fx-scr-shape:oval;
  --fx-lb-bg:rgba(40,28,16,.92); --fx-lb-ink:#f3e6cf;
}
[hidden]{display:none!important}

/* ---------- shared pieces ---------- */
.fx-sec{opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.fx-sec.fx-in{opacity:1;transform:none}
.fx-caps{margin:0;font:500 12px/1.6 var(--fx-caps-font);letter-spacing:3px;text-transform:uppercase;color:var(--fx-accent)}
.fx-it{font-style:italic}
.fx-ring{position:relative}
.fx-ring:before,.fx-card:before,.fx-shot:before,.fx-film:before,.fx-scr:before,.fx-look:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--fx-edge-w);pointer-events:none;z-index:3;
  background:var(--fx-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-lnk{display:inline-block;background:none;border:0;border-bottom:1px solid var(--fx-accent-2);padding:0 0 3px;margin-top:5px;cursor:pointer;text-decoration:none;
  font:500 10.5px/1.2 var(--fx-caps-font);letter-spacing:2px;text-transform:uppercase;color:var(--fx-accent)}
.fx-btn{position:relative;display:inline-block;margin-top:10px;padding:15px 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--fx-btn);box-shadow:inset 0 0 0 1.5px var(--fx-line),0 5px 14px rgba(0,0,0,.14);
  font:500 12px/1 var(--fx-caps-font);letter-spacing:2.5px;text-transform:uppercase;color:var(--fx-btn-ink)}
.fx-field,.fx-sec textarea,#fxRForm textarea{width:100%;border:1px solid var(--fx-line);background:var(--fx-field);border-radius:14px;padding:13px 14px;font:500 18px/1.35 var(--fx-head);color:var(--fx-ink);resize:vertical;box-sizing:border-box}
select.fx-field{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--fx-accent) 50%),linear-gradient(135deg,var(--fx-accent) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
input[type=date].fx-field{min-height:50px}
.fx-sec button:focus-visible,.fx-sec a:focus-visible,.fx-field:focus-visible{outline:2px solid var(--fx-accent);outline-offset:3px}

/* ---------- cards (travel, stay, good to know, gifts, contacts) ---------- */
.fx-cards{display:flex;flex-direction:column;gap:14px;width:100%;margin-top:4px}
.fx-card{position:relative;text-align:left;padding:18px 20px;border-radius:var(--fx-radius);background:var(--fx-card);box-shadow:var(--fx-shadow);box-sizing:border-box;
  opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fx-in .fx-card{opacity:1;transform:none}
.fx-in .fx-card:nth-child(2){transition-delay:.12s}.fx-in .fx-card:nth-child(3){transition-delay:.24s}.fx-in .fx-card:nth-child(4){transition-delay:.36s}
.fx-card.fx-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.fx-card p{margin:0}
.fx-ch{font:600 23px/1.2 var(--fx-head);color:var(--fx-accent);margin-bottom:4px!important}
.fx-cb{font:500 17px/1.45 var(--fx-head);color:var(--fx-ink)}
.fx-cb strong{font:500 13px/1 var(--fx-caps-font);letter-spacing:2px;color:var(--fx-accent)}
.fx-acts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}

/* ---------- invocation ---------- */
.fx-invoc{display:flex;flex-direction:column;align-items:center;gap:6px;margin:26px 0 4px;text-align:center}
.fx-invoc img{width:min(30vw,120px);height:auto;filter:drop-shadow(0 7px 7px rgba(0,0,0,.2))}
.fx-invL{margin:4px 0 0;font:600 22px/1.3 Georgia,"Noto Serif Devanagari",var(--fx-head);color:var(--fx-accent);letter-spacing:.5px}
.fx-invV{margin:0;white-space:pre-line;font:500 15px/1.7 Georgia,"Noto Serif Devanagari",var(--fx-head);color:var(--fx-muted)}

/* ---------- scratch card ---------- */
.fx-scr{position:relative;width:min(78vw,300px);aspect-ratio:4/5;margin:8px auto 4px;border-radius:50%/44%;padding:12px;box-sizing:border-box;
  background:var(--fx-btn);box-shadow:var(--fx-shadow-lg);touch-action:none}
.fx-scr:before{padding:6px}
.fx-scrUnder{position:absolute;inset:12px;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:var(--fx-card)}
.fx-scrD{margin:0;font:500 clamp(34px,11.5vw,46px)/1.05 var(--fx-caps-font);color:var(--fx-accent);letter-spacing:1px;font-variant-numeric:lining-nums}
.fx-scrD i{font-style:normal;color:var(--fx-accent-2);margin:0 .12em}
.fx-scrT{margin:0;font:italic 500 21px/1.3 var(--fx-head);color:var(--fx-ink)}
.fx-scrP{margin:0 18px;font:500 17px/1.35 var(--fx-head);color:var(--fx-muted)}
.fx-scrUnder > *{transform:scale(.92);opacity:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.fx-scr.started .fx-scrUnder > *{opacity:1}
.fx-scr.done .fx-scrUnder > *{transform:none;opacity:1}
#fxFoil{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border-radius:inherit;z-index:2;cursor:grab;transition:opacity 1s ease}
.fx-scr.done #fxFoil{opacity:0;pointer-events:none}
.fx-scrSpk{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx-scrSpk img,.fx-scrSpk .fx-spark{position:absolute;left:50%;top:50%;width:14px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.fx-spark{height:14px!important;background:radial-gradient(circle,#fff 0 18%,var(--fx-accent-2) 40%,transparent 70%);border-radius:50%}
.fx-scr.done{animation:fxGlow 1.6s ease}
@keyframes fxGlow{40%{box-shadow:0 0 0 6px rgba(255,246,222,.7),0 0 60px var(--fx-accent-2)}}
.fx-scr.done ~ #fxScrBtn{visibility:hidden}

/* ---------- add to calendar ---------- */
.fx-cal{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}

/* ---------- dress code looks ---------- */
.fx-looks{display:flex;gap:14px;width:calc(100% + 52px);margin:4px -26px 0;padding:6px 26px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;box-sizing:border-box}
.fx-looks::-webkit-scrollbar{display:none}
.fx-look{flex:0 0 76%;scroll-snap-align:center;margin:0;padding:9px 9px 16px;border-radius:20px;position:relative;background:var(--fx-btn);box-shadow:var(--fx-shadow);box-sizing:border-box;
  opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.fx-in .fx-look,.fx-looks.fx-in .fx-look{opacity:1;transform:none}
.fx-lookImg{border-radius:13px;overflow:hidden;aspect-ratio:1}
.fx-lookImg img{width:100%;height:100%;object-fit:cover;display:block}
.fx-look figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 0;text-align:center}
.fx-lookT{margin:0;font:italic 500 19px/1.3 var(--fx-head);color:var(--fx-ink)}
.fx-sw{display:flex;gap:8px;margin-top:2px}
.fx-sw i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 0 0 1.5px var(--fx-line),0 2px 4px rgba(0,0,0,.2)}
.fx-dots{display:flex;gap:7px;justify-content:center}
.fx-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:var(--fx-line);cursor:pointer;transition:background .3s,transform .3s}
.fx-dots button.on{background:var(--fx-accent);transform:scale(1.25)}

/* ---------- gallery + viewer ---------- */
.fx-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:6px}
.fx-shot{position:relative;margin:0;display:flex;flex-direction:column;padding:7px;border-radius:14px;cursor:zoom-in;background:var(--fx-btn);box-shadow:var(--fx-shadow);
  opacity:0;transform:translateY(24px) scale(.96);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.fx-shot:before{padding:4px}
.fx-in .fx-shot{opacity:1;transform:none}
.fx-shot img{width:100%;border-radius:8px;display:block;aspect-ratio:3/4;object-fit:cover;flex:1}
.fx-shot:nth-child(3n){grid-column:1 / -1}
.fx-shot:nth-child(3n) img{aspect-ratio:4/3}
.fx-shot figcaption{font:italic 500 15px/1.3 var(--fx-head);color:var(--fx-muted);padding:7px 2px 1px;text-align:center}
.fx-lb{position:fixed;inset:0;z-index:60;background:var(--fx-lb-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 16px 40px;opacity:0;transition:opacity .3s ease}
.fx-lb.on{opacity:1}
.fx-lb img{max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.fx-lb p{margin:0;font:italic 500 19px/1.3 var(--fx-head);color:var(--fx-lb-ink);min-height:1em}
.fx-lbX,.fx-lbN{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;width:44px;height:44px;font-size:26px;line-height:1;cursor:pointer}
.fx-lbX{top:calc(12px + env(safe-area-inset-top,0px));right:12px}
.fx-lbN{top:50%;margin-top:-22px}.fx-lbN.p{left:8px}.fx-lbN.n{right:8px}

/* ---------- film ---------- */
.fx-film{position:relative;width:min(78vw,300px);aspect-ratio:9/16;margin-top:6px;border-radius:22px;padding:9px;background:var(--fx-btn);box-shadow:var(--fx-shadow-lg);box-sizing:border-box}
.fx-film:before{padding:5px}
.fx-film img,.fx-film video,.fx-film iframe{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;border-radius:14px;border:0;background:#1d1610}
.fx-filmPlay{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:rgba(250,244,233,.88);box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 0 2px var(--fx-line);animation:fxBreathe 2.4s ease-in-out infinite}
.fx-filmPlay span{position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--fx-accent)}
@keyframes fxBreathe{50%{transform:scale(.94)}}
.fx-film.playing .fx-filmPlay,.fx-film.playing #fxFilmP{display:none}

/* ---------- the wedding day ---------- */
.fx-day{list-style:none;margin:8px 0 0;padding:0;width:100%;text-align:left;position:relative}
.fx-day:before{content:"";position:absolute;left:84px;top:10px;bottom:10px;width:1.5px;background:linear-gradient(var(--fx-accent-2),var(--fx-accent),var(--fx-accent-2))}
.fx-day li{display:grid;grid-template-columns:72px 1fr;gap:26px;padding:10px 0;position:relative;opacity:0;transform:translateX(-10px);transition:opacity .9s ease,transform 1s ease}
.fx-in .fx-day li{opacity:1;transform:none}
.fx-in .fx-day li:nth-child(2){transition-delay:.1s}.fx-in .fx-day li:nth-child(3){transition-delay:.2s}.fx-in .fx-day li:nth-child(4){transition-delay:.3s}.fx-in .fx-day li:nth-child(5){transition-delay:.4s}
.fx-day li:before{content:"";position:absolute;left:79px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--fx-accent-2);box-shadow:0 0 0 3px var(--fx-card-solid),0 2px 3px rgba(0,0,0,.25)}
.fx-day b{font:500 13px/1.7 var(--fx-caps-font);letter-spacing:1px;color:var(--fx-accent);text-align:right;white-space:nowrap}
.fx-dt{display:block;font:600 21px/1.2 var(--fx-head);color:var(--fx-ink)}
.fx-db{display:block;font:italic 500 16px/1.35 var(--fx-head);color:var(--fx-muted)}

/* ---------- rsvp ---------- */
#fxRForm{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
#fxRBody{width:100%;display:flex;flex-direction:column;gap:18px;margin-top:6px}
.fx-q{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--fx-line);border-radius:14px;transition:background .3s;text-align:center}
.fx-q.fx-bad{background:rgba(201,110,90,.14)}
.fx-qL{margin:0;font:600 22px/1.25 var(--fx-head);color:var(--fx-accent)}
.fx-req{color:var(--fx-soft)}
.fx-rImg{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:14px;margin:6px 0 16px}
.fx-qH{margin:-4px 0 0;font:italic 500 16px/1.35 var(--fx-head);color:var(--fx-muted)}
.fx-opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fx-opts button{position:relative;border:1.5px solid var(--fx-line);background:var(--fx-field);color:var(--fx-ink);font:italic 500 18px/1 var(--fx-head);white-space:nowrap;padding:12px 17px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.fx-opts.fx-chips button{font-size:16px;padding:10px 14px}
.fx-opts button.on{background:var(--fx-on);border-color:var(--fx-on-line);color:var(--fx-on-ink);box-shadow:0 3px 9px rgba(0,0,0,.25)}
.fx-rl{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px}
.fx-rl li{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--fx-line)}
.fx-nm{font:600 23px/1.2 var(--fx-head);color:var(--fx-accent)}
.fx-wh{font:italic 500 16px/1.3 var(--fx-head);color:var(--fx-muted)}
.fx-optin{display:flex;align-items:center;gap:10px;font:500 18px/1.3 var(--fx-head);color:var(--fx-ink);cursor:pointer}
.fx-optin input{width:20px;height:20px;accent-color:var(--fx-accent)}
.fx-rErr{margin:0;min-height:1.2em;font:italic 500 17px/1.3 var(--fx-head);color:var(--fx-err)}
:where(#fxSend){padding:18px 34px;font-size:13px}

/* ---------- gifts ---------- */
.fx-upi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin:6px 0 2px!important}
.fx-upi code{font:500 16px/1.3 var(--fx-caps-font);letter-spacing:.5px;color:var(--fx-ink);background:rgba(255,255,255,.55);padding:8px 12px;border-radius:10px}
.fx-qr{width:150px;height:150px;border-radius:8px;margin:6px 0}

/* ---------- wishes ---------- */
.fx-wishF{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.fx-wishList{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:18px}
.fx-wish{position:relative;margin:0;padding:18px 20px 14px;border-radius:18px;text-align:left;background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-line),var(--fx-shadow)}
.fx-wish blockquote{margin:0;font:italic 500 19px/1.45 var(--fx-head);color:var(--fx-ink)}
.fx-wish blockquote:before{content:"“";font:500 40px/0 Georgia,serif;color:var(--fx-accent-2);vertical-align:-14px;margin-right:4px}
.fx-wish figcaption{margin-top:8px;font:500 11px/1.4 var(--fx-caps-font);letter-spacing:2px;text-transform:uppercase;color:var(--fx-accent)}
.fx-wish.fresh{animation:fxWishIn 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes fxWishIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}

/* ---------- inviters ---------- */
.fx-inviters{display:flex;flex-direction:column;gap:22px;width:100%;margin-top:4px}
.fx-ivG{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fx-ivN{margin:0;font:500 20px/1.5 var(--fx-head);color:var(--fx-ink);max-width:30ch}
.fx-ivN span{white-space:nowrap}
.fx-ivL{margin:0;font:italic 500 19px/1.4 var(--fx-head);color:var(--fx-soft)}

/* ---------- language switch (only outside the app; the app adds its own) ---------- */
.fx-langs{position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:40;display:flex;border-radius:999px;overflow:hidden;border:1px solid var(--fx-accent-2);background:var(--fx-langs-bg);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.fx-langs a{padding:9px 12px;font:500 13px/1 Georgia,"Noto Serif Devanagari",serif;color:var(--fx-langs-ink);text-decoration:none}
.fx-langs a.on{background:var(--fx-on);color:var(--fx-on-ink)}

/* ---------- Devanagari: a font that has the letters, no fake italic, no wide tracking ---------- */
/* a Latin face FIRST, the script face right after: with the Indic face first Chrome mis-shapes it (drops reph and vowel signs) */
.lang-hi{--fx-head:Georgia,"Noto Serif Devanagari",serif;--fx-caps-font:Georgia,"Noto Serif Devanagari",serif}
.lang-hi .fx-caps,.lang-hi .fx-lnk,.lang-hi .fx-btn,.lang-hi .fx-wish figcaption,.lang-hi .fx-day b{letter-spacing:.3px;text-transform:none}
.lang-hi .fx-caps,.lang-hi .fx-lnk{font-size:14px}
.lang-hi .fx-btn{font-size:15px}
.lang-hi .fx-it,.lang-hi .fx-qH,.lang-hi .fx-opts button,.lang-hi .fx-wh,.lang-hi .fx-ivL,.lang-hi .fx-wish blockquote,.lang-hi .fx-lookT,.lang-hi .fx-db,.lang-hi .fx-shot figcaption,.lang-hi .fx-scrT,.lang-hi .fx-rErr{font-style:normal}

/* Latin digits on a Hindi page: plain lining figures, not the serif's old-style ones */
.lang-hi .fx-sec *,.lang-hi #fxRForm *,.lang-hi .fx-looks *,.lang-hi #rsvp *,.lang-hi #countdown *,.lang-hi [id^="fx"]{font-variant-numeric:lining-nums}

@media (prefers-reduced-motion: reduce){
  .fx-sec,.fx-card,.fx-shot,.fx-day li,.fx-look{opacity:1!important;transform:none!important;transition:none!important}
  .fx-filmPlay{animation:none}
}