:root{
  --plum:#4B2160; --violet:#6B3FA0; --orchid:#9B6BC7; --lav:#C9A8E0;
  --blush:#E7B7D2; --magenta:#B23A7A;
  --cream:#F7F1E8; --warm:#FFFDF9;
  --gold:#B58A16; --gold-l:#E2C263;
  --gold-grad:linear-gradient(100deg,#A67A0E,#E0BE55 42%,#8F6708);
  --ink:#3A2242; --ink-soft:#5A4463;
  --card:rgba(255,253,249,.84);
  --shadow:0 10px 34px rgba(75,33,96,.14);
  --r:14px;
  --s:clamp(1.1rem,3vw,2rem);
  --sec-y:clamp(3.5rem,8vw,7rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:'Lato',system-ui,sans-serif; font-weight:400;
  font-size:clamp(.94rem,.35vw + .86rem,1.02rem); line-height:1.75;
  overflow-x:clip;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:url("assets/bg-wash.jpg") center/cover no-repeat;
  opacity:.88;
  filter:saturate(1.14) contrast(1.04);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(72% 56% at 50% 40%,rgba(255,253,249,.8) 0%,rgba(255,253,249,.54) 45%,rgba(255,253,249,.18) 78%,transparent 100%),
    linear-gradient(rgba(250,245,238,.2),rgba(250,245,238,.2));
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{margin:0; font-weight:400; line-height:1.15}
p{margin:0 0 .6em}
a{color:inherit}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;clip:auto;background:var(--warm);padding:.6rem 1rem;border-radius:8px;z-index:200}
:focus-visible{outline:2px solid var(--violet); outline-offset:3px}

/* ---------- typography helpers ---------- */
.sec,.trio,footer{position:relative}
.script-h,.names,.script-lines,.script-small,.footer-names{
  font-family:'Great Vibes',cursive; font-weight:400; -webkit-text-stroke:.4px rgba(143,103,8,.5);
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(255,253,249,.95)) drop-shadow(0 2px 8px rgba(255,253,249,.85)) drop-shadow(0 1px 0 rgba(120,86,6,.35));
}
.script-h{font-size:clamp(2.1rem,5vw,3.4rem); text-align:center; padding-bottom:.15em}
.script-h.sm{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.gold-h{
  filter:drop-shadow(0 1px 2px rgba(255,253,249,.95)) drop-shadow(0 1px 0 rgba(120,86,6,.3));
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(1.4rem,3.4vw,2.1rem);
  letter-spacing:.24em; text-transform:uppercase; text-align:center;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.eyebrow{
  font-family:'Cormorant Garamond',serif; text-transform:uppercase;
  letter-spacing:.28em; font-size:.72rem; color:var(--violet);
  margin:0 0 .8rem; text-align:center;
}
.eyebrow.sm{font-size:.66rem;letter-spacing:.22em}
.lead{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1rem,.4vw + .92rem,1.14rem); color:var(--ink-soft);
  text-align:center; max-width:44ch; margin:0 auto clamp(2rem,5vw,3.2rem);
}
.orn{display:flex; align-items:center; justify-content:center; gap:.7rem; color:var(--gold); margin:.7rem 0 1.6rem; font-size:.8rem}
.orn span{display:block; width:clamp(40px,12vw,120px); height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:'Cormorant Garamond',serif; text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; text-decoration:none;
  color:var(--plum); background:rgba(255,253,249,.82);
  border:1px solid var(--gold); border-radius:999px;
  padding:.72rem 1.5rem; cursor:pointer;
  transition:background .3s,color .3s,transform .3s,box-shadow .3s;
}
.btn:hover{background:var(--gold-grad); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,162,39,.32)}
.btn-lg{padding:.95rem 2rem; font-size:.76rem}
.btn-sm{padding:.55rem 1.15rem; font-size:.64rem}
.btn-block{width:100%; margin-top:.4rem}

/* ---------- nav ---------- */
.sidenav{
  position:fixed; top:1.1rem; right:1.1rem; z-index:60;
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-end;
}
.sidenav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.32rem}
.sidenav a{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:'Cormorant Garamond',serif; font-size:.78rem; letter-spacing:.1em;
  color:var(--plum); background:rgba(255,253,249,.88);
  border:1px solid rgba(201,162,39,.55); border-radius:999px;
  padding:.34rem .9rem .34rem .7rem; backdrop-filter:blur(6px);
  transition:background .3s,color .3s;
}
.sidenav a i{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none}
.sidenav a:hover,.sidenav a.active{background:var(--gold-grad); color:#fff}
.sidenav a.active i{background:#fff}
.music{margin-top:.5rem; display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Cormorant Garamond',serif; font-size:.72rem; letter-spacing:.12em;
  color:var(--plum); background:rgba(255,253,249,.85); cursor:pointer;
  border:1px solid var(--gold); border-radius:999px; padding:.4rem .95rem}
.music:hover{background:var(--gold-grad); color:#fff}
.nav-toggle{display:none}

@media (max-width:900px){
  .nav-toggle{
    display:flex; position:fixed; top:.9rem; right:.9rem; z-index:70;
    flex-direction:column; justify-content:center; gap:4px;
    width:42px; height:42px; border-radius:50%; cursor:pointer;
    background:rgba(255,253,249,.9); border:1px solid var(--gold);
  }
  .nav-toggle span{display:block; width:18px; height:1.5px; background:var(--plum); margin:0 auto; transition:.3s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .sidenav{
    top:0; right:0; bottom:0; width:min(78vw,300px);
    background:rgba(247,241,232,.97); backdrop-filter:blur(10px);
    padding:4.6rem 1.4rem 2rem; align-items:stretch;
    transform:translateX(105%); transition:transform .35s ease;
    box-shadow:-8px 0 30px rgba(75,33,96,.16);
  }
  .sidenav.open{transform:none}
  .sidenav a{font-size:.95rem; padding:.6rem 1rem}
}

/* ---------- petals ---------- */
.petals{position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden}
.petal{position:absolute; top:-8vh; border-radius:60% 40% 55% 45%;
  opacity:.55; animation:fall linear infinite}
@keyframes fall{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--dx,4vw),110vh,0) rotate(540deg)}
}

/* ---------- hero ---------- */
.hero{padding:clamp(4rem,9vw,6.5rem) var(--s) clamp(2rem,6vw,4rem); position:relative}
@media (min-width:901px){.hero{padding-right:clamp(9rem,12vw,11rem)}}
.hero-inner{
  max-width:1240px; margin:0 auto; display:grid; align-items:center;
  grid-template-columns:1fr minmax(280px,1.15fr) 1fr; gap:clamp(1rem,3vw,2.4rem);
}
.hero-left,.hero-right{position:relative}
.hero-left::before,.hero-right::before{
  content:""; position:absolute; inset:-12% -14%; z-index:-1; border-radius:50%;
  background:radial-gradient(62% 57% at 50% 50%,rgba(255,253,249,.97),rgba(255,253,249,.82) 55%,transparent 84%);
  filter:blur(6px);
}
.hero-left{text-align:left}
.verse{font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--ink-soft); font-size:1.02rem; margin-bottom:.2rem}
.verse-ref{font-family:'Cormorant Garamond',serif; letter-spacing:.16em; font-size:.7rem; text-transform:uppercase; color:var(--violet)}
.script-lines{font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.5; margin-top:clamp(2rem,6vw,4.5rem)}
.hero-art img{
  mask-image:radial-gradient(60% 56% at 50% 48%,#000 26%,rgba(0,0,0,.5) 56%,transparent 82%);
  -webkit-mask-image:radial-gradient(60% 56% at 50% 48%,#000 26%,rgba(0,0,0,.5) 56%,transparent 82%);
  filter:saturate(1.3) contrast(1.14) brightness(1.05)
         drop-shadow(0 10px 30px rgba(107,63,160,.28));
  position:relative; z-index:1;
}
.hero-art{margin:0; position:relative}
/* radiant halo so the couple reads as the highlight of the page */
.hero-art::before{
  content:""; position:absolute; inset:-8% -6%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 38% at 50% 46%,rgba(255,253,249,.9) 0%,rgba(255,250,235,.6) 40%,rgba(232,206,122,.22) 58%,transparent 72%);
  filter:blur(10px);
}
.hero-art::after{
  content:""; position:absolute; inset:2% 6%; z-index:2; pointer-events:none;
  background:radial-gradient(40% 40% at 50% 42%,rgba(255,255,255,.14),transparent 56%);
  mix-blend-mode:screen;
}
.hero-right{text-align:center}
.names{font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; display:flex; flex-direction:column; align-items:center; gap:.1em}
.names span{white-space:nowrap}
.names .amp{-webkit-text-fill-color:initial; display:block; line-height:1}
.datebox{display:flex; flex-direction:column; align-items:center; gap:.1rem; margin:.4rem 0 .9rem;
  padding:.4rem 0; position:relative}
.datebox::before,.datebox::after{content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.datebox::before{top:0} .datebox::after{bottom:0}
.dow,.moy{font-family:'Cormorant Garamond',serif; text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color:var(--violet)}
.day{font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,5vw,3.2rem); color:var(--plum); line-height:1}
.place{font-family:'Cormorant Garamond',serif; color:var(--plum); font-size:1.02rem; margin-bottom:1.3rem}
.place span{font-family:'Lato',sans-serif; font-size:.82rem; color:var(--ink-soft)}
.script-small{font-size:clamp(1.2rem,2.2vw,1.7rem); margin-top:1.2rem}

@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr; text-align:center; max-width:620px}
  .hero-left{order:2; text-align:center}
  .hero-art{order:1; max-width:min(78vw,420px); margin:0 auto}
  .hero-right{order:0}
  .script-lines{margin-top:1.4rem}
  .hero{padding-top:clamp(3.6rem,14vw,5rem)}
}

/* ---------- sections ---------- */
.sec{padding:var(--sec-y) var(--s); max-width:1180px; margin:0 auto}

/* timeline */
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:clamp(1.4rem,3vw,1rem);
  grid-template-columns:repeat(5,1fr); text-align:center; position:relative}
.timeline::before{content:""; position:absolute; left:8%; right:8%; top:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent)}
.timeline li{position:relative}
.tl-icon{display:grid; place-items:center; width:52px; height:52px; margin:0 auto .8rem;
  border:1px solid var(--gold); border-radius:50%; background:var(--warm);
  color:var(--violet); font-size:1.15rem; box-shadow:0 4px 14px rgba(75,33,96,.1)}
.timeline h3{font-family:'Cormorant Garamond',serif; font-size:.95rem; letter-spacing:.06em; color:var(--plum)}
.timeline p{font-size:.78rem; color:var(--ink-soft); margin:.15rem 0 0}
@media (max-width:820px){
  .timeline{grid-template-columns:repeat(2,1fr)}
  .timeline::before{display:none}
}
@media (max-width:420px){.timeline{grid-template-columns:1fr}}

/* event cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.4rem)}
.card{
  background:var(--card); border:1px solid rgba(201,162,39,.6); border-radius:var(--r);
  padding:1.5rem 1.1rem; text-align:center; backdrop-filter:blur(5px);
  box-shadow:var(--shadow); transition:transform .35s,box-shadow .35s;
}
.card:hover{transform:translateY(-5px); box-shadow:0 16px 40px rgba(75,33,96,.2)}
.card h3{font-family:'Great Vibes',cursive; font-size:1.6rem; color:var(--plum)}
.card .hr{width:56px; height:1px; margin:.6rem auto .9rem; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.card .when{font-family:'Cormorant Garamond',serif; font-size:.95rem; color:var(--violet); margin-bottom:.4rem}
.card .where{font-size:.8rem; color:var(--ink-soft); min-height:2.6em}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.card .where{min-height:0}}

/* countdown */
.countdown-sec{text-align:center}
.count-wrap{display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,6vw,4.5rem); flex-wrap:wrap}
.counts{display:flex; gap:clamp(1.1rem,4vw,2.6rem)}
.counts div{min-width:64px}
.counts strong{display:block; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(2rem,5.2vw,3.1rem); line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.counts span{font-family:'Cormorant Garamond',serif; text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:var(--ink-soft)}
.quote{margin:0; max-width:24ch}
.quote p{font-family:'Great Vibes',cursive; font-size:clamp(1.25rem,2.6vw,1.75rem); color:var(--plum); line-height:1.5}
.quote cite{font-family:'Cormorant Garamond',serif; font-style:normal; text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:var(--violet)}

/* trio */
.trio{max-width:1180px; margin:0 auto; padding:0 var(--s) var(--sec-y);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.2rem); align-items:start}
.panel{text-align:center}
.panel .script-h.sm{margin-bottom:1.1rem}
@media (max-width:960px){.trio{grid-template-columns:1fr; max-width:560px}}

/* polaroids */
.polaroids{position:relative; height:clamp(240px,64vw,268px); margin-bottom:1.2rem}
.pol{position:absolute; border:0; padding:8px 8px 26px; background:var(--warm); cursor:pointer;
  box-shadow:0 8px 22px rgba(75,33,96,.22); transition:transform .35s,box-shadow .35s; width:44%}
.pol img{aspect-ratio:3/4; object-fit:cover; width:100%}
.p1{left:2%; top:6%; transform:rotate(-7deg)}
.p2{left:29%; top:0; transform:rotate(3deg); z-index:2}
.p3{right:2%; top:9%; transform:rotate(8deg)}
.pol:hover{transform:rotate(0) scale(1.06); z-index:3; box-shadow:0 14px 34px rgba(75,33,96,.3)}

/* venue */
.venue-card{margin:0 0 1.1rem; background:var(--card); border:1px solid rgba(201,162,39,.6);
  border-radius:var(--r); padding:.7rem; box-shadow:var(--shadow); backdrop-filter:blur(5px)}
.venue-card img{border-radius:10px; aspect-ratio:4/3; object-fit:cover}
.venue-card figcaption{padding:.8rem .4rem .3rem; font-size:.8rem; color:var(--ink-soft)}
.venue-card strong{display:block; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:1.02rem; color:var(--plum); margin-bottom:.25rem}

/* rsvp */
.rsvp-card{background:var(--card); border:1px solid rgba(201,162,39,.6); border-radius:var(--r);
  padding:1.4rem 1.2rem; box-shadow:var(--shadow); backdrop-filter:blur(5px); text-align:center}
.rsvp-note{font-family:'Cormorant Garamond',serif; font-size:.9rem; color:var(--ink-soft); margin-bottom:1rem}
#rsvpForm input,#rsvpForm select,#rsvpForm textarea{
  width:100%; font-family:'Lato',sans-serif; font-size:.86rem; color:var(--ink);
  background:rgba(255,255,255,.8); border:1px solid rgba(155,107,199,.45);
  border-radius:8px; padding:.62rem .8rem; margin-bottom:.7rem; resize:vertical;
}
#rsvpForm input::placeholder,#rsvpForm textarea::placeholder{color:#9a8aa5}
#rsvpForm select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--violet) 50%),linear-gradient(135deg,var(--violet) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.15em,calc(100% - 13px) 1.15em;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.radios{border:0; margin:0 0 .7rem; padding:0; display:flex; gap:1.2rem; justify-content:center}
.radios label{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; cursor:pointer; color:var(--ink-soft)}
.radios input{position:absolute; opacity:0; width:0; height:0}
.radios span{width:13px; height:13px; border:1px solid var(--violet); border-radius:50%; display:inline-block; position:relative}
.radios input:checked + span::after{content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--gold)}
.radios input:focus-visible + span{outline:2px solid var(--violet); outline-offset:2px}
.err{color:#a3204b; font-size:.76rem; margin:.1rem 0 .5rem}
.thanks p:last-child{font-size:.86rem; color:var(--ink-soft)}

/* footer */
footer{text-align:center; padding:clamp(2rem,5vw,3.2rem) var(--s) clamp(2.5rem,6vw,4rem)}
.cross{margin:.4rem auto .8rem; display:block}
.footer-names{font-size:clamp(1.4rem,3vw,2rem)}

/* modals */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(45,20,60,.62); backdrop-filter:blur(5px); padding:var(--s)}
.modal[hidden],[hidden]{display:none !important}
.modal-box{position:relative; background:var(--warm); border:1px solid var(--gold);
  border-radius:var(--r); padding:2rem 1.6rem; max-width:420px; text-align:center; box-shadow:var(--shadow)}
.modal-box h3{font-family:'Great Vibes',cursive; font-size:2rem; color:var(--plum); margin-bottom:.4rem}
.modal-box p{font-size:.86rem; color:var(--ink-soft)}
.modal-box .m-when{font-family:'Cormorant Garamond',serif; color:var(--violet); font-size:1rem}
.modal-x{position:absolute; top:.4rem; right:.7rem; background:none; border:0; cursor:pointer;
  font-size:1.7rem; line-height:1; color:var(--plum)}
.light .modal-x{position:fixed; top:1rem; right:1.4rem; color:#fff; z-index:2}
.light-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:900px; width:100%}
.light-grid img{border-radius:10px; border:6px solid var(--warm)}
@media (max-width:700px){.light-grid{grid-template-columns:1fr; max-height:80vh; overflow:auto}}

/* reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

.timeline .tl-note{margin-top:.35rem;font-size:.86rem;line-height:1.5;color:var(--plum);opacity:.78;font-style:italic;max-width:22ch;margin-left:auto;margin-right:auto}

/* ================= LANDING / CARD-OPENING INTRO ================= */
body.pre-open{overflow:hidden}
body.pre-open main,body.pre-open header.hero,body.pre-open footer,
body.pre-open .sidenav,body.pre-open .nav-toggle{opacity:0}
body.opening main,body.opening header.hero,body.opening footer,
body.opening .sidenav,body.opening .nav-toggle{opacity:1;transition:opacity 1.1s ease .45s}

.intro{position:fixed; inset:0; z-index:400; perspective:1900px; overflow:hidden;
  background:var(--cream)}
.intro-stage{position:absolute; inset:0; transform-style:preserve-3d}

/* --- the two card leaves --- */
.leaf{position:absolute; top:0; bottom:0; width:50.2%; transform-style:preserve-3d;
  will-change:transform; backface-visibility:hidden;
  transition:transform 1.7s cubic-bezier(.62,.02,.24,1), filter 1.7s ease}
.leaf-l{left:0; transform-origin:left center}
.leaf-r{right:0; transform-origin:right center}
.leaf-face{position:absolute; inset:0; overflow:hidden;
  background:url("assets/bg-wash.jpg") center/cover no-repeat}
.leaf-l .leaf-face{background-position:left center}
.leaf-r .leaf-face{background-position:right center}
.leaf-face::after{content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(255,253,249,.34),rgba(255,253,249,.34))}
.leaf-edge{position:absolute; top:0; bottom:0; width:14px; pointer-events:none}
.leaf-l .leaf-edge{right:0; background:linear-gradient(90deg,transparent,rgba(201,162,39,.5),rgba(143,103,8,.75))}
.leaf-r .leaf-edge{left:0; background:linear-gradient(270deg,transparent,rgba(201,162,39,.5),rgba(143,103,8,.75))}
.leaf-orn{position:absolute; color:var(--gold); font-size:1.1rem; opacity:.7; z-index:3}
.leaf-orn.tl{top:24px;left:26px} .leaf-orn.bl{bottom:24px;left:26px}
.leaf-orn.tr{top:24px;right:26px} .leaf-orn.br{bottom:24px;right:26px}

/* --- couple figures --- */
.figure{position:absolute; bottom:0; height:min(72vh,660px); width:auto; z-index:2;
  filter:drop-shadow(0 14px 26px rgba(75,33,96,.22));
  animation:figIn 1.5s cubic-bezier(.2,.8,.25,1) both}
.groom{right:7%; animation-delay:.15s}
.bride{left:11%; animation-delay:.3s}
@keyframes figIn{from{opacity:0; transform:translateY(34px) scale(.97)}to{opacity:1; transform:none}}

/* --- foreground: names + rings --- */
.intro-fore::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,74vw); height:min(760px,92vh); border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(48% 46% at 50% 50%,rgba(255,253,249,.95) 0%,rgba(255,253,249,.82) 46%,rgba(255,253,249,.42) 70%,transparent 86%);
  filter:blur(4px)}
.intro-fore{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.1rem; text-align:center;
  padding:0 1.2rem; transition:opacity .7s ease, transform .9s ease}
.intro-eyebrow{font-family:'Cormorant Garamond',serif; letter-spacing:.34em;
  text-transform:uppercase; font-size:.7rem; color:var(--violet); margin:0 0 .5rem}
.intro-names{font-family:'Great Vibes',cursive; font-size:clamp(1.8rem,4vw,2.9rem);
  line-height:1.2; margin:0 0 .3rem; display:flex; flex-direction:column; align-items:center; gap:.05em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(255,253,249,.96)) drop-shadow(0 2px 10px rgba(255,253,249,.85))}
.intro-amp{font-size:.42em; color:var(--gold); -webkit-text-fill-color:var(--gold); background:none; line-height:1.6}
.intro-names .ln{white-space:nowrap}
.intro-date{font-family:'Cormorant Garamond',serif; letter-spacing:.3em; font-size:.86rem;
  color:var(--plum); margin:0 0 1.4rem}
.intro-hint{margin:1.5rem 0 0; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plum)}
.intro-hint span{animation:hintPulse 2.6s ease-in-out infinite; display:inline-block;
  background:rgba(255,253,249,.88); padding:.5rem 1.1rem; border-radius:999px;
  box-shadow:0 2px 14px rgba(255,253,249,.9)}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:1}}

.rings{position:relative; background:none; border:0; padding:1.1rem; cursor:pointer;
  border-radius:50%; line-height:0}
.rings:focus-visible{outline:2px solid var(--gold); outline-offset:6px}
.ring-svg{overflow:visible; filter:drop-shadow(0 4px 14px rgba(143,103,8,.35))}
.ring-glow{position:absolute; inset:-26%; border-radius:50%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,246,218,.95),rgba(232,206,122,.5) 42%,transparent 72%);
  animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.55; transform:scale(.94)}50%{opacity:1; transform:scale(1.06)}}
.ring{transform-origin:100px 70px; animation:ringSway 5s ease-in-out infinite}
.ring-b{animation-delay:-2.5s}
@keyframes ringSway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-4px)}}
.sparks circle{animation:twinkle 2.4s ease-in-out infinite}
.sparks circle:nth-child(2){animation-delay:.5s}
.sparks circle:nth-child(3){animation-delay:1s}
.sparks circle:nth-child(4){animation-delay:1.5s}
.sparks circle:nth-child(5){animation-delay:.9s}
@keyframes twinkle{0%,100%{opacity:.15; r:1.2}50%{opacity:1}}
.rings:hover .ring-glow{animation-duration:1.4s}
.rings:hover .ring-svg{transform:scale(1.05); transition:transform .4s ease}

/* --- opening sequence --- */
.intro.go .intro-fore{opacity:0; transform:translateY(-16px) scale(1.06)}
.intro.go .rings{animation:ringFly 1.15s cubic-bezier(.3,.9,.2,1) forwards}
@keyframes ringFly{
  0%{transform:none}
  35%{transform:scale(1.5) rotate(180deg)}
  100%{transform:scale(2.6) rotate(360deg); opacity:0}
}
.intro.go .leaf-l{transform:rotateY(-108deg) translateZ(30px); filter:brightness(.9)}
.intro.go .leaf-r{transform:rotateY(108deg) translateZ(30px); filter:brightness(.9)}
.intro.go{background:transparent; transition:background .9s ease .3s}
.intro.gone{opacity:0; pointer-events:none; transition:opacity .55s ease}

/* --- flash + petal burst --- */
.burst{position:absolute; inset:0; z-index:6; pointer-events:none}
.intro.go .burst::before{content:""; position:absolute; inset:0;
  background:radial-gradient(38% 34% at 50% 50%,rgba(255,255,255,.95),rgba(255,246,218,.5) 45%,transparent 74%);
  animation:flash 1s ease-out forwards}
@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.bp{position:absolute; width:14px; height:14px; border-radius:60% 40% 55% 45%;
  will-change:transform,opacity; animation:bpFly 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bpFly{from{transform:translate(0,0) rotate(0); opacity:1}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0}}

@media (max-width:760px){
  .figure{height:min(38vh,330px); opacity:.95}
  .groom{right:-6%} .bride{left:-6%}
  .intro-fore{justify-content:flex-start; padding-top:11vh}
  .intro-fore::before{width:96vw; height:62vh; top:34%}
  .intro-hint{margin-top:1rem}
  .intro-hint span{background:rgba(255,253,249,.86); max-width:20rem}
  .intro-names{font-size:clamp(1.6rem,7vw,2.2rem)}
  .ring-svg{width:170px;height:112px}
}
@media (prefers-reduced-motion:reduce){
  .figure,.ring,.ring-glow,.sparks circle,.intro-hint span{animation:none}
  .leaf{transition:none}
}