/* A compact viewport companion, outside the hero's clipping and stacking. */
:root{--hookah-width:160px;--hookah-stage-height:210px;--hookah-edge:18px}
.hero{isolation:isolate;overflow:hidden}
.hero-copy{width:100%;z-index:2}
.hookah-experience{position:fixed;z-index:22;right:max(var(--hookah-edge),env(safe-area-inset-right));bottom:max(var(--hookah-edge),env(safe-area-inset-bottom));width:var(--hookah-width);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transition:opacity 400ms var(--ease-out)}
.hookah-experience.is-ready{opacity:1}.hookah-experience{transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),visibility 0s}.hookah-experience.is-ready.is-scrolling{opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s 220ms}
.hookah-experience[hidden]{display:none}
.hookah-stage{position:relative;width:100%;height:var(--hookah-stage-height);padding:0;border:0;background:transparent;color:var(--paper);pointer-events:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.hookah-stage:focus-visible{outline:1px solid var(--gold);outline-offset:4px;border-radius:45% 45% 15% 15%}
.hookah-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(5px 9px 7px #0009)}
.hookah-stage::before{content:'';position:absolute;inset:9% 0 1%;background:radial-gradient(ellipse at 50% 60%,#121612a8,transparent 68%);pointer-events:none;z-index:-1}
.hookah-stage::after{content:'';position:absolute;left:24%;right:22%;bottom:4%;height:5%;background:#030604a3;filter:blur(12px);border-radius:50%;z-index:-1;transform:rotate(-4deg)}
.hookah-prompt{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;pointer-events:none;margin-top:0;padding:7px 9px;border-radius:12px;background:#111510e6;border:1px solid #c6b29142;backdrop-filter:blur(10px)}
.hookah-timer{position:relative;display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;font-size:11px;color:#f3e5cd;font-variant-numeric:tabular-nums}
.hookah-timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.hookah-timer circle{fill:none;stroke:#d8c5a530;stroke-width:1.5}
.hookah-timer .hookah-progress{stroke:#e3c598;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--hold-progress,0)*100);stroke-linecap:round}
.hookah-instruction{font-size:12px;line-height:1.4;color:#f0e9dd}
.hookah-instruction small{display:none}
.hookah-experience.is-holding .hookah-prompt{border-color:#d4b17c99}
.hookah-smoke{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;contain:strict}
.smoke-dismiss{position:fixed;right:max(var(--hookah-edge),env(safe-area-inset-right));bottom:calc(var(--hookah-stage-height) + 68px + max(var(--hookah-edge),env(safe-area-inset-bottom)));z-index:23;align-items:center;gap:12px;border:1px solid #e9dfca55;background:#181d19e8;color:#eeeae1;padding:12px 17px;font-size:13px;backdrop-filter:blur(12px)}
.smoke-dismiss:not([hidden]){display:flex}
.smoke-dismiss span{font-size:20px;line-height:1}
.hookah-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){
  :root{--hookah-width:116px;--hookah-stage-height:150px;--hookah-edge:12px}
  .hero-copy{width:100%;padding:145px 6% 110px}
  .hero-copy h1{font-size:clamp(65px,14.5vw,100px);margin-bottom:18px}
  .hero-copy .eyebrow{margin-bottom:16px}
  .hero-description{margin-bottom:22px}
  .hookah-prompt{gap:6px;padding:6px;min-height:52px}
  .hookah-timer{width:26px;height:26px}
  .hero-bottom{bottom:24px}
  .hero-image{object-position:58% center}
}
@media(max-height:500px){:root{--hookah-width:104px;--hookah-stage-height:120px;--hookah-edge:10px}}
@media(prefers-reduced-motion:reduce){.hookah-experience,.hookah-experience.is-ready.is-scrolling{transition:none;transform:none}}