/* Walley landing — foundation: tokens, reset, fixed layers, typography.
 * Scene-specific styles live in scenes.css. */

:root {
  /* brand palette */
  --cyan: #7FE7FF;
  --sky: #36B6FF;
  --brand: #0A84FF;
  --brand-deep: #0066FF;
  --ink: #04122B;
  --ink-2: #061a3d;
  --white: #f3fbff;

  /* signature gradients */
  --grad-wave: linear-gradient(150deg, #7FE7FF 0%, #36B6FF 38%, #0A84FF 70%, #0066FF 100%);
  --grad-deep: radial-gradient(120% 140% at 50% -10%, #0A1E3D 0%, #04122B 60%, #02060F 100%);

  /* life: 0 = frozen/gray, 1 = fully alive. Driven by app.js from scroll. */
  --life: 0;

  /* type */
  --display: 'Syne', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* fluid type scale */
  --step--1: clamp(0.78rem, 0.72rem + 0.3vw, 0.95rem);
  --step-0: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  --step-1: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  --step-2: clamp(2.6rem, 1.6rem + 5vw, 5rem);
  --step-3: clamp(3.4rem, 1.4rem + 10vw, 9rem);
  --step-mega: clamp(3rem, 1rem + 12vw, 11rem);

  --ease-liquid: cubic-bezier(0.62, 0.01, 0.16, 1);
  --gutter: clamp(1.1rem, 4vw, 4rem);
}

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

html, body {
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--mono);
  background: #02060f;
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--cyan); color: var(--ink); }

/* The single persistent wallpaper (.bg) lives as a fixed full-screen layer.
 * Its art is the ocean .vid--ocean (scenes.css); its frozen→alive arc (B&W
 * still → colour motion) is driven there by --life and body.alive. */

/* film grain on top of everything for texture */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---- persistent HUD ---------------------------------------------------- */
.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 1.8rem) var(--gutter);
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 0.6s ease;
}
/* the dead desktop has its own menu bar; reveal the persistent HUD once awake */
body:not(.alive) .hud { opacity: 0; pointer-events: none; }
@media (max-width: 480px) { .hud__right { display: none; } }
.hud > * { pointer-events: auto; }
.hud__mark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: var(--step-0);
  text-transform: uppercase;
}
.hud__right {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* scene progress rail */
.rail {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.8rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  mix-blend-mode: difference;
}
.rail__dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--white);
  opacity: 0.3;
  transition: opacity 0.4s, transform 0.4s;
}
.rail__dot.is-active { opacity: 1; transform: scale(1.6); }
@media (max-width: 720px) { .rail { display: none; } }

/* ---- scroll container & sections -------------------------------------- */
[data-scroll-container] { position: relative; z-index: 10; }

.scene {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 10vh, 9rem) var(--gutter);
}

/* mobile: Locomotive is bypassed (app.js adds .is-native-scroll) so the page
 * scrolls natively; ScrollTrigger then pins + scrubs each scene the same as on
 * desktop, so the full reveal choreography plays on phones too. */

/* keyword typography shared by scenes */
.kw {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
}
.kw--mega { font-size: var(--step-mega); }
.kw--xl { font-size: var(--step-3); }
.kw--l { font-size: var(--step-2); }
.label {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* utility: greyscale that lifts as the page comes alive */
.lifts { filter: grayscale(calc(1 - var(--life))) brightness(calc(0.7 + var(--life) * 0.3)); }

/* accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* keyboard focus — visible ring on every interactive element */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.dlbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cyan); }
.rail__dot:focus-visible { outline-offset: 4px; }

.skip-link {
  position: fixed; top: -200%; left: var(--gutter); z-index: 999;
  background: var(--cyan); color: var(--ink);
  padding: 0.6rem 1rem; border-radius: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
}
.skip-link:focus { top: 1rem; }

/* ---- language switcher ------------------------------------------------- */
/* sits in the top-right, just below the 30px mac menu bar; glass pill so it
 * stays legible over any wallpaper frame. */
.langsw {
  position: fixed;
  top: calc(30px + clamp(0.5rem, 1.5vw, 0.9rem));
  right: clamp(0.8rem, 2vw, 1.8rem);
  z-index: 70;
  font-family: var(--mono);
}
.langsw__btn {
  display: inline-flex; align-items: center; gap: 0.42rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(127, 231, 255, 0.16);
  border-radius: 99px;
  cursor: pointer;
  background: rgba(12, 22, 40, 0.5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--white);
  font-size: var(--step--1); letter-spacing: 0.04em;
  box-shadow: 0 2px 16px rgba(0, 10, 30, 0.32);
  transition: background 0.3s, border-color 0.3s;
}
.langsw__btn:hover { background: rgba(20, 36, 64, 0.66); border-color: rgba(127, 231, 255, 0.32); }
.langsw__globe { width: 16px; height: 16px; opacity: 0.85; }
.langsw__cur { line-height: 1; }
.langsw__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  margin: 0; padding: 0.35rem;
  list-style: none; min-width: 156px;
  border-radius: 14px;
  background: rgba(10, 18, 34, 0.82);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 16px 42px rgba(0, 10, 30, 0.46);
  border: 1px solid rgba(127, 231, 255, 0.12);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.langsw[data-open] .langsw__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.langsw__menu a {
  display: block; padding: 0.5rem 0.7rem;
  border-radius: 9px;
  color: var(--white); text-decoration: none;
  font-size: var(--step--1); white-space: nowrap;
  opacity: 0.82;
  transition: background 0.2s, opacity 0.2s;
}
.langsw__menu a:hover { background: rgba(127, 231, 255, 0.12); opacity: 1; }
.langsw__menu a[aria-current="true"] { color: var(--cyan); opacity: 1; font-weight: 700; }
@media (max-width: 480px) { .langsw__cur { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .bg, .bg::before, .bg::after { animation: none !important; }
  .langsw__menu { transition: none; }
}