/* Public site (statically rendered, no Tailwind): one screen, a flowing gradient of the portal's
   blues (stirred by the pointer into a faint nebula) behind a single wordmark and one action. The
   theme follows the .dark class that js/theme.js sets on <html>; the --shader-* tokens are read by
   js/landing-background.js (--shader-calm: how much the zone behind the hero fades to the base,
   --shader-sheen: depth of the streaks along the flow, --shader-trail-c0..c3: the hues the nebula
   drifts through, --shader-trail-a: its strength, --shader-trail-glow: 1 adds it as light, 0 blends
   it). The wordmark is Archivo at 125% width (one variable-weight file per subset, self-hosted
   because the CSP allows fonts only from 'self'); its --wordmark-* knobs and the
   --public-wordmark-from/-to gradient are tuned on the bench in spikes/landing-wordmark/. */

@font-face {
  font-family: "Archivo Expanded";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/ArchivoExpanded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Expanded";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/ArchivoExpanded-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --public-bg: #f7f9fc;
  --public-fg: var(--color-neutral-900);
  --public-fg-soft: #4a5566;
  --public-fg-mute: var(--color-neutral-500);
  --public-brand: var(--color-brand-600);
  --public-brand-hover: var(--color-brand-700);
  --public-brand-ring: var(--color-brand-300);
  --public-glass: rgba(255, 255, 255, 0.55);
  --public-glass-border: rgba(50, 86, 120, 0.16);
  --public-wordmark-from: #1d5fd8;
  --public-wordmark-to: #0e9fc2;

  /* Shader palette (light): the login wallpaper's blues and teal, more saturated */
  --shader-base: #f3f7fd;
  --shader-c0: #4f9cf0; --shader-a0: 0.90;
  --shader-c1: #9ec9f7; --shader-a1: 0.95;
  --shader-c2: #17adc4; --shader-a2: 0.62;
  --shader-c3: #3f68d8; --shader-a3: 0.72;
  --shader-calm: 0.42;
  --shader-sheen: 0.045;
  --shader-trail-c0: #2f62e6;
  --shader-trail-c1: #7046e0;
  --shader-trail-c2: #0ea5c6;
  --shader-trail-c3: #4f46e5;
  --shader-trail-a: 0.15;
  --shader-trail-glow: 0;
}

.dark {
  --public-bg: #121316;
  --public-fg: var(--color-neutral-50);
  --public-fg-soft: #c3c8d2;
  --public-fg-mute: #8e939c;
  --public-brand: var(--color-brand-500);
  --public-brand-hover: var(--color-brand-400);
  --public-brand-ring: #4aa3ff;
  --public-glass: rgba(29, 29, 31, 0.5);
  --public-glass-border: rgba(255, 255, 255, 0.12);
  --public-wordmark-from: #6aa8ff;
  --public-wordmark-to: #45dbe8;

  --shader-base: #0d1017;
  --shader-c0: #0a84ff; --shader-a0: 0.72;
  --shader-c1: #1d4280; --shader-a1: 0.95;
  --shader-c2: #1fb2c7; --shader-a2: 0.46;
  --shader-c3: #4a5fd4; --shader-a3: 0.66;
  --shader-calm: 0.38;
  --shader-sheen: 0.10;
  --shader-trail-c0: #3b82ff;
  --shader-trail-c1: #8b5cf6;
  --shader-trail-c2: #22d3ee;
  --shader-trail-c3: #6366f1;
  --shader-trail-a: 0.17;
  --shader-trail-glow: 1;
  color-scheme: dark;
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--public-bg);
  color: var(--public-fg);
  font-family: var(--font-sans), sans-serif;
  font-size: var(--text-base);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  /* Fallback when WebGL is unavailable: the same hues as static glows */
  background-image:
    radial-gradient(50rem 32rem at 100% 0%, color-mix(in srgb, var(--shader-c0) 55%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 0% 55%, color-mix(in srgb, var(--shader-c1) 65%, transparent), transparent 70%),
    radial-gradient(36rem 24rem at 55% 100%, color-mix(in srgb, var(--shader-c2) 20%, transparent), transparent 70%);
  background-attachment: fixed;
}

img, svg {
  display: block;
}

/* ---------- Layout ---------- */

.public-topbar {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 2;
}

.public-icon-button {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--public-glass-border);
  background: var(--public-glass);
  color: var(--public-fg-soft);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: color 150ms ease, transform 150ms ease;
}
.public-icon-button:hover { color: var(--public-fg); }
.public-icon-button:active { transform: scale(0.96); }
.public-icon-button svg { width: 1.125rem; height: 1.125rem; }

.public-icon-button:focus-visible,
.landing-cta:focus-visible {
  outline: 3px solid var(--public-brand-ring);
  outline-offset: 3px;
}

.public-icon-sun { display: none; }
.dark .public-icon-sun { display: block; }
.dark .public-icon-moon { display: none; }

.public-main {
  position: relative;
  z-index: 1;
  min-height: 100%;
}

/* ---------- Landing ---------- */

.landing-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* The content is positioned above the fixed background canvas, so it always paints over it. */
.landing {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0;
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  margin-bottom: 10vh;
  text-align: center;
}

.landing-mascot {
  width: clamp(7rem, 17vh, 10.5rem);
  height: auto;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--shader-c3) 30%, transparent));
}

.landing-wordmark {
  /* Knobs of the bench in spikes/landing-wordmark/ */
  --wordmark-size: clamp(2.75rem, 8.5vw, 6.5rem);
  --wordmark-weight: 900;
  --wordmark-tracking: -0.01em;
  --wordmark-scale: 0.92;
  --wordmark-first-size: 0.26em;
  --wordmark-first-weight: 400;
  --wordmark-first-tracking: 0.5em;
  --wordmark-angle: 100deg;

  margin: 0;
  font-family: "Archivo Expanded", var(--font-sans), sans-serif;
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  line-height: 0.92;
}
/* ADELANTE: small, widely spaced capitals above the name. The left margin equals the tracking,
   so the trailing letter space does not pull the word off centre. */
.landing-wordmark-first {
  display: block;
  margin: 0 0 0.5em var(--wordmark-first-tracking);
  font-size: var(--wordmark-first-size);
  font-weight: var(--wordmark-first-weight);
  letter-spacing: var(--wordmark-first-tracking);
  text-transform: uppercase;
  color: var(--public-fg-soft);
}
/* HACHIKO in the brand gradient; the padding keeps the overhanging glyph edges inside the clip. */
.landing-wordmark-second {
  padding: 0 0.04em;
  margin: 0 -0.04em;
  font-size: calc(var(--wordmark-scale) * 1em);
  letter-spacing: var(--wordmark-tracking);
  text-transform: uppercase;
  color: var(--public-fg);
  background-image: linear-gradient(var(--wordmark-angle), var(--public-wordmark-from) 10%, var(--public-wordmark-to) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .landing-wordmark-second {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
}

.landing-tagline {
  margin: 0;
  /* One line down to phone width: the size follows the viewport so the line always fits. */
  font-size: clamp(0.9375rem, 1.6vw + 0.5rem, 1.5rem);
  line-height: 1.35;
  font-weight: 400;
  color: var(--public-fg-soft);
  white-space: nowrap;
}

.landing-cta {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0 1.375rem 0 1.5rem;
  border-radius: 6px;
  background: var(--public-brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px color-mix(in srgb, var(--public-brand) 28%, transparent);
  transition: background-color 150ms ease;
}
.landing-cta:hover { background: var(--public-brand-hover); }
.landing-cta svg { width: 1.125rem; height: 1.125rem; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.landing-cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .landing-cta svg, .public-icon-button { transition: none; }
}