:root{color-scheme:light;--red:#8e2530;--cream:#f5e9d7}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#620c18;display:grid;place-items:center;color:var(--red);font-family:Arial,sans-serif}.stage{position:relative;width:min(100vw,177.6833svh);aspect-ratio:1672/941;overflow:hidden}.backdrop,.backdrop img{display:block;width:100%;height:100%}.guest{position:absolute;height:67%;width:auto;max-width:none;bottom:4%;transform:translateX(-50%);pointer-events:none}.woman{left:17.1%}.man{left:86%}.enter{position:absolute;left:40.5%;top:78.7%;width:19%;height:7%;border:0;border-radius:50%;background:transparent;cursor:pointer}.enter:hover{background:#8e253012}.enter:focus-visible{outline:2px solid var(--red);outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{width:min(440px,calc(100vw - 40px));padding:48px 34px 36px;background:var(--cream);color:var(--red);border:1px solid var(--red);outline:1px solid var(--red);outline-offset:-9px;border-radius:10px;box-shadow:0 20px 80px #24000766}dialog::backdrop{background:#2d0015aa;backdrop-filter:blur(5px)}.close{position:absolute;right:15px;top:10px;border:0;background:none;color:var(--red);font-size:30px;cursor:pointer}.eyebrow{text-align:center;letter-spacing:.22em;font-size:10px}h1{font:36px/1.1 Georgia,serif;text-align:center;margin:16px 0}.intro{text-align:center;font-size:13px;line-height:1.7;margin-bottom:25px}label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}.password-wrap{display:flex;border:1px solid #8e253080;border-radius:3px}input{width:100%;min-width:0;border:0;background:#fff7ed;padding:13px;font-size:16px;color:var(--red)}input:focus{outline:2px solid var(--red)}.show{border:0;background:#fff7ed;color:var(--red);cursor:pointer;padding:0 12px}.status{font-size:12px;line-height:1.5;min-height:18px}.submit{width:100%;padding:15px;border:1px solid var(--red);background:var(--red);color:var(--cream);font-size:11px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
@media(max-aspect-ratio:1/1){.stage{width:min(100vw,52.425svh);aspect-ratio:908/1732}.guest{height:25%;bottom:1.5%}.woman{left:13%}.man{left:87%}.enter{left:28%;top:71.3%;width:44%;height:5.8%}}

/* The overlays reuse the original art at identical stage coordinates. */
.stage{container-type:inline-size}.guest{z-index:1}.front-drapes{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.mobile-drapes{display:none}
.enter{z-index:3;left:40.6%;top:80.15%;width:18.8%;height:5.95%;background:#f5e8d5;border:1.4px solid #be2731;border-radius:47% 43% 46% 44%;color:#a71322;font-size:.78cqw;letter-spacing:.17em;text-transform:uppercase;transition:background-color .18s,color .18s}
.enter:hover,.enter:active,.enter.is-open{background:#8e2530;color:#fff1dd}.enter::after{content:"";position:absolute;inset:-8px}
@media(max-aspect-ratio:1/1){.desktop-drapes{display:none}.mobile-drapes{display:block}.guest{height:38%;bottom:9%}.woman{left:14.5%}.man{left:86%}.enter{left:29%;top:71.85%;width:42%;white-space:nowrap;height:3.95%;border-radius:999px;font-size:1.65cqw;letter-spacing:.16em}}
.enter{box-shadow:0 0 0 5px #f5e8d5}

.opening-curtain{position:fixed;inset:0;z-index:20;overflow:hidden;pointer-events:none}
.opening-curtain img{display:block;width:100%;height:100%;object-fit:fill}
.guest{visibility:hidden}.guests-entered .guest{visibility:visible}
@media(prefers-reduced-motion:reduce){.opening-curtain{display:none}.guest{visibility:visible}}

/* Move the fabric on the compositor; completion follows the animation itself. */
.opening-panel{position:absolute;top:0;bottom:0;width:50.1%;background-image:url('assets/opening-still.png');background-size:210% 100%;will-change:transform}
.opening-left{left:0;background-position:left center}
.opening-right{right:0;background-position:right center}
.playing .opening-left{animation:curtain-left 3.2s cubic-bezier(.35,0,.2,1) forwards}
.playing .opening-right{animation:curtain-right 3.2s cubic-bezier(.35,0,.2,1) forwards}
@keyframes curtain-left{to{transform:translateX(-101%)}}
@keyframes curtain-right{to{transform:translateX(101%)}}
@media(max-aspect-ratio:1/1){
 body{display:block;min-height:100dvh;overflow:hidden}
 .stage{width:100vw;height:100dvh;aspect-ratio:auto}
 .backdrop{position:absolute;inset:0}
 .backdrop img{width:100%;height:100%;object-fit:fill}
 .front-drapes{position:absolute;width:100%;height:100%}
}

/* Fill the viewport on both layouts; keep overlay coordinates aligned. */
body{display:block;min-height:100dvh;overflow:hidden}
.stage{width:100vw;height:100dvh;aspect-ratio:auto}
.backdrop{position:absolute;inset:0}
.backdrop img{width:100%;height:100%;object-fit:fill}
.opening-curtain img{width:100%;height:100%;object-fit:fill}

/* Interactive martinis occupy the reference artwork positions. */
.martini{position:absolute;z-index:3;padding:0;border:0;background:none;height:40%;aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.martini canvas{display:block;width:100%;height:100%;pointer-events:none}
.martini-large{left:16%;bottom:1.5%}
.martini-small{left:67%;top:19%;height:18%}
.martini:focus-visible{outline:2px solid var(--red);outline-offset:-12px;border-radius:12px}
@media(max-aspect-ratio:1/1){
 .martini-large{height:21%;left:5%;bottom:2.5%}
 .martini-small{height:11.2%;left:69%;top:26.5%}
}

/* The original painted glass sits between the guests and front fabric. */
.static-martini,.martini-shadow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.static-martini{z-index:2}
.front-drapes{z-index:3}
.enter,.martini-small{z-index:4}
.mobile-martini,.martini-shadow{display:none}
.martini-shadow{z-index:2}
@media(max-aspect-ratio:1/1){
 .desktop-martini{display:none}
 .mobile-martini,.martini-shadow{display:block}
}

/* The invitation caption sits between the painted title and the entry button. */
.landing-story {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 75.6%;
  width: 43%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #a71322;
  font-family: Arial, sans-serif;
  font-size: min(1.02cqw, 2.45dvh);
  letter-spacing: .075em;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}
@media (max-aspect-ratio: 1/1) {
  .landing-story-break { display: none; }
  .landing-story {
    top: 67%;
    width: 59%;
    font-size: calc(min(2.65cqw, 1.8dvh) - 1pt);
  }
}

.enter{display:grid;place-items:center;text-decoration:none}