:root{
  --maroon-black:#2A0709;
  --maroon-deep:#4A0E14;
  --maroon:#6E1423;
  --maroon-light:#9C3244;
  --gold:#C9A227;
  --gold-light:#EAD48C;
  --gold-soft: rgba(201,162,39,0.35);
  --cream:#F6ECD9;
  --ivory:#FCF6EA;
  --sage:#7C8C5E;
  --sage-deep:#5B6B42;
  --sage-light:#A8B98A;
  --blossom:#FBF4E6;
}

*{box-sizing:border-box; margin:0; padding:0;}

.grain-overlay{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
}
#invite-screen .grain-overlay{ opacity:0.06; z-index:2; }

html,body{
  height:100%;
  background:var(--maroon-black);
  font-family:'Cormorant Garamond', serif;
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.stage{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.bg-lattice{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(201,162,39,0.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(201,162,39,0.045) 0px, rgba(201,162,39,0.045) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(45deg, rgba(201,162,39,0.045) 0px, rgba(201,162,39,0.045) 1px, transparent 1px, transparent 34px);
}

.dust{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2;
}
.mote{
  position:absolute; bottom:-6%;
  width:3px; height:3px; border-radius:50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px 1px rgba(234,212,140,0.8);
  opacity:0;
  animation-name: floatUp;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.9; }
  85%{ opacity:0.5; }
  100%{ transform:translateY(-115vh) translateX(var(--drift,20px)); opacity:0; }
}
.mote-far{
  position:absolute; bottom:-8%;
  border-radius:50%;
  background: var(--gold-light);
  filter: blur(2.5px);
  opacity:0;
  animation-name: floatUpFar;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes floatUpFar{
  0%{ transform:translateY(0) translateX(0) scale(0.8); opacity:0; }
  12%{ opacity:0.35; }
  88%{ opacity:0.2; }
  100%{ transform:translateY(-120vh) translateX(var(--drift,20px)) scale(1.15); opacity:0; }
}

.watermark{
  position:absolute; left:50%; top:50%; width:min(120vw,520px); height:min(120vw,520px);
  transform:translate(-50%,-50%);
  opacity:0.07; pointer-events:none; z-index:1;
  animation: spin 90s linear infinite;
  will-change: transform;
}
#invite-screen .frame{ transform-style: preserve-3d; }
.corner{
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: transform, opacity;
}

.vignette-pulse{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background: radial-gradient(ellipse at 50% 56%, transparent 30%, rgba(42,7,9,0.35) 100%);
  animation: vignetteBreathe 2.6s ease-in-out infinite;
}
@keyframes vignetteBreathe{
  0%,100%{ opacity:0.7; }
  50%{ opacity:1; }
}

.burst{
  position:absolute; left:50%; top:41%; width:6px; height:6px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:transparent; z-index:6; pointer-events:none;
}
.burst.fire{ animation: burstFlash 0.9s ease-out forwards; }
@keyframes burstFlash{
  0%{ box-shadow: 0 0 0 0 rgba(234,212,140,0.9); background: radial-gradient(circle, #fff, #EAD48C 40%, transparent 70%); width:6px; height:6px; opacity:1;}
  60%{ opacity:1; }
  100%{ width:520px; height:520px; opacity:0; background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(234,212,140,0.15) 40%, transparent 70%);}
}
.ray{
  position:absolute; left:50%; top:41%; width:2px; height:0;
  background: linear-gradient(to top, var(--gold-light), transparent);
  transform-origin: bottom center; z-index:6; pointer-events:none; opacity:0;
}
.burst.fire ~ .ray, .ray.fire{ animation: rayShoot 0.7s ease-out forwards; }
@keyframes rayShoot{
  0%{ height:0; opacity:0.9; }
  100%{ height:140px; opacity:0; }
}

#stage3d-screen{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 55% at 50% 100%, #a8703f 0%, transparent 55%),
    linear-gradient(180deg, #12172a 0%, #35486b 44%, #9c6a4a 78%, #c98a4e 100%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.9s ease, visibility 0.9s;
  z-index:5;
}
#stage3d-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.stage3d-perspective{
  position:relative;
  width:min(82vw, 330px);
  aspect-ratio: 3/4;
  perspective: 1500px;
  transform-style: preserve-3d;
  transform: scale(0.95) rotateX(calc(-2deg + var(--stageTiltX,0deg))) rotateY(var(--stageTiltY,0deg));
  transition: transform 1s cubic-bezier(.22,.7,.2,1);
}
.stage3d-perspective.tracking{ transition: transform 0.2s ease-out; }

.s3d-layer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transform-style: preserve-3d;
  opacity:0;
  pointer-events:none;
  will-change: transform, opacity;
}
.s3d-layer svg{ width:100%; height:100%; overflow:visible; display:block; }
.s3d-enter{ pointer-events:none; }
.s3d-enter .seal{ pointer-events:auto; }

@keyframes s3dFadeScale{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) scale(0.8); filter:blur(3px); }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) scale(1); filter:blur(0); }
}
@keyframes s3dSlideL{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) translateX(-50px); }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) translateX(0); }
}
@keyframes s3dSlideR{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) translateX(50px); }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) translateX(0); }
}
@keyframes s3dDrop{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) translateY(-42px); }
  70%{ opacity:1; }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) translateY(0); }
}
@keyframes s3dRise{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) translateY(36px); }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) translateY(0); }
}
@keyframes s3dSwingL{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) rotate(-32deg); }
  55%{ opacity:1; }
  76%{ transform:translateZ(var(--z,0px)) rotate(6deg); }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) rotate(0deg); }
}
@keyframes s3dSwingR{
  0%{ opacity:0; transform:translateZ(var(--z,0px)) rotate(32deg); }
  55%{ opacity:1; }
  76%{ transform:translateZ(var(--z,0px)) rotate(-6deg); }
  100%{ opacity:1; transform:translateZ(var(--z,0px)) rotate(0deg); }
}
@keyframes s3dInk{
  0%{ opacity:0; filter:blur(5px); transform:translateZ(var(--z,0px)) translateY(8px) scale(1.04); }
  100%{ opacity:1; filter:blur(0); transform:translateZ(var(--z,0px)) translateY(0) scale(1); }
}
@keyframes lanternSway{
  0%,100%{ transform:translateZ(var(--z,0px)) rotate(-3deg); }
  50%{ transform:translateZ(var(--z,0px)) rotate(3deg); }
}
.s3d-lantern-left.settled{ animation: lanternSway 4.5s ease-in-out infinite; transform-origin: 30% 0%; }
.s3d-lantern-right.settled{ animation: lanternSway 4.8s ease-in-out infinite; transform-origin: 70% 0%; }

@keyframes s3dVeilSway{
  0%,100%{ transform: rotate(-2deg); }
  50%{ transform: rotate(2deg); }
}
.s3d-bride.settled .veil-drape{ animation: s3dVeilSway 4.6s ease-in-out infinite; transform-origin:50% 20%; transform-box: fill-box; }
.s3d-groom.settled .sehra-drape{ animation: s3dVeilSway 5.2s ease-in-out infinite; transform-origin:50% 8%; transform-box: fill-box; }
@keyframes s3dShimmerPass{
  0%{ opacity:0; transform:translateX(-24px); }
  45%{ opacity:0.55; }
  55%{ opacity:0.55; }
  100%{ opacity:0; transform:translateX(118px); }
}
.s3d-bride.settled .shimmer-sweep{ animation: s3dShimmerPass 6.4s ease-in-out infinite; transform-box: fill-box; }
.s3d-groom.settled .shimmer-sweep{ animation: s3dShimmerPass 6.8s ease-in-out infinite 0.6s; transform-box: fill-box; }

@keyframes blossomPop{
  0%{ opacity:0; transform:scale(0) rotate(-40deg); }
  65%{ opacity:1; transform:scale(1.2) rotate(6deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.blossom{ opacity:0; transform-box:fill-box; transform-origin:center; }
.stage3d-perspective.building .blossom{ animation: blossomPop 0.5s ease-out forwards; }
.stage3d-perspective.built .blossom{ opacity:1; }

.arch-draw-path{ stroke-dasharray:640; stroke-dashoffset:640; }
.stage3d-perspective.building .s3d-arch-floral .arch-draw-path{
  animation: archDraw 1.6s cubic-bezier(.3,.7,.25,1) forwards;
  animation-delay: 2.55s;
}
@keyframes archDraw{ to{ stroke-dashoffset:0; } }

.stage3d-perspective.building .s3d-backwall{ animation: s3dFadeScale 1.3s cubic-bezier(.25,.7,.3,1) forwards; animation-delay:0.05s; }
.stage3d-perspective.building .s3d-mosque{ animation: s3dRise 1.2s cubic-bezier(.25,.7,.3,1) forwards; animation-delay:0.5s; }
.stage3d-perspective.building .s3d-pillar-left{ animation: s3dSlideL 1s cubic-bezier(.3,.7,.25,1) forwards; animation-delay:0.9s; }
.stage3d-perspective.building .s3d-pillar-right{ animation: s3dSlideR 1s cubic-bezier(.3,.7,.25,1) forwards; animation-delay:0.95s; }
.stage3d-perspective.building .s3d-garland-left{ animation: s3dDrop 0.9s cubic-bezier(.3,.75,.3,1.1) forwards; animation-delay:1.4s; }
.stage3d-perspective.building .s3d-garland-right{ animation: s3dDrop 0.9s cubic-bezier(.3,.75,.3,1.1) forwards; animation-delay:1.55s; }
.stage3d-perspective.building .s3d-lantern-left{ animation: s3dSwingL 1s cubic-bezier(.3,.7,.25,1) forwards; animation-delay:1.9s; }
.stage3d-perspective.building .s3d-lantern-right{ animation: s3dSwingR 1s cubic-bezier(.3,.7,.25,1) forwards; animation-delay:2.0s; }
.stage3d-perspective.building .s3d-arch-floral{ animation: s3dFadeScale 1s ease forwards; animation-delay:2.3s; }
.stage3d-perspective.building .s3d-bride{ animation: s3dSlideL 1s cubic-bezier(.3,.7,.25,1) forwards; animation-delay:2.6s; }
.stage3d-perspective.building .s3d-groom{ animation: s3dSlideR 1s cubic-bezier(.3,.7,.25,1) forwards; animation-delay:2.8s; }
.stage3d-perspective.building .s3d-calligraphy{ animation: s3dInk 1s ease forwards; animation-delay:4.35s; }
.stage3d-perspective.building .s3d-names{ animation: s3dInk 1.1s ease forwards; animation-delay:4.95s; }
.stage3d-perspective.building .s3d-enter{ animation: s3dFadeScale 0.7s ease forwards; animation-delay:5.95s; }

.stage3d-perspective.built .s3d-layer{ animation:none !important; opacity:1 !important; transform:translateZ(var(--z,0px)) !important; filter:none !important; }
.stage3d-perspective.built .arch-draw-path{ animation:none !important; stroke-dashoffset:0 !important; }

.s3d-skip{
  position:absolute; bottom:4%; left:50%; transform:translateX(-50%);
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold-light); opacity:0; z-index:6; cursor:pointer; padding:8px 14px;
  transition: opacity 0.5s ease;
}
#stage3d-screen.started .s3d-skip{ opacity:0.55; transition-delay:1.3s; }
#stage3d-screen.entered .s3d-skip{ opacity:0 !important; pointer-events:none; }
.s3d-skip:hover{ opacity:1; }

.seal{
  width:78px; height:78px; border-radius:50%; position:relative;
  background: radial-gradient(circle at 35% 30%, #E4C25C, var(--gold) 55%, #8a6b17 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -6px 10px rgba(0,0,0,0.35),
    inset 0 0 0 4px rgba(74,14,20,0.18), inset 0 0 10px 2px rgba(0,0,0,0.3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  border:2px solid rgba(255,255,255,0.15);
  transition: transform 0.3s cubic-bezier(.6,.1,.25,1), opacity 0.6s ease, box-shadow 0.25s ease;
  animation: sealPulse 2.6s ease-in-out infinite;
  transform: perspective(300px) rotateX(var(--sealTiltX,0deg)) rotateY(var(--sealTiltY,0deg));
  transform-style: preserve-3d;
}
@keyframes sealPulse{
  0%,100%{ box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -6px 10px rgba(0,0,0,0.35), 0 0 0 0 rgba(201,162,39,0.0); }
  50%{ box-shadow: 0 8px 26px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -6px 10px rgba(0,0,0,0.35), 0 0 0 10px rgba(201,162,39,0.08); }
}
.seal svg{ width:40px; height:40px; opacity:0.92; }
.seal-label{
  position:absolute; bottom:-26px; left:50%; transform:translateX(-50%);
  font-family:'Jost',sans-serif; font-size:9.5px; letter-spacing:0.22em;
  color: var(--gold-light); text-transform:uppercase; opacity:0.9; white-space:nowrap;
}
.s3d-enter.done .seal{ opacity:0; transform:scale(0.4) rotate(25deg); pointer-events:none; }

.names-under{
  position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);
  text-align:center; width:82%;
}
.names-under .of{
  font-family:'Jost',sans-serif; color:var(--maroon-deep); opacity:0.8;
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase; margin-bottom:4px;
}
.names-under .amp{ color:var(--sage-deep); font-family:'Amiri',serif; font-size:14px; line-height:1.1; margin:1px 0; }
.names-under .n{
  font-family:'Marcellus', serif; color:var(--sage-deep);
  font-size:22px; letter-spacing:0.04em; line-height:1.3;
}
.names-under .d{
  margin-top:6px; font-family:'Jost',sans-serif; color:var(--maroon-deep);
  font-size:10px; letter-spacing:0.28em; opacity:0.75;
}

.s3d-calligraphy{ align-items:flex-start; padding-top:8%; }
.s3d-calligraphy .stage-bismillah{
  font-family:'Amiri',serif; font-size:24px; color:#8a6b17; opacity:0.95;
  text-align:center; width:100%;
}
.s3d-calligraphy .stage-verse{
  margin-top:8px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12.5px;
  color:var(--maroon-deep); opacity:0.75; text-align:center; width:78%; margin-left:11%; line-height:1.5;
}
.s3d-enter{ align-items:flex-start; padding-top:33%; }

.eyebrow-top{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  text-align:center; color:var(--gold-light);
  letter-spacing:0.35em; font-family:'Jost',sans-serif; font-weight:300;
  font-size:11px; text-transform:uppercase; opacity:0.85;
}
.eyebrow-top span{ display:block; font-family:'Amiri', serif; font-size:22px; letter-spacing:0; margin-bottom:10px; color:var(--gold); opacity:0.9;}

.curtain-layer{
  position:absolute; inset:0; z-index:9; display:flex;
}
.curtain-layer.open{
  transition: visibility 1.3s;
  pointer-events:none;
}
.curtain-layer.open .curtain-panel{ pointer-events:none; }
.curtain-panel{
  position:relative; width:50%; height:100%; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 6px, rgba(255,255,255,0.03) 6px 10px, transparent 10px 22px),
    linear-gradient(180deg, #5c1119 0%, var(--maroon-deep) 45%, #3a0a0f 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
  transition: transform 1.3s cubic-bezier(.65,0,.2,1);
}
.curtain-panel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 27px, rgba(234,212,140,.09) 27px 28px),
    repeating-linear-gradient(-45deg, transparent 0 27px, rgba(234,212,140,.09) 27px 28px),
    radial-gradient(rgba(234,212,140,.16) 1px, transparent 1.6px);
  background-size: auto, auto, 28px 28px;
  mix-blend-mode:soft-light;
  opacity:.8;
}
.curtain-panel::after{
  content:''; position:absolute; inset:-20%; pointer-events:none;
  background:radial-gradient(ellipse 42% 30% at 50% 50%, rgba(255,214,150,.5) 0%, rgba(255,182,110,.16) 45%, transparent 72%);
  mix-blend-mode:screen;
  animation: curtainAura 27s ease-in-out infinite;
}
.curtain-panel.right::after{ animation-delay:-13.5s; }
@keyframes curtainAura{
  0%{   transform:translate(6%, 66%)  scale(0.85); opacity:.35; }
  22%{  transform:translate(70%, 18%) scale(1.15); opacity:.6; }
  45%{  transform:translate(30%, -14%) scale(0.95); opacity:.45; }
  68%{  transform:translate(-10%, 30%) scale(1.1);  opacity:.55; }
  88%{  transform:translate(44%, 60%)  scale(0.9);  opacity:.4; }
  100%{ transform:translate(6%, 66%)  scale(0.85); opacity:.35; }
}
.sequins{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sequin{
  position:absolute; width:2.5px; height:2.5px; border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 4px 1px rgba(255,214,150,.9);
  opacity:0;
  animation-name: sequinTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes sequinTwinkle{
  0%,100%{ opacity:0; transform:scale(0.5); }
  50%{ opacity:1; transform:scale(1.4); }
}
.curtain-panel.left{ transform:translateX(0); border-right:1px solid rgba(234,212,140,0.25); }
.curtain-panel.right{ transform:translateX(0); border-left:1px solid rgba(234,212,140,0.25); }
.curtain-layer.open .curtain-panel.left{ transform:translateX(-104%); }
.curtain-layer.open .curtain-panel.right{ transform:translateX(104%); }

.curtain-valance{
  position:absolute; top:0; left:0; right:0; height:34px;
  background: linear-gradient(180deg, #C9A227 0%, #8a6b17 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.curtain-fringe{ position:absolute; top:34px; left:0; right:0; height:14px; display:flex; }
.curtain-fringe span{
  flex:1; margin:0 1px; background: linear-gradient(180deg, #C9A227, transparent);
  border-radius:0 0 3px 3px; opacity:0.85;
}
.curtain-vine{ position:absolute; opacity:0.35; }
.curtain-panel.left .curtain-vine{ right:6px; top:20%; width:70px; }
.curtain-panel.right .curtain-vine{ left:6px; top:55%; width:70px; transform:scaleX(-1); }

.curtain-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:10; text-align:center; cursor:pointer;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.curtain-layer.open .curtain-center{ opacity:0; transform:translate(-50%,-50%) scale(0.7); pointer-events:none; }

.curtain-star{
  position:absolute; left:50%; top:50%; width:198px; height:198px;
  transform:translate(-50%,-50%); pointer-events:none; overflow:visible;
}
.curtain-star .star-a{ animation: starSpin 34s linear infinite; }
.curtain-star .star-b{ animation: starSpin 26s linear infinite reverse; }
.curtain-star polygon{ transform-origin:60px 60px; }
.curtain-spotlight{
  position:absolute; left:50%; top:50%; width:230px; height:230px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,205,135,.28) 0%, rgba(255,175,90,.08) 55%, transparent 75%);
  mix-blend-mode:screen;
  animation: curtainSpotlightBreathe 6s ease-in-out infinite;
}
.monogram{
  position:relative; width:118px; height:118px;
  transition: filter .25s ease, transform .18s cubic-bezier(.34,1.4,.64,1);
}
.curtain-reveal-label{
  position:relative; margin-top:10px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold-light); opacity:0.85;
  transition: letter-spacing .3s ease, opacity .3s ease, color .3s ease;
}

.curtain-center:hover .curtain-star{ filter:brightness(1.4); }
.curtain-center:hover .star-a{ animation-duration:9s; }
.curtain-center:hover .star-b{ animation-duration:7s; }
.curtain-center:hover .curtain-spotlight{ animation-play-state:paused; opacity:1; transform:translate(-50%,-50%) scale(1.08); }
.curtain-center:hover .curtain-reveal-label{ opacity:1; letter-spacing:.4em; color:#fff; }

.curtain-center:active .monogram{ transform:scale(0.92); filter:brightness(1.5) drop-shadow(0 0 16px rgba(234,212,140,.75)); }
.curtain-center:active .curtain-star{ filter:brightness(1.8); transform:translate(-50%,-50%) scale(0.95); }
.curtain-center:active .curtain-spotlight{ opacity:1; transform:translate(-50%,-50%) scale(0.85); }

@keyframes starSpin{ to{ transform:rotate(360deg); } }
@keyframes curtainSpotlightBreathe{
  0%,100%{ opacity:.55; }
  50%{ opacity:.9; }
}

#invite-screen{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(201,162,39,0.16), transparent 55%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(91,107,66,0.28), transparent 60%),
    linear-gradient(180deg, #2A0709 0%, #4A0E14 22%, #3a0c10 48%, #33232a 68%, #23301e 88%, #1c2417 100%);
  background-size: 100% 100%, 100% 100%, 100% 220%;
  background-position: center, center, center top;
  animation: jewelBreathe 26s ease-in-out infinite;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  opacity:0; visibility:hidden;
  transition: opacity 1s ease 0.15s, visibility 1s;
}
#invite-screen.show{ opacity:1; visibility:visible; }
@keyframes jewelBreathe{
  0%,100%{ background-position: center, center, center top; }
  50%{ background-position: center, center, center 6%; }
}
.sparkle-field{
  position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;
}
.twinkle{
  position:absolute; color:var(--gold-light); opacity:0; font-size:10px; line-height:1;
  text-shadow: 0 0 6px rgba(234,212,140,0.9), 0 0 12px rgba(201,162,39,0.5);
  animation-name: twinkleStar; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes twinkleStar{
  0%,100%{ opacity:0; transform:scale(0.6); }
  50%{ opacity:0.85; transform:scale(1.15); }
}

.frame{
  position:relative;
  min-height:100%;
  padding: 44px 26px 60px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.corner{
  position:fixed; width:74px; height:74px; opacity:0.55; pointer-events:none; z-index:1;
}
.corner.tl{ top:10px; left:10px; }
.corner.tr{ top:10px; right:10px; transform:scaleX(-1); }
.corner.bl{ bottom:10px; left:10px; transform:scaleY(-1); }
.corner.br{ bottom:10px; right:10px; transform:scale(-1,-1); }
.corner path{
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.corner circle, .corner path[fill]{
  opacity:0;
  transition: opacity 0.5s ease;
}
.corner.draw path{
  transition: stroke-dashoffset 1.3s cubic-bezier(.3,.7,.25,1) var(--corner-delay, 0s);
  stroke-dashoffset: 0;
}
.corner.draw circle, .corner.draw path[fill]{
  opacity:1;
  transition: opacity 0.6s ease calc(var(--corner-delay, 0s) + 0.9s);
}

.bismillah{
  font-family:'Amiri', serif; font-size:30px; color:var(--gold-light);
  margin-top:6px; opacity:0.95;
  text-shadow: 0 0 14px rgba(234,212,140,0.45), 0 0 2px rgba(0,0,0,0.4);
  animation: bismillahGlow 4.5s ease-in-out infinite 1.4s;
}
@keyframes bismillahGlow{
  0%,100%{ text-shadow: 0 0 14px rgba(234,212,140,0.45), 0 0 2px rgba(0,0,0,0.4); }
  50%{ text-shadow: 0 0 22px rgba(234,212,140,0.75), 0 0 2px rgba(0,0,0,0.4); }
}

.lattice-divider{ width:120px; height:22px; margin:18px 0; opacity:0.8; }
.lattice-divider path, .lattice-divider line{
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: drawLine 1.4s ease forwards 0.3s;
}
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

.eyebrow{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
  letter-spacing:0.02em; font-size:17px; text-transform:none; color:var(--ivory);
  margin-top:4px; opacity:0.92;
}

.names{
  margin-top:22px;
  font-family:'Marcellus', serif;
  font-size: clamp(34px, 11vw, 46px);
  line-height:1.25;
  background: linear-gradient(100deg, #7a4e12 0%, var(--gold) 22%, #fff3cf 42%, var(--gold) 62%, #6e3f10 82%, var(--gold) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: inkSettle 1.1s cubic-bezier(.2,.7,.25,1) both, shimmer 6s linear infinite 1.1s;
}
@keyframes inkSettle{
  0%{ filter: blur(6px); opacity:0; transform: translateY(10px) scale(1.02); }
  60%{ filter: blur(1.5px); opacity:0.85; }
  100%{ filter: blur(0); opacity:1; transform: translateY(0) scale(1); }
}
@keyframes shimmer{ to{ background-position: -250% center; } }
.names.fade-up{ animation: inkSettle 1.1s cubic-bezier(.2,.7,.25,1) both, shimmer 6s linear infinite 1.1s; }
.names .and{
  display:block; font-family:'Amiri', serif; font-size:0.5em; color:var(--gold);
  margin:2px 0; -webkit-text-fill-color: var(--gold);
}
.names .parent-name{
  display:block; font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:600; font-size:0.32em; letter-spacing:0.02em; line-height:1.4;
  color:var(--gold-light); -webkit-text-fill-color: var(--gold-light); opacity:0.9;
  margin:2px 0 14px;
}
.names .parent-name.lang-ur{
  font-style:normal;
}

.verse{
  margin-top:26px; max-width:320px;
  font-style:italic; font-weight:600; font-size:16px; color:var(--ivory);
  line-height:1.7; opacity:0.94;
  position:relative; padding:18px 20px;
  border-top:1px solid var(--gold-soft); border-bottom:1px solid var(--gold-soft);
}
.verse::before, .verse::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:26px; height:1px; background:var(--gold);
  box-shadow: 0 0 6px 1px rgba(201,162,39,0.5);
}
.verse::before{ top:-1px; }
.verse::after{ bottom:-1px; }
.verse-quote{
  display:block; font-family:'Amiri',serif; font-size:34px; color:var(--gold);
  line-height:0.5; margin-bottom:8px; opacity:0.75; text-shadow:0 0 10px rgba(201,162,39,0.35);
}
.verse .cite{
  display:block; margin-top:10px; font-style:normal; font-family:'Jost',sans-serif;
  font-size:10px; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold);
}

.arch-photo{
  margin-top:32px;
  width:190px; height:230px;
  border-radius: 95px 95px 6px 6px;
  background:
    linear-gradient(160deg, var(--maroon-light), var(--maroon-deep)),
    repeating-linear-gradient(45deg, rgba(201,162,39,0.15) 0 2px, transparent 2px 18px);
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 18px 40px rgba(74,14,20,0.25);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-light); font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; opacity:0.85;
  position:relative;
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  will-change: transform;
}
.arch-photo.tilt-active{ box-shadow: 0 26px 50px rgba(74,14,20,0.35), 0 0 30px rgba(201,162,39,0.15); }
.arch-photo::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius: 96px 96px 8px 8px;
  padding:3px;
  background: linear-gradient(120deg, #7a4e12, var(--gold) 25%, #fff3cf 45%, var(--gold) 65%, #6e3f10 85%, var(--gold) 100%);
  background-size: 250% auto;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shimmer 6s linear infinite;
  pointer-events:none;
}

.details-card{
  margin-top:34px; width:100%; max-width:340px;
  background:
    linear-gradient(180deg, rgba(201,162,39,0.06), transparent 20%),
    var(--ivory);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold-soft);
  outline-offset: 4px;
  border-radius:10px;
  padding: 26px 20px;
  box-shadow: 0 14px 34px rgba(74,14,20,0.12);
  position:relative;
  overflow:hidden;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  will-change: transform;
}
.details-card.tilt-active{ box-shadow: 0 22px 44px rgba(74,14,20,0.2); }
.vine-bloom{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:0.8;
}
.vine-path{
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.vine-bloom.bloom .vine-path{
  animation: vineBloom 1.8s cubic-bezier(.3,.7,.25,1) forwards;
}
@keyframes vineBloom{ to{ stroke-dashoffset:0; } }
.vine-dot{ opacity:0; }
.vine-bloom.bloom .vine-dot{ animation: dotFade 0.5s ease forwards 1.7s; }
@keyframes dotFade{ to{ opacity:1; } }
.details-card::before{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  pointer-events:none; opacity:0;
}
.details-card.sweep::before{
  animation: cardSweep 1.4s ease-out 0.2s;
}
@keyframes cardSweep{
  0%{ left:-60%; opacity:0; }
  15%{ opacity:0.7; }
  60%{ opacity:0.5; }
  100%{ left:120%; opacity:0; }
}
.details-row{ padding: 14px 4px; border-bottom:1px dashed rgba(74,14,20,0.18); display:flex; align-items:flex-start; gap:12px; text-align:left; }
.details-row:last-child{ border-bottom:none; }
.details-icon{ flex:none; width:22px; height:22px; margin-top:2px; opacity:0.85; }
.details-body{ flex:1; }
.details-label{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--gold); opacity:0.9;
}
.details-value{
  margin-top:6px; font-family:'Marcellus', serif; font-size:19px; color:var(--maroon-deep);
}
.details-value small{ display:block; font-family:'Cormorant Garamond',serif; font-size:14px; color:var(--maroon); margin-top:2px; font-weight:400;}

.timeline{ margin-top:32px; width:100%; max-width:340px; }
.timeline-title{ font-family:'Marcellus', serif; font-size:19px; color:var(--ivory); margin-bottom:22px; text-shadow: 0 0 12px rgba(234,212,140,0.3); }
.timeline-track{ position:relative; padding:2px 0; }
.timeline-line{ position:absolute; left:50%; top:0; bottom:0; width:4px; height:100%; transform:translateX(-50%); z-index:0; }
.timeline-line-path{ stroke-dasharray:900; stroke-dashoffset:900; vector-effect:non-scaling-stroke; }
.timeline-track.bloom .timeline-line-path{ animation: vineBloom 1.8s cubic-bezier(.3,.7,.25,1) forwards; }
.timeline-row{ position:relative; display:flex; margin-bottom:26px; z-index:1; }
.timeline-row:last-child{ margin-bottom:0; }
.timeline-row.left{ justify-content:flex-start; }
.timeline-row.right{ justify-content:flex-end; }
.timeline-dot{
  position:absolute; left:50%; top:16px; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%; background:var(--gold);
  box-shadow: 0 0 0 4px var(--ivory), 0 0 0 5px var(--gold-soft);
  opacity:0; transition: opacity 0.5s ease 1.6s;
}
.timeline-track.bloom .timeline-dot{ opacity:1; }
.timeline-card{
  width:47%; text-align:left; background:var(--ivory); border:1px solid var(--gold-soft);
  border-radius:10px; padding:12px 13px; box-shadow:0 8px 20px rgba(74,14,20,0.1);
}
.timeline-card .details-icon{ width:19px; height:19px; margin-bottom:6px; opacity:0.85; }
.timeline-card .details-label{ font-size:9.5px; }
.timeline-card .details-value{ margin-top:4px; }
.timeline-card .details-value small{ font-size:12.5px; }

.countdown{
  margin-top:30px; display:flex; gap:14px; position:relative;
}
.countdown::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120%; height:220%; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse, rgba(201,162,39,0.22), transparent 70%);
  filter: blur(6px);
  animation: countdownGlow 2.6s ease-in-out infinite;
}
@keyframes countdownGlow{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }
.cd-unit{
  width:62px; padding:12px 0; background:
    linear-gradient(160deg, #5c1119 0%, var(--maroon-deep) 55%, #3a0a0f 100%);
  border-radius:8px;
  color:var(--ivory);
  border:1px solid var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(234,212,140,0.35), inset 0 -6px 10px rgba(0,0,0,0.4), 0 6px 16px rgba(74,14,20,0.25);
  position:relative; overflow:hidden;
}
.cd-unit::after{
  content:""; position:absolute; inset:0; border-radius:8px; padding:1px;
  background: linear-gradient(160deg, var(--gold-light), transparent 40%, transparent 60%, var(--gold-light));
  opacity:0.35; pointer-events:none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cd-num{ font-family:'Marcellus',serif; font-size:22px; color:var(--gold-light); display:inline-block; }
.cd-num.roll{ animation: numRoll 0.5s cubic-bezier(.3,.8,.3,1); }
@keyframes numRoll{
  0%{ transform:translateY(-40%); opacity:0; filter:blur(2px); }
  100%{ transform:translateY(0); opacity:1; filter:blur(0); }
}
.cd-lbl{ font-family:'Jost',sans-serif; font-size:8.5px; letter-spacing:0.15em; text-transform:uppercase; opacity:0.75; margin-top:2px;}

.scratch-caption{
  margin-top:16px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--gold-light); opacity:0.8;
}
.scratch-section{ margin-top:14px; display:flex; gap:12px; justify-content:center; }
.scratch-tile{
  position:relative; width:90px; height:92px; border-radius:8px; overflow:hidden;
  background: linear-gradient(160deg, #5c1119 0%, var(--maroon-deep) 55%, #3a0a0f 100%);
  border:1px solid var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(234,212,140,0.35), inset 0 -6px 10px rgba(0,0,0,0.4), 0 6px 16px rgba(74,14,20,0.25);
}
.scratch-tile::after{
  content:""; position:absolute; inset:0; border-radius:8px; padding:1px;
  background: linear-gradient(160deg, var(--gold-light), transparent 40%, transparent 60%, var(--gold-light));
  opacity:0.35; pointer-events:none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.scratch-value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6px; font-family:'Marcellus',serif; font-size:19px; color:var(--gold-light);
}
.scratch-value .lang-ur{ font-size:17px; }
.scratch-label{
  position:absolute; bottom:6px; left:0; right:0; text-align:center;
  font-family:'Jost',sans-serif; font-size:8.5px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--gold-light); opacity:0.7; pointer-events:none;
}
.scratch-canvas{
  position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:pointer;
  transition: opacity 0.6s ease;
}
.scratch-tile.revealed .scratch-canvas{ opacity:0; pointer-events:none; }

.rsvp{
  margin-top:36px; width:100%; max-width:340px;
}
.rsvp-title{
  font-family:'Marcellus', serif; font-size:20px; color:var(--ivory);
  text-shadow: 0 0 12px rgba(234,212,140,0.3);
}
.rsvp-sub{ margin-top:6px; font-size:14.5px; color:var(--gold-light); opacity:0.85; }
.rsvp-btns{ margin-top:18px; display:flex; gap:12px; }
.btn{
  flex:1; padding:13px 0; border-radius:30px; border:1px solid var(--gold);
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:0.15em; text-transform:uppercase;
  cursor:pointer; transition: all .25s ease; background:transparent; color:var(--gold-light);
  position:relative; overflow:hidden;
}
.btn.primary{ background:var(--maroon-deep); color:var(--ivory); border-color:var(--gold); animation: btnBreathe 3.2s ease-in-out infinite; }
@keyframes btnBreathe{
  0%,100%{ box-shadow: 0 0 0 0 rgba(201,162,39,0); }
  50%{ box-shadow: 0 0 14px 2px rgba(201,162,39,0.35); }
}
.btn:active{ transform: scale(0.96); }
.btn.primary:hover{ background:var(--maroon); }
.btn:hover{ background: rgba(234,212,140,0.1); }
.btn .ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(234,212,140,0.8), rgba(234,212,140,0) 70%);
  transform: translate(-50%,-50%) scale(0);
  animation: rippleSpread 0.7s ease-out forwards;
}
@keyframes rippleSpread{
  to{ transform: translate(-50%,-50%) scale(1); opacity:0; }
}

.rsvp-note{
  margin-top:14px; font-size:12.5px; color:var(--gold-light); opacity:0; height:0; overflow:hidden;
  transition: opacity .4s ease;
}
.rsvp-note.show{ opacity:1; height:auto; margin-bottom:4px; }

.footer-note{
  margin-top:46px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold-light); opacity:0.65;
}
.footer-heart{ color:var(--gold); margin:0 6px; }
.flourish-divider{
  width:64px; height:16px; margin:0 auto; opacity:0.75;
}

.spin-slow{ animation: spin 22s linear infinite; }
.spin-rev{ animation: spin 16s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.orbit-rings{ animation: spin 9s linear infinite; }
.petal-drift ellipse{ animation: drift 5s ease-in-out infinite; }
.petal-drift ellipse:nth-child(2){ animation-delay:1.2s; }
.petal-drift ellipse:nth-child(3){ animation-delay:2.4s; }
@keyframes drift{ 0%,100%{ transform:translateY(0); opacity:0.5;} 50%{ transform:translateY(-8px); opacity:0.9;} }

.nikah-caption{
  margin-top:14px; font-family:'Amiri', serif; font-style:italic; font-size:19px;
  color: var(--gold-light); letter-spacing:0.02em; opacity:0.95;
  text-shadow: 0 0 10px rgba(234,212,140,0.4);
  position:relative;
}

.greeting{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:18px;
  color:var(--gold); margin-top:10px; opacity:1;
}

.mini-actions{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }
.mini-btn{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--maroon-deep); border:1px solid var(--gold); border-radius:20px;
  padding:6px 12px; background:rgba(201,162,39,0.08); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; transition: background .2s ease;
}
.mini-btn:hover{ background:rgba(201,162,39,0.2); }
.mini-btn svg{ width:12px; height:12px; }
.share-section .mini-btn, .footer-note .mini-btn{
  color:var(--gold-light); background:rgba(0,0,0,0.22);
}
.share-section .mini-btn:hover, .footer-note .mini-btn:hover{ background:rgba(0,0,0,0.36); }

.venue-map{
  margin-top:10px; width:100%; border-radius:8px; overflow:hidden;
  border:1px solid var(--gold); outline:1px solid var(--gold-soft); outline-offset:2px;
  box-shadow: 0 8px 20px rgba(74,14,20,0.12);
}
.venue-map iframe{ display:block; width:100%; height:150px; border:0; }

.share-section{
  margin-top:38px; width:100%; max-width:340px;
}
.share-title{ font-family:'Marcellus',serif; font-size:18px; color:var(--ivory); text-shadow: 0 0 12px rgba(234,212,140,0.3); }
.qr-box{
  margin:16px auto 0; width:132px; height:132px; background:var(--ivory);
  border:1px solid var(--gold); border-radius:10px; padding:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(74,14,20,0.1);
}
.qr-box img, .qr-box canvas{ width:100%; height:100%; }
.share-actions{ margin-top:16px; display:flex; gap:10px; justify-content:center; }

.lang-toggle{
  position:fixed; left:14px; bottom:14px; z-index:20;
  font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:0.12em;
  background:var(--maroon-deep); color:var(--ivory); border:1px solid var(--gold);
  border-radius:20px; padding:7px 14px; cursor:pointer; opacity:0.92;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  display:none; /* hidden on the intro/lantern screen — only shown once the invite is opened */
}
.lang-toggle.show{ display:inline-block; }
body.lang-ur .lang-en{ display:none; }
body:not(.lang-ur) .lang-ur{ display:none; }
.lang-ur{ font-family:'Amiri', serif; direction:rtl; }
.lang-ur.eyebrow{ letter-spacing:0; font-size:13px; }
.lang-ur.names{ font-family:'Amiri', serif; }
.lang-ur .details-label, .lang-ur.details-label{ letter-spacing:0; font-size:12px; }

.ambient-petal{
  position:fixed; top:-8%; z-index:1; pointer-events:none;
  color: var(--gold); opacity:0;
  animation-name: ambientDrift; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes ambientDrift{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:0.28; }
  50%{ transform: translateY(55vh) translateX(var(--pdrift,16px)) rotate(160deg); }
  92%{ opacity:0.2; }
  100%{ transform: translateY(112vh) translateX(calc(var(--pdrift,16px) * -1)) rotate(320deg); opacity:0; }
}

.celebrate-petal{
  position:fixed; top:-30px; font-size:18px; z-index:50; pointer-events:none;
  animation-name: petalFall; animation-timing-function: ease-in;
}
@keyframes petalFall{
  0%{ transform: translateY(0) rotate(0deg); opacity:1; }
  100%{ transform: translateY(105vh) rotate(320deg); opacity:0.2; }
}

.toast{
  position:fixed; left:50%; bottom:70px; transform:translateX(-50%) translateY(20px);
  background:var(--maroon-deep); color:var(--ivory); font-family:'Jost',sans-serif;
  font-size:12px; letter-spacing:0.06em; padding:10px 18px; border-radius:24px;
  border:1px solid var(--gold-soft); opacity:0; transition: all .35s ease; z-index:40;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.audio-toggle{
  position:fixed; top:16px; right:16px; z-index:20;
  width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,0.28); backdrop-filter: blur(4px);
  border:1px solid rgba(234,212,140,0.5);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s ease;
}
.audio-toggle:hover{ background:rgba(0,0,0,0.4); }
.audio-toggle svg{ width:18px; height:18px; }
.audio-toggle .eq-bar{
  transform-origin: bottom center;
  animation: eqPulse 0.9s ease-in-out infinite;
}
.audio-toggle .eq-bar:nth-child(2){ animation-delay:0.15s; }
.audio-toggle .eq-bar:nth-child(3){ animation-delay:0.3s; }
@keyframes eqPulse{
  0%,100%{ transform: scaleY(0.4); }
  50%{ transform: scaleY(1); }
}
#invite-screen .audio-toggle{
  background:rgba(0,0,0,0.3); border-color:var(--gold-soft);
}
#invite-screen .audio-toggle:hover{ background:rgba(0,0,0,0.44); }

.fade-up{ opacity:0; transform: translateY(16px); animation: fadeUp 0.8s ease forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} }

.reveal-up{
  opacity:0; transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.25,1), transform 0.9s cubic-bezier(.2,.7,.25,1);
}
.reveal-up.in{ opacity:1; transform:translateY(0); }
.reveal-line{
  stroke-dasharray:70; stroke-dashoffset:70;
  transition: stroke-dashoffset 1s ease;
}
.reveal-up.in .reveal-line{ stroke-dashoffset:0; }

.lantern-stage{
  position:absolute; inset:0;
  overflow:hidden;
}

.lantern-stars{
  position:absolute; inset:0 0 45% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 16%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 30% 8%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 60% 12%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 78% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 90% 9%, rgba(255,255,255,.65), transparent);
  animation: lanternTwinkle 5s ease-in-out infinite alternate;
}
@keyframes lanternTwinkle{ 0%{opacity:.5;} 100%{opacity:1;} }

.lanterns-field{ position:absolute; inset:0; }
.fly-lantern{
  position:absolute; bottom:-120px;
  width:28px; height:38px;
  border-radius:6px 6px 9px 9px;
  background: radial-gradient(ellipse at 50% 35%, var(--gold-light) 0%, #ff9d42 45%, #a24a12 100%);
  box-shadow: 0 0 16px 5px rgba(255,157,66,.5), 0 0 36px 12px rgba(255,140,60,.22);
  animation-name: lanternRise, lanternSway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
.fly-lantern::before{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:12px; height:7px; border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, #8a4a1e, var(--maroon));
}
@keyframes lanternRise{
  0%{ bottom:-120px; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ bottom:112vh; opacity:0; }
}
@keyframes lanternSway{
  0%,100%{ transform:translateX(0) rotate(-2deg); }
  50%{ transform:translateX(16px) rotate(2deg); }
}

.lantern-titles{
  position:absolute; top:14%; left:50%; transform:translateX(-50%);
  width:88%; max-width:560px; text-align:center; color:var(--cream);
  text-shadow:0 2px 20px rgba(0,0,0,.45);
}
.lantern-titles .lname{
  display:block; font-family:'Marcellus', serif; font-weight:400;
  font-size:clamp(26px, 6.4vw, 42px); letter-spacing:.04em; color:var(--gold-light);
  opacity:0;
}
.lantern-titles .lweds{
  display:block; font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
  font-size:clamp(17px, 3.4vw, 22px); letter-spacing:.4em; text-transform:lowercase;
  color:var(--cream); margin:8px 0; opacity:0;
}
@keyframes lanternNameIn{
  0%{ opacity:0; transform:translateY(14px); letter-spacing:.15em; }
  100%{ opacity:1; transform:translateY(0); }
}
.lantern-subline{
  margin-top:16px; font-family:'Jost', sans-serif; font-weight:300;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  opacity:0;
}
@keyframes lanternFadeUp{ 0%{opacity:0; transform:translateY(8px);} 100%{opacity:1; transform:translateY(0);} }

.lantern-monument{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:min(72vw, 480px);
  filter:drop-shadow(0 -10px 44px rgba(201,162,39,.3));
  opacity:0;
}

.lantern-cta{
  position:absolute; bottom:11%; left:50%; transform:translate(-50%,0);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; padding:14px; margin:0;
  cursor:pointer; opacity:0;
}
.cta-lantern{
  position:relative; width:38px; height:52px;
  animation: ctaFloat 3.4s ease-in-out infinite;
}
.cta-beacon{
  position:absolute; left:50%; top:44%; width:34px; height:34px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid rgba(255,193,110,.6); opacity:0; pointer-events:none;
  animation: ctaBeacon 2.8s ease-out infinite;
}
.cta-beacon.b2{ animation-delay:1.4s; }
.cta-glow{
  position:absolute; left:50%; top:44%; width:104px; height:104px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,201,130,.85) 0%, rgba(255,160,70,.32) 50%, transparent 74%);
  animation: ctaPulse 2.1s ease-in-out infinite;
  mix-blend-mode:screen;
}
.cta-ember{
  position:absolute; left:50%; bottom:8px; width:3px; height:3px; border-radius:50%;
  background:var(--gold-light); box-shadow:0 0 7px 2px rgba(255,190,110,.9);
  opacity:0; pointer-events:none;
  animation: ctaEmber 2.6s ease-in infinite;
}
.cta-ember.e2{ left:36%; animation-delay:.7s; animation-duration:2.9s; }
.cta-ember.e3{ left:66%; animation-delay:1.5s; animation-duration:2.3s; }
.cta-body{
  position:absolute; inset:0; border-radius:7px 7px 12px 12px;
  background: radial-gradient(ellipse at 50% 30%, #fff3d6 0%, var(--gold-light) 32%, #ff9d42 64%, #a24a12 100%);
  box-shadow: 0 0 22px 7px rgba(255,175,90,.75), 0 0 48px 18px rgba(255,140,60,.4);
  animation: ctaFlicker 2.6s ease-in-out infinite;
}
.cta-body::before{
  content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:16px; height:8px; border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, #c98a4e, var(--gold));
}
.cta-body::after{
  content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  width:2px; height:9px; background:var(--gold-light); opacity:.85;
}
.cta-ring{
  position:absolute; left:50%; top:44%; width:38px; height:38px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid var(--gold-light); opacity:0; pointer-events:none;
}
.cta-label{
  font-family:'Jost', sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-light);
  animation: ctaLabelGlow 2.1s ease-in-out infinite;
  transition: color .3s ease, letter-spacing .3s ease;
}
.cta-hint{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
  font-size:11.5px; letter-spacing:.02em; color:var(--gold);
  opacity:.7;
}
.lantern-cta:hover .cta-label,
.lantern-cta:active .cta-label{ color:#fff; letter-spacing:.34em; }
.lantern-cta:hover .cta-lantern,
.lantern-cta:active .cta-lantern{ animation-play-state:paused; transform:translateY(-4px) scale(1.14); }
.lantern-cta:hover .cta-glow,
.lantern-cta:active .cta-glow{ animation-play-state:paused; opacity:1; transform:translate(-50%,-50%) scale(1.3); }
.lantern-cta:hover .cta-body,
.lantern-cta:active .cta-body{ animation-play-state:paused; filter:brightness(1.3); }
.lantern-cta:active .cta-ring{ animation: ctaRingPop .6s ease-out; }

@keyframes ctaFloat{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-7px) rotate(3deg); }
}
@keyframes ctaPulse{
  0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(0.85); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.22); }
}
@keyframes ctaFlicker{
  0%,100%{ filter:brightness(1) saturate(1); }
  20%{ filter:brightness(1.14) saturate(1.1); }
  35%{ filter:brightness(0.93); }
  55%{ filter:brightness(1.2) saturate(1.12); }
  70%{ filter:brightness(0.97); }
  85%{ filter:brightness(1.1); }
}
@keyframes ctaBeacon{
  0%{ opacity:.7; transform:translate(-50%,-50%) scale(0.7); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(2.8); }
}
@keyframes ctaEmber{
  0%{ opacity:0; transform:translate(-50%,0) scale(0.6); }
  15%{ opacity:.9; }
  80%{ opacity:.5; }
  100%{ opacity:0; transform:translate(-50%,-46px) translateX(6px) scale(0.3); }
}
@keyframes ctaLabelGlow{
  0%,100%{ text-shadow:0 0 8px rgba(255,180,90,.35), 0 2px 12px rgba(0,0,0,.55); }
  50%{ text-shadow:0 0 18px rgba(255,190,110,.75), 0 2px 12px rgba(0,0,0,.55); }
}
@keyframes ctaRingPop{
  0%{ opacity:.9; transform:translate(-50%,-50%) scale(0.6); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(2.6); }
}
@keyframes ctaEnter{
  0%{ opacity:0; transform:translate(-50%,10px); }
  100%{ opacity:1; transform:translate(-50%,0); }
}

.lantern-cta.done{ opacity:0; transform:translate(-50%,0) scale(0.85); pointer-events:none; transition:opacity .5s ease, transform .5s ease; }

.lantern-stage.building .lname.bride{ animation: lanternNameIn 1.1s ease-out .3s forwards; }
.lantern-stage.building .lweds{ animation: lanternNameIn 1.1s ease-out 1.1s forwards; }
.lantern-stage.building .lname.groom{ animation: lanternNameIn 1.1s ease-out 1.7s forwards; }
.lantern-stage.building .lantern-subline{ animation: lanternFadeUp 1s ease-out 2.5s forwards; }
.lantern-stage.building .lantern-monument{ animation: lanternFadeUp 1.4s ease-out .6s forwards; }
.lantern-stage.building .lantern-cta{ animation: ctaEnter 1s ease-out 3s forwards; }
.lantern-stage.built .lname,
.lantern-stage.built .lweds,
.lantern-stage.built .lantern-subline,
.lantern-stage.built .lantern-monument{ opacity:1; }
.lantern-stage.built .lantern-cta{ opacity:1; transform:translate(-50%,0); }