/* Homepage hero background, adapted from hero-gradient-preview-fine-tuned.html.
 * Blend the embedded grain into the background itself so navigation overlays
 * keep their existing stacking order. No external image request is needed.
 */
.clarinova-home-hero {
  --clarinova-hero-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect opacity='0.06' width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --clarinova-hero-shade:
    linear-gradient(
      90deg,
      rgba(30, 10, 82, 0.72) 0%,
      rgba(30, 10, 82, 0.70) 10%,
      rgba(30, 10, 82, 0.65) 20%,
      rgba(30, 10, 82, 0.56) 30%,
      rgba(30, 10, 82, 0.43) 40%,
      rgba(30, 10, 82, 0.29) 50%,
      rgba(30, 10, 82, 0.16) 60%,
      rgba(30, 10, 82, 0.07) 70%,
      rgba(30, 10, 82, 0.02) 80%,
      rgba(30, 10, 82, 0) 90%
    );
  background:
    var(--clarinova-hero-grain),
    var(--clarinova-hero-shade),
    /* Purple sits outside the main field's rounded edge, reversing the curve.
     * The long, eased fade keeps the upper-right corner soft.
     */
    radial-gradient(
      ellipse 100% 112% at 0% 100%,
      rgba(47, 12, 103, 0) 108%,
      rgba(47, 12, 103, 0.02) 112%,
      rgba(47, 12, 103, 0.10) 116%,
      rgba(47, 12, 103, 0.24) 120%,
      rgba(47, 12, 103, 0.41) 124%,
      rgba(47, 12, 103, 0.57) 128%,
      rgba(47, 12, 103, 0.67) 132%,
      rgba(47, 12, 103, 0.70) 136%
    ),
    /* Ease the blush through lilac and pink without a sharp change in slope. */
    radial-gradient(
      ellipse 66% 70% at 98% 98%,
      rgba(211, 197, 239, 0.96) 0%,
      rgba(215, 194, 236, 0.94) 8%,
      rgba(228, 187, 227, 0.86) 16%,
      rgba(242, 175, 218, 0.70) 26%,
      rgba(247, 170, 214, 0.48) 36%,
      rgba(247, 170, 214, 0.27) 46%,
      rgba(247, 170, 214, 0.12) 56%,
      rgba(247, 170, 214, 0.04) 66%,
      rgba(247, 170, 214, 0.01) 76%,
      rgba(247, 170, 214, 0) 86%
    ),

    /* Solar Flare (#fc4b37), with a stronger center and a soft, eased fade. */
    radial-gradient(
      ellipse 98% 112% at 72% 66%,
      rgba(252, 75, 55, 1) 0%,
      rgba(252, 75, 55, 0.98) 10%,
      rgba(252, 75, 55, 0.93) 20%,
      rgba(252, 75, 55, 0.85) 30%,
      rgba(252, 75, 55, 0.72) 40%,
      rgba(252, 75, 55, 0.56) 50%,
      rgba(252, 75, 55, 0.38) 60%,
      rgba(252, 75, 55, 0.22) 70%,
      rgba(252, 75, 55, 0.10) 80%,
      rgba(252, 75, 55, 0.03) 90%,
      rgba(252, 75, 55, 0) 100%
    ),

    /* Subtle purple wash through upper-middle/right */
    radial-gradient(
      ellipse 84% 80% at 48% 24%,
      rgba(123, 89, 246, 0.16) 0%,
      rgba(123, 89, 246, 0.14) 20%,
      rgba(123, 89, 246, 0.09) 40%,
      rgba(123, 89, 246, 0.03) 60%,
      rgba(123, 89, 246, 0) 80%
    ),

    /* Red Dwarf */
    radial-gradient(
      ellipse 72% 70% at 58% -8%,
      rgba(180, 32, 98, 0.74) 0%,
      rgba(180, 32, 98, 0.71) 12%,
      rgba(180, 32, 98, 0.62) 24%,
      rgba(180, 32, 98, 0.47) 36%,
      rgba(180, 32, 98, 0.30) 48%,
      rgba(180, 32, 98, 0.15) 60%,
      rgba(180, 32, 98, 0.05) 72%,
      rgba(180, 32, 98, 0) 84%
    ),

    /* Orbital Glow */
    radial-gradient(
      ellipse 62% 78% at 2% 8%,
      rgba(123, 89, 246, 0.46) 0%,
      rgba(123, 89, 246, 0.40) 16%,
      rgba(123, 89, 246, 0.28) 32%,
      rgba(123, 89, 246, 0.14) 48%,
      rgba(123, 89, 246, 0.05) 64%,
      rgba(123, 89, 246, 0) 80%
    ),

    /* Cosmic Purple base */
    #2f0c67;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal, normal, normal;
  /* Keep a wide gradient canvas and reveal less of it as the viewport narrows.
   * This mirrors the old image's crop without a separate mobile background.
   */
  background-size: max(100%, 72rem) 100%;
  background-position: 18% 50%;
  background-repeat: no-repeat;
}

/* Increase both headline lines; scale down on phones to keep each on one line.
 * WordPress marks its font-size preset important, so this override must match.
 */
.clarinova-home-hero > main > .wp-block-heading {
  font-size: clamp(2rem, 10.8vw, 3rem) !important;
}