/* AIRA rose-gold-blush stylesheet — FRAME-SCROLL */
/* ============================================================
   ROSE GOLD BLUSH — soft romantic luxury
   Identity: blush + champagne + rose-gold, pillowy rounded cards,
   glowing bloom light, satin ribbon, petal rain. Airy and warm.
   ============================================================ */

:root{
  --blush:#FBEEE9;
  --blush-2:#F6DED5;
  --champagne:#F7E9D6;
  --rose:#C98B76;
  --rose-dp:#A9634F;
  --rose-lt:#E4B5A4;
  --ink:#4A3833;
  --ink-soft:#7A635C;
  --cream:#FFFCFA;
  --line:#EEDACF;
  --glow:rgba(201,139,118,.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Karla', 'Helvetica Neue', sans-serif;
  background:var(--blush);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.cd-num,.rt-time,.rg-mono{font-family:'Italiana', Georgia, serif; font-weight:400;}

/* ---------- RIBBON & BOW (the opening) ---------- */
.ribbon-gate{
  position:fixed; inset:0; height:100vh; height:100dvh; z-index:999;
  cursor:pointer; overflow:hidden; background:var(--blush);
  touch-action:none; overscroll-behavior:none;
}
.ribbon-gate.open{pointer-events:none; background:transparent;}
.rg-half{
  position:absolute; top:0; bottom:0; width:50.3%;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--cream) 0%, var(--blush) 55%, var(--blush-2) 100%);
  transition:transform 1.5s cubic-bezier(.66,0,.2,1), opacity 1.5s ease;
  will-change:transform;
}
.rg-left{left:0; box-shadow:14px 0 40px rgba(169,99,79,.12);}
.rg-right{right:0; box-shadow:-14px 0 40px rgba(169,99,79,.12);}
.ribbon-gate.open .rg-left{transform:translateX(-102%);}
.ribbon-gate.open .rg-right{transform:translateX(102%);}

/* the satin ribbon down the centre */
.rg-ribbon{
  position:absolute; top:0; bottom:0; left:50%; width:54px; transform:translateX(-50%);
  background:
    linear-gradient(90deg,
      rgba(169,99,79,.35) 0%, var(--rose) 22%, var(--rose-lt) 46%,
      var(--rose) 70%, rgba(169,99,79,.35) 100%);
  box-shadow:0 0 26px rgba(169,99,79,.3);
  transition:transform 1.1s cubic-bezier(.66,0,.2,1), opacity .9s ease;
  z-index:2;
}
.ribbon-gate.open .rg-ribbon{transform:translateX(-50%) scaleY(0); opacity:0; transform-origin:50% 50%;}

/* the bow */
.rg-bow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:190px; height:96px; z-index:3; pointer-events:none;
  transition:transform 1s cubic-bezier(.66,0,.2,1), opacity .8s ease;
}
.ribbon-gate.open .rg-bow{opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(-8deg);}
.bow-loop{
  position:absolute; top:14px; width:74px; height:56px;
  background:linear-gradient(140deg, var(--rose-lt), var(--rose) 55%, var(--rose-dp));
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.12);
}
.bow-l{left:0; border-radius:60% 22% 46% 60% / 62% 40% 60% 38%; transform:rotate(-8deg);}
.bow-r{right:0; border-radius:22% 60% 60% 46% / 40% 62% 38% 60%; transform:rotate(8deg);}
.bow-knot{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:44%;
  background:linear-gradient(150deg,var(--rose),var(--rose-dp));
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.bow-tail{
  position:absolute; top:58px; width:22px; height:52px;
  background:linear-gradient(180deg,var(--rose),var(--rose-lt));
}
.bow-tl{left:64px; transform:rotate(12deg) skewX(-6deg); border-radius:4px 4px 0 40%;}
.bow-tr{right:64px; transform:rotate(-12deg) skewX(6deg); border-radius:4px 4px 40% 0;}

/* rose-gold glow bloom released on the untie */
.rg-glow{
  position:absolute; top:50%; left:50%; width:10px; height:10px; z-index:1;
  transform:translate(-50%,-50%); border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,236,226,.95), var(--glow) 40%, transparent 70%);
  transition:transform 1.5s ease-out, opacity 1.5s ease-out;
}
.ribbon-gate.open .rg-glow{opacity:1; transform:translate(-50%,-50%) scale(180);}

.rg-caption{
  position:absolute; left:50%; bottom:15%; transform:translateX(-50%);
  z-index:4; text-align:center; pointer-events:none; transition:opacity .6s ease;
  /* a soft blush plate so the monogram stays readable where it crosses
     the satin ribbon */
  padding:20px 40px; border-radius:999px;
  background:rgba(255,252,250,.92); backdrop-filter:blur(3px);
  box-shadow:0 12px 34px rgba(169,99,79,.16);
}
.ribbon-gate.open .rg-caption{opacity:0;}
.rg-mono{font-size:30px; color:var(--rose-dp); letter-spacing:.12em; white-space:nowrap;}
.rg-tap{
  margin-top:12px; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose); animation:breathe 2.8s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.45;} 50%{opacity:1;}}

/* ---------- PETAL RAIN (kept - it is this template's signature) ---------- */
#petalContainer{position:fixed; inset:0; pointer-events:none; z-index:3; overflow:hidden;}
.petal{position:absolute; top:-24px; will-change:transform,opacity; opacity:0;}
@keyframes petalDrift{
  0%{transform:translate3d(0,-24px,0) rotate(0deg); opacity:0;}
  12%{opacity:.85;}
  100%{transform:translate3d(var(--dx),105vh,0) rotate(var(--spin)); opacity:0;}
}
#confettiCanvas{position:fixed; inset:0; pointer-events:none; z-index:500;}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:70px 22px; overflow:hidden;
  background:linear-gradient(180deg, var(--cream) 0%, var(--blush) 60%, var(--blush-2) 100%);
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.24;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,252,250,.7), rgba(246,222,213,.78));}
.hero-bloom{
  position:absolute; top:-14%; left:50%; transform:translateX(-50%);
  width:min(760px,120vw); height:min(760px,120vw); pointer-events:none;
  background:radial-gradient(circle, rgba(255,231,220,.85), transparent 62%);
  animation:bloomPulse 7s ease-in-out infinite;
}
@keyframes bloomPulse{0%,100%{opacity:.55; transform:translateX(-50%) scale(1);} 50%{opacity:.9; transform:translateX(-50%) scale(1.08);}}

/* the pillowy hero card - Rose Gold Blush's core shape language */
.hero-card{
  position:relative; z-index:1; width:100%; max-width:620px; text-align:center;
  background:rgba(255,252,250,.72); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:34px;
  padding:52px 30px 46px;
  box-shadow:0 26px 70px rgba(169,99,79,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
.sprig{font-size:20px; color:var(--rose-lt); margin-bottom:16px;}
.eyebrow{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--rose); margin-bottom:16px;}
.names{font-size:clamp(38px,8vw,68px); line-height:1.12; color:var(--ink); letter-spacing:.01em;}
.names .amp{display:block; font-size:.34em; color:var(--rose); font-style:italic; margin:8px 0; letter-spacing:.2em; text-transform:lowercase;}
.date-line{margin-top:18px; font-size:16px; color:var(--ink-soft); font-style:italic; letter-spacing:.03em;}

/* ---------- SCRATCH ---------- */
.scratch-wrap{position:relative; width:300px; height:118px; margin:32px auto 0;}
.scratch-under{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--cream); border:1px solid var(--line); border-radius:22px;
}
.scratch-under .d{font-family:'Italiana',serif; font-size:24px; color:var(--rose-dp);}
#scratchCanvas{position:relative; z-index:2; display:block; border-radius:22px; touch-action:none; cursor:grab;}
.scratch-hint{margin-top:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose);}

/* ---------- COUNTDOWN (soft pills) ---------- */
.countdown{display:flex; gap:10px; justify-content:center; margin-top:32px; flex-wrap:wrap;}
.cd-pill{
  min-width:74px; padding:14px 10px; border-radius:20px;
  background:linear-gradient(180deg,var(--cream),var(--champagne));
  border:1px solid var(--line); box-shadow:0 6px 16px rgba(169,99,79,.1);
}
.cd-num{font-size:28px; color:var(--rose-dp); line-height:1;}
.cd-label{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px;}

/* ---------- SECTIONS ---------- */
.section{max-width:680px; margin:0 auto; padding:86px 22px; text-align:center;}
.section h2{font-size:clamp(28px,5.4vw,44px); color:var(--ink);}
.petal-divider{display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0 32px;}
.petal-divider span{width:56px; height:1px; background:linear-gradient(90deg,transparent,var(--rose-lt),transparent);}
.petal-divider i{font-style:normal; color:var(--rose); font-size:13px;}
.lead{font-size:17px; line-height:1.95; color:var(--ink-soft);}

.soft-card{
  background:var(--cream); border:1px solid var(--line); border-radius:26px;
  padding:32px 26px; box-shadow:0 14px 40px rgba(169,99,79,.1);
}

/* ---------- RIBBON TIMELINE (alternating) ---------- */
.ribbon-timeline{position:relative; padding:8px 0;}
.ribbon-timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--rose-lt) 8%,var(--rose-lt) 92%,transparent); border-radius:3px;
}
.rt-item{position:relative; width:50%; padding:14px 26px; box-sizing:border-box;}
.rt-item:nth-child(odd){left:0; text-align:right;}
.rt-item:nth-child(even){left:50%; text-align:left;}
.rt-item::after{
  content:''; position:absolute; top:32px; width:13px; height:13px; border-radius:50%;
  background:var(--rose); border:3px solid var(--cream); box-shadow:0 0 0 2px var(--rose-lt);
}
.rt-item:nth-child(odd)::after{right:-6.5px;}
.rt-item:nth-child(even)::after{left:-6.5px;}
.rt-card{
  background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:18px 20px;
  box-shadow:0 10px 26px rgba(169,99,79,.09);
  transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
}
.rt-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(169,99,79,.16);}
.rt-time{font-size:19px; color:var(--rose-dp);}
.rt-title{font-size:15px; color:var(--ink); margin-top:4px;}

/* ---------- GALLERY MOSAIC ---------- */
.mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.mosaic > div{
  position:relative; aspect-ratio:1; border-radius:20px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.1em;
  color:var(--rose-dp); background:linear-gradient(150deg,var(--champagne),var(--blush-2));
  border:1px solid var(--line);
  transition:transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s ease;
}
/* one wide feature tile keeps the grid from feeling mechanical */
.mosaic > div:nth-child(1){grid-column:span 2; aspect-ratio:2/1;}
.mosaic > div:hover{transform:scale(1.03); box-shadow:0 16px 36px rgba(169,99,79,.18);}
.mosaic img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-remove{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:rgba(255,252,250,.9); color:var(--rose-dp); border:1px solid var(--line);
  font-size:12px; line-height:1; cursor:pointer;
}

/* ---------- MAP ---------- */
.map-frame{width:100%; height:290px; border-radius:26px; overflow:hidden; margin-top:24px; border:1px solid var(--line); box-shadow:0 14px 36px rgba(169,99,79,.12);}
.map-frame iframe{width:100%; height:100%; border:0;}

/* ---------- EDITORS ---------- */
.editor{background:var(--cream); border:1px solid var(--line); border-radius:24px; padding:24px 22px; margin-top:22px; text-align:left; box-shadow:0 10px 30px rgba(169,99,79,.08);}
.ed-label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-dp); margin-bottom:12px;}
.ed-row{display:flex; gap:10px; flex-wrap:wrap;}
.editor input{
  flex:1; min-width:180px; padding:13px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--blush); color:var(--ink); font-family:'Karla',sans-serif; font-size:15px;
}
.editor input:focus{outline:none; border-color:var(--rose-lt); box-shadow:0 0 0 3px rgba(228,181,164,.3);}
.editor button{
  padding:13px 26px; border:none; border-radius:999px;
  background:linear-gradient(135deg,var(--rose-lt),var(--rose) 55%,var(--rose-dp));
  color:#fff; font-family:'Karla',sans-serif; font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:0 8px 20px rgba(169,99,79,.28); transition:transform .4s ease, box-shadow .4s ease;
}
.editor button:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(169,99,79,.36);}
.ed-hint{font-size:13px; color:var(--ink-soft); margin-top:10px;}
.ed-error{font-size:13px; color:#C0574F; margin-top:8px; display:none;}
.ed-success{font-size:13px; color:var(--rose-dp); margin-top:8px; display:none;}

/* ---------- RSVP ---------- */
.rsvp{
  background:linear-gradient(180deg,var(--cream),var(--champagne));
  border:1px solid var(--line); border-radius:30px; padding:40px 26px; text-align:left;
  box-shadow:0 20px 50px rgba(169,99,79,.14);
}
.rsvp label{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose-dp); margin-top:18px;}
.rsvp label:first-child{margin-top:0;}
.rsvp input,.rsvp select,.rsvp textarea{
  width:100%; padding:14px 18px; margin-top:9px; border-radius:20px; border:1px solid var(--line);
  background:var(--cream); color:var(--ink); font-family:'Karla',sans-serif; font-size:16px;
}
.rsvp textarea{border-radius:20px;}
.rsvp input:focus,.rsvp select:focus,.rsvp textarea:focus{outline:none; border-color:var(--rose-lt); box-shadow:0 0 0 3px rgba(228,181,164,.3);}
.rsvp button{
  width:100%; margin-top:26px; padding:16px; border:none; border-radius:999px;
  background:linear-gradient(135deg,var(--rose-lt),var(--rose) 55%,var(--rose-dp));
  color:#fff; font-family:'Karla',sans-serif; font-weight:600; font-size:15px; letter-spacing:.08em;
  cursor:pointer; box-shadow:0 10px 26px rgba(169,99,79,.3);
  transition:transform .4s ease, box-shadow .4s ease;
}
.rsvp button:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(169,99,79,.4);}
.rsvp-success{display:none; margin-top:16px; color:var(--rose-dp);}

/* ---------- MUSIC BUTTON ---------- */
.music-toggle{
  position:fixed; bottom:22px; right:22px; width:54px; height:54px; border-radius:50%; z-index:60;
  border:none; background:linear-gradient(135deg,var(--rose-lt),var(--rose-dp));
  color:#fff; font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(169,99,79,.35);
}
.music-toggle.playing{animation:softSpin 6s linear infinite;}
@keyframes softSpin{to{transform:rotate(360deg);}}

footer{
  padding:46px 22px; text-align:center; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--rose); border-top:1px solid var(--line);
}

/* ---------- SCROLL REVEAL (soft fade + gentle rise) ---------- */
.reveal{opacity:0; transform:translateY(24px) scale(.985); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
  .section{padding:64px 18px;}
  .hero{padding:56px 16px;}
  .hero-card{padding:38px 20px 34px; border-radius:28px;}
  .mosaic{grid-template-columns:repeat(2,1fr);}
  .mosaic > div:nth-child(1){grid-column:span 2; aspect-ratio:2/1;}
  .ribbon-timeline::before{left:14px;}
  .rt-item{width:100%; left:0 !important; text-align:left !important; padding:10px 0 10px 40px;}
  .rt-item::after{left:8px !important; right:auto !important; top:26px;}
  .rg-bow{width:150px; transform:translate(-50%,-50%) scale(.85);}
  .cd-pill{min-width:66px;}
  .scratch-wrap{width:268px; height:110px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important;}
}

/* ==========================================================
   SCRATCH-TO-REVEAL  (this block only - nothing above changed)
   ========================================================== */
/* ---------- rose gold foil ---------- */
#scratchCanvas{box-shadow:0 6px 18px rgba(169,99,79,.22);}
/* the hero card behind this sits on a backdrop-filter; giving the foil its
   own compositing layer stops that blur being recomputed on every scratch
   frame, which is what was costing frames on wide desktop viewports */
.scratch-wrap{isolation:isolate; contain:paint;}
#scratchCanvas{will-change:transform; transform:translateZ(0);}

/* ---------- scratch material flecks (shared, body-level) ---------- */
.aira-fleck{
  position:fixed; z-index:1200; pointer-events:none; opacity:1;
  animation:airaFleck .95s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes airaFleck{
  0%{opacity:.95; transform:translate(0,0) rotate(0deg) scale(1);}
  100%{opacity:0; transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.5);}
}
@media (prefers-reduced-motion:reduce){ .aira-fleck{display:none;} }

/* ---------- staged date reveal: day, month, year, label, glow, continue ---------- */
/* the reveal panel stacks: date line, then the label, then Continue */
.scratch-under{flex-direction:column;}
.scratch-under .dr-day,.scratch-under .dr-month,.scratch-under .dr-year{
  display:inline-block; opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,1,.36,1);
}
.scratch-under .dr-month{margin:0 .34em;}
.scratch-under.s1 .dr-day{opacity:1; transform:none;}
.scratch-under.s2 .dr-month{opacity:1; transform:none;}
.scratch-under.s3 .dr-year{opacity:1; transform:none;}
.scratch-under .dr-label{
  display:block; margin-top:7px; font-size:8px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--rose);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.scratch-under.s4 .dr-label{opacity:1; transform:none;}
.scratch-under .dr-cta{
  margin-top:9px; padding:6px 14px; font:inherit; font-size:9px; line-height:1;
  letter-spacing:.22em; text-transform:uppercase; cursor:pointer; border-radius:0;
  color:var(--rose-dp); background:transparent; border:1px solid var(--rose-lt);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
             background .35s ease, color .35s ease;
}
.scratch-under.s5 .dr-cta{opacity:1; transform:none;}
.scratch-under .dr-cta:hover{background:var(--rose-lt); color:#FFFCFA;}
.scratch-under.s5{animation:drGlow9959 1.6s ease-out;}
@keyframes drGlow9959{
  0%{box-shadow:0 0 0 0 rgba(201,139,118,.45);}
  40%{box-shadow:0 0 34px 6px rgba(201,139,118,.45);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

/* the prompt steps back once the guest starts working the surface */
.is-scratching + .scratch-hint,.is-scratching ~ .scratch-hint{opacity:.35;}

/* ==========================================================================
   AIRA MOTION SYSTEM
   Appended block. Changes how things move, never what the template looks
   like - no colour, font family, layout or decoration is altered here.
   ========================================================================== */

:root{
  /* Authored easing. The default `ease` is symmetrical, which is why stock
     web motion reads as cheap: real objects accelerate hard and land soft. */
  --e-drape :cubic-bezier(.62,.02,.14,1);   /* heavy physical panels        */
  --e-silk  :cubic-bezier(.16,.86,.22,1);   /* long decelerate, big surfaces */
  --e-lift  :cubic-bezier(.19,1,.22,1);     /* type and cards arriving       */
  --e-settle:cubic-bezier(.40,.90,.30,1);   /* micro corrections             */
  /* Duration scale tied to how far a thing travels. */
  --t-1:260ms; --t-2:520ms; --t-3:820ms; --t-4:1250ms; --t-5:1900ms;
}

/* ---------- typographic rendering (quality only, no faces changed) ---------- */
html{-webkit-text-size-adjust:100%;}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis-weight:none;
}
h1,h2,h3{text-wrap:balance;}
p,.lead{text-wrap:pretty;}

/* ---------- masked word reveal for display type ---------- */
.aira-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.18em; margin-bottom:-.18em;   /* room for descenders */
}
.aira-w.aira-w-block{display:block;}
.aira-w > i{
  display:inline-block; font-style:inherit; color:inherit;
  transform:translate3d(0,112%,0) rotate(1.6deg); opacity:0; filter:blur(9px);
  transition:transform var(--t-4) var(--e-lift),
             opacity 900ms var(--e-lift),
             filter 900ms var(--e-lift);
  transition-delay:calc(var(--wi,0) * 105ms + 170ms);
}
.aira-w > i.aira-w-block{display:block;}
.aira-w.on > i{transform:none; opacity:1; filter:blur(0);}

/* ---------- hero beats ---------- */
.aira-beat{
  opacity:0; transform:translate3d(0,var(--beat-rise,22px),0);
  filter:blur(var(--beat-blur,5px));
  transition:opacity var(--t-3) var(--e-lift),
             transform var(--t-3) var(--e-lift),
             filter var(--t-3) var(--e-lift);
  transition-delay:calc(var(--bi,0) * 135ms);
}
.aira-beat.aira-on{opacity:1; transform:none; filter:blur(0);}

/* ---------- scroll storytelling ---------- */
.aira-rise{
  opacity:0; transform:translate3d(0,34px,0);
  transition:opacity var(--t-3) var(--e-lift), transform var(--t-3) var(--e-lift);
}
.aira-rise.aira-in{opacity:1; transform:none;}
.aira-stagger{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity var(--t-3) var(--e-lift), transform var(--t-3) var(--e-lift);
  transition-delay:calc(var(--i,0) * 85ms + 110ms);
}
.aira-in > .aira-stagger,
.in > .aira-stagger,
.visible > .aira-stagger{opacity:1; transform:none;}

/* ---------- the opening: weight, then release ---------- */
.aira-gate.aira-press{transform:scale(.9955); transition:transform 200ms var(--e-settle);}
.aira-seam{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  z-index:6; pointer-events:none; opacity:0; filter:blur(1px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.92),transparent);
}
.aira-seam.aira-seam-h{
  top:50%; bottom:auto; left:0; right:0; width:auto; height:2px; margin:-1px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
}
.aira-gate.aira-opening .aira-seam{animation:airaSeamV 950ms var(--e-silk) forwards;}
.aira-gate.aira-opening .aira-seam.aira-seam-h{animation:airaSeamH 950ms var(--e-silk) forwards;}
@keyframes airaSeamV{0%{opacity:0;transform:scaleY(.15);}20%{opacity:1;}100%{opacity:0;transform:scaleY(1.2);}}
@keyframes airaSeamH{0%{opacity:0;transform:scaleX(.15);}20%{opacity:1;}100%{opacity:0;transform:scaleX(1.2);}}

@media (prefers-reduced-motion:reduce){
  .aira-w > i,.aira-beat,.aira-rise,.aira-stagger{
    transition:none !important; transform:none !important;
    opacity:1 !important; filter:none !important;
  }
  .aira-seam{display:none;}
}

/* ---------- Rose Gold Blush: the ribbon releases before the halves move ---------- */
.rg-half{transition:transform var(--t-5) var(--e-drape), opacity var(--t-5) var(--e-silk) !important;}
.ribbon-gate.open .rg-right{transition-delay:110ms;}
.rg-ribbon{transition:transform 1.05s var(--e-drape), opacity 820ms var(--e-silk) !important;}
.rg-bow{transition:transform 1.1s var(--e-drape), opacity 760ms var(--e-silk) !important;}
.names{letter-spacing:.004em; line-height:1.08;}


/* ============================================================
   EXTRA SECTIONS
   ------------------------------------------------------------
   All optional. aira-bind.js removes the whole
   <section data-aira-section="..."> when the couple left that
   detail blank, so no section here needs a hidden state — on
   the preview page they simply show their demo wording.
   ============================================================ */

.couple-details{
  display:flex; align-items:center; justify-content:center;
  gap:26px; flex-wrap:wrap; margin-top:8px;
}
.cd-person{flex:1 1 230px; min-width:210px;}
.cd-name{
  font-family:'Parisienne', cursive;
  font-size:52px; line-height:1.15; color:var(--rose-dp);
  margin-bottom:10px;
}
.cd-parents{font-size:16px; color:var(--ink); letter-spacing:.01em;}
.cd-line{font-size:15px; color:var(--ink-soft); margin-top:3px;}
.cd-amp{font-size:22px; color:var(--rose-lt); flex:0 0 auto;}

.pre-events{display:grid; gap:14px;}
.pe-item{
  background:linear-gradient(150deg,var(--cream),var(--blush));
  border:1px solid var(--line); border-radius:22px;
  padding:22px 20px;
  box-shadow:0 10px 26px rgba(169,99,79,.07);
}
.pe-name{font-family:'Italiana', serif; font-size:24px; color:var(--ink);}
.pe-when{font-size:15px; color:var(--ink-soft); margin-top:6px;}
.pe-dot{color:var(--rose-lt); margin:0 9px; font-size:11px;}
.pe-place{font-size:14px; color:var(--ink-soft); margin-top:4px; font-style:italic;}

.dress-code{display:flex; gap:22px; flex-wrap:wrap; justify-content:center;}
.dc-col{flex:1 1 230px; min-width:210px;}
.dc-head{
  font-family:'Italiana', serif; font-size:19px; color:var(--rose-dp);
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:9px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.dc-col p{font-size:16px; line-height:1.85; color:var(--ink-soft);}

.stay-code{
  display:inline-block; margin-top:18px; padding:10px 22px;
  border:1px dashed var(--rose); border-radius:30px;
  color:var(--rose-dp); font-family:'Italiana', serif;
  letter-spacing:.18em; font-size:15px;
}

.closing{padding-top:44px; padding-bottom:56px;}
.closing-rule{
  width:160px; height:1px; margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--rose-lt),transparent);
}
.closing-text{
  font-family:'Italiana', serif; font-size:26px; color:var(--ink);
  line-height:1.5; margin:26px 0 12px;
}
.closing-names{
  font-family:'Parisienne', cursive; font-size:46px;
  color:var(--rose-dp); margin-bottom:26px;
}

/* ============================================================
   GALLERY SLIDESHOW
   ------------------------------------------------------------
   #galleryGrid keeps its id and stays the direct parent of the
   slides, because aira-bind.js writes the couple's photos into
   exactly that element. Only the layout changes: from a mosaic
   grid to a track moved by transform.
   ============================================================ */
.slideshow{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(169,99,79,.12);
  touch-action:pan-y;
}
.mosaic{
  display:flex; grid-template-columns:none; gap:0;
  transition:transform 760ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
/* The mosaic's wide first tile and hover lift belong to the grid, not to a
   slideshow where every slide must be the same size. */
.mosaic > div,
.mosaic > div:nth-child(1){
  flex:0 0 100%; width:100%; aspect-ratio:1; grid-column:auto;
  border-radius:0; border:none; transition:none;
}
.mosaic > div:hover{transform:none; box-shadow:none;}

.ss-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; padding:0;
  border:1px solid var(--line); background:rgba(255,252,250,.86);
  color:var(--rose-dp); font-size:24px; line-height:1;
  cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(169,99,79,.16);
  transition:background .25s ease;
}
.ss-arrow:hover{background:var(--cream);}
.ss-prev{left:12px;} .ss-next{right:12px;}
.slideshow.ss-single .ss-arrow{display:none;}

.ss-dots{display:flex; gap:9px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
.ss-dot{
  width:9px; height:9px; border-radius:50%; padding:0;
  border:1px solid var(--rose); background:transparent; cursor:pointer;
  transition:background .28s ease, transform .28s ease;
}
.ss-dot.on{background:var(--rose); transform:scale(1.25);}
.ss-dots:empty{display:none;}

/* ============================================================
   PAGE FRAME
   ------------------------------------------------------------
   Held at the edges of the screen while the invitation scrolls
   behind it, so the whole page reads as one card.

   border-image slices the drawing into nine and places the four
   corners itself. The slice is 96 because that is exactly where
   the corner artwork ends; slicing anywhere else leaves part of
   the flourish in the edge strip, which then repeats down the
   sides as broken fragments. The edge strip is two plain rules,
   so however many times it tiles it reads as one line.
   ============================================================ */
/* body is the containing block, so the frame is as tall as the whole
   invitation and travels with it rather than staying pinned to the screen. */
body{position:relative;}
.page-frame{
  position:absolute; inset:10px; z-index:40; pointer-events:none;
  border:30px solid transparent;
  border-image:url("./assets/frame.svg") 34 round;
}

@media (max-width:560px){
  .page-frame{inset:6px; border-width:20px;}
  .cd-name{font-size:42px;}
  .cd-amp{flex-basis:100%;}
  .closing-names{font-size:38px;}
  .ss-arrow{width:36px; height:36px; font-size:20px;}
  .ss-prev{left:8px;} .ss-next{right:8px;}
}

@media (prefers-reduced-motion: reduce){ .mosaic{transition:none;} }
@media print{ .page-frame{display:none;} }

/* ---- hero names ---- */
.names{
  font-family:'Parisienne', cursive;
  font-weight:400;
  font-size:clamp(50px,10.5vw,88px);
  line-height:1.18;
  letter-spacing:.01em;
}
.names .amp{
  font-family:'Italiana', serif;
  font-size:.26em; letter-spacing:.2em;
}