@font-face{font-family:Bodoni;src:url('assets/bodoni-moda.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--ivory:#eeece7;--quiet:#b5b3b0;--ui:#d1cfca;--pointer-x:0px;--pointer-y:0px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#080808}
body{overflow:hidden;color:var(--ivory);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:1px solid #e7e4da;outline-offset:6px}
.stage{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;overflow:hidden;background:#080808}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 1.45s ease;overflow:hidden;pointer-events:none}
.scene.is-active{opacity:1}
.parallax{position:absolute;inset:-1%;transform:translate3d(var(--pointer-x),var(--pointer-y),0);will-change:transform}
.plane{position:absolute;left:50%;top:50%;width:max(102vw,181.24svh);height:max(57.406vw,102svh);transform:translate(-50%,-50%)}
.camera{position:absolute;inset:0;transform-origin:50% 58%;will-change:transform}
.scene-image{position:absolute;width:100%;height:100%;object-fit:cover;display:block}
.scene-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.23),transparent 68%),linear-gradient(0deg,rgba(0,0,0,.26),transparent 32%,transparent 72%,rgba(0,0,0,.2))}
.threshold .camera{transform-origin:62.2% 57%;animation:threshold-dolly 18s cubic-bezier(.45,0,.35,1) infinite}
.threshold .scene-image{filter:brightness(.82) saturate(.25)}
.seam-core{position:absolute;left:62.2%;top:0;width:1px;height:81%;background:#fff9e9;box-shadow:0 0 6px 1px #fff4d5,0 0 18px 3px rgba(255,240,202,.24);mix-blend-mode:screen;animation:seam-breathe 18s ease-in-out infinite;transform-origin:center}
.seam-aura{position:absolute;left:57.6%;top:0;width:9.2%;height:81.5%;background:linear-gradient(90deg,transparent,rgba(235,222,194,.09) 49%,rgba(255,243,212,.15) 50%,rgba(235,222,194,.025) 54%,transparent);filter:blur(12px);mix-blend-mode:screen;animation:aura-breathe 18s ease-in-out infinite}
.floor-spill{position:absolute;left:51%;top:80.8%;width:25%;height:24%;background:radial-gradient(ellipse at 45% 0,rgba(245,230,199,.32),rgba(226,213,186,.09) 34%,transparent 72%);filter:blur(12px);mix-blend-mode:screen;transform-origin:45% 0;animation:floor-breathe 18s ease-in-out infinite}
.wall-light{position:absolute;inset:0;background:radial-gradient(ellipse at 21% 17%,rgba(231,225,210,.12),transparent 46%);mix-blend-mode:screen;animation:wall-shift 18s ease-in-out infinite}
.dust-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;mask-image:radial-gradient(ellipse 11% 59% at 62.2% 46%,#000 10%,#000b 45%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 11% 59% at 62.2% 46%,#000 10%,#000b 45%,transparent 100%)}
.dust-mote{position:absolute;width:var(--mote-size);height:var(--mote-size);border-radius:50%;background:#eee9dc;box-shadow:0 0 4px 1px #e5d8b33d;opacity:0;animation:dust-drift 18s linear infinite}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 25%,rgba(0,0,0,.29) 100%)}
.hero{position:absolute;left:0;top:47.5%;width:100%;transform:translateY(-50%);text-align:center;padding:0 4.5vw;text-shadow:0 2px 26px rgba(0,0,0,.2)}
h1{margin:0;font-weight:400}
.eyebrow{display:block;font-family:Bodoni,Didot,'Times New Roman',serif;font-size:clamp(20px,2.1vw,37px);font-optical-sizing:auto;line-height:1;letter-spacing:.39em;padding-left:.39em;margin-bottom:clamp(18px,2.5vw,42px)}
.main-title{display:block;font-family:Bodoni,Didot,'Times New Roman',serif;font-optical-sizing:auto;font-size:clamp(48px,10.55vw,202px);line-height:.98;font-weight:400;letter-spacing:-.028em;white-space:nowrap}
.invitation{margin:clamp(26px,3vw,48px) 0 0;font-size:clamp(12px,1.1vw,18px);font-weight:300;letter-spacing:.42em;padding-left:.42em;line-height:1.5;color:#d5d4d0}
.hero-rule{display:block;height:clamp(30px,4vw,55px);width:1px;background:linear-gradient(180deg,#aaa79f,rgba(170,167,159,.25));margin:25px auto 0;opacity:.7}
body[data-design="5"] .hero-rule{visibility:hidden}
.identity-footer{position:absolute;bottom:max(34px,env(safe-area-inset-bottom));left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.local-context{display:flex;flex-direction:column;align-items:center;gap:14px;color:#aaa;white-space:nowrap;text-align:center}
#local-date{font-size:13px;line-height:1.2;letter-spacing:.13em;padding-left:.13em;font-weight:400;text-transform:uppercase}
.clock-row{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
#local-time{font-family:'Helvetica Neue',Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;font-size:52px;font-weight:300;line-height:1;letter-spacing:-.045em;color:#d3d3d3}
.timezone{font-size:11px;font-weight:400;letter-spacing:.12em;padding-left:.12em;color:#9d9d9d}
.signature{margin:0;font-size:12px;letter-spacing:.34em;padding-left:.34em;color:#afada9}
.is-entering .eyebrow{animation:eyebrow-in 1.7s .1s cubic-bezier(.2,.7,.2,1) both}
.is-entering .main-title{animation:title-in 2s .35s cubic-bezier(.2,.7,.2,1) both}
.is-entering .invitation{animation:invitation-in 1.7s 1s ease both}
.is-entering .hero-rule{animation:invitation-in 1.5s 1.4s ease both}
body[data-design="5"] .is-entering .eyebrow{animation-duration:1.2s;animation-delay:.1s}
body[data-design="5"] .is-entering .main-title{animation-duration:1.9s;animation-delay:.8s}
body[data-design="5"] .is-entering .invitation{animation-duration:1.5s;animation-delay:2.2s}
.preview-ui{position:fixed;z-index:10;transition:opacity .3s;color:var(--ui)}
.review-bar{left:34px;right:34px;top:max(24px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:18px}
.preview-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#93918c}
.playback-controls{display:flex;align-items:center;gap:6px}
.control-button{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 11px;min-height:42px;background:rgba(10,10,10,.22);border:1px solid transparent;border-radius:25px;font-size:11px;letter-spacing:.02em;color:#b8b7b2;transition:background .2s,color .2s}
.control-button:hover{color:#fff;background:rgba(255,255,255,.08)}
.control-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.play-symbol{display:none}
body[data-paused=true] .play-symbol{display:initial}
body[data-paused=true] .pause-symbol{display:none}
.show-controls{position:fixed;right:24px;bottom:23px;z-index:12;border:1px solid #ffffff1c;background:#10101070;border-radius:20px;padding:10px 13px;font-size:10px;color:#d0cec6;opacity:.35;transition:opacity .2s}
.show-controls:hover,.show-controls:focus-visible{opacity:1}
.ui-hidden .preview-ui{opacity:0;pointer-events:none;visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-paused=true] .motion,body.is-away .motion,body[data-paused=true] .hero *,body.is-away .hero *{animation-play-state:paused!important}
.scene:not(.is-active) .motion{animation-play-state:paused}
@keyframes threshold-dolly{0%,100%{transform:scale(1.01) translateY(0)}55%{transform:scale(1.13) translateY(-.6%)}}
@keyframes seam-breathe{0%,100%{opacity:.15;transform:scaleX(.8);filter:brightness(.85)}55%{opacity:.95;transform:scaleX(3.4);filter:brightness(1.3)}}
@keyframes aura-breathe{0%,100%{opacity:.08;transform:scaleX(.45)}55%{opacity:.95;transform:scaleX(1.65)}}
@keyframes floor-breathe{0%,100%{opacity:.1;transform:scale(.65,.9)}55%{opacity:.9;transform:scale(1.6,1.1)}}
@keyframes wall-shift{0%,100%{transform:translate(-6%,-3%);opacity:.1}55%{transform:translate(10%,4%);opacity:.7}}
@keyframes dust-drift{0%{opacity:0;transform:translate3d(0,0,0)}18%,65%{opacity:var(--mote-opacity)}100%{opacity:0;transform:translate3d(var(--drift-x),var(--drift-y),0)}}
@keyframes eyebrow-in{from{opacity:0;transform:translateY(10px);letter-spacing:.7em}to{opacity:1;transform:translateY(0);letter-spacing:.39em}}
@keyframes title-in{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes invitation-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
 .review-bar{left:18px;right:14px;top:max(15px,env(safe-area-inset-top));gap:8px}
 .playback-controls{gap:0}
 .control-button{padding:10px;min-height:44px;min-width:40px}
 .control-button>span{display:none}
 .hero{top:47%;padding:0 4vw}
 .eyebrow{font-size:20px;margin-bottom:28px}
 .main-title{font-size:11.7vw;letter-spacing:-.035em}
 .invitation{font-size:11px;letter-spacing:.32em;margin-top:30px}
 .hero-rule{margin-top:26px;height:38px}
 .signature{font-size:10px}
 .identity-footer{gap:18px}
 .local-context{gap:12px}
 #local-date{font-size:11px}
 #local-time{font-size:44px}
 .timezone{font-size:10px}
 .clock-row{gap:8px}
 .threshold .plane{left:32%}
 .dust-mote:nth-child(n+37){display:none}
 .show-controls{bottom:17px;right:12px;font-size:8px;padding:8px}
}
@media(max-height:500px){.hero{top:45%}.eyebrow{font-size:18px;margin-bottom:14px}.main-title{font-size:min(9vw,22vh)}.invitation{margin-top:20px;font-size:11px}.hero-rule{height:22px;margin-top:15px}.identity-footer{bottom:14px;gap:9px}.local-context{gap:6px}.clock-row{gap:5px}#local-date{font-size:9px}#local-time{font-size:32px}.timezone{font-size:8px}.signature{font-size:9px}}
@media(prefers-reduced-motion:reduce){.is-entering>* , .is-entering h1>*{animation:none!important}.scene{transition:none}.dust-field{display:none}}