/*
 * UniGaku design tokens — the single source for every surface on unigaku.com.
 *
 * Consumers:
 *   app/globals.css              @import at build time (main site, /arc)
 *   public/hymeko/index.html     <link href="/brand/tokens.css"> (Kawamirai)
 *   public/hymeko/viewer/        <link href="/brand/tokens.css"> (trace viewer)
 *
 * Palette: one line from electric blue through UV violet to cyan, with neutrals
 * biased toward it rather than pure grey, so every page reads as one
 * temperature. Three theme states: the bare :root carries the complete light
 * palette, the media query covers viewers on "system", and [data-theme] wins
 * when someone picks a side explicitly.
 *
 * Typography is geometric throughout: Jost stands in for Futura, Barlow for
 * DIN 1451 — both open licence. The font files are linked by each host
 * document; this file only names the stacks.
 */

:root {
  --paper: #f1f3fb;
  --surface: #fbfcff;
  --surface-2: #e5e9f7;
  --ink: #0a0f20;
  --ink-2: #36406b;
  --muted: #6a7398;
  --line: #c7cde6;
  --line-soft: #dce1f2;

  --accent: #1e48e8; /* electric blue */
  --accent-soft: #e1e7ff;
  --uv: #6b2bd9; /* UV violet */
  --uv-soft: #ece2fc;
  --cyan: #0b7fa8;
  --cyan-soft: #dcf1f8;

  /* Status colours are separate from the accent line, so "warning" never reads
     as "brand". Used by the runtime surfaces, not by the marketing pages. */
  --ok: #0f7a5f;
  --warn: #9a6a12;
  --danger: #a8322c;

  /* How much of the ground shows through. Deliberately low: the backdrop is
     atmosphere, not content, and it sits further back on a light ground, where
     dark ink on paper shows every line of the mark. */
  --backdrop-wash: 0.2;
  --backdrop-mark: 0.025;
  --backdrop-plate: 0.045;
  --backdrop-plate-blend: normal;
  --backdrop-scan: 0.34;

  --font-display: 'Jost', 'Barlow', 'Futura', system-ui, sans-serif;
  --font-sans: 'Barlow', 'IBM Plex Sans JP', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #070a16;
    --surface: #0e1326;
    --surface-2: #161c33;
    --ink: #e6eaf6;
    --ink-2: #b3bcd8;
    --muted: #8a93b4;
    --line: #232a45;
    --line-soft: #191f36;

    --accent: #7b9dff;
    --accent-soft: #141d3d;
    --uv: #b48cff;
    --uv-soft: #1e1338;
    --cyan: #4fd6e8;
    --cyan-soft: #0b2a33;

    --ok: #4fc39a;
    --warn: #e0a45c;
    --danger: #ff8b86;

    /* On a dark ground the plate lifts rather than covers, so `screen` at a
       higher opacity keeps it legible without washing out the type. */
    --backdrop-wash: 0.32;
    --backdrop-mark: 0.055;
    --backdrop-plate: 0.17;
    --backdrop-plate-blend: screen;
    --backdrop-scan: 0.4;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #070a16;
  --surface: #0e1326;
  --surface-2: #161c33;
  --ink: #e6eaf6;
  --ink-2: #b3bcd8;
  --muted: #8a93b4;
  --line: #232a45;
  --line-soft: #191f36;

  --accent: #7b9dff;
  --accent-soft: #141d3d;
  --uv: #b48cff;
  --uv-soft: #1e1338;
  --cyan: #4fd6e8;
  --cyan-soft: #0b2a33;

  --ok: #4fc39a;
  --warn: #e0a45c;
  --danger: #ff8b86;

  --backdrop-wash: 0.32;
  --backdrop-mark: 0.055;
  --backdrop-plate: 0.17;
  --backdrop-plate-blend: screen;
  --backdrop-scan: 0.4;
  color-scheme: dark;
}

/* A surface that is a lit 3-D scene commits to dark; it opts in by stamping
   data-surface="viewport" rather than by redefining the palette itself. */
:root[data-surface='viewport'] {
  --paper: #070a16;
  --surface: #0e1326;
  --surface-2: #161c33;
  --ink: #e6eaf6;
  --ink-2: #b3bcd8;
  --muted: #8a93b4;
  --line: #232a45;
  --line-soft: #191f36;

  --accent: #7b9dff;
  --accent-soft: #141d3d;
  --uv: #b48cff;
  --uv-soft: #1e1338;
  --cyan: #4fd6e8;
  --cyan-soft: #0b2a33;

  --ok: #4fc39a;
  --warn: #e0a45c;
  --danger: #ff8b86;
  color-scheme: dark;
}

/* Japanese has no Jost or Barlow; Plex Sans JP carries both roles. */
html[lang='ja'] {
  --font-sans: 'IBM Plex Sans JP', 'Barlow', sans-serif;
  --font-display: 'IBM Plex Sans JP', 'Jost', sans-serif;
}

/* ---------- logo ---------- */

/* The logo ships as black line art on transparency, so both pieces are used as
   masks: the colour comes from tokens and follows the theme. */
.brand-mark,
.brand-word {
  display: block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--uv) 60%, var(--cyan));
  -webkit-mask-image: url('/brand/unigaku-mark.png');
  mask-image: url('/brand/unigaku-mark.png');
}

.brand-word {
  background: var(--ink);
  -webkit-mask-image: url('/brand/unigaku-wordmark.png');
  mask-image: url('/brand/unigaku-wordmark.png');
}

/* ---------- backdrop ---------- */

/* The scanline sheet slides by exactly one band, so the loop is seamless. */
@keyframes brand-scan {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 6px, 0);
  }
}

@keyframes brand-drift {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes brand-sweep {
  from {
    top: -30vh;
  }
  to {
    top: 100vh;
  }
}

.brand-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Electric blue on the left edge, UV violet on the right. */
.brand-backdrop__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 0% 30%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(60% 70% at 100% 70%, color-mix(in srgb, var(--uv) 34%, transparent), transparent 70%),
    radial-gradient(40% 40% at 50% 110%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%);
  opacity: var(--backdrop-wash);
}

/* The HyMeKo key visual, blended into the ground. Blurred and masked toward the
   middle so the column of running text never sits on detail. */
.brand-backdrop__plate {
  position: absolute;
  inset: 0;
  background: url('/brand/hymeko-keyvisual.webp') center / cover no-repeat;
  opacity: var(--backdrop-plate);
  mix-blend-mode: var(--backdrop-plate-blend);
  filter: blur(1.5px) saturate(1.05);
  -webkit-mask-image: radial-gradient(115% 85% at 50% 42%, transparent 6%, #000 62%);
  mask-image: radial-gradient(115% 85% at 50% 42%, transparent 6%, #000 62%);
}

.brand-backdrop__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vh, 92vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: linear-gradient(140deg, var(--accent), var(--uv) 55%, var(--cyan));
  -webkit-mask: url('/brand/unigaku-mark.png') center / contain no-repeat;
  mask: url('/brand/unigaku-mark.png') center / contain no-repeat;
  opacity: var(--backdrop-mark);
  animation: brand-drift 480s linear infinite;
}

/* A single brighter band sweeping the page, the way a CRT refresh reads. */
.brand-backdrop__sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 28vh;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--cyan) 10%, transparent),
    transparent
  );
  animation: brand-sweep 9s linear infinite;
}

.brand-backdrop__scan {
  position: absolute;
  inset: -8px 0;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 6%, transparent) 0 1px,
    transparent 1px 6px
  );
  opacity: var(--backdrop-scan);
  animation: brand-scan 1.6s linear infinite;
}

/* ---------- national band ---------- */

/* A crisp tricolour hairline down the left edge: the programme's home country,
   stated once, without a paragraph about it. Kept off the backdrop's opacity
   scale on purpose — a flag is either its colours or it is nothing. */
.flag-band {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #cd2a3e 0 33.34%,
    #ffffff 33.34% 66.67%,
    #436f4d 66.67% 100%
  );
  /* Without this the white stripe vanishes into a light ground. */
  box-shadow: 1px 0 0 color-mix(in srgb, var(--ink) 14%, transparent);
}

.brand-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Without motion the sweep would sit frozen across the page; hide it. */
  .brand-backdrop__sweep {
    display: none;
  }
}