/* ============================================================
   FONDS MARINS (pêche) — fond commun à tout le site
   Accueil : .hp-rest (sous le hero). Autres pages : calque derrière
   .vp-page, qui laisse voir l'image du haut puis descend jusqu'au footer.
   ============================================================ */

:root {
  /* Algues sur les bords, lignes de pêche, poissons, fond */
  --vp-forest:
    linear-gradient(0deg, rgba(11, 13, 21, .85) 0, rgba(11, 13, 21, 0) 220px),
    radial-gradient(ellipse 46% 55% at 50% 45%, rgba(14, 17, 26, .62), rgba(14, 17, 26, .2) 75%, rgba(14, 17, 26, 0)),
    url("/public/sea-side-l.svg?v=3") left calc(var(--vp-rail-space) - 30px) top 60px / 190px auto repeat-y,
    url("/public/sea-side-r.svg?v=3") right -24px top 260px / 190px auto repeat-y,
    url("/public/sea-lines.svg?v=3") center top 40px / 1200px auto no-repeat,
    linear-gradient(100deg, transparent 18%, color-mix(in srgb, var(--vp-orange) 6%, transparent) 24%, transparent 31%, transparent 62%, color-mix(in srgb, var(--vp-orange) 5%, transparent) 68%, transparent 74%),
    url("/public/sea-mid.svg?v=3") center top / 560px auto repeat,
    linear-gradient(180deg, rgba(18, 26, 40, .35), rgba(18, 26, 40, .35)),
    url("/public/sea-back.svg?v=3") left top / 420px auto repeat,
    linear-gradient(180deg, #19304d 0%, #172440 50%, #0f1626 100%);
}

/* Pages intérieures (et wiki) : la forêt apparaît en fondu sous l'en-tête.
   --vp-tint : filtre de couleur posé par le thème de saison (themes.css) */
.vp-page,
.vp-wiki { isolation: isolate; }
.hp-rest::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--vp-section) 0, rgba(16, 20, 29, .6) 140px, rgba(16, 20, 29, 0) 320px),
    var(--vp-forest);
  filter: var(--vp-tint, none);
}
.vp-page::before,
.vp-wiki::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--vp-rail-space));
  right: 0;
  pointer-events: none;
  background: var(--vp-forest);
  filter: var(--vp-tint, none);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 160px, #000 420px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 160px, #000 420px);
}

/* La forêt touche le pied de page : plus de bande vide entre les deux */
body.vp-body > .vp-footer { margin-top: 0; }

/* Mobile : pas d'algues de premier plan (elles passaient sous le texte),
   fond plus sombre et plus fine pour garder le contenu lisible */
@media (max-width: 991.98px) {
  :root {
    --vp-forest:
      linear-gradient(0deg, rgba(11, 13, 21, .85) 0, rgba(11, 13, 21, 0) 220px),
      linear-gradient(180deg, rgba(14, 17, 26, .42), rgba(14, 17, 26, .42)),
      url("/public/sea-mid.svg?v=3") center top / 380px auto repeat,
      linear-gradient(180deg, rgba(18, 26, 40, .35), rgba(18, 26, 40, .35)),
      url("/public/sea-back.svg?v=3") left top / 300px auto repeat,
      linear-gradient(180deg, #19304d 0%, #172440 50%, #0f1626 100%);
  }
}

/* Mobile : Firefox Android n'affiche pas un calque animé de ~3700 px de haut
   (on voyait l'image du spawn à travers). Le fond uni passe sur l'élément
   lui-même, et le décor animé dans un calque collant de la hauteur de l'écran. */
@media (max-width: 991.98px) {
  .hp-rest {
    background: linear-gradient(180deg, var(--vp-section) 0, #19304d 320px, #172440 50%, #0f1626 100%);
  }
  .hp-rest::before {
    position: sticky;
    display: block;
    inset: auto;
    top: 0;
    height: 100vh;
    margin-bottom: -100vh;
    background:
      linear-gradient(180deg, rgba(14, 17, 26, .42), rgba(14, 17, 26, .42)),
      url("/public/sea-mid.svg?v=3") center top / 380px auto repeat,
      linear-gradient(180deg, rgba(18, 26, 40, .35), rgba(18, 26, 40, .35)),
      url("/public/sea-back.svg?v=3") left top / 300px auto repeat;
  }
  .vp-page,
  .vp-wiki {
    background: linear-gradient(180deg, transparent 0, rgba(23, 36, 64, .55) 160px, #172440 420px, #0f1626 100%);
  }
  body.vp-body > .vp-footer {
    background: linear-gradient(180deg, #0b0f19, #05070c);
  }
}