/*
  Fedor Uskov: hero page (rebuilt from the design in assets/)

  Artboard: 638 x 372 pt (exports are 4x = 2552 x 1488). Everything is placed in % of the viewport and sized
  in vw, so the composition scales with the window and never distorts.

  Layers, back to front:  red glow  >  white glow  >  waveform  >  name  >  header
  All are absolutely positioned, so DOM order alone sets the stacking (see index.html).

  Generated inputs: css/glow-mask.css (red glow alpha), js/waveform-profile.js (wave rows), img/name.png.
*/

:root {
  --wave: #0036cf;
  --glow: rgb(207 0 32);                 /* hero.js walks this round the colour wheel */

  --type-header: 3.32vw;                 /* Arial Regular 21.2pt on the 638pt artboard */
  --header-inset: 9.9%;                  /* left and right margin of the header row */
  --header-top: 4.1%;

  --name-left: 1.49%;                    /* lettering box on the 2552 x 1488 artboard */
  --name-top: 40.79%;
  --name-width: 60.38%;

  --blob-x: 86.7%;                       /* white glow: centre, diameter and blur measured from the design */
  --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;
  background: #000;
  color: #fff;
}

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

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

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

/* ---------- 1. red glow (bottom-left): one colour, alpha supplied by the mask in glow-mask.css ---------- */
.red-blob { background: var(--glow); }

/* ---------- 2. white glow (bottom-right), breathes via hero.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));
}

/* ---------- 3. waveform: the left third is blurred in the design, the rest is crisp pixel art ---------- */
.wave canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The blurred layer stays solid until the sharp layer is solid (40%). Cross-fading both would let the white glow
   show through where their alphas sum to less than 1. */
.wave-soft {
  filter: blur(0.32vw);
  -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%);
}

/* ---------- 4. 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; }

/* ---------- 5. 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: #fff; 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 copy is the ::after layer, revealed through a circular
   spotlight that follows the cursor (hero.js sets --sx / --sy / --lit). */
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 0.55em 0;
  margin: -0.55em 0;                     /* bigger hit area, text does not move */
  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) / "";        /* hide the duplicate from assistive tech where supported */
  position: absolute;
  inset: 0;
  padding: 0.55em 0;
  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 and touch screens (no hover, so no spotlight) show the whole word */
.site-nav a:focus-visible span { color: #fff; filter: none; }
@media (hover: none) {
  .site-nav a span { color: #fff; filter: none; }
}