/*
  Shared top-of-page Tetris background for the main public Xivy pages.
  The layer is intentionally bounded to the first viewport and fades into the
  regular page background so lower content stays calm and readable.
*/
:root {
  --xivy-tetris-bg-height: 100svh;
  --xivy-tetris-base: hsl(220, 42%, 12%);
}

body.has-xivy-tetris-bg {
  background-color: var(--ink, #020617);
}

.xivy-tetris-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--xivy-tetris-bg-height);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--xivy-tetris-base);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(70, 120, 255, 0.16), transparent 36%),
    radial-gradient(ellipse 56% 72% at 82% 28%, rgba(132, 80, 255, 0.14), transparent 58%),
    linear-gradient(165deg, rgba(5, 12, 28, 0.64) 0%, rgba(2, 6, 18, 0.18) 48%, rgba(3, 7, 16, 0.72) 100%);
  transition: background-color 10s ease;
}

.xivy-tetris-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 35%, rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.42) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.xivy-tetris-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 74%);
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.xivy-tetris-bg__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  z-index: 1;
  opacity: 0.38;
  pointer-events: none;
  filter: blur(1.9px);
}

.xivy-tetris-bg__fade {
  display: none;
}

body.has-xivy-tetris-bg > main,
body.has-xivy-tetris-bg > section,
body.has-xivy-tetris-bg > footer {
  position: relative;
  z-index: 2;
}

body.has-xivy-tetris-bg > header {
  z-index: 900;
}

body.has-xivy-tetris-bg > .mobile-nav {
  z-index: 899;
}

body.has-xivy-tetris-bg > .bg,
body.has-xivy-tetris-bg > .bg-grid,
body.has-xivy-tetris-bg > .bg-noise {
  z-index: -3;
}

@media (max-width: 760px) {
  :root {
    --xivy-tetris-bg-height: 100svh;
  }

  .xivy-tetris-bg {
    background-image:
      radial-gradient(circle at 18% 12%, rgba(70, 120, 255, 0.12), transparent 38%),
      radial-gradient(ellipse 70% 64% at 84% 24%, rgba(132, 80, 255, 0.11), transparent 62%),
      linear-gradient(165deg, rgba(5, 12, 28, 0.7) 0%, rgba(2, 6, 18, 0.24) 48%, rgba(3, 7, 16, 0.76) 100%);
  }

  .xivy-tetris-bg::before {
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }

  .xivy-tetris-bg::after {
    opacity: 0.18;
    background-size: 34px 34px;
  }

  .xivy-tetris-bg__canvas {
    opacity: 0.28;
    filter: blur(1.8px);
  }

  body.has-xivy-tetris-bg .hero-h1 {
    max-width: 100%;
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.16;
    letter-spacing: 0;
    overflow-wrap: break-word;
  }

  body.has-xivy-tetris-bg .hero-h1 br {
    display: block;
  }

  body.has-xivy-tetris-bg .hero-brand {
    display: block;
    font-size: clamp(46px, 16vw, 58px);
    line-height: 0.95;
    letter-spacing: 0;
    margin-bottom: 8px;
  }

  body.has-xivy-tetris-bg .hero-sub {
    font-size: 15px;
  }

  body.has-xivy-tetris-bg .brand-title,
  body.has-xivy-tetris-bg .news-title,
  body.has-xivy-tetris-bg .download-info h1 {
    max-width: 100%;
    letter-spacing: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  body.has-xivy-tetris-bg .brand-title {
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.08;
  }

  body.has-xivy-tetris-bg .news-title,
  body.has-xivy-tetris-bg .download-info h1 {
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.08;
  }

  body.has-xivy-tetris-bg .brand-subtitle,
  body.has-xivy-tetris-bg .auth-subtitle,
  body.has-xivy-tetris-bg .news-subtitle,
  body.has-xivy-tetris-bg .download-subtitle,
  body.has-xivy-tetris-bg .platforms-subtitle {
    max-width: 100%;
    font-size: 14px;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xivy-tetris-bg,
  .xivy-tetris-bg__canvas {
    transition: none;
  }
}