/* Jardim Encantado — convite digital premium (mobile-first)
   Paleta: creme, rosa claro, lilás, verde suave, dourado discreto
*/

:root{
  --bg0:#fffaf6;
  --bg1:#f6f7ff;
  --ink:#171325;
  --muted:rgba(23,19,37,.62);

  --rose:#f8cfe0;
  --lilac:#dccbff;
  --mint:#cfeee3;
  --sky:#cfe4ff;

  --gold:#c6a35a;
  --glass: rgba(255,255,255,.68);
  --stroke: rgba(23,19,37,.10);
  --stroke2: rgba(23,19,37,.16);

  --shadow: 0 18px 55px rgba(18, 14, 28, .12);
  --shadow2: 0 34px 120px rgba(18, 14, 28, .14);

  --r1:18px;
  --r2:26px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background: var(--bg0);
  font-family: Nunito, ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x:hidden;
}

.skip{position:absolute; left:-999px; top:0}
.skip:focus{left:12px; top:12px; z-index:999; background:#fff; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke2)}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-3}
.wash{
  position:absolute; inset:-20%;
  background:
    radial-gradient(900px 620px at 18% 10%, rgba(248,207,224,.65), transparent 55%),
    radial-gradient(800px 520px at 84% 18%, rgba(220,203,255,.60), transparent 55%),
    radial-gradient(900px 600px at 60% 86%, rgba(207,238,227,.58), transparent 55%),
    radial-gradient(760px 520px at 12% 74%, rgba(207,228,255,.45), transparent 55%),
    linear-gradient(180deg, rgba(255,250,246,1), rgba(246,247,255,1));
  filter: saturate(1.08);
}
.paper{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,19,37,.035) 1px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode:multiply;
  opacity:.55;
}
.glow{
  position:absolute; inset:-10%;
  background:
    radial-gradient(620px 420px at 50% 15%, rgba(255,255,255,.65), transparent 70%);
  opacity:.55;
}

#petals{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.9}

.butterflies{position:fixed; inset:0; z-index:-1; pointer-events:none}
.butterfly{
  position:absolute;
  width:42px; height:28px;
  opacity:.92;
  filter: drop-shadow(0 8px 18px rgba(18,14,28,.18));
  background:
    radial-gradient(16px 14px at 28% 50%, rgba(248,207,224,.95), rgba(248,207,224,.0) 68%),
    radial-gradient(16px 14px at 72% 50%, rgba(220,203,255,.95), rgba(220,203,255,.0) 68%),
    radial-gradient(10px 10px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  border-radius: 999px;
  transform-origin: 50% 50%;
}
.butterfly::before, .butterfly::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(12px 10px at 30% 45%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(12px 10px at 70% 55%, rgba(255,255,255,.85), transparent 60%);
  opacity:.55;
}
.b1{left:6%; top:22%; animation: drift1 18s linear infinite, flap 1.6s ease-in-out infinite;}
.b2{left:78%; top:18%; animation: drift2 22s linear infinite, flap 1.9s ease-in-out infinite; width:48px; height:32px;}
.b3{left:34%; top:74%; animation: drift3 26s linear infinite, flap 1.7s ease-in-out infinite; opacity:.78}

@keyframes flap{0%,100%{transform: rotate(-2deg) scale(1)}50%{transform: rotate(3deg) scale(1.03)}}
@keyframes drift1{0%{transform: translate3d(0,0,0)}50%{transform: translate3d(14vw,8vh,0)}100%{transform: translate3d(0,0,0)}}
@keyframes drift2{0%{transform: translate3d(0,0,0)}50%{transform: translate3d(-18vw,10vh,0)}100%{transform: translate3d(0,0,0)}}
@keyframes drift3{0%{transform: translate3d(0,0,0)}50%{transform: translate3d(10vw,-12vh,0)}100%{transform: translate3d(0,0,0)}}

.top{position:sticky; top:10px; z-index:10}
.topInner{
  max-width: 1040px;
  margin: 10px auto 0;
  padding: 10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.42);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.brand{display:flex; align-items:center; gap:10px; padding-left:4px}
.brandMark{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(248,207,224,.9), rgba(220,203,255,.85));
  border:1px solid rgba(198,163,90,.22);
  box-shadow: 0 12px 30px rgba(18,14,28,.12);
}
.brandText{font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:11px; color: rgba(23,19,37,.72)}

.topNav{display:flex; gap:8px; align-items:center}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(23,19,37,.10);
  background: rgba(255,255,255,.76);
  color: rgba(23,19,37,.86);
  text-decoration:none;
  font-weight:800;
  font-size:12px;
}

/* Slide deck (Spotify wrapped-ish, but soft) */
.deck{max-width: 1040px; margin:0 auto; padding: 14px 14px 90px}
.slide{min-height: calc(100vh - 120px); display:none; align-items:center; justify-content:center; padding: 10px 0 16px}
.slide.is-active{display:flex}

/* panels */
.slidePanel{
  width:100%;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.64);
  box-shadow: var(--shadow2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 18px;
}

.hero{position:relative; width:100%; padding: 10px 0 16px}
.frame{width:100%;

  position:relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow:hidden;
}
.frameOrn{
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 260px at 50% -20%, rgba(220,203,255,.55), transparent 70%),
    radial-gradient(600px 260px at 10% 0%, rgba(248,207,224,.55), transparent 70%),
    radial-gradient(720px 340px at 85% 18%, rgba(207,238,227,.40), transparent 70%);
  opacity:.72;
}
.frameOrn::after{
  content:"";
  position:absolute; inset:10px;
  border-radius: 24px;
  border: 1px solid rgba(198,163,90,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.kicker{
  position:relative;
  margin:0;
  padding: 22px 18px 0;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: 11px;
  color: rgba(23,19,37,.70);
}
.headline{
  position:relative;
  margin: 10px 0 0;
  padding: 0 18px;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 800;
  letter-spacing:-.03em;
  line-height: 1.02;
  font-size: clamp(30px, 7.8vw, 56px);
}

.names{position:relative; padding: 12px 18px 0; display:grid; gap:6px}
.nameLine{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.script{
  font-family: Parisienne, cursive;
  font-weight: 400;
  font-size: clamp(34px, 11vw, 62px);
  color: rgba(23,19,37,.92);
  text-shadow: 0 18px 35px rgba(18,14,28,.10);
}
.script.small{font-size: 40px}
.age{font-weight:900; letter-spacing:.04em; color: rgba(23,19,37,.68)}

.photoBlock{position:relative; padding: 14px 18px 0}
.photo{
  margin:0;
  border-radius: 26px;
  overflow:hidden;
  border:1px solid rgba(23,19,37,.12);
  background: #fff;
  box-shadow: 0 18px 60px rgba(18,14,28,.14);
  transform: translateZ(0);
}
.photo img{display:block; width:100%; height:auto; object-fit:cover}
.photoHalo{
  position:absolute;
  left: 10px; right: 10px;
  top: 6px; bottom: 12px;
  border-radius: 28px;
  background:
    radial-gradient(220px 160px at 30% 20%, rgba(248,207,224,.72), transparent 70%),
    radial-gradient(220px 160px at 70% 35%, rgba(220,203,255,.66), transparent 70%),
    radial-gradient(220px 160px at 55% 90%, rgba(207,238,227,.55), transparent 70%);
  filter: blur(18px);
  opacity:.8;
  z-index:-1;
}
.caption{
  margin-top: 10px;
  font-family: Parisienne, cursive;
  font-size: 34px;
  color: rgba(23,19,37,.88);
}

.heroActions{position:relative; padding: 16px 18px 18px; display:grid; gap:10px}
.btn{
  appearance:none;
  border:1px solid rgba(23,19,37,.14);
  background: rgba(255,255,255,.82);
  color: rgba(23,19,37,.92);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 13px 14px;
  border-radius: 18px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 12px 30px rgba(18,14,28,.10);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 18px 40px rgba(18,14,28,.14)}
.btn:active{transform: translateY(0px)}
.btn.primary{
  border-color: rgba(198,163,90,.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.65)),
    linear-gradient(135deg, rgba(248,207,224,.85), rgba(220,203,255,.78));
}
.btn.ghost{background: rgba(255,255,255,.55)}

.hint{position:relative; margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: 13px; line-height:1.55}

.portal{
  position:absolute;
  left:0; right:0;
  bottom:-64px; /* keep it from sitting on top of next section */
  display:grid; place-items:center;
  pointer-events:none;
  z-index:-1; /* behind content */
}
.gate{
  width:min(520px, 94%);
  height: 140px;
  border-radius: 60px 60px 24px 24px;
  border:1px solid rgba(198,163,90,.26);
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 28px 90px rgba(18,14,28,.10);
}
.fence{
  width:min(620px, 98%);
  height: 18px;
  margin-top: -14px;
  border-radius: 999px;
  border:1px solid rgba(23,19,37,.10);
  background: rgba(255,255,255,.70);
}

.section{padding: 12px 0}
.sectionCard{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.64);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 18px;
}
.sectionLabel{
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(23,19,37,.60);
}
.sectionTitle{
  margin: 10px 0 0;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(26px, 6.4vw, 40px);
}
.sectionText{margin: 10px 0 0; color: rgba(23,19,37,.78); font-size: 15px; line-height:1.65}
.sectionText b{color: rgba(23,19,37,.92)}

.miniRow{display:grid; grid-template-columns: 1fr; gap:10px; margin-top: 14px}
.mini{
  display:flex; align-items:center; gap:12px;
  border:1px dashed rgba(23,19,37,.18);
  border-radius: 20px;
  padding: 12px;
  background: rgba(255,255,255,.70);
}
.miniIcon{width:40px; height:40px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(248,207,224,.75), rgba(220,203,255,.70)); border:1px solid rgba(198,163,90,.18)}
.miniText{display:grid}
.miniText b{font-weight:1000}
.miniText span{color: var(--muted); font-size: 13px}

.paperInvite{margin-top: 14px; position:relative}
.paperEdge{
  position:absolute; inset:-1px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.45)),
    radial-gradient(360px 200px at 20% 10%, rgba(248,207,224,.62), transparent 70%),
    radial-gradient(360px 200px at 80% 20%, rgba(220,203,255,.62), transparent 70%);
  filter: blur(10px);
  opacity:.65;
}
.paperInside{
  position:relative;
  border-radius: 26px;
  border:1px solid rgba(23,19,37,.12);
  background: rgba(255,255,255,.82);
  padding: 14px;
}
.paperKicker{margin:0; font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:10px; color: rgba(23,19,37,.62)}
.paperText{margin:8px 0 0}
.muted{color: var(--muted)}

.cards{display:grid; gap:10px; margin-top: 14px}
.infoCard{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px;
  border-radius: 22px;
  border:1px solid rgba(23,19,37,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 35px rgba(18,14,28,.10);
}
.ic{width:44px; height:44px; border-radius: 18px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(207,238,227,.8), rgba(207,228,255,.72));
  border: 1px solid rgba(23,19,37,.10);
}
.icTitle{font-weight: 950; letter-spacing:.12em; text-transform: uppercase; font-size: 11px; color: rgba(23,19,37,.62)}
.icValue{font-weight: 800; margin-top: 2px; color: rgba(23,19,37,.90)}

.ctaPanel{
  margin-top: 14px;
  padding: 14px;
  border-radius: 24px;
  border:1px solid rgba(198,163,90,.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.58)),
    radial-gradient(420px 200px at 15% 0%, rgba(248,207,224,.55), transparent 70%),
    radial-gradient(420px 200px at 85% 0%, rgba(220,203,255,.52), transparent 70%);
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.ctaTitle{font-weight: 1000; font-family: Fraunces, ui-serif; letter-spacing:-.02em; font-size: 20px}
.ctaText{color: var(--muted); font-size: 13px; margin-top: 2px}

.finalCard{
  border-radius: 30px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.64);
  box-shadow: var(--shadow2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 18px;
  overflow:hidden;
}
.sign{margin: 14px 0 0; color: rgba(23,19,37,.78); font-weight:900}

.footerGarden{position:relative; margin-top: 14px; height: 140px}
.footerGarden .arch{
  position:absolute; left: 10%; right: 10%; bottom: 24px; height: 90px;
  border-radius: 50px 50px 26px 26px;
  border:1px solid rgba(198,163,90,.26);
  background: rgba(255,255,255,.52);
}
.footerGarden .grass{
  position:absolute; left:-10%; right:-10%; bottom:0; height: 52px;
  background: linear-gradient(180deg, rgba(207,238,227,.0), rgba(207,238,227,.55));
  border-top:1px solid rgba(23,19,37,.08);
}
.footerGarden .flowers{
  position:absolute; left:0; right:0; bottom: 8px; height: 60px;
  background:
    radial-gradient(10px 10px at 10% 55%, rgba(248,207,224,.9), transparent 60%),
    radial-gradient(12px 12px at 16% 70%, rgba(220,203,255,.85), transparent 60%),
    radial-gradient(10px 10px at 30% 65%, rgba(207,238,227,.9), transparent 60%),
    radial-gradient(10px 10px at 46% 70%, rgba(248,207,224,.9), transparent 60%),
    radial-gradient(10px 10px at 62% 60%, rgba(220,203,255,.85), transparent 60%),
    radial-gradient(10px 10px at 78% 70%, rgba(207,228,255,.9), transparent 60%),
    radial-gradient(10px 10px at 92% 60%, rgba(248,207,224,.9), transparent 60%);
  opacity:.75;
}

/* Reveal animations */
.reveal{opacity:0; transform: translate3d(0,10px,0); filter: blur(4px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease)}
.reveal.in{opacity:1; transform: translate3d(0,0,0); filter: blur(0)}
.revealChild{opacity:0; transform: translate3d(0,10px,0); filter: blur(4px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}
.revealChild.in{opacity:1; transform: translate3d(0,0,0); filter: blur(0)}

/* Next button bar */
.nextBar{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding: 12px;
  z-index: 30;
  pointer-events: none;
}
.nextBtn{
  pointer-events: auto;
  width: min(560px, calc(100% - 0px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid rgba(198,163,90,.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62)),
    linear-gradient(135deg, rgba(248,207,224,.85), rgba(220,203,255,.78));
  box-shadow: 0 22px 80px rgba(18,14,28,.16);
  font-weight: 1000;
  color: rgba(23,19,37,.92);
  letter-spacing: .02em;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nextBtn:hover{transform: translateY(-1px); box-shadow: 0 28px 100px rgba(18,14,28,.20)}
.nextArrow{font-size: 18px}

/* Modal (RSVP) */
.modal{position:fixed; inset:0; display:none; z-index:9999}
.modal.is-open{display:block}

/* Liquid blur behind modal */
body.modal-open .top,
body.modal-open .deck,
body.modal-open .nextBar,
body.modal-open .foot{filter: blur(10px) saturate(1.05); transform: translateZ(0)}
body.modal-open .nextBar{opacity:.35}

.modalBackdrop{
  position:absolute; inset:0;
  background: rgba(17,12,26,.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modalCard{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(720px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow:auto;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 140px rgba(18,14,28,.22);
  overflow:hidden;
}
.modalHead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding: 16px 16px 0}
.modalTitle{font-family: Fraunces, ui-serif, Georgia, serif; font-weight:900; letter-spacing:-.02em; font-size: 28px; margin-top: 6px}
.modalSub{color: var(--muted); font-size: 13px; margin-top: 4px}
.iconBtn{border:1px solid rgba(23,19,37,.14); background: rgba(255,255,255,.8); border-radius: 14px; width:40px; height:40px; cursor:pointer; font-weight:1000}
.modalBody{padding: 14px 16px 16px}
.nameList{display:grid; gap:10px; margin: 10px 0 12px}
.nameRow{display:flex; gap:10px; align-items:center}
.nameRow input{
  flex:1;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(23,19,37,.14);
  background: rgba(255,255,255,.90);
  font-weight: 800;
}
.smallBtn{border:1px solid rgba(23,19,37,.14); background: rgba(255,255,255,.85); border-radius: 16px; padding: 10px 12px; cursor:pointer; font-weight:1000}
.modalActions{margin-top: 12px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

@media (max-width: 520px){
  .modalCard{margin-top: 10vh}
  .modalActions{justify-content:stretch}
  .modalActions .btn{flex:1}
}

.foot{padding: 16px 0 40px}
.footInner{max-width:1040px; margin:0 auto; padding: 0 14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

@media (min-width: 760px){
  .wrap{padding-top: 18px}
  .hero{padding-top: 16px}
  .heroActions{grid-template-columns: 1fr 1fr 1fr}
  .miniRow{grid-template-columns: 1fr 1fr 1fr}
  .cards{grid-template-columns: 1fr 1fr}
  .topInner{padding: 12px 14px}
}

/* Fallback for buggy in-app browsers (Telegram/iOS) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topInner,.frame,.sectionCard,.finalCard{background: rgba(255,255,255,.92) !important}
}

/* Kill switch: portal ornament (can overlap in some browsers/webviews) */
.portal{display:none !important}

@media (prefers-reduced-motion: reduce){
  .butterfly, #petals{display:none !important}
  .reveal, .revealChild{opacity:1 !important; transform:none !important; filter:none !important}
  *{scroll-behavior:auto !important}
}