.show{position:relative;height:430vh}
.viewport{
  position:sticky;top:0;
  height:100vh;height:100lvh;
  overflow:hidden;background:#000;
}
.layer{position:absolute;inset:0;pointer-events:none}
.bg-bordeaux,.bg-glow,.bg-blush{opacity:0}
.bg-bordeaux{background:radial-gradient(ellipse 120% 90% at 50% 42%,#8c1b33 0%,var(--bdx) 45%,#22040a 100%)}
.bg-glow{background:radial-gradient(circle at 50% 60%,rgba(249,223,170,.26) 0%,rgba(249,223,170,.08) 34%,transparent 64%)}
.bg-blush{background:radial-gradient(ellipse at 50% 42%,#fffafb 0%,var(--blush) 45%,#f5d6dd 100%)}
.floor{
  position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(249,223,170,.2),rgba(232,87,127,.08) 45%,transparent 72%);
}

.beams{position:absolute;inset:0;pointer-events:none}
.beams.back{z-index:4}
.beams.front{z-index:31}
.beam{
  position:absolute;top:-8%;left:var(--x);
  width:var(--w);height:130%;margin-left:calc(var(--w) / -2);
  transform-origin:50% 0;
}
.beam i{
  position:absolute;inset:0;transform-origin:50% 0;
  background:linear-gradient(to bottom,var(--c) 0%,transparent 82%);
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  animation:sway var(--t) ease-in-out infinite alternate;
  animation-delay:var(--dl,0s);
}
@keyframes sway{
  from{transform:rotate(calc(var(--a) - 14deg))}
  to{transform:rotate(calc(var(--a) + 14deg))}
}

.ribbon{position:absolute;left:0;width:260vw;height:24vh;opacity:0;pointer-events:none}
.r1{top:14%;z-index:5;transform-origin:0 50%;rotate:-7deg}
.r2{top:70%;z-index:12;rotate:5deg}
.r3{top:40%;z-index:5;rotate:-3deg}

.curtain{
  position:absolute;top:0;bottom:0;width:51%;z-index:30;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.6),transparent 30%,transparent 70%,rgba(0,0,0,.7)),
    repeating-linear-gradient(90deg,#0d0104 0,#2a050d 2.2%,#120206 4.4%,#0d0104 6%);
}
.curtain.l{left:0;box-shadow:inset -50px 0 70px rgba(0,0,0,.85);border-right:1px solid rgba(249,223,170,.25)}
.curtain.r{right:0;box-shadow:inset 50px 0 70px rgba(0,0,0,.85);border-left:1px solid rgba(249,223,170,.25)}

.stagec{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 16px;text-align:center;pointer-events:none;
}
.c-intro{z-index:14}
.c-name{z-index:9}
.c-date{z-index:9}

.intro{position:relative;display:flex;flex-direction:column;align-items:center}
.spot{
  position:absolute;left:50%;top:42%;
  width:96vmin;height:96vmin;margin:-48vmin 0 0 -48vmin;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(249,223,170,.22) 0%,rgba(232,87,127,.12) 38%,transparent 68%);
}
.inv{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(54px,11vw,170px);line-height:1.02;
  color:var(--champ);perspective:700px;
  text-shadow:0 0 40px rgba(249,223,170,.22);
}
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block;will-change:transform,opacity}
.heart{
  display:inline-block;position:relative;
  width:.6em;height:.6em;margin-left:.14em;vertical-align:.02em;
  color:var(--pink);
}
.heart svg{width:100%;height:100%;filter:drop-shadow(0 0 18px rgba(255,120,170,.55))}
.spark{
  position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;
  border-radius:50%;background:var(--champ);opacity:0;
}
.spark:nth-child(even){background:var(--pink)}
.scroll-hint{
  margin-top:clamp(36px,8vh,84px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:var(--serif);font-size:12px;letter-spacing:.42em;padding-left:.42em;
  text-transform:uppercase;color:rgba(249,223,170,.8);
}
.scroll-hint i{position:relative;display:block;width:1px;height:52px;overflow:hidden;background:rgba(249,223,170,.22)}
.scroll-hint b{position:absolute;left:0;top:0;width:100%;height:40%;background:var(--champ);animation:drop 1.9s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drop{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

.date-kicker,.city-kicker{
  font-family:var(--serif);font-size:clamp(11px,1.6vw,15px);
  letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;
}
.t-ghost{
  position:absolute;left:50%;top:50%;z-index:6;line-height:1;white-space:nowrap;
  font-family:var(--serif);font-weight:400;font-size:min(92vw,105vh);
  color:transparent;-webkit-text-stroke:2px var(--bdx);pointer-events:none;
}

.date-wrap{display:flex;flex-direction:column;align-items:center;color:var(--bdx)}
.date-kicker{margin-bottom:clamp(10px,2vh,22px)}
.date-row{display:flex;align-items:center;gap:clamp(12px,2.6vw,34px)}
.d16{font-family:var(--serif);font-weight:400;font-size:min(30vw,34vh);line-height:.8}
.dcol{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.dmonth{font-family:var(--serif);font-style:italic;font-size:clamp(36px,7vw,92px);line-height:1}
.dyear{font-family:var(--serif);font-size:clamp(20px,3.6vw,46px);letter-spacing:.34em;margin-top:.2em}
.dline{width:min(78vw,560px);height:1px;background:var(--bdx);margin:clamp(18px,4vh,40px) 0 clamp(12px,2.4vh,24px)}
.city-kicker{margin-bottom:clamp(4px,1vh,10px)}
.city-row{display:flex;align-items:center;gap:.18em;font-family:var(--serif);font-weight:700;font-size:clamp(46px,9vw,118px);line-height:1}
.pin{width:.36em;height:.36em;color:var(--rose)}
.pin svg{width:100%;height:100%}

.frame{position:absolute;z-index:7;width:clamp(130px,19vw,270px)}
.f1{left:0;top:15%}
.f2{right:0;top:42%}
.f3{left:0;bottom:9%}
.pic{position:relative;aspect-ratio:4/5;overflow:hidden;background:#d8cdd0}
.pic img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08);font-size:0;color:transparent;
}
.ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 50% 38%,#f4eeef 0%,#d8cdd0 70%,#bdb0b3 100%);
  color:#7a676b;font-family:var(--soft);font-style:italic;
  font-size:clamp(12px,1.1vw,15px);letter-spacing:.12em;
}
.ph svg{width:26%;opacity:.5}
.fr-classic{
  padding:clamp(7px,.9vw,13px);
  background:linear-gradient(135deg,#f9dfaa 0%,#c49c5f 28%,#fbe8c2 52%,#b3894f 78%,#f3d59b 100%);
  box-shadow:0 24px 50px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.45);
}
.fr-classic .pic{border:clamp(6px,.8vw,12px) solid var(--blush);outline:1px solid rgba(94,14,29,.25);outline-offset:-1px}
.fr-oval{
  padding:clamp(7px,.9vw,12px);background:var(--bdx);border-radius:50%;
  box-shadow:0 0 0 2px var(--champ),0 0 0 7px var(--bdx),0 0 0 8px rgba(249,223,170,.7),0 24px 50px rgba(0,0,0,.5);
}
.fr-oval .pic{border-radius:50%}
.fr-arch{
  padding:clamp(7px,.9vw,12px);
  background:var(--blush);border-radius:999px 999px 6px 6px;
  box-shadow:0 0 0 1px rgba(94,14,29,.18),0 24px 50px rgba(60,0,20,.3);
}
.fr-arch .pic{border-radius:999px 999px 3px 3px}
.fr-arch figcaption{
  position:absolute;left:0;right:0;bottom:clamp(6px,.8vw,12px);text-align:center;
  font-family:var(--soft);font-style:italic;font-size:clamp(13px,1.3vw,17px);color:var(--bdx);
}

@media (max-width:640px){
  .show{height:300vh}
  .frame{width:32vw}
  .f1{top:7%}
  .f2{top:auto;bottom:9%}
  .f3{top:4%;bottom:auto}
  .d16{font-size:38vw}
  .dmonth{font-size:10vw}
  .dyear{font-size:5.4vw}
  .inv{font-size:15vw}
  .ribbon{height:16vh}
  .r2{top:78%}
}

@media (prefers-reduced-motion:reduce){
  .beam i,.scroll-hint b{animation:none}
}