/* Wedding website styles. Content lives in assets/js/config.js. */

:root{
  --gold:#c9a227;
  --light-gold:#e8cf8b;
  --cream:#fdf6ec;
  --ink:#3b1f2b;
  --reveal:1.1s;
  --ease:cubic-bezier(.2,.8,.3,1);
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --display:"Cinzel", Georgia, serif;
  --panel:linear-gradient(160deg, rgba(24,21,38,.66), rgba(13,12,24,.82));
  --panel-line:rgba(232,207,139,.38);
  --pad:clamp(20px,6vw,64px);
  --shadow-text:0 1px 3px rgba(8,6,14,.9), 0 2px 14px rgba(8,6,14,.75);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:#1a0f14;
  color:var(--cream);
  font-family:var(--serif);
  font-size:clamp(16px,4.1vw,19px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
figure,dl,dd{ margin:0; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ------------------------------------------------------------ layout */

.wrap{
  position:relative; z-index:3;
  width:100%; max-width:1180px;
  margin-inline:auto;
  padding:clamp(72px,16vw,132px) var(--pad);
}
.wrap--center{ text-align:center; }

.sec{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:100svh;
  overflow:hidden;
  overflow:clip;          /* clips like hidden, but lets the background picture stay pinned */
  isolation:isolate;
}
.sec::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(80% 55% at 50% 50%, rgba(232,207,139,.05), transparent 70%);
}

.bgmedia{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
/* the picture stays pinned to the screen while the section scrolls past it */
.bgimg{ background-size:0 0; }
.bgimg::before{
  content:""; display:block;
  position:sticky; top:0;
  width:100%; height:100svh;
  background-image:inherit;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero__still{
  background-position:center; background-size:cover;
  animation:slowzoom 26s ease-in-out infinite alternate;
}

.scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(26,15,20,.48) 0%, rgba(26,15,20,.74) 62%, rgba(20,10,15,.92) 100%),
    linear-gradient(180deg, rgba(20,10,15,.9) 0%, rgba(26,15,20,.48) 24%, rgba(26,15,20,.54) 70%, rgba(20,10,15,.9) 100%);
}
.scrim--hero{
  background:
    radial-gradient(110% 76% at 50% 46%, rgba(26,15,20,0) 0%, rgba(26,15,20,.2) 58%, rgba(20,10,15,.62) 100%),
    linear-gradient(180deg, rgba(26,15,20,.34) 0%, rgba(26,15,20,0) 30%, rgba(26,15,20,.1) 66%, rgba(20,10,15,.82) 100%);
}
.scrim--light{
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(26,15,20,.14) 0%, rgba(26,15,20,.42) 62%, rgba(20,10,15,.8) 100%),
    linear-gradient(180deg, rgba(20,10,15,.88) 0%, rgba(26,15,20,.16) 26%, rgba(26,15,20,.22) 70%, rgba(20,10,15,.88) 100%);
}
.scrim--deep{
  background:linear-gradient(180deg, rgba(20,10,15,.9) 0%, rgba(20,10,15,.8) 42%, rgba(14,7,11,.96) 100%);
}

/* the celebrations background washes into each event's colour */
.wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  transition:opacity .6s ease, background .6s ease;
  mix-blend-mode:screen;
}
.wash.is-on{ opacity:1; }

/* ------------------------------------------------------------ type */

.eyebrow{
  margin:0 0 clamp(14px,3vw,20px);
  font-family:var(--display);
  font-size:clamp(10px,2.7vw,13px);
  letter-spacing:.42em; text-transform:uppercase;
  color:#f3e2b4;
  text-shadow:0 1px 3px rgba(8,6,14,.95), 0 2px 10px rgba(8,6,14,.9), 0 0 22px rgba(8,6,14,.7);
}
.h2{
  margin:0 0 clamp(6px,2vw,10px);
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(27px,6.8vw,48px);
  line-height:1.22;
  letter-spacing:.07em;
  color:#fff;
  text-shadow:0 1px 3px rgba(8,6,14,.9), 0 2px 16px rgba(8,6,14,.8), 0 4px 40px rgba(0,0,0,.6);
}
.lead{
  margin:clamp(14px,3.4vw,20px) auto 0;
  max-width:34ch;
  font-size:clamp(17px,4.4vw,21px);
  line-height:1.76;
  color:#fff;
  text-shadow:var(--shadow-text);
}
.names{
  margin:clamp(20px,5vw,32px) 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(26px,7.2vw,52px);
  line-height:1.24;
  letter-spacing:.05em;
  color:var(--light-gold);
  text-shadow:0 3px 34px rgba(0,0,0,.55);
}
.names--footer{ margin-top:clamp(14px,3vw,20px); }
.tag{
  margin:clamp(10px,2.4vw,14px) 0 0;
  font-family:var(--display);
  font-size:clamp(11px,3vw,14px);
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,207,139,.78);
}

.rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:clamp(18px,4vw,26px) auto;
  max-width:280px;
}
.rule i{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(232,207,139,.75), transparent); }
.rule span{ color:var(--gold); font-size:15px; line-height:1; }

.orn{
  height:26px; max-width:340px; margin-inline:auto;
  background:radial-gradient(circle, rgba(232,207,139,.85) 0 1.5px, transparent 2px) center/22px 22px repeat-x;
  opacity:.5;
}
.orn--top{ margin-bottom:clamp(20px,5vw,34px); }
.orn--bottom{ margin-top:clamp(24px,6vw,40px); }

/* ------------------------------------------------------------ buttons */

.btn{
  position:relative;
  display:inline-block;
  margin-top:clamp(26px,6vw,38px);
  padding:clamp(14px,3.6vw,17px) clamp(30px,8vw,46px);
  border:1px solid rgba(255,246,220,.7);
  border-radius:999px;
  background:linear-gradient(160deg, #fdf0c8 0%, #f0d795 34%, #dfba5c 68%, #c9a227 100%);
  color:#40200b;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(12.5px,3.3vw,15px);
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,250,232,.55);
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(201,162,39,.5),
             inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(150,110,20,.25);
  transition:transform .35s var(--ease), box-shadow .35s, filter .35s;
}
.btn::after{
  content:""; position:absolute; top:0; left:-140%;
  width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  animation:shimmer 4.6s ease-in-out infinite;
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(232,207,139,.8), inset 0 1px 0 rgba(255,255,255,.85);
}
.btn:active{ transform:scale(.985); }

.btn--gate{
  margin-top:clamp(30px,7vw,42px);
  padding:clamp(16px,4vw,19px) clamp(36px,10vw,58px);
  animation:breathe 3.6s ease-in-out infinite;
}
.btn--flip{
  margin-top:clamp(18px,4vw,24px);
  padding:clamp(12px,3vw,15px) clamp(24px,6vw,34px);
  font-size:clamp(10.5px,2.8vw,12.5px);
}
#events.is-light .btn--flip{
  background:linear-gradient(160deg, rgba(30,26,44,.96), rgba(16,14,26,.98));
  color:#f6e7bd;
  border-color:rgba(255,246,220,.5);
  text-shadow:none;
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(232,207,139,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
#events.is-light .btn--flip::after{ background:linear-gradient(100deg, transparent, rgba(255,240,200,.28), transparent); }

/* ------------------------------------------------------------ 1 · gate */

.gate{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#1a0f14;
  transition:opacity .9s ease;
}
.gate.is-out{ opacity:0; pointer-events:none; }
.gate__bg{
  position:absolute; inset:-4%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  animation:slowzoom 26s ease-in-out infinite alternate;
}
.gate__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(100% 70% at 50% 44%, rgba(26,15,20,.02) 0%, rgba(26,15,20,.3) 55%, rgba(16,8,12,.74) 100%),
    linear-gradient(180deg, rgba(26,15,20,.42) 0%, rgba(26,15,20,.14) 30%, rgba(26,15,20,.3) 66%, rgba(16,8,12,.76) 100%);
}
.gate__inner{
  position:relative; z-index:2;
  width:100%; max-width:640px;
  padding:clamp(30px,8vw,54px) var(--pad);
  text-align:center;
}
.gate__inner::before{
  content:""; position:absolute; inset:-8% -6%; z-index:-1;
  background:radial-gradient(58% 48% at 50% 52%, rgba(14,7,11,.68) 0%, rgba(14,7,11,.44) 52%, rgba(14,7,11,0) 80%);
  filter:blur(10px);
}
.gate__eyebrow,.gate__sub,.gate__date,.gate__hint,.gate__tag{
  text-shadow:0 1px 4px rgba(12,6,9,.8), 0 2px 22px rgba(0,0,0,.7);
}
.gate__eyebrow{
  margin:0 0 6px;
  font-family:var(--display);
  font-size:clamp(11px,3vw,14px);
  letter-spacing:.46em; text-transform:uppercase;
  color:var(--light-gold);
}
.gate__sub{ margin:0; font-size:clamp(15px,3.9vw,18px); font-style:italic; color:rgba(253,246,236,.82); }
.gate__names{
  margin:clamp(12px,3vw,20px) 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(29px,7.9vw,58px);
  line-height:1.24;
  letter-spacing:.04em;
  color:var(--light-gold);
  text-shadow:0 2px 6px rgba(12,6,9,.75), 0 4px 44px rgba(0,0,0,.8);
}
.amp{
  display:inline-block;
  margin-inline:.14em;
  font-family:var(--serif);
  font-weight:400;
  font-size:.78em;
  color:var(--gold);
}
.gate__date{ margin:0; font-size:clamp(13.5px,3.5vw,16px); color:rgba(253,246,236,.9); }
.gate__date:empty{ display:none; }
.gate__hint{ margin:clamp(16px,4vw,22px) 0 0; font-size:clamp(12px,3.2vw,14px); font-style:italic; color:rgba(253,246,236,.6); }
.gate__tag{
  margin:clamp(6px,1.6vw,10px) 0 0;
  font-family:var(--display);
  font-size:clamp(10.5px,2.8vw,12.5px);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,207,139,.6);
}

/* ------------------------------------------------------------ 2 · intro */

.intro{
  position:fixed; inset:0; z-index:95;
  background:#0d0609;
  opacity:0;
  transition:opacity .7s ease;
}
.intro.is-in{ opacity:1; }
.intro.is-out{ opacity:0; pointer-events:none; }
.intro__video{ width:100%; height:100%; object-fit:cover; background:#0d0609; }
.intro__skip{
  position:absolute; z-index:2;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  padding:9px 20px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(0,0,0,.32);
  color:rgba(255,255,255,.85);
  font-family:var(--display);
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  opacity:0; animation:fadein .6s ease 1.4s forwards;
}
.intro__flash{
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(circle at 50% 56%, #fff8e6 0%, #f6d9a8 42%, rgba(246,217,168,0) 78%);
  opacity:0; pointer-events:none;
}
.intro__flash.is-flash{ animation:flash 1.15s ease-out forwards; }

/* ------------------------------------------------------------ 3 · hero */

.sec--hero .wrap{ padding-top:clamp(96px,20vw,150px); padding-bottom:clamp(150px,28vw,210px); }
.sec--hero .wrap::before{
  content:""; position:absolute; inset:6% -4%; z-index:-1;
  background:radial-gradient(56% 44% at 50% 46%, rgba(14,7,11,.78) 0%, rgba(14,7,11,.5) 54%, rgba(14,7,11,0) 82%);
  filter:blur(14px);
}
.sec--hero .eyebrow,.sec--hero .h2,.sec--hero .lead,.sec--hero .names,.sec--hero .tag{
  text-shadow:0 1px 3px rgba(12,6,9,.95), 0 2px 12px rgba(12,6,9,.85), 0 4px 34px rgba(0,0,0,.8);
}
.sec--hero .tag{ color:rgba(240,222,178,.94); }
.h2:empty,.lead:empty,.tag:empty{ display:none; }

.scroller{
  position:absolute; z-index:4;
  left:50%; bottom:max(30px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,3vw,15px);
  padding:14px 26px 10px;
  border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.scroller.reveal{ transform:translateX(-50%) translateY(26px); }
.scroller.reveal.is-in{ transform:translateX(-50%); animation:bob 3.4s ease-in-out infinite; }
.scroller__label{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(13px,3.6vw,16px);
  letter-spacing:.36em; text-indent:.36em; text-transform:uppercase;
  color:#fdf0c8;
  text-shadow:0 1px 3px rgba(12,6,9,.95), 0 2px 14px rgba(12,6,9,.9), 0 0 26px rgba(232,207,139,.45);
}
.scroller:hover .scroller__label{ color:#fff; }
.scroller__line{
  position:relative;
  width:2px; height:clamp(58px,12vw,74px);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(232,207,139,.85), rgba(232,207,139,.08));
  box-shadow:0 0 10px rgba(232,207,139,.35);
  overflow:hidden;
}
.scroller__line i{
  position:absolute; left:50%; top:0;
  width:6px; height:6px; margin-left:-3px;
  border-radius:50%;
  background:#fff6dc;
  box-shadow:0 0 14px 4px rgba(232,207,139,.9);
  animation:drop 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
.scroller__chevs{ position:relative; display:block; width:26px; height:26px; }
.scroller__chevs b{
  position:absolute; left:50%;
  width:14px; height:14px; margin-left:-7px;
  border-right:2.5px solid #f3e2b4;
  border-bottom:2.5px solid #f3e2b4;
  filter:drop-shadow(0 1px 3px rgba(12,6,9,.9));
  animation:chevFall 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
.scroller__chevs b:nth-child(2){ animation-delay:.24s; }

/* ------------------------------------------------------------ 4 · scratch card */

.scard{
  position:relative;
  width:min(400px, 88vw);
  aspect-ratio:16/10;
  margin:clamp(30px,7vw,44px) auto 0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(232,207,139,.45);
  background:linear-gradient(155deg, #17142a 0%, #2a2450 52%, #17142a 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.5), inset 0 0 40px rgba(232,207,139,.1);
  touch-action:none;
}
.scard__under{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px;
}
.scard__small{
  margin:0;
  font-family:var(--display);
  font-size:clamp(10px,2.8vw,12.5px);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--light-gold);
}
.scard__big{
  margin:8px 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(21px,5.6vw,32px);
  line-height:1.28; letter-spacing:.04em;
  color:#fff;
}
.scard__sub{ margin:6px 0 0; font-size:clamp(12.5px,3.3vw,15px); font-style:italic; color:rgba(253,246,236,.85); }
.scard__cover{
  position:absolute; inset:0;
  width:100%; height:100%;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  transition:opacity .85s ease;
}
.scard.is-done .scard__cover{ opacity:0; pointer-events:none; }
.scard.is-done .scard__under{ animation:pop .85s cubic-bezier(.2,.9,.3,1); }
.scard__hint{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transition:opacity .4s ease;
}
.scard__hint span{
  width:66px; height:66px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  animation:ripple 2.1s ease-out infinite;
}
.scard.is-touched .scard__hint{ opacity:0; }

/* ------------------------------------------------------------ 5 · couple */

.couple-grid{
  display:flex; flex-direction:column;
  gap:clamp(38px,9vw,60px);
  margin-top:clamp(36px,8vw,60px);
}
.photo{ width:min(84%, 440px); }
.photo[data-side="left"]{ align-self:flex-start; }
.photo[data-side="right"]{ align-self:flex-end; }
@media (min-width:820px){
  .photo{ width:min(45%, 390px); }
  .photo + .photo{ margin-top:clamp(-110px,-7vw,-50px); }
}
.photo__media{
  position:relative;
  overflow:hidden;
  background:rgba(18,16,30,.5);
  border-radius:48% 48% 6px 6px / 30% 30% 6px 6px;
  box-shadow:0 0 0 1px rgba(232,207,139,.5), 0 26px 60px rgba(0,0,0,.55);
  transition:transform .8s var(--ease);
}
.photo[data-side="left"] .photo__media{ transform:rotate(-1.8deg); }
.photo[data-side="right"] .photo__media{ transform:rotate(1.8deg); }
.photo__media img{ width:100%; height:auto; transition:transform 1.2s var(--ease); }
.photo__ph{
  aspect-ratio:4/5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(70% 55% at 50% 38%, rgba(232,207,139,.16), transparent 72%), linear-gradient(155deg,#331824,#4d1d33);
}
.photo__ph b{
  font-family:var(--display);
  font-size:clamp(38px,10vw,54px);
  font-weight:600; line-height:1;
  color:rgba(232,207,139,.85);
}
.photo__ph i{
  font-style:normal;
  font-family:var(--display);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(253,246,236,.45);
}
.photo__cap{ padding:clamp(16px,3.6vw,22px) 10px 0; text-align:center; }
.photo__cap b{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(17px,4.4vw,24px);
  letter-spacing:.05em;
  color:#fff;
}
.photo__cap span{
  display:block; margin-top:7px;
  font-style:italic;
  font-size:clamp(13.5px,3.5vw,16px);
  color:rgba(232,207,139,.86);
}

/* ------------------------------------------------------------ 6 · celebrations */

.events-grid{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(40px,10vw,72px);
  margin-top:clamp(32px,7vw,50px);
}
@media (min-width:820px){
  .events-grid{ align-items:stretch; }
  .event[data-side="left"]{ align-self:flex-start; margin-left:clamp(0px,4vw,60px); }
  .event[data-side="right"]{ align-self:flex-end; margin-right:clamp(0px,4vw,60px); }
}
@media (max-width:700px){
  .events-grid{ width:calc(100% + var(--pad) * 1.4); margin-inline:calc(var(--pad) * -.7); }
}

.event{
  width:min(100%, 560px);
  perspective:1800px;
  transition:transform .5s var(--ease);
}
.event__flip{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .9s var(--ease);
}
.event.is-flipped .event__flip{ transform:rotateY(180deg); }
.event.is-flipped .event__face--front,
.event:not(.is-flipped) .event__face--back{ pointer-events:none; }

.event__face{
  position:relative;
  padding:clamp(10px,2.4vw,16px);
  border:1px solid rgba(232,207,139,.6);
  border-radius:5px;
  background:linear-gradient(160deg, rgba(22,19,34,.94), rgba(12,11,22,.97));
  box-shadow:0 26px 64px rgba(0,0,0,.58);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.event__face::before{
  content:""; position:absolute; inset:5px; z-index:3;
  border:1px solid rgba(232,207,139,.3);
  border-radius:3px;
  pointer-events:none;
}
.event__face--back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cnr{
  position:absolute; z-index:4;
  width:15px; height:15px;
  border:0 solid var(--light-gold);
  opacity:.85; pointer-events:none;
}
.cnr--tl{ top:9px; left:9px; border-top-width:1.5px; border-left-width:1.5px; border-top-left-radius:3px; }
.cnr--tr{ top:9px; right:9px; border-top-width:1.5px; border-right-width:1.5px; border-top-right-radius:3px; }
.cnr--bl{ bottom:9px; left:9px; border-bottom-width:1.5px; border-left-width:1.5px; border-bottom-left-radius:3px; }
.cnr--br{ bottom:9px; right:9px; border-bottom-width:1.5px; border-right-width:1.5px; border-bottom-right-radius:3px; }

.event__media{
  position:relative;
  display:block; width:100%;
  padding:0; border:0;
  background:rgba(18,16,30,.5);
  overflow:hidden;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(232,207,139,.28);
}
.event__media[data-full]{ cursor:zoom-in; }
.event__media img{ width:100%; height:auto; transition:transform 1.2s var(--ease); }

/* designed stand-in shown until the real invitation artwork is added */
.invite{
  --c:201,162,39;
  position:relative;
  aspect-ratio:2/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12% 10%;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(90% 60% at 50% 38%, rgba(255,240,210,.35), transparent 70%),
    linear-gradient(170deg, rgba(var(--c),1) 0%, rgba(var(--c),.78) 55%, rgba(30,14,24,.95) 100%);
  transition:transform 1.2s var(--ease);
}
.invite::before{
  content:""; position:absolute; inset:5%;
  border:1px solid rgba(255,246,220,.6);
  border-radius:48% 48% 6px 6px / 22% 22% 6px 6px;
}
.invite__pre{ font-size:clamp(13px,3.4vw,17px); font-style:italic; opacity:.92; }
.invite__title{
  margin:.3em 0 .1em;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px,8vw,52px);
  line-height:1.15;
  color:#fff7e0;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.invite__text{ max-width:24ch; font-size:clamp(13px,3.4vw,16px); line-height:1.6; opacity:.92; }
.invite__names{ margin-top:1.4em; font-family:var(--display); font-size:clamp(15px,4vw,22px); letter-spacing:.06em; color:#fff3cf; }
.invite__tag{ margin-top:.3em; font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.75; }

.event__back{ width:100%; padding:clamp(22px,6vw,38px) clamp(16px,5vw,32px); text-align:center; }
.event__back-eyebrow{
  margin:0;
  font-family:var(--display);
  font-size:clamp(9.5px,2.5vw,11.5px);
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(232,207,139,.85);
}
.event__back-title{
  margin:clamp(8px,2vw,12px) 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(21px,5.4vw,30px);
  line-height:1.24; letter-spacing:.05em;
  color:var(--light-gold);
}
.event__back .rule{ max-width:210px; margin:clamp(14px,3.4vw,20px) auto; }
.event__meta{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(232,207,139,.24); }
.event__meta div{ padding:clamp(12px,3vw,18px) 8px; border-bottom:1px solid rgba(232,207,139,.14); }
.event__meta div:nth-child(odd){ border-right:1px solid rgba(232,207,139,.14); }
.event__meta dt{
  margin:0 0 5px;
  font-family:var(--display);
  font-size:clamp(8.5px,2.2vw,10px);
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,207,139,.85);
}
.event__meta dd{ font-size:clamp(13px,3.4vw,15.5px); line-height:1.45; color:#fff; }
.event__note{ margin:clamp(16px,4vw,22px) 0 0; font-size:clamp(13.5px,3.5vw,16px); font-style:italic; line-height:1.7; color:rgba(253,246,236,.82); }

.event__body{ padding:clamp(22px,5vw,30px) 4px 0; text-align:center; }
.event__title{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(22px,5.6vw,30px);
  line-height:1.24; letter-spacing:.04em;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.event__text{
  margin:10px auto 0;
  max-width:32ch;
  font-size:clamp(15px,3.9vw,17.5px);
  font-style:italic;
  color:rgba(253,246,236,.86);
}

#events .h2,#events .lead,#events .eyebrow,#events .event__title,#events .event__text,
#events .sec-head .rule i,#events .sec-head .rule span{
  transition:color .6s ease, text-shadow .6s ease, background .6s ease;
}
#events.is-light .h2,#events.is-light .event__title{ color:#43210d; text-shadow:0 1px 0 rgba(255,247,225,.35); }
#events.is-light .lead,#events.is-light .event__text{ color:#5a3016; text-shadow:0 1px 0 rgba(255,247,225,.3); }
#events.is-light .eyebrow{ color:#7a4a1c; text-shadow:0 1px 0 rgba(255,247,225,.35); }
#events.is-light .sec-head .rule i{ background:linear-gradient(90deg, transparent, rgba(90,48,22,.55), transparent); }
#events.is-light .sec-head .rule span{ color:#8a5520; }

/* ------------------------------------------------------------ 7 · families, 8 · venue */

.panel{
  border:1px solid var(--panel-line);
  background:var(--panel);
  text-align:center;
}
.family-grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(18px,4.4vw,30px);
  margin-top:clamp(30px,7vw,46px);
}
@media (min-width:760px){ .family-grid{ grid-template-columns:repeat(2,1fr); } }
.family{
  padding:clamp(28px,7vw,44px) clamp(20px,5vw,32px);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.family__side{
  margin:0 0 clamp(12px,3vw,18px);
  font-family:var(--display);
  font-size:clamp(10px,2.7vw,12px);
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(232,207,139,.85);
}
.family__name{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(19px,4.8vw,28px);
  line-height:1.32; letter-spacing:.04em;
  color:var(--light-gold);
}
.family__parents{ margin:clamp(12px,3vw,18px) 0 0; font-size:clamp(15.5px,4vw,18.5px); color:#fff; }
.family__note{ margin:6px 0 0; font-size:clamp(12.5px,3.2vw,14px); font-style:italic; color:rgba(253,246,236,.62); }
.family__grand{
  margin:clamp(18px,4.4vw,24px) auto 0;
  padding-top:clamp(16px,4vw,22px);
  max-width:380px;
  border-top:1px solid rgba(232,207,139,.24);
}
.family__grand .family__side{ margin-bottom:8px; }
.family__grand .family__parents{ margin:0; }

.venue{
  max-width:560px;
  margin:clamp(30px,7vw,44px) auto 0;
  padding:clamp(30px,7vw,46px) clamp(22px,5.5vw,38px);
  border-radius:18px;
  box-shadow:0 24px 62px rgba(0,0,0,.46);
}
.venue__name{ margin:0; font-family:var(--display); font-size:clamp(23px,6.2vw,34px); line-height:1.25; color:#fff; }
.venue__addr{ margin:clamp(10px,2.6vw,16px) 0 0; font-size:clamp(15px,3.9vw,17.5px); line-height:1.7; color:rgba(253,246,236,.88); }

/* ------------------------------------------------------------ 9 · blessings */

.blessing{
  display:flex; flex-direction:column; align-items:center;
  width:min(100%, 560px);
  margin:clamp(28px,6vw,42px) auto 0;
}
.blessing__input{
  width:100%;
  padding:clamp(16px,4vw,20px) clamp(16px,4vw,22px);
  border:1px solid rgba(232,207,139,.42);
  border-radius:3px;
  background:rgba(18,16,30,.55);
  color:var(--cream);
  font-family:var(--serif);
  font-size:clamp(16px,4.1vw,18px);
  line-height:1.65;
  resize:vertical;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.blessing__input::placeholder{ color:rgba(253,246,236,.5); font-style:italic; }
.blessing__input:focus{
  outline:none;
  border-color:var(--light-gold);
  background:rgba(18,16,30,.7);
  box-shadow:0 0 0 3px rgba(232,207,139,.14);
}
.blessing__note{ margin:10px 0 0; min-height:1.2em; font-size:clamp(13px,3.4vw,15px); font-style:italic; color:rgba(253,246,236,.75); }
.blessing__note.is-warn{ color:#f0b9a0; }
.blessing .btn{ margin-top:clamp(18px,4vw,24px); }

/* ------------------------------------------------------------ 10 · footer */

.sec--footer{ min-height:auto; }
.sec--footer .wrap{ padding-block:clamp(80px,18vw,140px); }
.foot-date{
  margin:clamp(8px,2vw,12px) 0 0;
  font-family:var(--display);
  font-size:clamp(13px,3.5vw,17px);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(253,246,236,.9);
}
.foot-sign{ margin:clamp(16px,4vw,24px) 0 0; font-style:italic; font-size:clamp(17px,4.4vw,22px); color:var(--light-gold); }

/* ------------------------------------------------------------ music, petals, lightbox */

.music{
  position:fixed; z-index:80;
  right:max(14px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(232,207,139,.5);
  border-radius:50%;
  background:rgba(18,16,30,.68);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  cursor:pointer;
  transition:transform .3s, border-color .3s;
}
.music:hover{ transform:scale(1.07); border-color:var(--light-gold); }
.music__bars{ display:flex; align-items:flex-end; gap:3px; height:17px; }
.music__bars i{
  width:2.5px; height:5px;
  border-radius:2px;
  background:var(--light-gold);
  animation:eq .95s ease-in-out infinite;
}
.music__bars i:nth-child(2){ animation-delay:.16s; }
.music__bars i:nth-child(3){ animation-delay:.32s; }
.music__bars i:nth-child(4){ animation-delay:.48s; }
.music.is-muted .music__bars i{ animation-play-state:paused; height:4px; opacity:.42; }

#petals{ position:fixed; inset:0; z-index:70; pointer-events:none; }

.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,4vw,40px);
  background:rgba(10,5,8,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .4s ease;
}
.lightbox.is-in{ opacity:1; }
.lightbox__img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  transform:scale(.96);
  transition:transform .45s var(--ease);
}
.lightbox.is-in .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute;
  top:max(12px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(0,0,0,.4);
  color:#fff; font-size:26px; line-height:1;
  cursor:pointer;
}

/* ------------------------------------------------------------ scroll reveal */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--left{ transform:translate3d(-46px,26px,0) rotate(-3deg); }
.reveal--right{ transform:translate3d(46px,26px,0) rotate(3deg); }
.reveal--left,.reveal--right{
  transition:opacity 1s var(--ease), transform 1.15s cubic-bezier(.16,.84,.28,1);
}
.reveal--left.is-in,.reveal--right.is-in{ transform:none; }
.couple-grid .reveal:nth-child(2),.events-grid .reveal:nth-child(2),.family-grid .reveal:nth-child(2){ transition-delay:.11s; }
.couple-grid .reveal:nth-child(3),.events-grid .reveal:nth-child(3){ transition-delay:.22s; }
.couple-grid .reveal:nth-child(4),.events-grid .reveal:nth-child(4){ transition-delay:.33s; }

/* ------------------------------------------------------------ keyframes */

@keyframes shimmer{ 0%,62%{ left:-140%; } 100%{ left:160%; } }
@keyframes breathe{
  0%,100%{ box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 0 0 rgba(232,207,139,.3); }
  50%{ box-shadow:0 10px 44px rgba(0,0,0,.4), 0 0 0 14px rgba(232,207,139,0); }
}
@keyframes slowzoom{ from{ transform:scale(1.06); } to{ transform:scale(1.16); } }
@keyframes fadein{ to{ opacity:1; } }
@keyframes flash{
  0%{ opacity:0; transform:scale(.7); }
  38%{ opacity:1; transform:scale(1.15); }
  100%{ opacity:0; transform:scale(1.5); }
}
@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(7px); }
}
@keyframes drop{
  0%{ transform:translateY(-8px); opacity:0; }
  18%{ opacity:1; }
  72%{ transform:translateY(64px); opacity:1; }
  100%{ transform:translateY(72px); opacity:0; }
}
@keyframes chevFall{
  0%{ transform:rotate(45deg) translateY(-6px); opacity:0; }
  35%{ opacity:1; }
  75%,100%{ transform:rotate(45deg) translateY(6px); opacity:0; }
}
@keyframes pop{
  0%{ transform:scale(.9); opacity:.4; }
  60%{ transform:scale(1.03); opacity:1; }
  100%{ transform:scale(1); }
}
@keyframes ripple{
  0%{ transform:scale(.55); opacity:.9; }
  100%{ transform:scale(1.7); opacity:0; }
}
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:16px; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------ built-in door intro */

.doors{ position:absolute; inset:0; z-index:1; overflow:hidden; background:#1a0f14; }
.doors__scene{
  position:absolute; inset:0;
  background:#2a1830 center/cover no-repeat;
  transform:scale(1.15);
  filter:brightness(1.05);
}
.doors__scene::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(40% 45% at 50% 55%, rgba(255,226,170,.9), rgba(246,190,130,.35) 55%, transparent 80%);
}
.doors__seam{
  position:absolute; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(255,236,190,.2), rgba(255,226,160,.95) 50%, rgba(255,236,190,.4));
  box-shadow:0 0 18px 4px rgba(255,214,140,.55);
  opacity:.35;
}
.doors__stage{
  position:absolute; inset:0;
  perspective:1400px;
  transform-origin:var(--ox) var(--oy);
}
.door{ position:absolute; z-index:3; }
.door svg{ display:block; width:100%; height:100%; }
.door--l{ transform-origin:left center; }
.door--r{ transform-origin:right center; }
.door--r svg{ transform:scaleX(-1); }
.doors__wall{ position:absolute; inset:0; z-index:2; width:100%; height:100%; }
.doors__glow{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(circle at var(--ox) var(--oy), #fff8e6 0%, rgba(246,217,168,.85) 30%, rgba(246,217,168,0) 70%);
  opacity:0;
}

.ribbon{
  position:absolute; z-index:4;
  top:calc(var(--ry) - var(--rh) / 2); height:var(--rh);
  background:linear-gradient(180deg, #cdb894 0%, #f3e9d8 16%, #fffdf8 38%, #efe3cf 60%, #fbf4e8 80%, #c9b28c 100%);
  box-shadow:0 6px 14px rgba(70,50,30,.3);
}
.ribbon--l{ left:0; right:50%; }
.ribbon--r{ left:50%; right:0; }
.bow{
  position:absolute; z-index:5;
  left:50%; top:var(--ry);
  width:var(--bw); height:auto;
  transform:translate(-50%,-37%);
  filter:drop-shadow(0 10px 18px rgba(70,50,30,.38));
}

/* timeline (5.4s): settle · bow unties · ribbon slides away · seam glows ·
   doors swing open · push through the arch */
.doors.is-playing .doors__stage{ animation:stagePush 5.4s forwards; }
.doors.is-playing .doors__scene{ animation:scenePush 5.4s forwards; }
.doors.is-playing .bow{ animation:bowUntie 1.2s cubic-bezier(.5,0,.3,1) .6s forwards; }
.doors.is-playing .ribbon--l{ animation:ribbonL 1.1s cubic-bezier(.55,0,.3,1) 1s forwards; }
.doors.is-playing .ribbon--r{ animation:ribbonR 1.1s cubic-bezier(.55,0,.3,1) 1s forwards; }
.doors.is-playing .doors__seam{ animation:seam .6s ease-in 1.5s forwards; }
.doors.is-playing .door--l{ animation:doorL 1.8s cubic-bezier(.45,0,.25,1) 2s forwards; }
.doors.is-playing .door--r{ animation:doorR 1.8s cubic-bezier(.45,0,.25,1) 2s forwards; }
.doors.is-playing .doors__glow{ animation:glow 5.4s forwards; }

@keyframes stagePush{
  0%{ transform:scale(1.03); animation-timing-function:ease-out; }
  50%{ transform:scale(1); animation-timing-function:cubic-bezier(.5,0,.4,1); }
  100%{ transform:scale(2.6); }
}
@keyframes scenePush{
  0%,50%{ transform:scale(1.15); filter:brightness(1.05); animation-timing-function:cubic-bezier(.45,0,.35,1); }
  100%{ transform:scale(1.55); filter:brightness(1.3); }
}
@keyframes bowUntie{
  0%{ transform:translate(-50%,-37%) scale(1) rotate(0); opacity:1; }
  28%{ transform:translate(-50%,-40%) scale(1.07) rotate(-3deg); opacity:1; }
  100%{ transform:translate(-50%,20%) scale(.35) rotate(22deg); opacity:0; }
}
@keyframes ribbonL{ to{ transform:translateX(-104%); opacity:0; } }
@keyframes ribbonR{ to{ transform:translateX(104%); opacity:0; } }
@keyframes seam{ to{ opacity:1; } }
@keyframes doorL{ to{ transform:rotateY(-86deg); } }
@keyframes doorR{ to{ transform:rotateY(86deg); } }
@keyframes glow{
  0%,78%{ opacity:0; }
  100%{ opacity:.9; }
}

/* ------------------------------------------------------------ video → hero dissolve */

.intro.is-dissolve{
  opacity:0;
  pointer-events:none;
  transition:opacity 2s cubic-bezier(.45,0,.25,1);
}
.intro__video{ transition:transform 2s cubic-bezier(.3,0,.2,1), filter 2s ease; }
.intro.is-dissolve .intro__video{ transform:scale(1.1); filter:brightness(1.12) saturate(1.05); }
.intro__flash.is-glow{ animation:softGlow 2s ease-out forwards; }

/* the palace picture drifts in from a soft, close view and settles */
.hero__still.is-arriving{
  animation:arrive 2.6s cubic-bezier(.2,.7,.2,1) both, slowzoom 26s ease-in-out 2.6s infinite alternate;
}

@keyframes softGlow{
  0%{ opacity:0; transform:scale(.9); }
  35%{ opacity:.42; }
  100%{ opacity:0; transform:scale(1.3); }
}
@keyframes arrive{
  from{ transform:scale(1.2); filter:blur(6px) brightness(1.18); }
  to{ transform:scale(1.06); filter:none; }
}

/* hover lifts only where there is a real pointer — on phones a tap left them stuck,
   and the extra layers made iPhone show the picture through the flipping card */
@media (hover:hover) and (pointer:fine){
  .photo:hover .photo__media{ transform:rotate(0) translateY(-6px); }
  .photo:hover .photo__media img{ transform:scale(1.035); }
  .event:hover{ transform:translateY(-5px); }
  .event:hover .event__media img,
  .event:hover .invite{ transform:scale(1.03); }
}

/* iPhone needs each face (and its picture) told explicitly to hide its back */
.event__flip{ -webkit-transform-style:preserve-3d; }
.event__face--front{ transform:rotateY(0deg) translateZ(1px); }
.event__face--back{ transform:rotateY(180deg) translateZ(1px); }