/* Greybox first-visit splash (js/splash.js) — the one-time "GreyBox is
 * completely free, ads keep it running" card. MINI by design: a ~430px glass
 * panel over a soft dark veil, built entirely from site tokens so dark /
 * AMOLED / light themes, the glass-off component switch and the mobile
 * glass-off band all inherit their fallbacks with zero per-theme panel rules
 * here (tokens.css already remaps the fills). Identity comes from the real
 * GreyBox wordmark classes (gx-wordmark-*), so the card reads as native
 * chrome, not a sticker. Both buttons dismiss permanently
 * (greybox:splash-seen) — an honest ask, not a gate. */

.gxsplash {
  position: fixed;
  inset: 0;
  z-index: 300; /* above public chrome; admin.html never loads js/splash.js */
  display: grid;
  place-items: center;
  padding: 20px;
}

/* Veil: dark wash + a soft centre bloom so the page behind recedes but stays
 * readable as "the site". The blur is desktop-only free ride — tokens.css
 * kills backdrop-filter on the <=859px band for scroll performance. */
.gxsplash-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 50% 30%, rgba(255, 255, 255, 0.055), transparent 68%),
    rgba(5, 7, 11, 0.74);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
  backdrop-filter: blur(6px) saturate(125%);
  opacity: 1;
  transition: opacity 200ms ease;
}

html[data-theme="amoled"] .gxsplash-veil {
  background:
    radial-gradient(760px 420px at 50% 30%, rgba(255, 255, 255, 0.03), transparent 68%),
    rgba(0, 0, 0, 0.82);
}

html[data-theme="light"] .gxsplash-veil {
  background:
    radial-gradient(760px 420px at 50% 30%, rgba(255, 255, 255, 0.85), transparent 68%),
    rgba(230, 233, 239, 0.8);
}

/* Card: strong glass + hairline + the standard pop shadow with the inset
 * top highlight (the site's glass recipe). Entrance/dismiss both ride CSS
 * transitions (never animations) so the in and out states can never fight
 * over the same property. */
.gxsplash-card {
  position: relative;
  width: min(430px, 100%);
  padding: 24px 24px 20px;
  border-radius: var(--gx-radius-panel);
  background: var(--gx-glass-strong);
  border: 1px solid var(--gx-border-strong);
  box-shadow: var(--gx-shadow-pop), var(--gx-glass-highlight);
  opacity: 1;
  transform: none;
  transition: opacity 240ms ease, transform 380ms var(--gx-ease-spring);
}

/* Sheen: the same top-of-glass light every Greybox panel gets. */
.gxsplash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 40%);
  pointer-events: none;
}

.gxsplash.is-entering .gxsplash-veil { opacity: 0; }
.gxsplash.is-entering .gxsplash-card { opacity: 0; transform: translateY(18px) scale(0.97); }
.gxsplash.is-leaving .gxsplash-veil { opacity: 0; }
.gxsplash.is-leaving .gxsplash-card { opacity: 0; transform: translateY(10px) scale(0.98); }

/* Reduced motion (Settings -> Appearance toggle; the OS-level
 * prefers-reduced-motion blanket in tokens.css covers the other half). */
html[data-motion="reduced"] .gxsplash-veil,
html[data-motion="reduced"] .gxsplash-card { transition: none; }

/* ---------------- header row: mark icon + wordmark ---------------- */
.gxsplash-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.gxsplash-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--gx-glass-wash);
  border: 1px solid var(--gx-border);
  color: var(--gx-text);
}

.gxsplash-mark svg { width: 17px; height: 17px; }

.gxsplash-wordmark {
  font: 700 1.12rem/1 "Space Grotesk", ui-sans-serif, sans-serif;
  letter-spacing: -0.03em;
}

/* ---------------- copy ---------------- */
.gxsplash-eyebrow {
  margin: 0 0 7px;
  font: 600 0.7rem/1 "Space Grotesk", ui-sans-serif, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gx-text-faint);
}

.gxsplash-title {
  margin: 0 0 10px;
  font: 700 clamp(1.3rem, 4.4vw, 1.6rem)/1.15 "Space Grotesk", ui-sans-serif, sans-serif;
  letter-spacing: -0.02em;
  color: var(--gx-text);
}

.gxsplash-copy {
  margin: 0 0 9px;
  font-size: 0.91rem;
  line-height: 1.55;
  color: var(--gx-text-dim);
}

/* The ask (adblocker line): warm accent pill — the only coloured element on
 * the card, so the request reads as the point of the screen. Accent tokens
 * flip per theme automatically. */
.gxsplash-ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 13px 0 17px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--gx-accent-soft);
  border: 1px solid var(--gx-accent-border);
  color: var(--gx-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.gxsplash-ask svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--gx-accent-strong);
}

.gxsplash-ask b { color: var(--gx-accent-strong); font-weight: 700; }

/* ---------------- actions ---------------- */
.gxsplash-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.gxsplash-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: 700 0.89rem/1 "Manrope", ui-sans-serif, sans-serif;
  padding: 11px 22px;
  border-radius: var(--gx-radius-pill);
  transition: transform var(--gx-transition), background var(--gx-transition),
    border-color var(--gx-transition), color var(--gx-transition),
    box-shadow var(--gx-transition);
}

.gxsplash-btn:active { transform: translateY(1px); }

.gxsplash-skip {
  background: transparent;
  color: var(--gx-text-dim);
  border: 1px solid var(--gx-border-strong);
}

.gxsplash-skip:hover {
  color: var(--gx-text);
  border-color: var(--gx-glass-line-bright);
}

/* OK: the premium white pill — same surface family as the Watch CTA and the
 * settings segment slider, so the primary action is unmistakably Greybox. */
.gxsplash-ok {
  background: var(--watch-surface);
  color: var(--watch-text);
  box-shadow: var(--watch-shadow);
}

.gxsplash-ok:hover { box-shadow: var(--watch-shadow-hover); }

.gxsplash-fine {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--gx-text-faint);
}

/* Phones: keep the card inside thumb reach — nothing grows, nothing breaks;
 * the mobile band already runs the fills without blur (tokens.css). */
@media (max-width: 480px) {
  .gxsplash-card { padding: 20px 18px 17px; }
  .gxsplash-actions .gxsplash-btn { flex: 1; }
}