/* ==========================================================================
   SPAZIO ZENO — Coming Soon
   Source of truth: Figma frame "Loader" (node 270:2), 1440 × 800
   ========================================================================== */

/* Language rows typeface: self-hosted subsets of Inter Medium (as in Figma
   frame 271:16) and Noto Sans CJK Medium, holding only the glyphs the rows use
   (see assets/fonts/OFL.txt). Arabic, Hebrew, Persian, Hindi and Thai use the
   fonts every modern OS ships for those scripts. */
@font-face {
  font-family: "SZ Inter";
  src: url("assets/fonts/inter-medium-subset.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0041-0045, U+0047-0050, U+0052-005A, U+0061-0065, U+0067-0070, U+0072-007A, U+00C0, U+00C2, U+00C4, U+00C9, U+00CE, U+00D3-00D4, U+00E0, U+00E2, U+00E4, U+00E9, U+00EE, U+00F3-00F4, U+0100-0101, U+010C-010D, U+012A-012B, U+017B-017C, U+0391, U+039C-039D, U+039F, U+03A3-03A5, U+03B1, U+03BC-03BD, U+03BF, U+03C3-03C5, U+041A, U+041E, U+0420-0421, U+043A, U+043E, U+0440-0441, U+1EAE-1EAF;
}

@font-face {
  font-family: "SZ Inter";
  src: url("assets/fonts/noto-sans-jp-medium-subset.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+516C, U+65E5, U+8FD1, U+958B;
}

@font-face {
  font-family: "SZ Inter";
  src: url("assets/fonts/noto-sans-sc-medium-subset.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+51FA, U+5373, U+5C06, U+63A8;
}

@font-face {
  font-family: "SZ Inter";
  src: url("assets/fonts/noto-sans-kr-medium-subset.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC1C, U+ACE7, U+ACF5, U+B2C8, U+B2E4, U+B429;
}

/* Loader typeface: Inter Display Medium (Google Fonts, OFL licence), self-hosted
   and cut down to the letters of "SPAZIO ZENO" (2.7 KB).
   To switch to PP Neue Montreal later (needs its Web licence): put
   PPNeueMontreal-Medium.woff2 in assets/fonts/ and use it as the src below. */
@font-face {
  font-family: "SZ Display";
  src: url("assets/fonts/inter-display-medium-subset.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Design tokens (all values taken from Figma) */
:root {
  --color-bg: #000000;          /* frame fill */
  --color-text: #eeeeee;        /* text fill #EEE */
  --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Helvetica Neue Medium */
  --font-weight: 500;
  --font-size: 12px;
  --line-height: 15px;
  --letter-spacing: -0.24px;    /* -2% of 12px */
  --gutter: 20px;               /* row horizontal padding */
  /* Language rows: Inter Medium, as in Figma frame 271:16 */
  --font-rows: "SZ Inter", "Inter", "Helvetica Neue", Helvetica, Arial,
    "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari",
    "Noto Sans Thai", "Geeza Pro", "Arial Hebrew", "Kohinoor Devanagari", "Thonburi",
    "Segoe UI", "Nirmala UI", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Pixel-art arrow cursor (12 × 19 pixels); tip = hotspot.
     Touch screens show no cursor, so nothing changes there. */
  cursor: url("assets/cursor.png") 0 0, auto;
  cursor: -webkit-image-set(url("assets/cursor.png") 1x, url("assets/cursor@2x.png") 2x) 0 0, auto;
  cursor: image-set(url("assets/cursor.png") 1x, url("assets/cursor@2x.png") 2x) 0 0, auto;
}

/* Same arrow over links and text (browsers default to a hand / I-beam) */
a,
*,
*::before,
*::after {
  cursor: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--color-bg);
}

body {
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-style: normal;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus only — invisible to mouse/touch users, required for accessibility */
a:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Loader frame (270:2): full viewport, column, centred both ways
   -------------------------------------------------------------------------- */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

/* Frame 6 (270:15): full width, 15px tall, space-between, 20px side padding */
.loader__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--line-height);
  padding: 0 var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.loader__item {
  flex-shrink: 0;
  white-space: nowrap;
}

.loader__item--end {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Mobile adaptation (no mobile frame in Figma).
   Below 560px the four labels can no longer sit on one line with readable
   gaps, so the row splits into two lines that keep the same left/right
   edges, size, weight and centring as the desktop frame.
   -------------------------------------------------------------------------- */
@media (max-width: 559px) {
  .loader__row {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: var(--line-height);
    height: auto;
  }

  .loader__item:nth-child(2n) {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   Particle loader (drawn by script.js on a canvas). Shown only when
   JavaScript runs (html.intro-on); if script.js never takes over, the
   failsafe clears it.
   -------------------------------------------------------------------------- */
.intro {
  display: none;
}

.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  background-color: var(--color-bg);
  transition: opacity 0.75s ease;
  animation: intro-failsafe 0.6s ease 10s forwards;
}

.intro.is-leaving {
  opacity: 0;
}

.intro__canvas {
  display: block;
}

@keyframes intro-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   Language rows (Figma 271:16), shown while hovering "Nov 2026".
   Built by script.js; columns line up with the main row; rows 25px apart.
   -------------------------------------------------------------------------- */
.loader {
  position: relative;
}

.echoes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.echo {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.echoes.is-on .echo {
  opacity: 1;
}

.echo__word {
  font-family: var(--font-rows);
  font-synthesis: none;
  text-align: left;
  text-transform: uppercase;      /* phrases keep their own spelling in script.js */
}

@media (prefers-reduced-motion: reduce) {
  .echo {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Email link: subtle hover feedback (pointer devices only)
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .loader__row a {
    transition: opacity 0.2s ease;
  }

  .loader__row a:hover {
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   Hidden interactions (script.js) — nothing below changes the resting page.
   -------------------------------------------------------------------------- */

/* Accessible copy of animated text */
.sr-only {
  position: absolute;
  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;
}

/* Magnetic title: each letter can move with a transform */
.magnet__letter {
  display: inline-block;
}