/* Sidequest kit — behaviour styles shared by all four editions.
   Structure and motion live here; each edition skins it through the --sq-* hooks
   below and its own stylesheet. Loaded before the edition stylesheet. */

:root {
  --sq-ease-out: cubic-bezier(.23, 1, .32, 1);
  --sq-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --sq-ease-sheet: cubic-bezier(.32, .72, 0, 1);

  /* dialog skin */
  --sq-scrim: rgba(8, 8, 10, .62);
  --sq-scrim-blur: 0px;
  --sq-panel-bg: #fff;
  --sq-panel-fg: #141414;
  --sq-panel-border: 1px solid rgba(0, 0, 0, .12);
  --sq-panel-radius: 14px;
  --sq-panel-shadow: 0 48px 96px -24px rgba(0, 0, 0, .5);
  --sq-panel-w: 560px;
  --sq-exit-ms: 220;            /* read by kit.js: how long the closing transition lasts */

  /* toast skin */
  --sq-toast-bg: #141414;
  --sq-toast-fg: #fff;
  --sq-toast-border: 1px solid rgba(255, 255, 255, .14);
  --sq-toast-radius: 10px;
  --sq-toast-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
  --sq-toast-accent: currentColor;

  /* hotspot skin */
  --sq-spot: #fff;
  --sq-spot-ring: rgba(0, 0, 0, .45);

  --sq-focus: currentColor;
}

html { scrollbar-gutter: stable; }
html.sq-lock { overflow: hidden; }

.sq-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sq-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

:focus-visible { outline: 2px solid var(--sq-focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- split text */
.sq-w { display: inline-block; white-space: nowrap; text-indent: 0; }
.sq-c, .sq-wi { display: inline-block; will-change: transform; }

/* -------------------------------------------------------------------- reveal */
html.sq-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .6s ease, transform .8s var(--sq-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.sq-js [data-reveal].is-in { opacity: 1; transform: none; }
html.sq-js [data-reveal="fade"] { transform: none; }
html.sq-js [data-reveal="clip"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--sq-ease-in-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.sq-js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
/* a hook only: the edition stylesheet decides what .is-in does */
html.sq-js [data-reveal="hook"] { opacity: 1; transform: none; transition: none; }

/* ------------------------------------------------------------------- dialogs */
dialog.sq-dialog {
  position: fixed; inset: 0;
  box-sizing: border-box;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0;
  background-color: transparent; color: inherit;
  overflow: hidden;
  transition: background-color .22s ease, backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
}
dialog.sq-dialog:not([open]) { display: none; }
dialog.sq-dialog[open] { display: grid; place-items: center; }
dialog.sq-dialog::backdrop { background: transparent; }
dialog.sq-dialog[data-state="open"] {
  background-color: var(--sq-scrim);
  -webkit-backdrop-filter: blur(var(--sq-scrim-blur));
  backdrop-filter: blur(var(--sq-scrim-blur));
  transition-duration: .32s;
}

.sq-panel {
  position: relative;
  box-sizing: border-box;
  width: min(var(--sq-panel-w), 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--sq-panel-bg);
  color: var(--sq-panel-fg);
  border: var(--sq-panel-border);
  border-radius: var(--sq-panel-radius);
  box-shadow: var(--sq-panel-shadow);
  /* closed / closing: quick, slightly smaller, never from nothing */
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.96);
  transition: opacity .18s ease, transform .2s var(--sq-ease-out);
}
dialog.sq-dialog[data-state="open"] .sq-panel {
  opacity: 1;
  transform: none;
  transition: opacity .26s ease, transform .44s var(--sq-ease-out);
}

/* bottom sheet */
dialog.sq-dialog[data-variant="sheet"] { padding: 0; place-items: end center; --sq-exit-ms: 320; }
dialog.sq-dialog[data-variant="sheet"] .sq-panel {
  width: min(var(--sq-panel-w), 100%);
  max-height: min(92dvh, 100%);
  border-bottom: 0;
  border-radius: var(--sq-panel-radius) var(--sq-panel-radius) 0 0;
  opacity: 1;
  transform: translate3d(0, 102%, 0);
  transition: transform .3s var(--sq-ease-sheet);
}
dialog.sq-dialog[data-variant="sheet"][data-state="open"] .sq-panel {
  transform: none;
  transition: transform .5s var(--sq-ease-sheet);
}
.sq-drag {
  position: sticky; top: 0; z-index: 3;
  display: grid; place-items: center;
  height: 28px; margin-bottom: -28px;
  cursor: grab; touch-action: none;
}
.sq-drag:active { cursor: grabbing; }
.sq-drag::before {
  content: ""; width: 44px; height: 4px; border-radius: 4px;
  background: currentColor; opacity: .28;
}

/* side panel */
dialog.sq-dialog[data-variant="side"] { padding: 0; place-items: stretch end; --sq-exit-ms: 300; }
dialog.sq-dialog[data-variant="side"] .sq-panel {
  width: min(var(--sq-panel-w), 100%);
  height: 100%; max-height: none;
  border-radius: 0; border-block: 0; border-right: 0;
  opacity: 1;
  transform: translate3d(102%, 0, 0);
  transition: transform .28s var(--sq-ease-sheet);
}
dialog.sq-dialog[data-variant="side"][data-state="open"] .sq-panel {
  transform: none;
  transition: transform .5s var(--sq-ease-sheet);
}

.sq-x {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color .15s ease, transform .16s var(--sq-ease-out);
}
.sq-x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .sq-x:hover { background-color: color-mix(in srgb, currentColor 12%, transparent); }
}

/* -------------------------------------------------------------------- toasts */
.sq-toasts {
  position: fixed; z-index: 2147483600;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(372px, calc(100vw - 32px));
  height: 0; margin: 0; padding: 0; list-style: none;
}
.sq-toast {
  position: absolute; right: 0; bottom: 0;
  box-sizing: border-box; width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 44px 14px 16px;
  background: var(--sq-toast-bg);
  color: var(--sq-toast-fg);
  border: var(--sq-toast-border);
  border-radius: var(--sq-toast-radius);
  box-shadow: var(--sq-toast-shadow);
  opacity: 0;
  transition: transform .42s var(--sq-ease-out), opacity .26s ease;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  will-change: transform;
}
.sq-toast[data-mounted] { opacity: 1; }
.sq-toast[data-dragging] { transition: none; cursor: grabbing; }
.sq-toast[data-leaving] {
  opacity: 0; pointer-events: none;
  transition: transform .24s var(--sq-ease-out), opacity .2s ease;
}
.sq-toast__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--sq-toast-accent); }
.sq-toast__icon svg { width: 100%; height: 100%; }
.sq-toast__body { flex: 1; min-width: 0; }
.sq-toast__title { margin: 0; font-size: .875rem; line-height: 1.35; font-weight: 600; }
.sq-toast__text { margin: 2px 0 0; font-size: .8125rem; line-height: 1.4; opacity: .76; }
.sq-toast__action {
  flex: none; align-self: center;
  padding: 6px 10px; border: 1px solid currentColor; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; font-size: .75rem; font-weight: 600;
  cursor: pointer;
  transition: transform .16s var(--sq-ease-out);
}
.sq-toast__action:active { transform: scale(.96); }
.sq-toast__close {
  position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit; opacity: .55; cursor: pointer;
  transition: opacity .15s ease;
}
.sq-toast__close:hover, .sq-toast__close:focus-visible { opacity: 1; }

/* ------------------------------------------------------------------ hotspots */
.sq-spot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; z-index: 2; }
.sq-spot[data-open="true"] { z-index: 6; }
.sq-spot > button {
  position: absolute; left: -22px; top: -22px;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer;
}
.sq-spot > button::before {
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  background: var(--sq-spot);
  box-shadow: 0 0 0 3px var(--sq-spot-ring);
  transition: transform .2s var(--sq-ease-out);
}
.sq-spot > button::after {
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  border: 1px solid var(--sq-spot);
  animation: sq-ping 2.6s var(--sq-ease-out) infinite;
}
.sq-spot[data-open="true"] > button::before { transform: scale(1.35); }
.sq-spot[data-open="true"] > button::after { animation: none; opacity: 0; }
@keyframes sq-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }

.sq-spot__card {
  position: absolute;
  box-sizing: border-box;
  width: max-content; max-width: min(264px, 72vw);
  padding: 12px 14px;
  background: var(--sq-panel-bg);
  color: var(--sq-panel-fg);
  border: var(--sq-panel-border);
  border-radius: calc(var(--sq-panel-radius) * .6);
  box-shadow: var(--sq-toast-shadow);
  font-size: .8125rem; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.94);
  transition: opacity .12s ease, transform .14s var(--sq-ease-out), visibility 0s linear .14s;
}
.sq-spot[data-open="true"] .sq-spot__card {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .16s ease, transform .22s var(--sq-ease-out), visibility 0s;
}
.sq-spot__card > :first-child { margin-top: 0; }
.sq-spot__card > :last-child { margin-bottom: 0; }
/* placement uses `translate` so the scale-in keeps its own transform-origin;
   kit.js sets --sq-nudge-x/y when a card would otherwise be cut off */
.sq-spot[data-side="right"] .sq-spot__card { left: 20px; top: 0; translate: var(--sq-nudge-x, 0px) calc(-50% + var(--sq-nudge-y, 0px)); transform-origin: left center; }
.sq-spot[data-side="left"] .sq-spot__card { right: 20px; top: 0; translate: var(--sq-nudge-x, 0px) calc(-50% + var(--sq-nudge-y, 0px)); transform-origin: right center; }
.sq-spot[data-side="top"] .sq-spot__card { left: 0; bottom: 20px; translate: calc(-50% + var(--sq-nudge-x, 0px)) var(--sq-nudge-y, 0px); transform-origin: center bottom; }
.sq-spot[data-side="bottom"] .sq-spot__card { left: 0; top: 20px; translate: calc(-50% + var(--sq-nudge-x, 0px)) var(--sq-nudge-y, 0px); transform-origin: center top; }

/* ------------------------------------------------------------------ waitlist */
form[data-waitlist] [data-success] { display: none; }
form[data-waitlist][data-state="done"] [data-fields] { display: none; }
form[data-waitlist][data-state="done"] [data-success] { display: block; outline: 0; }
form[data-waitlist] [data-preview-note] { display: none; }
form[data-waitlist][data-preview] [data-preview-note] { display: block; }
form[data-waitlist] [data-error]:empty { display: none; }
form[data-waitlist] button[type="submit"] { position: relative; }
form[data-waitlist] button[data-loading] { cursor: progress; }
form[data-waitlist] button[data-loading] > * { opacity: .35; }
form[data-waitlist] button[data-loading]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: sq-spin .6s linear infinite;
}
@keyframes sq-spin { to { transform: rotate(1turn); } }

/* ------------------------------------------------------------------- marquee */
.sq-marquee { overflow: hidden; }
.sq-marquee__track { display: flex; width: max-content; will-change: transform; }
.sq-marquee__track > * { flex: none; }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.sq-js [data-reveal] { transform: none !important; clip-path: none !important; transition: opacity .3s ease !important; transition-delay: 0s !important; }
  .sq-panel,
  dialog.sq-dialog[data-variant] .sq-panel { opacity: 0; transform: none !important; transition: opacity .16s ease !important; }
  dialog.sq-dialog[data-state="open"] .sq-panel { opacity: 1; }
  .sq-toast { transition: opacity .2s ease; }
  .sq-spot > button::after { animation: none; opacity: 0; }
  .sq-spot__card { transform: none !important; }
  form[data-waitlist] button[data-loading]::after { animation-duration: 1.2s; }
}