/* Homepage only. Static light fields fade into the existing graphite canvas. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 880px 660px at 94% 410px, #d8795c30, #a25b4812 48%, transparent 78%),
    radial-gradient(ellipse 720px 540px at 53% 145px, #9575861b, transparent 76%),
    radial-gradient(ellipse 620px 670px at -8% 660px, #77768913, transparent 78%);
  background-repeat: no-repeat;
}
.hero::after { content: none; }
.hero .hero-atmosphere {
  opacity: .38;
  mask-image: radial-gradient(ellipse at 52% 35%, #0009, transparent 74%);
}

/* A single centered introduction when the desktop columns no longer fit. */
@media (max-width: 1100px) {
  body {
    background-image:
      radial-gradient(ellipse 700px 700px at 78% 680px, #d8795c2b, #a25b4810 52%, transparent 80%),
      radial-gradient(ellipse 630px 520px at 27% 230px, #95758620, transparent 78%);
  }
  .hero:has(.hero-grid-visual) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vw, 64px);
    min-height: 0;
    padding-top: 38px;
    padding-bottom: 64px;
  }
  .hero:has(.hero-grid-visual) .hero-copy {
    width: 100%;
    max-width: 760px;
    align-self: center;
    margin-inline: auto;
    text-align: center;
  }
  .hero:has(.hero-grid-visual) h1 {
    margin-inline: auto;
    margin-bottom: 26px;
    text-wrap: balance;
  }
  .hero:has(.hero-grid-visual) h1 .hero-script {
    margin-inline: 0;
    transform-origin: center;
  }
  .hero:has(.hero-grid-visual) .hero-description {
    max-width: 520px;
    margin-inline: auto;
    margin-bottom: 30px;
    text-wrap: balance;
  }
  .hero:has(.hero-grid-visual) .hero-actions {
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }
  .hero .download-launcher { margin-inline: auto; text-align: start; }
  .hero:has(.hero-grid-visual) .hero-grid-visual {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 940px;
    margin: 0;
    align-self: center;
    transform-origin: center;
    transform: perspective(1600px) rotateY(-3deg) rotateX(2deg) rotateZ(.5deg);
  }
  html[dir=rtl] .hero:has(.hero-grid-visual) .hero-grid-visual {
    transform: perspective(1600px) rotateY(3deg) rotateX(2deg) rotateZ(-.5deg);
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero:has(.hero-grid-visual) .hero-word { font-size: clamp(64px, 8.5vw, 90px); }
  .hero:has(.hero-grid-visual) .hero-impact { font-size: clamp(40px, 6vw, 64px); }
  .hero:has(.hero-grid-visual) h1 .hero-script { font-size: clamp(44px, 5.8vw, 62px); }
  .hero:has(.hero-grid-visual) .hero-description { font-size: 21px; }
}
@media (max-width: 700px) {
  body {
    background-image:
      radial-gradient(ellipse 420px 470px at 90% 480px, #d8795c30, #a25b4810 52%, transparent 80%),
      radial-gradient(ellipse 390px 370px at 12% 190px, #9575861f, transparent 78%);
  }
  .hero:has(.hero-grid-visual) { padding-top: 28px; padding-bottom: 50px; gap: 36px; }
}