/*
  Fedor Uskov: hero page

  The design was drawn on a 638 x 372 artboard (assets are 4x, so 2552 x 1488).
  Everything is positioned in % of the viewport; type and the white blob are sized in vw
  so they scale with width and never distort.

  Header type (from the design spec): Arial, Regular, 21.2px  ->  21.2 / 638 = 3.32vw.
  The name is the exact lettering from the design (img/name.png), so it needs no font.
*/

:root {
  --bg: #000;
  --ink: #fff;
  --wave: #0036cf;

  --type-header: 3.32vw;

  /* header sits 9.95% in from the left, 9.7% in from the right, baseline at 8.7% of the height */
  --header-inset: 9.9%;
  --header-top: 4.1%;

  /* name lettering: its box on the 2552 x 1488 artboard (img/name.png is 1541 x 242) */
  --name-left: 1.49%;
  --name-top: 40.79%;
  --name-width: 60.38%;

  /* white blob: measured from the reference (R = 300px, gaussian sigma = 105px in the 2552px artboard) */
  --blob-x: 86.7%;
  --blob-y: 85.3%;
  --blob-d: 23.5vw;
  --blob-blur: 4.1vw;
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;            /* the hero never scrolls */
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

.layer { position: absolute; inset: 0; pointer-events: none; }

/* ---------- red glow, bottom-left ----------
   The blob is one colour with a varying alpha: css/glow-mask.css supplies the alpha as a mask, and the colour
   is --glow. It starts as the designed red, rgb(207,0,32) = hsl(350.73 100% 40.59%), and main.js slowly walks
   the hue around the wheel. */
.red-blob {
  background: var(--glow, rgb(207 0 32));
}

/* ---------- white glow, bottom-right (breathes, see main.js) ---------- */
.white-blob i {
  position: absolute;
  left: var(--blob-x);
  top: var(--blob-y);
  width: var(--blob-d);
  aspect-ratio: 1;
  margin: calc(var(--blob-d) / -2) 0 0 calc(var(--blob-d) / -2);
  border-radius: 50%;
  background: #fff;
  filter: blur(var(--blob-blur));
  will-change: transform, opacity;
}

/* ---------- waveform: two canvases, the left third is blurred in the design ---------- */
.wave canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wave-soft {
  filter: blur(0.32vw);
  /* stays fully opaque until the sharp layer is fully opaque, so the two cross-fading layers never sum to less
     than full coverage (that dip let the white glow behind show through as a pale band) */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 40.1%);
          mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 40.1%);
}
.wave-sharp {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 6%, #000 40%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 6%, #000 40%);
}

/* ---------- name ---------- */
.name {
  position: absolute;
  left: var(--name-left);
  top: var(--name-top);
  width: var(--name-width);
  margin: 0;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.name img { display: block; width: 100%; height: auto; }

/* ---------- header ---------- */
.site-header {
  position: absolute;
  inset: var(--header-top) var(--header-inset) auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--type-header);
  font-weight: 700;
  line-height: 1;
}

.site-header a {
  color: var(--ink);
  text-decoration: none;
  outline: none;
}

.site-nav { display: flex; align-items: baseline; --spot-r: 4.4vw; }

/* Music / Beats / Live rest blurred and dim. The sharp white copy is the ::after layer, revealed only inside
   a circular spotlight that follows the cursor (main.js sets --sx / --sy / --lit). The blur sits on the inner
   span so it does not touch the ::after layer. */
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 0.55em 0;
  margin: -0.55em 0;           /* generous hit area without moving the text */
  line-height: 1;
  cursor: pointer;
  --sx: -999px; --sy: -999px; --lit: 0;
}
.site-nav a span {
  display: inline-block;
  color: rgb(255 255 255 / 0.63);
  filter: blur(0.2vw);
}
.site-nav a::after {
  content: attr(data-label);
  content: attr(data-label) / "";          /* keeps the duplicate out of the accessibility tree where supported */
  position: absolute;
  inset: 0;
  padding: 0.55em 0;
  line-height: 1;
  color: #fff;
  opacity: var(--lit);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--spot-r) at var(--sx) var(--sy), #000 0, #000 38%, rgb(0 0 0 / 0.6) 68%, rgb(0 0 0 / 0.25) 88%, transparent 100%);
          mask-image: radial-gradient(circle var(--spot-r) at var(--sx) var(--sy), #000 0, #000 38%, rgb(0 0 0 / 0.6) 68%, rgb(0 0 0 / 0.25) 88%, transparent 100%);
}

/* keyboard focus, the current page and touch screens (no hover, so no spotlight) show the whole word */
.site-nav a:focus-visible span,
.site-nav a[aria-current="page"] span {
  color: #fff;
  filter: none;
}
@media (hover: none) {
  .site-nav a span { color: #fff; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .white-blob i { will-change: auto; }
}

/* ---------- placeholder pages (Music / Beats / Live) ---------- */
.page-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-weight: 400;
  font-size: 11.05vw;
  pointer-events: none;
}