/* ==================================================
   BACKGROUND + CANVAS + CHORUS + FOOTER (no header)
   FIX: glow is a fixed layer, not scroll-painted body background
   ================================================== */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* Theme + Layout variables */
:root {
  --bg: #0b0d12;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.10);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);

  --accent: #3b82f6;
  --accent-2: #22c55e;

  --radius: 16px;
  --container: 1120px;
  --gutter: 16px;
  --shadow: 0 12px 40px rgba(0,0,0,0.35);

  /* Footer height is synced from JS */
  --footer-h: 72px;

  /* ===== Chorus ===== */
  --chorus-block: clamp(14px, 2.2vw, 22px);

  --chorus-a: #6b2a84;
  --chorus-b: #3a154c;
  --chorus-c: #8a43ad;

  /* Насколько хорусы "заходят" внутрь низа */
  --chorus-overlap: 38px;

  /* Z-layers (glow -> canvases -> chorus -> content -> footer) */
  --z-glow: 0;
  --z-parallax: 1;
  --z-canvas: 2;
  --z-chorus: 3;
  --z-content: 10;
  --z-footer: 40;
  
  /* Bottom gradient for lifted footer */
  --bottom-gradient-height: var(--ui-bottom-space, 0px);
}

/* Root background base */
html {
  background: var(--bg);
  overflow-x: hidden;
}

/* Base */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);

  /* ВАЖНО: убираем градиенты с body (они и давали повтор/обрезку) */
  background: transparent;

  min-height: 100%;
  display: flex;
  flex-direction: column;

  /* фикс для стабильных z-index слоёв */
  position: relative;
  isolation: isolate;
  
  /* Градиент для приподнятого футера */
  position: relative;
}

/* ✅ Glow layer (фиксированный, один раз на весь экран) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: var(--z-glow);
  pointer-events: none;

  background:
    radial-gradient(900px 500px at 10% -10%, rgba(59,130,246,0.25), transparent 60%),
    radial-gradient(700px 420px at 90% 0%, rgba(34,197,94,0.16), transparent 55%);

  transform: translateZ(0);
  will-change: transform;
}

/* ✅ NEW: Bottom gradient for lifted footer */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-gradient-height);
  z-index: var(--z-footer) - 1; /* Just below footer */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 20%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.5) 100%
  );
  opacity: calc(var(--ui-bottom-space, 0px) / 100px);
  transition: height 0.3s ease, opacity 0.3s ease;
  will-change: height, opacity;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.92; }

.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

/* ==================================================
   Main / Content
   ================================================== */
.main {
  position: relative;
  z-index: var(--z-content);
  flex: 1;
  padding: 22px 0 44px;
  
  /* Используем переменную для отступа снизу */
  padding-bottom: calc(44px + var(--footer-h) + var(--ui-bottom-space, 0px));
}

/* ==================================================
   Footer
   ================================================== */
.footer {
  position: relative;
  z-index: var(--z-footer);
  margin-top: auto;
  
  /* Полупрозрачный фон футера */
  background: rgba(11, 13, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Без градиента - градиент на body::after */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  
  /* Приподнимаем футер на высоту плашек */
  margin-bottom: var(--ui-bottom-space, 0px);
  transition: margin-bottom 0.3s ease;
}

/* ==================================================
   BACKGROUND CANVAS (ENDER STARS)
   ================================================== */
#bg-parallax {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-parallax);
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 1;
}

#bg-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 1;
}

/* ==================================================
   Chorus field — anchored to page bottom (follows scroll)
   ================================================== */
.chorus-field{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--chorus-overlap));
  height: min(50vh, 820px);

  pointer-events: none;
  z-index: var(--z-chorus);

  --follow-y: 0px;
  transform: translate3d(0, var(--follow-y), 0);

  transition: none;
  contain: paint;
  will-change: transform;
}

.chorus-field::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11,13,18,0.92), rgba(11,13,18,0.0) 58%),
    radial-gradient(760px 220px at 50% 100%, rgba(0,0,0,0.26), transparent 65%);
}

.chorus-layer{
  position: absolute;
  inset: 0;
  z-index: 1;

  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 240ms ease, transform 240ms ease;
  will-change: opacity, transform;
}

.chorus-field.is-visible .chorus-layer{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.chorus-plant{
  position: absolute;
  bottom: 0;

  width: calc(var(--chorus-block) * 20);
  height: 100%;

  transform: translateX(-50%) scale(var(--scale, 1));
  transform-origin: 50% 100%;

  filter: blur(9px) saturate(1.02);
  will-change: transform;
}

.chorus-block{
  position: absolute;
  left: 50%;
  bottom: 0;

  width: var(--chorus-block);
  height: var(--chorus-block);
  border-radius: 3px;

  --ox: 0px;
  --oy: 0px;
  transform: translate3d(
    calc((var(--x) * var(--chorus-block)) + var(--ox)),
    calc((var(--y) * var(--chorus-block)) + var(--oy)),
    0
  );

  background: linear-gradient(180deg, var(--chorus-c), var(--chorus-b));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -6px 10px rgba(0,0,0,0.14);
}

.chorus-block--flower{
  width: calc(var(--chorus-block) * 1.55);
  height: calc(var(--chorus-block) * 1.55);

  --ox: calc(var(--chorus-block) * -0.10);
  --oy: calc(var(--chorus-block) * -0.10);

  border-radius: 4px;

  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,0.55) 0 20%, transparent 21%),
    linear-gradient(180deg, #d18aff 0%, #a55ad2 52%, #5f2678 100%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 -8px 12px rgba(0,0,0,0.18),
    0 0 14px rgba(170, 220, 255, 0.06);
}

.chorus-block--flower.is-aged{
  background:
    radial-gradient(circle at 50% 52%, rgba(255,235,255,0.35) 0 18%, transparent 19%),
    linear-gradient(180deg, #b85cf2 0%, #7a2aa3 55%, #3a154c 100%);
}

@media (max-width: 1024px){
  .chorus-field{ height: min(44vh, 420px); }
  .chorus-plant{
    width: calc(var(--chorus-block) * 19);
    filter: blur(9px) saturate(1.01);
  }
}

@media (max-width: 720px) {
  .chorus-field{ height: min(38vh, 320px); }
  .chorus-plant{
    width: calc(var(--chorus-block) * 18);
    filter: blur(9px) saturate(1.01);
  }
}
#bg-parallax{ z-index: var(--z-parallax); }
#bg-stars{ z-index: var(--z-canvas); }