/* ==========================================================================
   RURALTECH — NEURAL BACKGROUND V0
   Isolated, removable enhancement layer.
   ========================================================================== */

.hero__background {
  z-index: 0;
}

.hero__overlay {
  z-index: 1;
  pointer-events: none;
}

.hero__neural {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: block;
  width: 100%;
  height: 100%;

  pointer-events: none;
  user-select: none;
}

.hero__content {
  z-index: 3;
}

/*
 * Keep interactive chrome explicitly above the visual field.
 * Existing site values remain authoritative.
 */
.desktop-header,
.mobile-header {
  isolation: isolate;
}

/*
 * Accessibility:
 * JS also detects reduced motion and renders a static field.
 */
@media (prefers-reduced-motion: reduce) {
  .hero__neural {
    opacity: .72;
  }
}


/* ==========================================================================
   RT-NEURAL-BG-V0.2
   Deep Neural Atmosphere.

   Supersedes the photographic hero background while retaining background.jpg
   in site.css as a fallback if this enhancement stylesheet is unavailable.
   ========================================================================== */

.hero__background {
  background-color: #030910;

  background-image:
    radial-gradient(
      ellipse at 12% 18%,
      rgba(26, 105, 126, .40) 0%,
      rgba(12, 58, 73, .20) 24%,
      rgba(5, 24, 34, .08) 42%,
      rgba(0, 0, 0, 0) 61%
    ),

    radial-gradient(
      ellipse at 83% 23%,
      rgba(23, 82, 128, .34) 0%,
      rgba(9, 43, 72, .18) 28%,
      rgba(3, 20, 36, .07) 46%,
      rgba(0, 0, 0, 0) 64%
    ),

    radial-gradient(
      ellipse at 62% 84%,
      rgba(0, 113, 111, .22) 0%,
      rgba(0, 61, 70, .12) 28%,
      rgba(0, 0, 0, 0) 58%
    ),

    radial-gradient(
      ellipse at 32% 74%,
      rgba(18, 59, 83, .18) 0%,
      rgba(4, 27, 41, .08) 33%,
      rgba(0, 0, 0, 0) 62%
    ),

    linear-gradient(
      135deg,
      #081722 0%,
      #06131e 32%,
      #04101a 58%,
      #02070d 100%
    );

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-attachment: scroll;
}

/*
 * Replace the original uniform 50% black veil by a controlled vignette.
 * The centre stays readable without suppressing depth in the background.
 */
.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 43%,
      rgba(0, 0, 0, .02) 0%,
      rgba(0, 0, 0, .04) 34%,
      rgba(0, 3, 8, .15) 68%,
      rgba(0, 2, 6, .38) 100%
    ),

    linear-gradient(
      180deg,
      rgba(0, 4, 9, .08) 0%,
      rgba(0, 4, 9, .13) 60%,
      rgba(0, 2, 6, .22) 100%
    );
}

@media (max-width: 991.98px) {
  .hero__background {
    background-image:
      radial-gradient(
        ellipse at 15% 18%,
        rgba(24, 98, 119, .34) 0%,
        rgba(8, 44, 58, .17) 30%,
        rgba(0, 0, 0, 0) 61%
      ),

      radial-gradient(
        ellipse at 86% 32%,
        rgba(18, 73, 116, .28) 0%,
        rgba(6, 36, 62, .13) 32%,
        rgba(0, 0, 0, 0) 62%
      ),

      radial-gradient(
        ellipse at 53% 88%,
        rgba(0, 98, 98, .18) 0%,
        rgba(0, 42, 51, .09) 32%,
        rgba(0, 0, 0, 0) 62%
      ),

      linear-gradient(
        145deg,
        #071620 0%,
        #05111b 48%,
        #02070d 100%
      );
  }
}


/* ==========================================================================
   RT-HERO-IMAGE-V1
   Luminous colorful hero atmosphere image while preserving foreground text
   and neural canvas readability.
   ========================================================================== */

.hero__background {
  background-color: #bfe3ee;

  background-image:
    radial-gradient(
      ellipse at 50% 44%,
      rgba(255, 255, 255, .20) 0%,
      rgba(255, 255, 255, .07) 28%,
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      180deg,
      rgba(7, 27, 47, .14) 0%,
      rgba(7, 27, 47, .08) 32%,
      rgba(7, 27, 47, .16) 100%
    ),
    url("/assets/rt-hero-atmosphere-v1.svg");

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
}

/*
 * Keep the image luminous, but preserve text contrast.
 * We avoid a dark heavy veil.
 */
.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 43%,
      rgba(5, 17, 28, .10) 0%,
      rgba(5, 17, 28, .08) 32%,
      rgba(5, 17, 28, .15) 66%,
      rgba(5, 17, 28, .24) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255, 255, 255, .03) 0%,
      rgba(7, 24, 40, .05) 55%,
      rgba(7, 24, 40, .10) 100%
    );
}

/*
 * Slight readability lift for all hero text without changing layout.
 */
.hero__content {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .28);
}


/* ==========================================================================
   RT-HERO-IMAGE-V2
   Premium luminous atmosphere, more refined and more RT.
   Supersedes V1 background image without changing layout or JS behavior.
   ========================================================================== */

.hero__background {
  background-color: #c9e8ef;

  background-image:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 255, 255, .18) 0%,
      rgba(255, 255, 255, .07) 24%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(
      180deg,
      rgba(8, 32, 52, .08) 0%,
      rgba(8, 32, 52, .05) 38%,
      rgba(8, 32, 52, .11) 100%
    ),
    url("/assets/rt-hero-atmosphere-v2.svg");

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
}

.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 255, 255, .05) 0%,
      rgba(9, 24, 40, .03) 30%,
      rgba(9, 24, 40, .10) 68%,
      rgba(9, 24, 40, .17) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .02) 0%,
      rgba(9, 24, 40, .03) 48%,
      rgba(9, 24, 40, .07) 100%
    );
}

.hero__content {
  text-shadow:
    0 2px 18px rgba(0, 0, 0, .20),
    0 1px 3px rgba(0, 0, 0, .24);
}


/* ==========================================================================
   RT-HERO-AURORA-V3
   RuralTech signature:
   luminous territory + aurora/data field + dynamic neural network.
   ========================================================================== */

.hero__background {
  background-color: #46aeca;

  background-image:
    url("/assets/rt-hero-aurora-v3.svg");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
}


/*
 * Central focus field:
 * gives the white RT typography a stable contrast zone while preserving
 * the luminous image around it.
 */
.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgba(4, 54, 77, .30) 0%,
      rgba(5, 61, 84, .22) 23%,
      rgba(6, 69, 91, .11) 43%,
      rgba(7, 78, 99, .035) 64%,
      rgba(255, 255, 255, .015) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255, 255, 255, .025) 0%,
      rgba(9, 64, 83, .025) 55%,
      rgba(8, 60, 80, .075) 100%
    );
}


/*
 * Crisp but non-neon typography.
 */
.hero__content {
  text-shadow:
    0 2px 20px rgba(0, 43, 64, .24),
    0 1px 3px rgba(0, 28, 44, .38);
}


/*
 * The existing service strip stays geometrically untouched, but gains a
 * slightly more integrated glass-like tone against the V3 atmosphere.
 */
.services {
  background:
    linear-gradient(
      90deg,
      rgba(7, 25, 35, .67),
      rgba(6, 34, 43, .58),
      rgba(7, 25, 35, .67)
    );

  border-top:
    1px solid rgba(220, 251, 255, .09);

  border-bottom:
    1px solid rgba(220, 251, 255, .06);
}


/* ==========================================================================
   RT-ORGANIC-FIELD-V31

   Replaces the large fixed V3 ribbons with an irregular luminous terrain
   and two asynchronous ambient fields.

   Deterministic pseudo-random motion:
   reproducible, smooth and non-jittery.
   ========================================================================== */

.hero__background {
  overflow: hidden;

  background-color: #4babc3;

  background-image:
    url("/assets/rt-hero-organic-v31.svg");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
}


/* --------------------------------------------------------------------------
   Ambient field A
   -------------------------------------------------------------------------- */

.hero__background::before {
  content: "";

  position: absolute;
  inset: -22%;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 17% 28%,
      rgba(178, 255, 224, .46) 0%,
      rgba(118, 235, 213, .20) 16%,
      rgba(68, 190, 196, 0) 38%
    ),

    radial-gradient(
      ellipse at 76% 19%,
      rgba(208, 246, 255, .44) 0%,
      rgba(121, 215, 244, .19) 17%,
      rgba(71, 172, 215, 0) 40%
    ),

    radial-gradient(
      ellipse at 71% 74%,
      rgba(137, 239, 207, .31) 0%,
      rgba(72, 197, 188, .14) 18%,
      rgba(48, 161, 178, 0) 39%
    ),

    radial-gradient(
      ellipse at 26% 79%,
      rgba(255, 199, 174, .24) 0%,
      rgba(240, 163, 164, .10) 18%,
      rgba(201, 132, 155, 0) 38%
    );

  opacity: .82;

  mix-blend-mode: screen;

  transform-origin: 50% 50%;

  will-change: transform, opacity;

  animation:
    rt-organic-drift-a
    29s
    cubic-bezier(.42, .02, .31, .98)
    infinite
    alternate;
}


/* --------------------------------------------------------------------------
   Ambient field B
   -------------------------------------------------------------------------- */

.hero__background::after {
  content: "";

  position: absolute;
  inset: -26%;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 84% 28%,
      rgba(255, 232, 168, .36) 0%,
      rgba(250, 207, 143, .13) 16%,
      rgba(232, 181, 119, 0) 36%
    ),

    radial-gradient(
      ellipse at 37% 31%,
      rgba(180, 244, 255, .33) 0%,
      rgba(108, 212, 239, .13) 19%,
      rgba(74, 175, 211, 0) 43%
    ),

    radial-gradient(
      ellipse at 52% 81%,
      rgba(192, 255, 223, .28) 0%,
      rgba(102, 222, 190, .11) 18%,
      rgba(54, 176, 171, 0) 42%
    );

  opacity: .66;

  mix-blend-mode: soft-light;

  transform-origin: 50% 50%;

  will-change: transform, opacity;

  animation:
    rt-organic-drift-b
    43s
    cubic-bezier(.37, .04, .28, 1)
    infinite
    alternate;
}


/* --------------------------------------------------------------------------
   Organic non-linear trajectories
   -------------------------------------------------------------------------- */

@keyframes rt-organic-drift-a {

  0% {
    transform:
      translate3d(-3%, -2%, 0)
      scale(1.035)
      rotate(-.7deg);

    opacity: .72;
  }

  19% {
    transform:
      translate3d(2%, -4%, 0)
      scale(1.075)
      rotate(.35deg);

    opacity: .86;
  }

  43% {
    transform:
      translate3d(4%, 1%, 0)
      scale(1.045)
      rotate(1deg);

    opacity: .76;
  }

  71% {
    transform:
      translate3d(-1%, 4%, 0)
      scale(1.09)
      rotate(.15deg);

    opacity: .88;
  }

  100% {
    transform:
      translate3d(-4%, 1%, 0)
      scale(1.055)
      rotate(-.55deg);

    opacity: .78;
  }
}


@keyframes rt-organic-drift-b {

  0% {
    transform:
      translate3d(3%, 2%, 0)
      scale(1.06)
      rotate(.6deg);

    opacity: .52;
  }

  23% {
    transform:
      translate3d(-2%, 4%, 0)
      scale(1.025)
      rotate(-.35deg);

    opacity: .69;
  }

  47% {
    transform:
      translate3d(-4%, -1%, 0)
      scale(1.075)
      rotate(-.8deg);

    opacity: .57;
  }

  76% {
    transform:
      translate3d(2%, -4%, 0)
      scale(1.045)
      rotate(.4deg);

    opacity: .72;
  }

  100% {
    transform:
      translate3d(4%, 2%, 0)
      scale(1.085)
      rotate(.85deg);

    opacity: .58;
  }
}


/* --------------------------------------------------------------------------
   The V3 central readability model remains, slightly softened.
   -------------------------------------------------------------------------- */

.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgba(5, 57, 78, .27) 0%,
      rgba(5, 62, 82, .18) 25%,
      rgba(6, 70, 90, .08) 46%,
      rgba(7, 78, 98, .025) 68%,
      rgba(255, 255, 255, .01) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255, 255, 255, .015) 0%,
      rgba(8, 59, 77, .02) 56%,
      rgba(8, 57, 76, .06) 100%
    );
}


/* --------------------------------------------------------------------------
   Accessibility and economy
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero__background::before,
  .hero__background::after {
    animation: none;
  }
}


@media (max-width: 991.98px) {

  .hero__background::before {
    opacity: .64;

    animation-duration: 38s;
  }

  .hero__background::after {
    opacity: .48;

    animation-duration: 52s;
  }
}



/* ==========================================================================
   RT-OCCITAN-TERRAIN-V4
   Occitanie / Languedoc-Roussillon feel:
   Mediterranean light + garrigue + relief + tramontane drift.
   ========================================================================== */

.hero__background {
  overflow: hidden;

  background-color: #5abcc6;
  background-image: url("/assets/rt-hero-occitan-v4.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
}


/* Tramontane field A: NW -> SE */
.hero__background::before {
  content: "";

  position: absolute;
  inset: -22%;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 18% 20%,
      rgba(182, 255, 229, .42) 0%,
      rgba(118, 232, 210, .18) 17%,
      rgba(73, 191, 190, 0) 40%
    ),

    radial-gradient(
      ellipse at 84% 16%,
      rgba(255, 234, 171, .34) 0%,
      rgba(246, 201, 126, .12) 18%,
      rgba(219, 168, 103, 0) 40%
    ),

    radial-gradient(
      ellipse at 24% 79%,
      rgba(238, 173, 150, .18) 0%,
      rgba(210, 132, 120, .07) 18%,
      rgba(194, 121, 106, 0) 38%
    ),

    radial-gradient(
      ellipse at 72% 76%,
      rgba(193, 236, 173, .16) 0%,
      rgba(147, 188, 118, .07) 18%,
      rgba(123, 157, 97, 0) 38%
    );

  opacity: .76;
  mix-blend-mode: screen;
  will-change: transform, opacity;

  animation:
    rt-occitan-tramontane-a 31s
    cubic-bezier(.39, .04, .29, .99)
    infinite alternate;
}


/* Tramontane field B: companion drift */
.hero__background::after {
  content: "";

  position: absolute;
  inset: -26%;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 34% 28%,
      rgba(214, 248, 255, .28) 0%,
      rgba(117, 214, 242, .11) 18%,
      rgba(73, 173, 208, 0) 42%
    ),

    radial-gradient(
      ellipse at 77% 28%,
      rgba(255, 238, 194, .22) 0%,
      rgba(242, 212, 146, .08) 20%,
      rgba(217, 182, 123, 0) 40%
    ),

    radial-gradient(
      ellipse at 55% 82%,
      rgba(170, 247, 211, .18) 0%,
      rgba(89, 206, 183, .08) 18%,
      rgba(58, 174, 171, 0) 42%
    );

  opacity: .58;
  mix-blend-mode: soft-light;
  will-change: transform, opacity;

  animation:
    rt-occitan-tramontane-b 47s
    cubic-bezier(.37, .05, .27, 1)
    infinite alternate;
}


@keyframes rt-occitan-tramontane-a {
  0% {
    transform: translate3d(-4%, -3%, 0) scale(1.03) rotate(-.6deg);
    opacity: .66;
  }
  24% {
    transform: translate3d(-1%, -2%, 0) scale(1.06) rotate(.15deg);
    opacity: .79;
  }
  53% {
    transform: translate3d(2%, 1%, 0) scale(1.04) rotate(.55deg);
    opacity: .72;
  }
  79% {
    transform: translate3d(4%, 3%, 0) scale(1.08) rotate(.95deg);
    opacity: .82;
  }
  100% {
    transform: translate3d(5%, 4%, 0) scale(1.05) rotate(.55deg);
    opacity: .74;
  }
}


@keyframes rt-occitan-tramontane-b {
  0% {
    transform: translate3d(-3%, -4%, 0) scale(1.05) rotate(-.75deg);
    opacity: .46;
  }
  27% {
    transform: translate3d(-1%, -1%, 0) scale(1.02) rotate(-.2deg);
    opacity: .58;
  }
  56% {
    transform: translate3d(2%, 1%, 0) scale(1.07) rotate(.4deg);
    opacity: .50;
  }
  81% {
    transform: translate3d(4%, 3%, 0) scale(1.04) rotate(.9deg);
    opacity: .61;
  }
  100% {
    transform: translate3d(6%, 2%, 0) scale(1.08) rotate(.45deg);
    opacity: .52;
  }
}


/* Central readability preserved */
.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgba(5, 57, 77, .24) 0%,
      rgba(5, 62, 81, .15) 24%,
      rgba(6, 70, 89, .07) 46%,
      rgba(7, 78, 98, .02) 68%,
      rgba(255, 255, 255, .01) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255, 255, 255, .015) 0%,
      rgba(8, 58, 76, .02) 56%,
      rgba(8, 57, 75, .055) 100%
    );
}


/* Slightly more premium integration of the service band */
.services {
  background:
    linear-gradient(
      90deg,
      rgba(7, 32, 42, .67),
      rgba(6, 45, 57, .56),
      rgba(7, 32, 42, .67)
    );

  border-top: 1px solid rgba(240, 255, 245, .09);
  border-bottom: 1px solid rgba(240, 255, 245, .05);
}


/* Economy / accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero__background::before,
  .hero__background::after {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .hero__background::before {
    opacity: .60;
    animation-duration: 40s;
  }

  .hero__background::after {
    opacity: .44;
    animation-duration: 56s;
  }
}