/* MAJESTIC-LOVE-CURTAIN-2 */
:root{
    --crimson:#7A1620; --crimson-deep:#F7EEE3; --gold:#B8924A; --gold-light:#8C6A2E; --ivory:#3A2A1E; --line:#E4CFA8;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'Cormorant Garamond', serif; background:#F7EEE3; color:#3A2A1E; overflow-x:hidden;}
  h1,h2,.display{font-family:'Cormorant Garamond', serif; font-weight:600;}
  /* the two names carry the display face; padding-inline gives its
     overhanging strokes room, or the last letter is clipped by its box */
  .hero h1{font-family:'Cinzel Decorative', serif; font-weight:400;
           padding-inline:.3em; overflow:visible;}
  .eyebrow,.cd-label,.dr-label,.scratch-hint,.gate-tap{font-family:'Tenor Sans', sans-serif;}
  .section{padding:90px 24px; max-width:720px; margin:0 auto; text-align:center;}
  .divider{width:70px; height:2px; background:var(--gold); margin:28px auto; position:relative;}
  .divider::before,.divider::after{content:'✦'; position:absolute; top:-10px; color:var(--gold); font-size:15px;}
  .divider::before{left:-26px;} .divider::after{right:-26px;}

  /* ---------- THE CURTAIN — real fabric, not a sliding panel ----------
     A flat panel that slides sideways at a constant width is what reads as
     "robot". Real drapes do four things at once, and all four are here:

       1. The folds GATHER. As the panel travels it also scaleX-shrinks, so
          the fold gradient compresses and the pleats visibly bunch up at
          the edge. This is the single biggest part of the illusion.
       2. It has WEIGHT. The easing overshoots very slightly and settles,
          instead of stopping dead on the mark.
       3. The two sides are NOT synchronised - 120ms apart, and different
          durations.
       4. The hem TRAILS the top. A tiny rotate about the top outer corner
          makes the bottom of the drape lag behind, the way heavy cloth does.

     The pelmet across the top does not travel with the panels; it lifts
     away separately, like a real proscenium valance. */
  .curtain{
    position:fixed; inset:0; height:100vh; height:100dvh; z-index:999;
    display:flex; pointer-events:none; background:#F7EEE3; overflow:hidden;
  }
  .curtain.open{background:transparent;}
  .curtain-panel{
    flex:1; position:relative;
    transition:transform 1.65s cubic-bezier(.58,-.02,.16,1.04);
    will-change:transform;
    /* irregular pleats - evenly spaced folds look printed, not woven */
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.14) 0 3px,
        rgba(0,0,0,.17)      3px 17px,
        rgba(255,255,255,.07) 17px 23px,
        rgba(0,0,0,.23)      23px 39px,
        rgba(255,255,255,.11) 39px 44px,
        rgba(0,0,0,.15)      44px 62px),
      linear-gradient(180deg,#C9A15C 0%,#B8924A 28%,#8C6A2E 62%,#5C4318 100%);
    box-shadow:inset 0 0 70px rgba(0,0,0,.5), inset 0 -50px 70px rgba(0,0,0,.34);
  }
  .curtain-left {transform-origin:0%   0%;}
  .curtain-right{transform-origin:100% 0%;}
  /* the light catching the pleats */
  .curtain-panel::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.14) 44%, transparent 62%);
  }
  /* a soft shadow pooling where the fabric gathers */
  .cp-gather{
    position:absolute; top:0; bottom:0; width:34%; opacity:0;
    transition:opacity 1.1s ease .25s;
  }
  .curtain-left  .cp-gather{right:0; background:linear-gradient(90deg,transparent,rgba(0,0,0,.42));}
  .curtain-right .cp-gather{left:0;  background:linear-gradient(270deg,transparent,rgba(0,0,0,.42));}
  .curtain.open .cp-gather{opacity:1;}

  .curtain-gold-edge{position:absolute; top:0; bottom:0; width:6px; z-index:2;
    background:linear-gradient(180deg,#E7CD8E,#D4AF6A 40%,#8C6A2E);}
  .curtain-left .curtain-gold-edge{right:0;} .curtain-right .curtain-gold-edge{left:0;}

  /* the pelmet: fixed to the arch, never travels with the drapes */
  .curtain-pelmet{
    position:absolute; top:0; left:0; right:0; height:46px; z-index:3;
    background:
      repeating-radial-gradient(circle at 50% -14px, #C9A15C 0 18px, #8C6A2E 18px 19px);
    box-shadow:0 6px 16px rgba(0,0,0,.4);
    transition:transform 1.15s cubic-bezier(.62,0,.2,1) .18s;
  }
  .curtain-pelmet i{
    position:absolute; left:0; right:0; bottom:-9px; height:9px; display:block;
    background:repeating-linear-gradient(90deg,#E7CD8E 0 3px, transparent 3px 14px);
    opacity:.75;
  }
  .curtain.open .curtain-pelmet{transform:translateY(-108%);}

  /* travel + gather + trailing hem, all in one transform */
  .curtain.open .curtain-left{
    transform:translateX(-52%) scaleX(.46) rotate(-.7deg);
  }
  .curtain.open .curtain-right{
    transform:translateX(52%) scaleX(.46) rotate(.7deg);
    transition-delay:.12s; transition-duration:1.78s;
  }

  .hero{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 30%, rgba(184,146,74,.16), transparent 55%), #F7EEE3; text-align:center; padding:40px 24px; position:relative; overflow:hidden;}
  .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.16;}
  .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(247,238,227,.4) 0%, #F7EEE3 100%); z-index:1;}
  .hero > *{position:relative; z-index:2;}
  /* decorative layers must stay out of the flex flow - `.hero > *` above
     would otherwise promote them into real, space-taking children */
  .spotlight,.hero-video,.hero-overlay{position:absolute; inset:0;}
  .hero::before{content:''; position:absolute; inset:16px; border:1.5px solid var(--gold); opacity:.5; pointer-events:none; z-index:2;}
  .hero::after{content:''; position:absolute; inset:26px; border:1px solid var(--gold); opacity:.3; pointer-events:none; z-index:2;}
  .eyebrow{letter-spacing:.4em; font-size:13px; color:var(--gold-light); text-transform:uppercase; margin-bottom:18px;}
  .hero h1{font-size:clamp(42px,9vw,76px); font-weight:700; line-height:1.1; color:#6B4E1E;}
  .amp{color:var(--gold); font-style:italic; font-size:0.6em; display:block; margin:8px 0;}
  .date-line{font-size:20px; letter-spacing:.15em; margin-top:22px; color:var(--gold-light);}

  .scratch-wrap{margin:34px auto 0; position:relative; width:280px; height:120px;}
  #scratchCanvas{border-radius:14px; touch-action:none; cursor:grab;}
  .scratch-under{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:14px; background:#F7EEE3; border:1px solid var(--gold);}
  .scratch-under .d{font-family:'Playfair Display'; font-size:26px; color:#6B4E1E;}
  .scratch-hint{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); margin-top:10px;}
  #confettiCanvas{position:fixed; inset:0; pointer-events:none; z-index:500;}

  .countdown{display:flex; gap:20px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
  .cd-num{font-family:'Playfair Display'; font-size:34px; color:#6B4E1E; font-weight:700;}
  .cd-label{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#3A2A1E; opacity:.65;}

  .section p.lead{font-size:20px; line-height:1.8; color:#5C4A3A;}

  .timeline{margin-top:30px; text-align:left; position:relative; padding-left:28px;}
  .timeline::before{content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line);}
  .tl-item{position:relative; padding-bottom:28px;}
  .tl-item::before{content:''; position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid #F7EEE3;}
  .tl-time{font-family:'Playfair Display'; font-size:16px; color:#6B4E1E;}
  .tl-title{font-size:19px; color:#3A2A1E; margin-top:2px;}

  .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px;}
  .gallery div{aspect-ratio:1; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#6B4E1E; font-size:12px; background:linear-gradient(135deg,#F0E0C8,#F7EEE3); border:1px solid var(--line); cursor:pointer;}

  .map-frame{width:100%; height:280px; border-radius:12px; overflow:hidden; margin-top:24px; border:1px solid var(--gold);}
  .map-frame iframe{width:100%; height:100%; border:0;}
  .map-editor{background:#F0E0C8; border:1px solid var(--gold); border-radius:14px; padding:22px 20px; margin-top:26px; text-align:left;}
  .map-editor .me-label{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#6B4E1E; margin-bottom:10px; font-family:'Playfair Display';}
  .map-editor .me-row{display:flex; gap:10px; flex-wrap:wrap;}
  .map-editor input{flex:1; min-width:180px; padding:12px 14px; border-radius:8px; border:1px solid var(--line); font-family:'Cormorant Garamond'; font-size:16px; background:#F7EEE3; color:#3A2A1E;}
  .map-editor button{padding:12px 22px; border:none; border-radius:8px; background:#6B4E1E; color:#fff; font-family:'Playfair Display'; font-weight:700; cursor:pointer;}
  .me-hint{font-size:13px; color:#8A7562; margin-top:8px;}
  .me-error{font-size:13px; color:#B23B3B; margin-top:8px; display:none;}
  .me-success{font-size:13px; color:#6B4E1E; margin-top:8px; display:none;}

  .rsvp{background:#F0E0C8; border-radius:16px; padding:44px 28px; border:1px solid var(--gold);}
  .rsvp input, .rsvp select, .rsvp textarea{width:100%; padding:13px 16px; margin-top:14px; border-radius:8px; border:1px solid var(--line); font-family:'Cormorant Garamond'; font-size:17px; background:#F7EEE3; color:#3A2A1E;}
  .rsvp label{display:block; text-align:left; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#6B4E1E; margin-top:18px;}
  .rsvp button{margin-top:26px; width:100%; padding:15px; border:none; border-radius:8px; background:#6B4E1E; color:#fff; font-family:'Playfair Display'; font-weight:700; font-size:16px; cursor:pointer;}
  .rsvp-success{display:none; margin-top:18px; color:#6B4E1E;}

  .music-toggle{position:fixed; bottom:22px; right:22px; width:52px; height:52px; border-radius:50%; background:#6B4E1E; color:#fff; border:none; font-size:20px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.3); z-index:50; display:flex; align-items:center; justify-content:center;}
  .music-toggle.playing{animation:spin 5s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  footer{padding:40px 24px; text-align:center; font-size:13px; letter-spacing:.2em; color:#6B4E1E; text-transform:uppercase; border-top:1px solid var(--line);}

  /* TAP TO OPEN GATE */
  .open-gate{
    position:fixed; inset:0; height:100vh; height:100dvh; z-index:1000; background:linear-gradient(160deg,#8C6A2E 0%,#4A3510 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
    transition:opacity .8s ease, visibility .8s ease; text-align:center; padding:30px;
    touch-action:none; overscroll-behavior:none;
  }
  .open-gate.hidden{opacity:0; visibility:hidden; pointer-events:none;}
  .open-gate::before{content:''; position:absolute; inset:18px; border:1.5px solid #D4AF6A; opacity:.5;}
  .open-gate::after{content:''; position:absolute; inset:28px; border:1px solid #D4AF6A; opacity:.3;}
  .gate-icon{width:64px; height:64px; border-radius:50%; border:1.5px solid #D4AF6A; display:flex; align-items:center; justify-content:center; font-size:24px; color:#D4AF6A; margin-bottom:20px; animation:pulseGate 2.2s ease-in-out infinite;}
  @keyframes pulseGate{0%,100%{transform:scale(1); opacity:.8;} 50%{transform:scale(1.08); opacity:1;}}
  .gate-tap{letter-spacing:.35em; font-size:13px; text-transform:uppercase; color:#D4AF6A;}

  /* PHOTO GALLERY EDITOR */
  .gallery img{width:100%; height:100%; object-fit:cover; border-radius:6px;}
  .gallery-editor{background:#F0E0C8; border:1px solid var(--gold); border-radius:14px; padding:22px 20px; margin-top:20px; text-align:left;}
  .gallery-editor .ge-label{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#6B4E1E; margin-bottom:10px; font-family:'Playfair Display';}
  .gallery-editor .ge-row{display:flex; gap:10px; flex-wrap:wrap;}
  .gallery-editor input{flex:1; min-width:180px; padding:12px 14px; border-radius:8px; border:1px solid var(--line); font-family:'Cormorant Garamond'; font-size:15px; background:#F7EEE3; color:#3A2A1E;}
  .gallery-editor button{padding:12px 20px; border:none; border-radius:8px; background:#6B4E1E; color:#fff; font-family:'Playfair Display'; font-weight:700; cursor:pointer; font-size:14px;}
  .ge-hint{font-size:13px; color:#8A7562; margin-top:8px;}
  .photo-remove{position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:12px; cursor:pointer; line-height:1;}
  .gallery div{position:relative;}

  /* SPARKLE BURST on tap */
  .sparkle{position:fixed; pointer-events:none; z-index:1002; font-size:16px; animation:sparkleFly .9s ease-out forwards; will-change:transform,opacity;}
  @keyframes sparkleFly{ 0%{transform:translate(0,0) scale(.2) rotate(0deg); opacity:1;} 70%{opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) scale(1.15) rotate(200deg); opacity:0;} }

/* ==========================================================
   SCRATCH-TO-REVEAL  (this block only - nothing above changed)
   ========================================================== */
/* ---------- silk drape ---------- */
#scratchCanvas{position:absolute; inset:0; z-index:2; border-radius:14px; touch-action:none; cursor:grab;}
#scratchCanvas:active{cursor:grabbing;}
.scratch-under{z-index:1;}

/* ---------- 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:#8C6A2E;
  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:#6B4E1E; background:transparent; border:1px solid #B8924A;
  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:#B8924A; color:#F7EEE3;}
.scratch-under.s5{animation:drGlow9959 1.6s ease-out;}
@keyframes drGlow9959{
  0%{box-shadow:0 0 0 0 rgba(184,146,74,.45);}
  40%{box-shadow:0 0 34px 6px rgba(184,146,74,.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;}
}

/* ---------- Majestic Love: fabric weight on the drapes ---------- */
/* Far too quick and far too generic for a full-screen surface. Same curtain,
   now with the drape curve over a proper travel, and an offset between the
   two halves. */
/* the panel transition is authored in the curtain block above, with the
   gather and the trailing hem baked into the same transform - overriding
   it here would flatten the drape back into a sliding board */
.open-gate{transition:opacity 600ms var(--e-settle), transform 900ms var(--e-lift) !important;}
.open-gate.hidden{transform:scale(1.1);}
/* Cinzel Decorative is already wide; it must not be tracked in like a text serif */
.hero h1{letter-spacing:.02em; line-height:1.12;}