/* ============================================================
   ROYAL-PRESTIGE-WIRED-1
   ROYAL PRESTIGE — midnight sapphire palace
   Identity: deep night blue, antique gold, Roman numerals,
   weighty cinematic motion, gold dust. Opens as a wax-sealed
   envelope. Nothing here is shared with any other Aira template.
   ============================================================ */

:root{
  --night:#0B1226;
  --night-2:#141E3C;
  --night-3:#1D2A50;
  --gold:#C7A24B;
  --gold-lt:#F0DDA4;
  --gold-dp:#8C6E28;
  --pearl:#F3EFE6;
  --muted:#A7B0C8;
  --line:#2A3556;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', 'Helvetica Neue', sans-serif;
  font-weight:400;
  background:var(--night);
  color:var(--pearl);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.numeral,.cd-num,.crest-mono,.rung-time{font-family:'Marcellus', 'Times New Roman', serif;}
/* the two names carry the display face; give them room for the overhanging
   strokes or the last letter is clipped by its own box */
.names{font-family:'Bodoni Moda', Georgia, serif; font-weight:400; padding-inline:.3em; overflow:visible;}

/* ---------- THE ENVELOPE (the opening) ----------
   FULL BLEED. The four flaps run corner-to-centre of the whole viewport,
   so the envelope IS the screen rather than a small card floating in the
   middle of it.

   The flaps are built in CSS, not cut from the photograph. A photograph
   stretched to fill an arbitrary viewport distorts badly on a tall phone,
   and its printed gold diagonals would no longer line up with the clip
   edges once the shape changed. Drawn in CSS the fold is exact at every
   screen size and costs nothing to load.

   No gold on the flap edges: in real stationery of this kind the paper is
   plain and the only gold is the wax. The fold reads through a soft shadow
   gathering toward the point instead.

   The outer element keeps the id "shutter": script.js binds the click, the
   monogram builder and the motion gate to it. */
.shutter{
  position:fixed; inset:0; height:100vh; height:100dvh; z-index:999;
  cursor:pointer; overflow:hidden;
  background:#EFE6D4;
  touch-action:none; overscroll-behavior:none;
  transition:background-color .9s ease .3s, opacity .7s ease 2.5s;
}
/* The backdrop goes transparent almost immediately, so the hero is revealed
   THROUGH the parting flaps. While it stayed solid the flaps could travel
   as far as they liked and the screen behind them was still just cream -
   which is why the opening read as four pale triangles and nothing more. */
.shutter.open{pointer-events:none; background-color:transparent;}
.shutter.open{opacity:0;}

.env{position:absolute; inset:0; perspective:1400px; transform-style:preserve-3d;}

.ef{
  position:absolute; inset:0; display:block;
  backface-visibility:hidden;
  transition:transform 2.1s cubic-bezier(.34,0,.12,1);
  will-change:transform;
}
/* the paper, shading down toward the point so the fold has depth */
/* the outlines come from the SVG clip paths in the markup: bowed edges and
   blunted tips, which a polygon() cannot draw */
.ef-t{clip-path:url(#flapT); transform-origin:50% 0%;
      background:linear-gradient(180deg,#FDFAF3 0%,#F8F2E6 58%,#EADFC9 86%,#DFD2B6 100%);}
.ef-b{clip-path:url(#flapB); transform-origin:50% 100%;
      background:linear-gradient(0deg,#FBF7EE 0%,#F5EEE0 58%,#E7DCC5 86%,#DACDB0 100%);}
.ef-l{clip-path:url(#flapL); transform-origin:0% 50%;
      background:linear-gradient(90deg,#FCF8F0 0%,#F6F0E2 58%,#E5D9C1 86%,#D8CBAE 100%);}
.ef-r{clip-path:url(#flapR); transform-origin:100% 50%;
      background:linear-gradient(270deg,#FCF8F0 0%,#F6F0E2 58%,#E5D9C1 86%,#D8CBAE 100%);}
/* An embossed flourish on the top flap: white on white, visible only through
   its own shadow and highlight. The same paths are drawn twice - once a
   hair lower in a warm grey, once a hair higher in near-white - which is
   how relief is faked without an image. Anchored just above the flap tip
   with bottom:52%, so it stays with the fold at any screen shape, and the
   flap's own clip trims anything that runs past the edge. */
.ef-orn{
  position:absolute; left:50%; bottom:52%; transform:translateX(-50%);
  width:min(84vw, 660px); height:auto; pointer-events:none;
}
.ef-orn g{fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}
.orn-sh{stroke:rgba(176,160,128,.5); transform:translateY(1.6px);}
.orn-hi{stroke:rgba(255,255,255,.95);}

/* The gold edge is a STROKED copy of the very same path used to clip the
   flap, so the line follows the bowed shape exactly. vector-effect keeps it
   the same weight however the viewBox is stretched by the screen. */
.ef-edge{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.ef-edge path{
  fill:none; stroke:#C9A55E; stroke-width:1.5;
  vector-effect:non-scaling-stroke; opacity:.72;
}

/* a hairline of shadow where each flap lies over the one beneath */
.ef::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 46% at 50% 50%, rgba(120,96,54,.13), transparent 72%);
}
/* the side flaps sit under the top and bottom ones, as a real envelope folds */
.ef-l,.ef-r{z-index:1;}
.ef-t,.ef-b{z-index:2;}

/* Opening: each flap folds back on its own hinge AND travels outward, so the
   four pieces separate and clear the screen instead of staying pinned to the
   edges. Folding alone reads as four doors, not an envelope coming apart.
   translate is written FIRST so it applies in the flap's own upright space,
   before the rotation tips that space over. */
/* far enough to actually LEAVE the screen. At 46% they folded but still
   covered most of it, so there was never a moment of seeing the invitation
   appear behind them. */
.shutter.open .ef-t{transform:translateY(-104%) rotateX(-168deg); transition-delay:.18s;}
.shutter.open .ef-b{transform:translateY(104%)  rotateX(168deg);  transition-delay:.36s;}
.shutter.open .ef-l{transform:translateX(-106%) rotateY(168deg);  transition-delay:.58s;}
.shutter.open .ef-r{transform:translateX(106%)  rotateY(-168deg); transition-delay:.58s;}

/* --- the wax seal --- */
.env-seal{
  position:absolute; left:50%; top:50%; z-index:6;
  width:min(46vw, 30vh, 230px); aspect-ratio:1;
  /* translate first, so the -50% is measured before the open state adds a
     scale and a rotate - otherwise the seal drifts off centre as it leaves */
  transform:translate(-50%,-50%);
  background:url("./assets/images/seal.png") center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(120,95,50,.34));
  transition:transform .9s cubic-bezier(.5,0,.28,1), opacity .8s ease;
}
.shutter.open .env-seal{transform:translate(-50%,-64%) scale(.84) rotate(-12deg); opacity:0;}
/* a warm glow breathing under the wax */
.env-seal::before{
  content:''; position:absolute; inset:-18%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,140,.5), transparent 62%);
  animation:sealGlow 4.2s ease-in-out infinite;
}
@keyframes sealGlow{0%,100%{opacity:.3; transform:scale(.94);} 50%{opacity:.8; transform:scale(1.06);}}
/* gold light travelling across the wax. The seal PNG is the MASK, so the
   shine is clipped to the wax blob and never spills onto the paper. */
.env-seal::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, transparent 32%,
    rgba(255,231,168,.6) 45%, rgba(255,248,222,.92) 51%,
    rgba(255,231,168,.6) 57%, transparent 70%);
  background-size:280% 100%; background-repeat:no-repeat;
  -webkit-mask:url("./assets/images/seal.png") center/contain no-repeat;
          mask:url("./assets/images/seal.png") center/contain no-repeat;
  mix-blend-mode:screen;
  animation:sealShine 4.6s cubic-bezier(.45,0,.3,1) .8s infinite;
}
@keyframes sealShine{0%{background-position:190% 0;} 55%,100%{background-position:-90% 0;}}

.crest-mono{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-size:min(7vw,34px); letter-spacing:.05em; color:#8A6132;
  text-shadow:0 1px 1px rgba(255,255,255,.65);
}
.crest-mono span{font-size:.64em; margin:0 4px; opacity:.72;}

/* sits just under the seal, over the paper */
.crest-tap{
  position:absolute; left:0; right:0; z-index:6;
  top:calc(50% + min(23vw, 15vh, 115px) + 34px);
  text-align:center;
  font-size:12px; letter-spacing:.44em; text-transform:uppercase; color:#8A6E3C;
  animation:tapGlow 2.6s ease-in-out infinite;
  transition:opacity .4s ease;
}
.shutter.open .crest-tap{opacity:0;}
@keyframes tapGlow{0%,100%{opacity:.5;} 50%{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .ef{transition-duration:1ms;}
  .env-seal::before,.env-seal::after{animation:none;}
}

#dustCanvas{position:fixed; inset:0; pointer-events:none; z-index:2;}
#confettiCanvas{position:fixed; inset:0; pointer-events:none; z-index:500;}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:72px 26px 96px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--night-3) 0%, var(--night-2) 42%, var(--night) 100%);
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28;}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(199,162,75,.13), transparent 70%),
    linear-gradient(180deg, rgba(11,18,38,.55) 0%, rgba(11,18,38,.85) 100%);
}
/* the double hairline frame — a Royal Prestige signature */
.hero-frame{position:absolute; inset:18px; pointer-events:none; z-index:2;}
.hero-frame::before,.hero-frame::after{content:''; position:absolute; inset:0; border:1px solid var(--gold); opacity:.45;}
.hero-frame::after{inset:8px; opacity:.22;}
/* engraved corner flourishes - inline SVG, never a border-image data URI,
   which fails silently in the browser */
.pf-corner{position:absolute; width:62px; height:62px; color:var(--gold); opacity:.9;}
.pf-tl{top:-2px;    left:-2px;}
.pf-tr{top:-2px;    right:-2px;  transform:scaleX(-1);}
.pf-bl{bottom:-2px; left:-2px;   transform:scaleY(-1);}
.pf-br{bottom:-2px; right:-2px;  transform:scale(-1,-1);}
.pf-fleur{position:absolute; width:54px; height:21px; color:var(--gold); opacity:.75;}
.pf-ft{top:-9px;    left:50%; transform:translateX(-50%);}
.pf-fb{bottom:-9px; left:50%; transform:translateX(-50%) scaleY(-1);}
.hero-inner{position:relative; z-index:1; width:100%; max-width:760px;}

.eyebrow{
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:.46em;
  text-transform:uppercase; color:var(--gold); margin-bottom:22px;
}
/* A slow gold shimmer travels through the letterforms themselves -
   painted into the text, never as a rectangle over the top of it. */
.names{
  font-size:clamp(40px,8.4vw,78px); font-weight:600; line-height:1.06;
  display:inline-block;
  background-image:linear-gradient(105deg,
    var(--pearl) 0%, var(--pearl) 40%, var(--gold-lt) 50%, var(--pearl) 60%, var(--pearl) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 8s ease-in-out infinite;
}
.names .amp{
  display:block; font-size:.42em; margin:10px 0; font-weight:400;
  -webkit-text-fill-color:var(--gold); color:var(--gold);
}
@keyframes shimmer{0%{background-position:190% 0;} 55%,100%{background-position:-90% 0;}}

.hero-rule{display:flex; align-items:center; justify-content:center; margin:26px 0 18px;}
.hero-rule span{
  width:150px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  position:relative;
}
.hero-rule span::before{
  content:'✦'; position:absolute; left:50%; top:-10px; transform:translateX(-50%);
  color:var(--gold); font-size:12px;
}
.date-line{font-size:19px; letter-spacing:.08em; color:var(--muted); font-style:italic;}

/* ---------- SCRATCH (gold leaf) ---------- */
.scratch-wrap{position:relative; width:300px; height:118px; margin:34px auto 0;}
.scratch-under{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--night-2); border:1px solid var(--gold-dp);
}
.scratch-under .d{font-family:'Cinzel',serif; font-size:23px; color:var(--gold-lt); letter-spacing:.04em;}
/* canvas ON TOP of the panel underneath - without this the gold leaf is
   painted but never visible, which is the bug the older templates had */
#scratchCanvas{position:relative; z-index:2; display:block; touch-action:none; cursor:crosshair;}
.scratch-hint{margin-top:12px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);}

/* ---------- COUNTDOWN (hairline cells) ---------- */
.countdown{display:flex; justify-content:center; margin-top:40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cd-cell{flex:1; max-width:120px; padding:18px 6px; border-right:1px solid var(--line);}
.cd-cell:last-child{border-right:0;}
.cd-num{font-size:32px; color:var(--gold-lt); font-weight:600; line-height:1;}
.cd-label{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:8px;}

.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:1; text-align:center;}
.scroll-cue span{font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); opacity:.8;}
.scroll-cue i{display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(180deg,var(--gold),transparent); animation:cueDrop 2.4s ease-in-out infinite;}
@keyframes cueDrop{0%,100%{transform:scaleY(.4); opacity:.4; transform-origin:top;} 50%{transform:scaleY(1); opacity:1; transform-origin:top;}}

/* ---------- SECTIONS ---------- */
.section{max-width:740px; margin:0 auto; padding:96px 26px; text-align:center;}
.sec-head{display:flex; align-items:center; justify-content:center; gap:18px;}
.numeral{
  font-size:14px; letter-spacing:.2em; color:var(--gold);
  border:1px solid var(--gold-dp); width:42px; height:42px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.sec-head h2{font-size:clamp(26px,4.6vw,38px); font-weight:500; letter-spacing:.05em; color:var(--pearl);}
.ornament{
  width:180px; height:16px; margin:22px auto 34px; position:relative;
}
.ornament::before{content:''; position:absolute; top:8px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dp),transparent);}
.ornament::after{content:'❖'; position:absolute; top:0; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:13px; background:var(--night); padding:0 10px;}
.lead{font-size:19px; line-height:1.9; color:#C9D0E2;}

/* ---------- PROGRAMME LADDER ---------- */
.ladder{margin-top:12px; text-align:left;}
.rung{
  display:grid; grid-template-columns:52px 108px 1fr; align-items:baseline; gap:14px;
  padding:20px 6px; border-bottom:1px solid var(--line);
  transition:background .5s ease;
}
.rung:first-child{border-top:1px solid var(--line);}
.rung:hover{background:rgba(199,162,75,.05);}
.rung-no{font-family:'Cinzel',serif; font-size:12px; letter-spacing:.16em; color:var(--gold-dp);}
.rung-time{font-size:16px; color:var(--gold-lt); letter-spacing:.06em;}
.rung-title{font-size:18px; color:var(--pearl);}

/* ---------- GALLERY (gold frames) ---------- */
/* ---------- OPTIONAL SECTIONS ----------
   These eight carry NO Roman numeral. aira-bind.js removes a whole
   <section data-aira-section="..."> when the couple left that detail blank,
   so a numbered sequence would show gaps (I · III · IV · VII). */
.couple-pair{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:26px; text-align:left;}
.cp-card{border-top:1px solid var(--line); padding-top:20px;}
.cp-role{font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-dp);}
.cp-name{font-family:'Bodoni Moda',Georgia,serif; font-weight:400; font-size:clamp(23px,3.8vw,30px);
         color:var(--pearl); margin:10px 0 12px; padding-inline:.2em; overflow:visible;}
.cp-line{font-size:14px; line-height:1.95; color:#C9D0E2;}

.pre-rung .rung-title{display:flex; flex-direction:column; gap:4px;}
.pre-rung em{font-style:normal; font-size:12px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--gold-dp);}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:36px; text-align:left; margin-top:22px;}
.dc-role{display:block; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
         color:var(--gold-dp); margin-bottom:10px;}
.closing-line{font-family:'Bodoni Moda',Georgia,serif; font-size:clamp(21px,3.4vw,28px);
              line-height:1.6; color:var(--pearl);}
/* The illustration is drawn on cream. On this near-black page it is left to
   read as a printed card - `multiply` would sink it into the background and
   `screen` would erase the figures. */
.dc-figure{display:block; width:100%; height:auto; margin:26px 0 8px;
           border:1px solid var(--line); box-shadow:0 14px 30px rgba(0,0,0,.45);}

/* ---------- THE TRAVELLING BLOOM ----------
   A gold flower that slides down beside the programme as the section passes
   through the viewport. Position is driven by scroll, not a timer, so it
   always matches the reader. */
.lad-wrap{position:relative; padding-left:30px;}
.lad-rail{position:absolute; left:0; top:0; bottom:0; width:20px;}
.lr-line{position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px;
  background:linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);}
.lr-bloom{position:absolute; left:50%; top:0; width:20px; height:20px;
  margin-left:-10px; margin-top:-10px; color:var(--gold); will-change:transform;
  filter:drop-shadow(0 0 6px rgba(199,162,75,.5));}
@media (prefers-reduced-motion:reduce){ .lr-bloom{top:50%;} }

/* ---------- GALLERY — slideshow ----------
   Only the LAYOUT changed: #galleryGrid is still the element aira-bind.js
   fills, it is simply a flex track moved by transform instead of a grid. */
.gal-stage{position:relative; overflow:hidden; border:1px solid var(--line); margin-top:6px;}
.gl-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  background:rgba(7,12,26,.66); color:var(--gold-lt); font-size:19px; line-height:1;
  cursor:pointer; opacity:.6; transition:opacity .3s ease;}
.gl-arrow:hover{opacity:1;}
.gl-prev{left:12px;} .gl-next{right:12px;}
.gl-dots{display:flex; justify-content:center; gap:8px; margin-top:16px;}
.gl-dots i{width:6px; height:6px; border-radius:50%; background:var(--line);
  cursor:pointer; transition:background .3s ease, transform .3s ease;}
.gl-dots i.on{background:var(--gold); transform:scale(1.35);}

.gallery{display:flex; margin-top:0; background:var(--night-2); transition:transform .75s cubic-bezier(.22,1,.36,1);}
.gallery > div{
  position:relative; flex:0 0 100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.14em; color:var(--gold-dp); text-transform:uppercase;
  background:linear-gradient(150deg,var(--night-2),var(--night));
  border:1px solid var(--line); outline:1px solid transparent; outline-offset:-6px;
  transition:transform .55s cubic-bezier(.22,1,.36,1), outline-color .55s ease, box-shadow .55s ease;
}
.gallery > div:hover{outline-color:var(--gold);}
.gallery img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-remove{
  position:absolute; top:6px; right:6px; width:22px; height:22px;
  background:rgba(11,18,38,.8); color:var(--gold-lt); border:1px solid var(--gold-dp);
  font-size:12px; line-height:1; cursor:pointer;
}

/* ---------- MAP ---------- */
.map-frame{width:100%; height:300px; overflow:hidden; margin-top:26px; border:1px solid var(--gold-dp); outline:1px solid var(--line); outline-offset:5px;}
.map-frame iframe{width:100%; height:100%; border:0; filter:saturate(.75) contrast(1.05);}

/* ---------- EDITOR PANELS ---------- */
.editor{background:var(--night-2); border:1px solid var(--line); padding:24px 22px; margin-top:26px; text-align:left;}
.ed-label{font-family:'Cinzel',serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.ed-row{display:flex; gap:10px; flex-wrap:wrap;}
.editor input{
  flex:1; min-width:180px; padding:13px 14px; border:1px solid var(--line); border-radius:0;
  background:var(--night); color:var(--pearl); font-family:'Lora',serif; font-size:15px;
}
.editor input:focus{outline:none; border-color:var(--gold-dp);}
.editor button{
  padding:13px 24px; border:1px solid var(--gold); border-radius:0; background:transparent;
  color:var(--gold-lt); font-family:'Cinzel',serif; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer; transition:background .4s ease, color .4s ease;
}
.editor button:hover{background:var(--gold); color:var(--night);}
.ed-hint{font-size:13px; color:var(--muted); margin-top:10px;}
.ed-error{font-size:13px; color:#E29A9A; margin-top:8px; display:none;}
.ed-success{font-size:13px; color:var(--gold-lt); margin-top:8px; display:none;}

/* ---------- RSVP ---------- */
.rsvp{background:var(--night-2); border:1px solid var(--line); outline:1px solid var(--gold-dp); outline-offset:6px; padding:42px 28px; text-align:left;}
.rsvp label{display:block; font-family:'Cinzel',serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:20px;}
.rsvp label:first-child{margin-top:0;}
.rsvp input,.rsvp select,.rsvp textarea{
  width:100%; padding:13px 14px; margin-top:10px; border:1px solid var(--line); border-radius:0;
  background:var(--night); color:var(--pearl); font-family:'Lora',serif; font-size:16px;
}
.rsvp input:focus,.rsvp select:focus,.rsvp textarea:focus{outline:none; border-color:var(--gold-dp);}
.rsvp button{
  width:100%; margin-top:30px; padding:16px; border:1px solid var(--gold); border-radius:0;
  background:transparent; color:var(--gold-lt); font-family:'Cinzel',serif; font-size:13px;
  letter-spacing:.24em; text-transform:uppercase; cursor:pointer;
  transition:background .45s ease, color .45s ease, letter-spacing .45s ease;
}
.rsvp button:hover{background:var(--gold); color:var(--night); letter-spacing:.3em;}
.rsvp-success{display:none; margin-top:18px; color:var(--gold-lt); font-style:italic;}

/* ---------- MUSIC BUTTON ---------- */
.music-toggle{
  position:fixed; bottom:24px; right:24px; width:52px; height:52px; z-index:60;
  border:1px solid var(--gold); background:var(--night-2); color:var(--gold-lt);
  font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.55); transition:background .4s ease, color .4s ease;
}
.music-toggle:hover{background:var(--gold); color:var(--night);}
.music-toggle.playing{animation:discTurn 6s linear infinite;}
@keyframes discTurn{to{transform:rotate(360deg);}}

footer{
  padding:52px 26px; text-align:center; font-family:'Cinzel',serif; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-dp);
  border-top:1px solid var(--line);
}

/* ---------- SCROLL REVEAL (slow + weighty) ---------- */
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
  .couple-pair,.two-col{grid-template-columns:1fr; gap:24px;}
  .lad-wrap{padding-left:24px;}
  .gl-arrow{width:32px; height:32px; font-size:16px;}
  .section{padding:70px 20px;}
  .hero{padding:60px 18px 84px;}
  .hero-frame{inset:12px;}

  .rung{grid-template-columns:40px 1fr; gap:6px 12px;}
  .rung-title{grid-column:2;}
  .cd-num{font-size:25px;}
  .cd-cell{padding:14px 2px;}
  .scratch-wrap{width:270px; height:110px;}
  .rsvp{padding:32px 20px; outline-offset:4px;}
  .sec-head{gap:12px;}
}
@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)
   ========================================================== */
/* ---------- gold medallion ---------- */
.scratch-wrap{filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));}
#scratchCanvas{border-radius: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(--gold);
  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(--gold-lt); background:transparent; border:1px solid var(--gold);
  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(--gold); color:#0B1226;}
.scratch-under.s5{animation:drGlow9959 1.6s ease-out;}
@keyframes drGlow9959{
  0%{box-shadow:0 0 0 0 rgba(199,162,75,.5);}
  40%{box-shadow:0 0 34px 6px rgba(199,162,75,.5);}
  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;}
}

/* ---------- Royal Prestige: the envelope, weighted ---------- */
/* Real paper has weight. The flap falls a little heavily, the card is pulled
   rather than slid, and the seal goes first so nothing moves under it. */
/* the flap timing is authored in the envelope block above, with the stagger
   baked in - overriding it here would flatten the unfold into four doors
   opening on the same beat */
.env-seal{transition:transform 520ms var(--e-drape), opacity 460ms var(--e-settle) !important;}
/* Bodoni Moda is a high-contrast Didone; it needs its leading pulled in */
.names{line-height:1.04;}