/* Shared shell for every arqivanelabs gate option: page, logo, the one button, layouts, jump flash, fallbacks.
   Colours and font come from the arqivane.com storefront (site-shell.css, heroes.css); the logo is the owner's lockup, unchanged.
   Layout per option with <body data-layout="seal|corners|window">; button material with data-btn="glass|light". */
:root {
  --bg: #07060a;
  --ink: #f7f3ff;
  --violet: #8b47ce;
  --brand: #c4b5fd;
  --brand-deep: #6d28d9;
  --focus: #d5aaff;
  --font: Inter, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --edge: 28px;
  --win-w: min(62vw, 880px);
  --win-h: min(50svh, 520px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
/* Stop rubber-banding with a mouse; phones keep their normal pull-to-refresh. */
@media (pointer: fine) { html { overscroll-behavior: none; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand-deep); color: #fff; }

/* ---------- Background stage: each option fills .space with its own layers ---------- */

.space {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.space > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Fallback when WebGL is unavailable (Gate.fail()): the live arqivane.com home star field. */
.stars { display: none; background-image: radial-gradient(1.4px 1.4px at 94.6% 12.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 12.9% 47.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 48.9% 81.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 41.8% 46.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 69.9% 73.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 84.7% 7.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 32.3% 91.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 23.5% 26.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 7.2% 86.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 6.7% 79.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 39.0% 43.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 65.3% 1.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 92.8% 39.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 6.8% 34.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 53.7% 6.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 68.9% 27.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 42.0% 66.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 85.2% 65.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 37.1% 78.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 95.9% 75.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 12.2% 16.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 1.6% 7.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 0.8% 9.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 93.3% 67.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 71.4% 28.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 63.4% 1.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 98.8% 24.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 76.8% 77.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 78.6% 80.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 40.7% 26.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 90.7% 65.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 7.5% 29.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 88.3% 4.7%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 45.3% 87.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 79.4% 93.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 61.3% 21.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 80.1% 7.0%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 43.3% 70.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 73.5% 98.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 28.7% 37.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 24.3% 89.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 25.0% 80.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 92.5% 8.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 97.5% 9.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 54.7% 41.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 10.3% 14.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 73.1% 53.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 42.8% 60.8%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 77.7% 76.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 96.1% 26.7%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 55.7% 25.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 2.9% 72.0%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 91.1% 65.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 14.5% 17.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 65.2% 35.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 49.3% 64.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 63.2% 85.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 96.6% 1.8%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 41.8% 32.3%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 15.3% 38.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 33.8% 12.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 47.3% 89.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 39.1% 34.8%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 70.7% 7.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 86.5% 75.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 68.4% 38.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 8.1% 49.4%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 92.6% 21.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 71.7% 84.9%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 76.7% 66.8%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 94.4% 87.7%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 69.0% 36.7%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 64.3% 97.0%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 90.0% 32.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 28.2% 30.5%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 25.0% 1.7%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 6.7% 93.6%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 59.3% 75.1%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 90.8% 56.2%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1.4px 1.4px at 12.8% 19.8%, rgb(255 255 255/.85) 50%, transparent 55%),radial-gradient(1px 1px at 36.0% 70.7%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 32.6% 88.4%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 43.7% 46.4%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 27.4% 75.2%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 95.6% 46.0%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 50.0% 24.2%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 39.1% 49.8%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 32.4% 40.0%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 53.6% 43.8%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 18.9% 17.9%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 78.3% 8.6%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 47.3% 57.1%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 18.3% 82.5%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 18.5% 75.7%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 52.4% 28.2%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 37.4% 44.1%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 32.6% 83.2%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 5.4% 19.7%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 52.9% 94.1%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 46.2% 59.1%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 85.8% 71.1%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 49.1% 71.9%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 87.1% 74.9%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 14.5% 62.0%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 90.5% 17.6%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 25.9% 88.5%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 9.8% 33.7%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 61.3% 80.5%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 77.4% 36.2%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(1px 1px at 79.0% 76.1%, rgb(255 255 255/.5) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 69.5% 15.7%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 25.7% 5.4%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 66.3% 60.0%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 84.9% 34.5%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 59.1% 34.1%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 20.3% 69.8%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 28.0% 28.8%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 66.2% 98.3%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 93.5% 0.6%, rgb(196 181 253/.95) 50%, transparent 55%),radial-gradient(2.4px 2.4px at 41.9% 64.5%, rgb(196 181 253/.95) 50%, transparent 55%); }
.no-gl .stars { display: block; }
.no-gl .space canvas { display: none; }

.grain {
  opacity: 0.2;
  mix-blend-mode: screen;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.5%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'180'%20height%3D'180'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
}
.vignette { background: radial-gradient(120% 95% at 50% 50%, transparent 50%, rgb(0 0 0 / 0.6) 100%); }

/* The jump's closing flash, shared by every option. */
.flash {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #f4f0ff;
  opacity: 0;
}

/* ---------- Logo and button ---------- */

.gate {
  position: relative;
  z-index: 1;
  /* The jump scales the frame past the viewport; clip it so no scrollbars flash. */
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    calc(var(--edge) + env(safe-area-inset-top, 0px))
    calc(20px + env(safe-area-inset-right, 0px))
    calc(var(--edge) + env(safe-area-inset-bottom, 0px))
    calc(20px + env(safe-area-inset-left, 0px));
}

.gate-inner {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7vh, 72px);
}

.brand { margin: 0; line-height: 0; }
.brand img {
  display: block;
  width: clamp(190px, 28vw, 330px);
  height: auto;
  filter: drop-shadow(0 4px 24px rgb(0 0 0 / 0.7));
  user-select: none;
  -webkit-user-drag: none;
}

/* The one action: the store's domain. Glass by default (reads over a moving scene); data-btn="light" for bright scenes. */
.go {
  --btn-bg: rgb(9 7 14 / 0.5);
  --btn-line: rgb(247 243 255 / 0.34);
  --btn-ink: var(--ink);
  --btn-arrow: var(--brand);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 260px;
  min-height: 58px;
  padding: 0 26px 0 30px;
  border: 1px solid var(--btn-line);
  border-radius: 14px;
  background: var(--btn-bg);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 14px 30px -18px rgb(0 0 0 / 0.9);
  color: var(--btn-ink);
  font: 550 17px/1 var(--font);
  letter-spacing: 0.01em;
  text-decoration: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, border-color 180ms ease;
}
[data-btn="light"] .go {
  --btn-bg: #f7f3ff;
  --btn-line: #ffffff;
  --btn-ink: #0b0910;
  --btn-arrow: var(--brand-deep);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.go svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--btn-arrow);
  transition: transform 220ms var(--ease-out);
}

.go:active { transform: scale(0.98); }
.go:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .go:hover { --btn-line: rgb(247 243 255 / 0.7); --btn-bg: rgb(22 17 32 / 0.62); }
  [data-btn="light"] .go:hover { --btn-bg: #e9e2fb; --btn-line: #ffffff; }
  .go:hover svg { transform: translateX(4px); }
}

/* ---------- Layout: corners (the scene owns the frame; logo top left, button bottom right) ---------- */

[data-layout="corners"] .gate { display: block; padding: 0; }
[data-layout="corners"] .gate-inner {
  position: absolute;
  inset:
    calc(var(--edge) + env(safe-area-inset-top, 0px))
    calc(var(--edge) + env(safe-area-inset-right, 0px))
    calc(var(--edge) + env(safe-area-inset-bottom, 0px))
    calc(var(--edge) + env(safe-area-inset-left, 0px));
  max-width: none;
  width: auto;
  display: block;
}
[data-layout="corners"] .brand { position: absolute; top: 0; left: 0; }
[data-layout="corners"] .brand img { width: clamp(120px, 12vw, 176px); }
[data-layout="corners"] .go { position: absolute; right: 0; bottom: 0; }

/* ---------- Layout: window (the scene seen through an opening; logo above it, button below) ---------- */

[data-layout="window"] .gate-inner {
  max-width: none;
  display: grid;
  grid-template-rows: auto var(--win-h) auto;
  justify-items: center;
  align-items: center;
  gap: clamp(24px, 4vh, 40px);
}
[data-layout="window"] .brand img { width: clamp(150px, 16vw, 210px); }
.window { display: none; }
[data-layout="window"] .window {
  display: block;
  width: var(--win-w);
  height: var(--win-h);
  border-radius: 22px;
  pointer-events: none;
  box-shadow: 0 0 0 200vmax rgb(7 6 10 / 0.88), inset 0 0 0 1px rgb(247 243 255 / 0.12);
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  :root { --edge: 20px; --win-w: calc(100vw - 40px); --win-h: min(48svh, 460px); }
  .brand img { width: min(58vw, 240px); }
  .go { width: 100%; max-width: 360px; min-width: 0; }
  [data-layout="corners"] .brand img { width: 112px; }
  [data-layout="corners"] .go { left: 0; right: 0; max-width: none; width: auto; }
  [data-layout="window"] .brand img { width: 132px; }
}

/* Pause control for the endless background motion (WCAG 2.2.2). Added by gate.js unless reduced motion is on. */
.motion-toggle {
  position: fixed;
  z-index: 2;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(247 243 255 / 0.16);
  border-radius: 50%;
  background: rgb(7 6 10 / 0.4);
  color: rgb(247 243 255 / 0.72);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease, border-color 160ms ease;
}
.motion-toggle svg { width: 14px; height: 14px; }
.motion-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .motion-toggle:hover { color: #fff; border-color: rgb(247 243 255 / 0.42); }
}
.motion-paused .space *, .motion-paused .space *::before, .motion-paused .space *::after { animation-play-state: paused !important; }

/* Hidden only while GSAP is about to bring them in (html.js); visible without JavaScript. */
.js .t-line { opacity: 0; }