/* SIX DEEP · the app, to try. The phone's screen is the app as it is
   today; the buttons over it go where the app's own buttons go. Tokens
   only; the screens themselves are the app's own pixels. */
.sim { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--green-deep); --bar-ar: 0.23; }
.sim > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sim.is-live > img { display: none; }
.sim__view { position: absolute; inset: 0; overflow: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sim__view::-webkit-scrollbar { display: none; }
.sim.is-on .sim__view { overflow-y: auto; }
.sim.has-bar .sim__page { margin-bottom: calc(var(--bar-ar) * 100%); }
.sim__page { position: relative; transition: opacity 220ms var(--ease), transform 280ms var(--ease); }
.sim__page.is-in { opacity: 0; }
.sim__page.is-up { opacity: 0; transform: translateY(6%); }
.sim__img { display: block; width: 100%; height: auto; }
.sim__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; aspect-ratio: 1 / var(--bar-ar); display: none; }
.sim.has-bar .sim__bar { display: block; }
.sim__barimg { display: block; width: 100%; height: 100%; }
.sim__hot { position: absolute; z-index: 1; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background 150ms var(--ease), box-shadow 150ms var(--ease); }
.sim__hot:active { background: rgba(240, 234, 216, 0.14); }
.sim__hot:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (hover: hover) { .sim__hot:hover { box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.75); background: rgba(201, 168, 76, 0.08); } }
.sim__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The first look: the buttons by the profile picture answer once, so a
   visitor sees the screen can be tapped. Twice, then still. */
@keyframes sim-hint { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0); } 40% { box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.9), 0 0 0 3px rgba(201, 168, 76, 0.18); } }
.sim.is-live:not(.is-on)[data-screen="home"] .sim__page--page .sim__hot:nth-child(-n+7) { animation: sim-hint 1600ms var(--ease) 900ms 2; }
@media (prefers-reduced-motion: reduce) {
  .sim__page, .sim__hot { transition: none; }
  .sim.is-live .sim__hot { animation: none !important; }
}

/* The cue under a phone: one line, the club's voice. */
.sim-cue { margin-top: var(--s3); font: 400 12px/1.4 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-align: center; }
.in-sc .sim { flex: 1; }

/* The tour's phone is a thing to use now, so all of it, tab bar included,
   stays inside the window at any height (perspective draws the near edge
   a little larger than the box). */
@media (min-width: 1000px) and (min-height: 700px) {
  .kn-tour__stage .ph3 { --w: min(clamp(260px, 21vw, 330px), calc((100svh - 56px - 200px) * 430 / 932)); }
}
.sim__ghost { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sim__view { z-index: 1; }