:root{
  --ink:#030304;
  --ivory:#efe7d6;
  --gold:#c9ad74;
  --gold-dim:rgba(201,173,116,.62);
  --neon:#5ec8ff;
  --serif:"Cormorant",ui-serif,"Didot","Bodoni 72",Georgia,serif;
  --hkh:clamp(190px,39vh,400px);
  --sans:"Jost",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@font-face{font-family:"Cormorant";src:url(assets/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Jost";src:url(assets/jost.woff2) format("woff2");font-weight:300 500;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--ivory)}
body{
  min-height:100vh;min-height:100svh;overflow:hidden;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 70% at 50% 100%,#0b1016 0%,#040506 55%,#020203 100%);
}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#smoke{opacity:0;transition:opacity 1.2s ease}
#smoke.on{opacity:1}
.vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(90% 65% at 50% 46%,transparent 40%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.9) 100%)}
/* the pagoda in the garden (a guest's photo), heavily darkened, copper-tinted, soft; screened faintly over the smoke */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen;
  opacity:0;animation:bgIn 4.5s ease-out 2.2s forwards;
  -webkit-mask-image:radial-gradient(95% 78% at 50% 46%,#000 30%,rgba(0,0,0,.6) 68%,transparent 100%);
  mask-image:radial-gradient(95% 78% at 50% 46%,#000 30%,rgba(0,0,0,.6) 68%,transparent 100%)}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:6% 44%;display:block;
  transform:scale(1.08);animation:drift 80s ease-in-out infinite alternate;will-change:transform}
@keyframes bgIn{to{opacity:.3}}
@keyframes drift{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.16) translate(-1.6%,1.1%)}}
.vignette{z-index:0}
@supports (height:1svh){:root{--hkh:clamp(190px,39svh,400px)}}
#embers{z-index:1}
/* the hookah: dark glass + gold, neon rim, centered low; the plume leaves its bowl */
.hk{position:fixed;z-index:1;left:0;right:0;margin:0 auto;bottom:calc(env(safe-area-inset-bottom) + 30px);
  height:var(--hkh);width:calc(var(--hkh) / 2);overflow:visible;pointer-events:none;
  opacity:0;filter:blur(6px);animation:hkIn 2.4s cubic-bezier(.2,.7,.2,1) .2s forwards}
@keyframes hkIn{to{opacity:1;filter:blur(0)}}
.hk .rim{stroke-dasharray:1;stroke-dashoffset:1;animation:rimDraw 2.6s cubic-bezier(.5,0,.2,1) .5s forwards}
@keyframes rimDraw{to{stroke-dashoffset:0}}
.hk .hot,.hk .halo{opacity:0}
.hk .bub{animation:bub 2.8s ease-in 2.4s infinite;opacity:0}
.hk .b2{animation-delay:3.5s}
@keyframes bub{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.stage{
  position:relative;z-index:2;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top) + 40px) 24px calc(env(safe-area-inset-bottom) + var(--hkh) + 44px);
}
.mark{width:min(88vw,560px);margin:0 auto;line-height:0;font-size:16px}
.logo{display:block;width:100%;height:auto;overflow:visible;opacity:0;filter:blur(14px);
  transform:translateY(10px) scale(1.04);animation:reveal 2.6s cubic-bezier(.2,.7,.1,1) 3.3s forwards}
@keyframes reveal{0%{opacity:0;filter:blur(14px);transform:translateY(10px) scale(1.04)}55%{opacity:.9}100%{opacity:1;filter:blur(0);transform:none}}
.logo .lg-yama,.logo .lg-shisha,.logo .lg-icon,.logo .lg-sub{opacity:0;transform-box:fill-box;transform-origin:50% 60%;
  animation:rise 2s cubic-bezier(.2,.7,.1,1) forwards}
.logo .lg-icon{animation-delay:3.3s}.logo .lg-yama{animation-delay:3.6s}.logo .lg-shisha{animation-delay:3.75s}
.logo .lg-sub{animation-delay:4.6s;animation-duration:1.6s}
@keyframes rise{0%{opacity:0;transform:translateY(14px)}60%{opacity:.9}100%{opacity:1;transform:none}}
.logo .lg-yama,.logo .lg-shisha{animation-name:rise,glow;animation-duration:2s,7s;animation-iteration-count:1,infinite}
.logo .lg-yama{animation-delay:3.6s,6s}.logo .lg-shisha{animation-delay:3.75s,6s}
@keyframes glow{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.86}52%{opacity:1}}
.details{margin-top:1.9em;display:grid;gap:.7em}
.meta{font-size:11px;font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:rgba(239,231,214,.72);padding-left:.34em}
.dot{color:var(--gold);margin:0 .35em}
.cta{
  position:relative;overflow:hidden;margin-top:3.1em;display:inline-flex;align-items:center;justify-content:center;
  min-width:232px;min-height:54px;padding:0 34px;
  font-size:12px;font-weight:400;letter-spacing:.38em;text-transform:uppercase;text-decoration:none;color:var(--ivory);
  border:1px solid var(--gold-dim);border-radius:999px;
  background:linear-gradient(180deg,rgba(20,16,10,.55),rgba(6,5,4,.55));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset,0 10px 40px rgba(0,0,0,.55);
  transition:border-color .4s,background .4s,transform .4s,box-shadow .4s;
}
.cta span{padding-left:.38em}
.cta::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(236,214,160,.32) 50%,transparent 65%);
  transform:translateX(-120%);animation:sheen 1.6s ease 7.5s 1 forwards}
@keyframes sheen{to{transform:translateX(120%)}}
.cta:hover,.cta:active{border-color:var(--gold);background:linear-gradient(180deg,rgba(60,48,26,.6),rgba(14,11,7,.6));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset,0 0 34px rgba(201,173,116,.18)}
.cta:active{transform:scale(.98)}
.cta:focus-visible,.handle:focus-visible{outline:1px solid var(--neon);outline-offset:6px}
.handle{margin-top:1.4em;font-size:11px;letter-spacing:.24em;color:rgba(239,231,214,.45);text-decoration:none;padding:8px}
.handle:hover{color:var(--gold)}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:2;text-align:center;
  padding:0 24px calc(env(safe-area-inset-bottom) + 10px);
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,231,214,.34);line-height:1.9}
.details,.cta,.handle,.foot{opacity:0;transform:translateY(10px);animation:fade 1.6s cubic-bezier(.2,.7,.2,1) forwards}
.details{animation-delay:5.5s}.cta{animation-delay:6s}
.handle{animation-delay:6.5s}.foot{animation-delay:6.7s}
.cta{animation-name:fade}.cta::after{animation-name:sheen}
@keyframes fade{to{opacity:1;transform:none}}
body.no-gl{background:radial-gradient(40% 30% at 50% 82%,rgba(255,120,40,.10),transparent 70%),radial-gradient(70% 55% at 50% 60%,rgba(150,170,200,.10),transparent 70%),radial-gradient(120% 70% at 50% 100%,#0b1016 0%,#040506 55%,#020203 100%)}
@media (max-height:700px){.details{margin-top:1.8em}.cta{margin-top:2.2em}:root{--hkh:clamp(170px,32vh,300px)}}
@media (min-width:760px) and (orientation:landscape){.bg img{object-position:34% 55%}@keyframes bgIn{to{opacity:.26}}}
@media (min-width:900px){.meta{font-size:12px}.cta{min-width:260px;min-height:58px}.foot{font-size:10px}}
@media (prefers-reduced-motion:reduce){
  .hk,.hk .rim,.hk .bub{animation:none!important;opacity:1!important;filter:none!important;stroke-dashoffset:0!important}
  .hk .bub{opacity:0!important}
  .logo,.details,.cta,.cta::after,.handle,.foot{animation:none!important;opacity:1!important;filter:none;transform:none!important;stroke-dashoffset:0!important}
  .logo .lg-yama,.logo .lg-shisha,.logo .lg-icon,.logo .lg-sub{animation:none!important;opacity:1!important;transform:none!important}
  .logo{filter:none!important}
  #smoke{transition:none}
  .bg{animation:none!important;opacity:.3!important}
  .bg img{animation:none!important;transform:none!important}
}
body.og .cta,body.og .handle,body.og .foot,body.og .meta+.meta{display:none}
body.og .stage{padding-bottom:calc(var(--hkh) + 30px)}
.foot p+p{margin-top:.2em;color:rgba(239,231,214,.24)}