/* ═══════════════════════════════════════════════════════════════════
   CABANA · KARIBU — the way into Stays
   ───────────────────────────────────────────────────────────────────
   A door, at the hour it is where the guest is. The lamp comes on, the
   mat says welcome in one of a dozen African languages, the door swings
   open and the light inside carries you through it into the page.

   Built for a phone on a slow network: about twenty elements, one
   stacking layer that scales, and every animation is transform or
   opacity. No blur, no filters, no layout reads while it moves.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cabana Display';
  src: url('/fonts/cabana-display-soft.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

#stay-gate {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  background: var(--sg-sky-3, #140E33);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  contain: strict;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1);
}
#stay-gate.sg-gone { opacity: 0; pointer-events: none; }
html.sg-lock, html.sg-lock body { overflow: hidden !important; }

/* ── the hour ──────────────────────────────────────────────────────── */
#stay-gate, html.sg-night #stay-gate {
  --sg-sky-1: #2A1C6B; --sg-sky-2: #171046; --sg-sky-3: #0B0824;
  --sg-wall: #3B3266; --sg-wall-2: #2C2553; --sg-wall-edge: rgba(255, 255, 255, .06);
  --sg-orb: #F4EFFF; --sg-orb-glow: rgba(210, 196, 255, .35);
  --sg-ink: #FFFFFF; --sg-ink-2: rgba(255, 255, 255, .7);
  --sg-floor: #120C33;
}
html.sg-dawn #stay-gate {
  --sg-sky-1: #FFC39A; --sg-sky-2: #F08BA0; --sg-sky-3: #5B3C8F;
  --sg-wall: #F4D9C2; --sg-wall-2: #E9C3A6; --sg-wall-edge: rgba(255, 255, 255, .35);
  --sg-orb: #FFE9C4; --sg-orb-glow: rgba(255, 214, 150, .55);
  --sg-ink: #2A1640; --sg-ink-2: rgba(42, 22, 64, .7);
  --sg-floor: #6A4A8E;
}
html.sg-day #stay-gate {
  --sg-sky-1: #BFE6FF; --sg-sky-2: #7CC0F5; --sg-sky-3: #3F74D6;
  --sg-wall: #FAEEDD; --sg-wall-2: #F0DDC4; --sg-wall-edge: rgba(255, 255, 255, .5);
  --sg-orb: #FFF6D8; --sg-orb-glow: rgba(255, 240, 180, .7);
  --sg-ink: #102048; --sg-ink-2: rgba(16, 32, 72, .66);
  --sg-floor: #3561B8;
}
html.sg-dusk #stay-gate {
  --sg-sky-1: #FFB070; --sg-sky-2: #E0568A; --sg-sky-3: #3A1E6E;
  --sg-wall: #F2C6A4; --sg-wall-2: #E2A98A; --sg-wall-edge: rgba(255, 255, 255, .28);
  --sg-orb: #FFD58A; --sg-orb-glow: rgba(255, 170, 90, .6);
  --sg-ink: #FFFFFF; --sg-ink-2: rgba(255, 255, 255, .8);
  --sg-floor: #4A2474;
}

.sg-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sg-sky-3) 0%, var(--sg-sky-2) 52%, var(--sg-sky-1) 100%);
}
html.sg-day .sg-sky, html.sg-dawn .sg-sky {
  background: linear-gradient(180deg, var(--sg-sky-3) -20%, var(--sg-sky-2) 45%, var(--sg-sky-1) 100%);
}
.sg-orb {
  position: absolute; left: 50%; top: 36%; width: 44vmin; height: 44vmin; margin: -22vmin 0 0 -22vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sg-orb) 0 17%, var(--sg-orb-glow) 18%, transparent 62%);
  opacity: .9;
}
html.sg-night .sg-orb { left: 80%; top: 7%; width: 26vmin; height: 26vmin; margin: -13vmin 0 0 -13vmin; }
.sg-stars { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; opacity: 0; }
html.sg-night .sg-stars { opacity: .9; animation: sgTwinkle 3.4s ease-in-out infinite alternate; }
html.sg-night .sg-stars.b { opacity: .5; animation-delay: -1.7s; }
@keyframes sgTwinkle { from { opacity: .35; } to { opacity: 1; } }
.sg-birds { position: absolute; left: 12%; top: 22%; width: 60px; opacity: 0; color: var(--sg-ink-2); }
html.sg-day .sg-birds, html.sg-dawn .sg-birds { opacity: .55; animation: sgBirds 9s linear infinite; }
@keyframes sgBirds { from { transform: translate(0, 0); } to { transform: translate(40vw, -4vh); } }

/* ── the camera: everything that travels scales together ───────────── */
.sg-cam {
  position: absolute; inset: 0;
  transform-origin: var(--hx, 50%) var(--hy, 66%);
  will-change: transform;
}

.sg-scene {
  position: absolute; left: 50%; bottom: 7vh;
  width: min(80vw, 48vh, 420px); aspect-ratio: 400 / 560;
  transform: translate(-50%, 0);
}

/* floor */
.sg-floor {
  position: absolute; left: -60%; right: -60%; top: 89.3%; bottom: -40%;
  background: linear-gradient(180deg, var(--sg-floor), transparent 90%);
  opacity: .55; border-radius: 50% 50% 0 0 / 14% 14% 0 0;
}

/* the house: an arched stucco wall */
.sg-wall {
  position: absolute; left: 8%; right: 8%; top: 13%; bottom: 10.7%;
  border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
  background: linear-gradient(170deg, var(--sg-wall) 20%, var(--sg-wall-2));
  box-shadow: inset 0 2px 0 var(--sg-wall-edge), 0 30px 60px rgba(0, 0, 0, .18);
}
.sg-wall::after {    /* a painted band, the way houses at the coast wear them */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
  border-radius: 0 0 6px 6px; background: var(--sg-door-2, #1F6F78); opacity: .85;
}

/* door frame and what is behind the door */
.sg-frame {
  position: absolute; left: 30.5%; width: 39%; top: 43%; bottom: 10.7%;
  border-radius: 999px 999px 0 0;
  background: var(--sg-door-2, #164F56);
  padding: 3.4% 3.4% 0;
  perspective: 700px;
}
.sg-inside {
  position: absolute; inset: 3.4% 3.4% 0;
  border-radius: 999px 999px 0 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 70%, #FFF3D6 0%, #FFD08A 38%, #F29A4A 72%, #B85A2E 100%);
}
.sg-inside::before {  /* a hint of the room: a pendant and a table edge */
  content: ''; position: absolute; left: 50%; top: 18%; width: 22%; aspect-ratio: 1; margin-left: -11%;
  border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 25%, rgba(255, 255, 255, .5) 26%, transparent 70%);
}
.sg-inside::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 22%; height: 7%;
  border-radius: 4px; background: rgba(120, 52, 22, .35);
}
.sg-leaf {
  position: absolute; inset: 3.4% 3.4% 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--sg-door, #1F6F78), var(--sg-door-3, #2A8C96) 55%, var(--sg-door, #1F6F78));
  transform-origin: 0% 50%;
  transform: rotateY(0deg);
  backface-visibility: visible;
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, .18);
}
.sg-leaf::before {    /* two panels */
  content: ''; position: absolute; left: 16%; right: 16%; top: 16%; height: 30%;
  border-radius: 999px 999px 6px 6px;
  border: 2px solid rgba(255, 255, 255, .16);
}
.sg-leaf::after {
  content: ''; position: absolute; left: 16%; right: 16%; top: 54%; bottom: 10%;
  border-radius: 6px; border: 2px solid rgba(255, 255, 255, .16);
}
.sg-knob {
  position: absolute; right: 12%; top: 55%; width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF1C2, #E0A21A 55%, #8A5A00);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* the light that spills out when it opens */
.sg-spill {
  position: absolute; left: 22%; right: 22%; top: 88%; height: 16%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 214, 140, .85), rgba(255, 190, 110, 0) 70%);
  transform: scaleY(.2); transform-origin: 50% 0; opacity: 0;
}

.sg-step {
  position: absolute; left: 26%; right: 26%; top: 89.3%; height: 2.4%;
  border-radius: 3px; background: var(--sg-wall-2); box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

/* the mat, with the welcome */
.sg-mat {
  position: absolute; left: 31%; right: 31%; top: 92.4%; height: 5.4%;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #C9853E 0 6px, #B8742F 6px 12px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  display: grid; place-items: center;
  transform: perspective(300px) rotateX(38deg);
}
.sg-mat b {
  font: 800 clamp(9px, 2.1vmin, 13px)/1 'Geist', 'Inter', system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: #FFF3DA;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25); white-space: nowrap;
}

/* a wall lantern that comes on first */
.sg-lamp {
  position: absolute; left: 73.5%; top: 45%; width: 6.5%; aspect-ratio: 1 / 1.6;
  border-radius: 40% 40% 30% 30%; background: #2B2338;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
}
.sg-lamp::before {
  content: ''; position: absolute; left: 22%; right: 22%; top: 22%; bottom: 18%;
  border-radius: 40%; background: #FFE3A6; opacity: .25;
}
.sg-glow {
  position: absolute; left: 76.75%; top: 49%; width: 60%; aspect-ratio: 1; margin: -30% 0 0 -30%;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .55), rgba(255, 214, 140, 0) 65%);
  opacity: 0; pointer-events: none;
}


/* a plant that sways, and some days a cat */
.sg-plant { position: absolute; left: 73%; top: 68.6%; width: 19%; transform-origin: 50% 100%; }
.sg-plant .lv { transform-origin: 50% 100%; animation: sgSway 4.6s ease-in-out infinite alternate; }
@keyframes sgSway { from { transform: rotate(-3deg); } to { transform: rotate(3.5deg); } }
.sg-cat { position: absolute; left: 12%; top: 78.6%; width: 13%; }
.sg-cat .tail { transform-origin: 18% 84%; animation: sgTail 1.8s ease-in-out infinite alternate; }
.sg-cat .blink { transform-origin: 50% 50%; animation: sgBlink 4s infinite; }
@keyframes sgTail { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes sgBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* the flood: the light you walk into */
.sg-flood {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 66%), #FFF7E6 0%, #FFE2B0 30%, #FBF7FF 70%);
}

/* the words */
.sg-word {
  position: absolute; left: 0; right: 0; top: max(9vh, env(safe-area-inset-top));
  text-align: center; padding: 0 22px; color: var(--sg-ink);
}
.sg-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sg-ink-2);
  opacity: 0; transform: translateY(6px);
}
.sg-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #33E0C3; box-shadow: 0 0 0 4px rgba(51, 224, 195, .2); }
.sg-place {
  margin-top: 12px;
  font-family: 'Cabana Display', 'Geist', Georgia, serif; font-variation-settings: 'SOFT' 100;
  font-weight: 420; font-size: clamp(28px, 7.4vw, 50px); line-height: 1.06; letter-spacing: -.025em;
}
.sg-place > span, .sg-place b span {
  display: inline-block; opacity: 0; transform: translateY(14px);
}
.sg-place b { font-weight: 560; font-style: italic; }
.sg-note {
  margin-top: 10px; font-size: 13.5px; color: var(--sg-ink-2);
  opacity: 0;
}

.sg-skip {
  position: absolute; right: 16px; bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 14px;
  border: 0; border-radius: 99px; background: rgba(255, 255, 255, .16); color: var(--sg-ink);
  font: 600 12.5px/1 'Geist', 'Inter', system-ui, sans-serif; cursor: pointer;
  opacity: 0;
}
.sg-skip svg { width: 14px; height: 14px; }
html.sg-day .sg-skip, html.sg-dawn .sg-skip { background: rgba(16, 32, 72, .1); }


/* ═══ THE SEQUENCE ═════════════════════════════════════════════════
   Scheduled in one go, as compositor animations, the moment the gate
   starts. The stays page does a lot of work while it boots; a sequence
   driven by JavaScript timers stalled behind that work and then jumped
   to its end, which is what "laggy" looked like. These keep running on
   their own, so the door opens on time however busy the page is.

   --k scales the whole timeline: 1 on the first visit of a session,
   shorter for a repeat (the door is already there and opens).       */
#stay-gate.sg-run { --k: 1; }
#stay-gate.sg-run.sg-brief { --k: .42; }

#stay-gate.sg-run .sg-scene   { animation: sgSceneIn .9s cubic-bezier(.22, 1, .36, 1) both; }
#stay-gate.sg-run .sg-kicker  { animation: sgUp .6s cubic-bezier(.22, 1, .36, 1) .05s both; }
#stay-gate.sg-run .sg-place > span,
#stay-gate.sg-run .sg-place b span { animation: sgUp .7s cubic-bezier(.22, 1, .36, 1) calc(.38s + var(--d, 0s)) both; }
#stay-gate.sg-run .sg-note    { animation: sgFade .6s .8s both; }
#stay-gate.sg-run .sg-skip    { animation: sgFade .4s .6s both; }
#stay-gate.sg-run .sg-lamp::before { animation: sgFlicker .9s steps(1) .15s both; }
#stay-gate.sg-run .sg-glow    { animation: sgGlow .6s .3s both; }
#stay-gate.sg-run .sg-leaf    { animation: sgOpen .75s cubic-bezier(.55, .05, .25, 1) calc(.82s * var(--k)) both; }
#stay-gate.sg-run .sg-spill   { animation: sgSpill .8s cubic-bezier(.22, 1, .36, 1) calc(.82s * var(--k)) both; }
#stay-gate.sg-run .sg-word    { animation: sgOut .35s calc(1.2s * var(--k)) both; }
#stay-gate.sg-run .sg-cam     { animation: sgCam 1s cubic-bezier(.6, 0, .78, .3) calc(1.2s * var(--k)) both; }
#stay-gate.sg-run .sg-flood   { animation: sgFade .55s cubic-bezier(.4, 0, .2, 1) calc(1.55s * var(--k)) both; }
#stay-gate.sg-run             { animation: sgOut .45s calc(1.95s * var(--k)) both; }

#stay-gate.sg-run.sg-brief .sg-scene, #stay-gate.sg-run.sg-brief .sg-kicker { animation-duration: .01s; }
#stay-gate.sg-run.sg-brief .sg-word { display: none; }

/* A tap or a key: straight through the door, now. */
#stay-gate.sg-run.sg-now .sg-leaf  { animation: sgOpen .45s cubic-bezier(.55, .05, .25, 1) both; }
#stay-gate.sg-run.sg-now .sg-spill { animation: sgSpill .45s both; }
#stay-gate.sg-run.sg-now .sg-word  { animation: sgOut .2s both; }
#stay-gate.sg-run.sg-now .sg-cam   { animation: sgCam .6s cubic-bezier(.7, 0, .84, .1) .1s both; }
#stay-gate.sg-run.sg-now .sg-flood { animation: sgFade .35s .3s both; }
#stay-gate.sg-run.sg-now           { animation: sgOut .3s .55s both; }

@keyframes sgSceneIn { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sgUp      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sgFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sgOut     { from { opacity: 1; } to { opacity: 0; } }
@keyframes sgGlow    { from { opacity: 0; } to { opacity: var(--sg-glow, 1); } }
@keyframes sgFlicker { 0% { opacity: .2; } 20% { opacity: 1; } 32% { opacity: .35; } 46%, 100% { opacity: 1; } }
@keyframes sgOpen    { from { transform: rotateY(0deg); } to { transform: rotateY(-104deg); } }
@keyframes sgSpill   { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }
@keyframes sgCam     { from { transform: scale(1); } to { transform: scale(7); } }
html.sg-day #stay-gate { --sg-glow: .35; }

/* Held still for anyone who asked for less motion: the lit scene, the
   words, then a gentle fade into the page. */
@media (prefers-reduced-motion: reduce) {
  #stay-gate *, #stay-gate *::before, #stay-gate *::after { animation: none !important; transition: none !important; }
  #stay-gate.sg-run .sg-kicker, #stay-gate.sg-run .sg-note, #stay-gate.sg-run .sg-place > span,
  #stay-gate.sg-run .sg-place b span, #stay-gate.sg-run .sg-skip, #stay-gate.sg-run .sg-glow { opacity: 1; transform: none; }
  #stay-gate.sg-run .sg-lamp::before { opacity: 1; }
  #stay-gate.sg-run { animation: sgOut .3s .35s both !important; }
}