/* =========================================================
   effects.css — light, gold, flame, particles, atmosphere
   Everything here is opacity/transform on small layers.
   ========================================================= */

/* ---------- cover: ambient light & vignette ---------- */
.cover-light{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 95% 70% at 50% 42%,transparent 40%,rgba(22,4,8,.55) 100%);transition:opacity .8s ease}
.cover-light .drift{position:absolute;left:-30%;top:-10%;width:160%;height:80%;opacity:.55;
  background:radial-gradient(ellipse 40% 45% at 50% 50%,rgba(255,205,130,.16),transparent 70%);animation:lightDrift 16s ease-in-out infinite alternate}
@keyframes lightDrift{from{transform:translate3d(-10%,0,0)}to{transform:translate3d(12%,6%,0)}}
.cover.unlatch .cover-light{opacity:0}
.cover-dust{position:absolute;inset:0;z-index:2;pointer-events:none}
.cover.open .cover-dust{opacity:0;transition:opacity .6s}

/* halo behind the nameplate */
.latch .halo{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1.4;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,214,140,.38),rgba(255,180,90,.12) 40%,transparent 68%);opacity:.55;animation:halo 5s ease-in-out infinite}
@keyframes halo{50%{opacity:.85}}
.cover.unlatch .latch .halo{animation:haloTap .45s ease forwards}
@keyframes haloTap{to{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}

/* bloom: warm light expanding from the nameplate */
.bloom{position:absolute;left:50%;top:30cqh;width:120cqw;aspect-ratio:1;z-index:4;pointer-events:none;border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,rgba(255,236,190,.55),rgba(255,190,100,.22) 35%,transparent 65%)}
.cover.unlatch .bloom{animation:bloom 1.7s cubic-bezier(.3,.1,.2,1) .25s forwards}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}

/* shaft: golden light seen through the opening doors */
.shaft{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transform:scaleX(.05);
  background:linear-gradient(90deg,transparent,rgba(255,226,160,.5) 30%,rgba(255,245,215,.75) 50%,rgba(255,226,160,.5) 70%,transparent)}
.cover.open .shaft{animation:shaft 1.7s ease forwards}
@keyframes shaft{0%{opacity:0;transform:scaleX(.05)}30%{opacity:1}100%{opacity:0;transform:scaleX(1.3)}}

/* afterglow over the revealed card, fades back to normal */
.afterglow{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 55% at 50% 38%,rgba(255,226,165,.45),rgba(255,200,120,.12) 55%,transparent 80%)}
.afterglow.on{animation:afterglow 2.6s ease forwards}
@keyframes afterglow{0%{opacity:.9}100%{opacity:0}}

/* ---------- gold light sweep (occasional, triggered by JS) ---------- */
.gild::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 38%,rgba(255,240,200,.5) 50%,transparent 62%) 150% 0/300% 100% no-repeat;
  -webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;mix-blend-mode:screen}
.gild.sweep::after{animation:sweep 1.15s ease-in-out forwards}
@keyframes sweep{0%{opacity:0;background-position:150% 0}15%,80%{opacity:1}100%{opacity:0;background-position:-50% 0}}

.gild-text{--base:var(--red);
  background:linear-gradient(110deg,var(--base) 42%,#f3d58d 50%,var(--base) 58%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--base)}
.velvet .gild-text{--base:var(--gold-hi)}
.gild-text.sweep{animation:textSweep 1.3s ease-in-out forwards}
@keyframes textSweep{from{background-position:100% 0}to{background-position:0 0}}
/* the big date already has a gold gradient; add the highlight as a top layer */
.big-date .dd.gild-text{background:
   linear-gradient(110deg,transparent 42%,rgba(255,250,228,.9) 50%,transparent 58%) 100% 0/300% 100% no-repeat,
   linear-gradient(180deg,#f6e3a6 10%,#c8a45d 55%,#9c7a3c 90%);-webkit-background-clip:text;background-clip:text}
.big-date .dd.gild-text.sweep{animation:ddSweep 1.3s ease-in-out forwards}
@keyframes ddSweep{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}

/* monogram disc */
.gild-disc{position:relative;overflow:hidden}
.gild-disc::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;background:linear-gradient(110deg,transparent 38%,rgba(255,236,190,.5) 50%,transparent 62%) 150% 0/300% 100% no-repeat}
.gild-disc.sweep::after{animation:sweep 1.1s ease-in-out forwards}

/* buttons: thin sheen + tactile press */
.btn>span{position:relative;overflow:hidden}
.btn>span::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,236,190,.35) 50%,transparent 60%) 150% 0/300% 100% no-repeat}
.btn.sweep>span::after{animation:sweep 1.1s ease-in-out forwards}
.btn,.chip,.icon-btn .disc,.choice button,.stepper button,.music-btn,.seal{transition:transform .22s cubic-bezier(.3,1.4,.5,1),filter .25s,box-shadow .25s}
.btn:active{transform:scale(.96);filter:drop-shadow(0 0 10px rgba(240,205,130,.55)) drop-shadow(0 4px 8px rgba(40,6,10,.35))}
.chip:active,.choice button:active,.stepper button:active{transform:scale(.96);box-shadow:0 0 0 3px rgba(232,208,142,.35)}
.icon-btn:active .disc{transform:scale(.94);box-shadow:0 0 0 2px #e6c77f,0 0 0 4px #5a171d,0 0 16px 4px rgba(240,205,130,.45)}
@media (hover:hover){
  .btn:hover{filter:drop-shadow(0 8px 14px rgba(40,6,10,.4)) brightness(1.06)}
  .btn:hover>span::after{animation:sweep 1.1s ease-in-out}
  .icon-btn:hover .disc{box-shadow:0 0 0 2px #e6c77f,0 0 0 4px #5a171d,0 0 0 5px rgba(200,164,93,.8),0 8px 16px rgba(60,10,15,.35)}
  .chip:hover{filter:brightness(1.05)}
}

/* ---------- diya flame: only flame + glow move ---------- */
.diya{position:relative;display:inline-block;line-height:0;align-self:flex-end;height:max-content}
.diya>img{width:100%}
.flame{position:absolute;left:var(--fx);bottom:calc(100% - var(--fy));width:18%;aspect-ratio:.46;transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none;
  border-radius:50% 50% 46% 46% / 72% 72% 28% 28%;
  background:radial-gradient(ellipse 42% 38% at 50% 74%,#fffef4 0 35%,rgba(255,250,220,0) 100%),linear-gradient(180deg,rgba(255,150,40,.85) 0%,#ffb13d 30%,#ffd56b 62%,#ff9a2a 100%);
  box-shadow:0 0 6px 2px rgba(255,170,60,.55);animation:flame 2.1s ease-in-out infinite}
.flame::before{content:"";position:absolute;left:50%;top:55%;width:560%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,190,90,.55),rgba(255,160,60,.16) 40%,transparent 68%);animation:flameGlow 2.9s ease-in-out infinite}
/* the pair already has a painted flame: we only add light over it */
.flame.lit{width:15%;background:none;box-shadow:none}
@keyframes flame{
  0%,100%{transform:translateX(-50%) scale(1,1) skewX(0)}
  22%{transform:translateX(-50%) scale(.94,1.06) skewX(-2deg)}
  48%{transform:translateX(-50%) scale(1.03,.95) skewX(1.5deg)}
  71%{transform:translateX(-50%) scale(.97,1.04) skewX(-1deg)}}
@keyframes flameGlow{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}75%{opacity:.7;transform:translate(-50%,-50%) scale(.97)}}

/* ---------- soft glows behind names / couple / closing emblem ---------- */
.name-glow{position:absolute;left:50%;top:50%;width:150%;height:130%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,226,165,.55),rgba(255,210,140,.18) 45%,transparent 70%)}
.in .name-glow{opacity:1}
.couple-glow{position:absolute;left:50%;bottom:10%;width:120%;height:75%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,214,150,.45),transparent 65%)}
.closing-glow{position:absolute;left:50%;top:18%;width:140%;height:55%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,190,100,.3),rgba(255,160,70,.08) 45%,transparent 70%)}
.in .closing-glow{opacity:1;animation:glowPulse 6s ease-in-out 2s infinite}
@keyframes glowPulse{50%{opacity:.75}}

/* ---------- section seams: soft light edges + ornamental clasp ---------- */
.velvet{box-shadow:inset 0 34px 40px -34px rgba(10,2,4,.7),inset 0 -34px 40px -34px rgba(10,2,4,.6)}
.paper{box-shadow:inset 0 28px 34px -28px rgba(90,23,29,.28),inset 0 -28px 34px -28px rgba(90,23,29,.22)}
.seam{position:absolute;top:0;left:50%;width:72px;transform:translate(-50%,-48%);z-index:3;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}

/* ---------- ambient lighting that follows the scroll ---------- */
.ambient{position:absolute;inset:0;z-index:3;pointer-events:none}
.ambient i{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.a-cream{background:radial-gradient(ellipse 90% 60% at 50% 22%,rgba(255,248,228,.26),transparent 70%)}
.a-gold{background:radial-gradient(ellipse 90% 70% at 50% 30%,rgba(255,196,110,.16),transparent 70%),linear-gradient(rgba(255,176,80,.05),rgba(255,176,80,.05))}
.a-glow{background:radial-gradient(ellipse 80% 55% at 50% 40%,rgba(255,200,120,.1),transparent 70%)}
.a-candle{background:radial-gradient(ellipse 85% 65% at 50% 42%,rgba(255,176,90,.08) 0%,transparent 45%,rgba(58,10,16,.34) 100%)}
.a-dusk{background:radial-gradient(ellipse 80% 55% at 50% 35%,rgba(255,196,110,.1),transparent 60%,rgba(12,2,4,.4) 100%)}
.frame[data-light="cream"] .a-cream,.frame[data-light="gold"] .a-gold,.frame[data-light="glow"] .a-glow,
.frame[data-light="candle"] .a-candle,.frame[data-light="dusk"] .a-dusk{opacity:1}

/* ---------- particles ---------- */
.dust{position:absolute;left:var(--x);top:var(--y);width:var(--s,2.5px);height:var(--s,2.5px);border-radius:50%;
  background:#ffe6a8;box-shadow:0 0 5px 1px rgba(255,210,120,.5);opacity:0;animation:dust var(--t) ease-in-out var(--delay) infinite}
@keyframes dust{0%{opacity:0;transform:translate3d(0,0,0)}35%{opacity:var(--o,.45)}70%{opacity:calc(var(--o,.45) * .6)}100%{opacity:0;transform:translate3d(var(--dx,10px),-54px,0)}}
.dust-field{position:absolute;inset:0;pointer-events:none;z-index:1}
.petal{position:absolute;top:-30px;left:var(--x);width:var(--s);height:auto;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(60,15,0,.25));
  animation:fall var(--t) cubic-bezier(.35,.1,.55,.9) var(--delay) forwards}
@keyframes fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--r))}
  10%{opacity:.9}
  40%{transform:translate3d(var(--sway),40cqh,0) rotate(calc(var(--r) + 120deg))}
  75%{opacity:.8;transform:translate3d(calc(var(--sway) * -.4),78cqh,0) rotate(calc(var(--r) + 230deg))}
  100%{opacity:0;transform:translate3d(calc(var(--sway) * .3),108cqh,0) rotate(calc(var(--r) + 300deg))}}

/* ---------- reduced motion ---------- */

/* =========================================================
   Interaction pass
   ========================================================= */
/* script text + gradient fill: pad the box so swashes are painted (fixes clipped R / N) */
.gild-text{display:inline-block;padding:.16em .5em .12em;margin:-.16em -.5em -.12em}

/* cover: nudge the emblem when someone taps elsewhere */
.latch.nudge .plate{animation:nudge .7s cubic-bezier(.3,1.6,.5,1)}
.latch.nudge .halo{animation:haloTap .5s ease alternate 2}
@keyframes nudge{0%,100%{transform:scale(1)}40%{transform:scale(1.07)}}
.latch:focus-visible{outline:2px solid var(--gold-hi);outline-offset:6px}
@keyframes ping{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}

/* hero: light the diya */
.c-diya .flame{opacity:0}
.hero.lit .c-diya .flame{opacity:1;animation:ignite .7s cubic-bezier(.3,1.4,.5,1),flame 2.1s ease-in-out .7s infinite}
@keyframes ignite{0%{opacity:0;transform:translateX(-50%) scale(.1,.2)}60%{opacity:1;transform:translateX(-50%) scale(1.15,1.2)}100%{transform:translateX(-50%) scale(1)}}
.hero.ready-diya .diya-btn .ring{animation:diyaRing 2.4s ease-out infinite}
.hero.lit .diya-btn .ring{animation:none;opacity:0}
@keyframes diyaRing{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
.hero::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-10%;height:70%;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 55% 60% at 50% 80%,rgba(255,196,110,.5),rgba(255,170,80,.14) 45%,transparent 72%);transition:opacity 1.6s ease}
.hero.lit::before{opacity:1}
.hero.lit .couple-glow{filter:brightness(1.25) saturate(1.2);transition:filter 1.6s}

/* couple: seal stamps as they come together */
.couple.in:not(.united-done) .mono-ring{animation:ripple2 2.6s ease-out 1.4s infinite}
@keyframes ripple2{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.monogram:active .mono-disc{transform:scale(.94)}
.united-done .mono-disc{animation:stamp .9s cubic-bezier(.3,1.4,.5,1) .55s both;box-shadow:inset 0 -4px 8px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,200,190,.25),0 0 0 3px #e6c77f,0 0 0 5px #5a171d,0 0 0 6px rgba(230,199,127,.8),0 0 30px 8px rgba(255,200,120,.45)}
@keyframes stamp{0%{transform:scale(1)}35%{transform:scale(1.28)}65%{transform:scale(.92)}100%{transform:scale(1)}}
.united-done .mono-ring{animation:ripple2 1s ease-out .9s 1}

/* save the date: foil */
@keyframes foilSheen{0%{opacity:0;background-position:150% 0}8%{opacity:1}22%{opacity:1;background-position:-50% 0}24%,100%{opacity:0;background-position:-50% 0}}
@keyframes revealGlow{0%{box-shadow:inset 0 0 0 0 rgba(255,210,130,0)}30%{box-shadow:inset 0 0 40px 6px rgba(255,210,130,.6)}100%{box-shadow:inset 0 0 0 0 rgba(255,210,130,0)}}
@keyframes fleck{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--fx),var(--fy),0) rotate(var(--fr))}}

/* note: garlands lower in, then sway */
.moment.in .strand{animation:strandDrop 1.1s var(--ease) calc(var(--i) * 70ms) both,strandSway var(--sw) ease-in-out calc(1.2s + var(--i) * 70ms) infinite alternate}
@keyframes strandDrop{from{transform:translateY(-110%)}to{transform:none}}
@keyframes strandSway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
.moment:not(.in) .strand{transform:translateY(-110%)}
.envelope:not(.opened):hover .seal{transform:scale(1.04);transition:transform .3s}

/* closing: blessing shower */
.closing{cursor:pointer}
.closing .btn,.closing a{cursor:pointer}
.petal.burst{top:var(--y);left:var(--x);animation:burst var(--t) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes burst{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--r)) scale(.6)}
  8%{opacity:1}
  28%{transform:translate3d(var(--bx),var(--by),0) rotate(calc(var(--r) + 90deg)) scale(1)}
  100%{opacity:0;transform:translate3d(calc(var(--bx) * 1.5),42cqh,0) rotate(calc(var(--r) + 300deg)) scale(.9)}}


/* hero diya sits on light paper: a touch more light so the flame reads */
.c-diya .flame{box-shadow:0 0 8px 3px rgba(255,150,40,.55)}
.c-diya .flame::before{width:700%;background:radial-gradient(circle,rgba(255,170,60,.5),rgba(255,150,50,.16) 42%,transparent 68%)}