@font-face{font-family:Cormorant;src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Ruqaa;src:url(fonts/ruqaa.woff2) format("woff2");font-display:swap}
:root{--gold:#d9ad5f;--gold2:#f1d49a;--ink:#f6ead6;--panel:rgba(22,11,7,.74);--line:rgba(217,173,95,.45)}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#0a0c18;color:var(--ink);overflow:hidden;font-family:Cormorant,Georgia,serif;-webkit-font-smoothing:antialiased}
#view{position:fixed;inset:0;overflow:hidden;background:#0a0c18}
#stage{position:absolute;transform-origin:50% 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
#stage>img,#stage>video,#stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#stage>img{object-fit:fill}
#walk{opacity:0}
#hero{opacity:0;transition:opacity .5s linear}
#ext{transition:opacity .35s linear}
body.walking #walk{opacity:1}
body.walking #ext{opacity:0}
body.inside #hero{opacity:1}
body.inside #walk{opacity:1}
body.inside #ext{opacity:0}
#fx{pointer-events:none;opacity:0;transition:opacity 1.2s}
body.inside #fx{opacity:1}
#screens{position:absolute;inset:0;opacity:0;transition:opacity .7s;pointer-events:none}
body.inside #screens{opacity:1}
#screens canvas{position:absolute;left:0;top:0;transform-origin:0 0}

/* lantern light that breathes */
#lights{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.flame{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,176,92,.55) 0,rgba(255,140,60,.22) 32%,rgba(255,120,40,0) 70%);animation:flick 3.1s ease-in-out infinite;opacity:.8;transition:visibility 0s}
.flame.out{}
body.outside .flame.in,body.inside .flame.out,body.walking .flame{visibility:hidden}
@keyframes flick{0%,100%{opacity:.62}11%{opacity:.86}23%{opacity:.7}37%{opacity:.95}52%{opacity:.66}68%{opacity:.88}83%{opacity:.72}}

#doorglow{position:absolute;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(ellipse at 50% 60%,rgba(255,190,110,.26),rgba(255,170,90,0) 68%);mix-blend-mode:screen}
body.outside.hover #doorglow{opacity:1}

#enter{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#enter:focus-visible{outline:1px solid var(--gold2);outline-offset:-12px}
body:not(.outside) #enter{display:none}

#hint{position:absolute;left:0;right:0;bottom:max(4.5vh,env(safe-area-inset-bottom));text-align:center;pointer-events:none;transition:opacity .4s}
#hint span{font-family:Cinzel,serif;font-size:clamp(12px,1.05vw,15px);letter-spacing:.42em;padding-left:.42em;color:var(--gold2);text-shadow:0 1px 14px rgba(0,0,0,.9);animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5}}
body:not(.outside) #hint{opacity:0}

#veil{position:absolute;inset:0;background:#0a0c18;pointer-events:none;transition:opacity 1.3s ease}
body.ready #veil{opacity:0}

/* the seat: an arch-topped panel of dark teak and a gold line */
#seat{position:fixed;right:clamp(20px,5vw,84px);top:50%;width:min(400px,calc(100vw - 40px));max-height:calc(100dvh - 32px);transform:translateY(calc(-50% + 18px));opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);z-index:5}
#seat.on{opacity:1;transform:translateY(-50%)}
.arch{position:relative;max-height:calc(100dvh - 32px);overflow:auto;padding:58px 38px 26px;background:var(--panel);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid var(--line);border-radius:200px 200px 6px 6px/86px 86px 6px 6px;box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 0 5px rgba(22,11,7,.35),inset 0 0 0 6px rgba(217,173,95,.2);text-align:center;scrollbar-width:none}
.arch::-webkit-scrollbar{display:none}
.ar{font-family:Ruqaa,"Geeza Pro",serif;font-size:38px;line-height:1.1;color:var(--gold)}
h1,h2{font-family:Cinzel,serif;font-weight:500;font-size:21px;letter-spacing:.2em;margin:10px 0 8px;color:var(--gold2)}
.lead{font-size:19px;line-height:1.3;margin-bottom:20px}
form{text-align:left}
label{display:block;font-size:13px;letter-spacing:.1em;font-family:Cinzel,serif;color:var(--gold);margin-bottom:15px}
input,textarea{display:block;width:100%;margin-top:6px;padding:7px 2px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);font:400 19px/1.3 Cormorant,Georgia,serif;outline:0;resize:none;transition:border-color .25s}
input:focus,textarea:focus{border-bottom-color:var(--gold2)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
button[type=submit]{display:block;width:100%;margin-top:6px;padding:13px;background:linear-gradient(180deg,#e6c27c,#b98a3e);border:0;border-radius:2px;color:#23120a;font:600 14px Cinzel,serif;letter-spacing:.3em;cursor:pointer;transition:filter .2s}
button[type=submit]:hover{filter:brightness(1.08)}
button[type=submit]:disabled{filter:saturate(.3);cursor:default}
#status{min-height:20px;margin-top:8px;font-size:16px;color:var(--gold2);text-align:center}
.fine{font-size:13.5px;line-height:1.25;opacity:.72;margin-top:2px}
#thanks{padding:34px 0 26px}

@media (max-aspect-ratio:1/1){
  #seat{left:0;right:0;top:auto;bottom:0;width:100%;max-height:min(52dvh,470px);transform:translateY(24px)}
  #seat.on{transform:none}
  .arch{max-height:min(52dvh,470px);padding:16px 22px calc(12px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:26px 26px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.5);background:rgba(22,11,7,.86)}
  .ar{display:none}#thanks .ar{display:block}
  h1,h2{font-size:17px;margin:2px 0 3px}
  .lead{font-size:17px}
  .arch>.lead{display:none}
  #thanks .lead{display:block}
  h1{margin-bottom:8px}
  label{font-size:11.5px;margin-bottom:9px}
  input,textarea{font-size:16px;margin-top:2px;padding:5px 2px}
  textarea{height:52px}
  button[type=submit]{padding:12px}
  #status{min-height:0;margin-top:5px}
  .fine{font-size:12px;line-height:1.2;margin-top:3px}
  #hint span{font-size:12px}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .arch{padding:18px 26px 12px;border-radius:60px 60px 6px 6px/40px 40px 6px 6px}
  .ar{display:none}.lead{font-size:16px;margin-bottom:8px}
  label{margin-bottom:8px}textarea{height:44px}
}
@media (prefers-reduced-motion:reduce){.flame,#hint span{animation:none}#stage{transition:none}}