/*
  PERALA_HERO_02D_VISIBILITY_FIX
  Korjaa 02D-kuvan liian piilossa olemisen.
  Ei JavaScriptiä. Ei ulkoisia resursseja. Ei automaattista päivitystä.
*/

/* Etusivu: kuva selvemmin esiin, tumma suoja enemmän tekstin puolelle */
body > section.hero {
  background:
    linear-gradient(90deg,
      rgba(3, 8, 10, 0.88) 0%,
      rgba(3, 8, 10, 0.58) 27%,
      rgba(3, 8, 10, 0.18) 52%,
      rgba(3, 8, 10, 0.18) 72%,
      rgba(3, 8, 10, 0.34) 100%
    ),
    radial-gradient(circle at 64% 32%, rgba(128, 103, 230, 0.30), transparent 20rem),
    image-set(
      url("/assets/peralan-portti-hero-02d.webp") type("image/webp"),
      url("/assets/peralan-portti-hero-02d.png") type("image/png")
    ) center center / cover no-repeat !important;
}

/* 02B:n tumma jälkikalvo oli liian vahva: kevennetään sitä */
body > section.hero::after {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.035),
      transparent 26%,
      rgba(3, 8, 10, 0.36) 100%
    ) !important;
  opacity: 0.62 !important;
}

/* Kehys saa jäädä, mutta se ei saa peittää maisemaa */
body > section.hero::before {
  border-color: rgba(216, 168, 50, 0.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.045),
    inset 0 0 2.4rem rgba(125, 104, 219, 0.055) !important;
}

/* Tekstin oma tausta vahvemmaksi, jotta koko kuvaa ei tarvitse tummentaa */
.hero-inner {
  background:
    linear-gradient(90deg,
      rgba(3, 8, 10, 0.84),
      rgba(3, 8, 10, 0.58) 58%,
      rgba(3, 8, 10, 0.18) 100%
    ) !important;
  border-left-color: rgba(235, 202, 116, 0.62) !important;
  box-shadow:
    0 1rem 2.6rem rgba(0,0,0,0.26),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

/* Alasivujen heroissa näkyvyyttä lisää, mutta hillitymmin */
main > header.hero {
  background:
    linear-gradient(90deg,
      rgba(3, 8, 10, 0.86),
      rgba(3, 8, 10, 0.42) 46%,
      rgba(3, 8, 10, 0.54) 100%
    ),
    image-set(
      url("/assets/peralan-portti-hero-02d.webp") type("image/webp"),
      url("/assets/peralan-portti-hero-02d.png") type("image/png")
    ) center center / cover no-repeat !important;
}

main > section.hero-section {
  background:
    linear-gradient(90deg,
      rgba(3, 8, 10, 0.82),
      rgba(3, 8, 10, 0.36) 48%,
      rgba(3, 8, 10, 0.52) 100%
    ),
    radial-gradient(circle at 72% 30%, rgba(125, 104, 219, 0.20), transparent 18rem),
    image-set(
      url("/assets/peralan-portti-hero-02d.webp") type("image/webp"),
      url("/assets/peralan-portti-hero-02d.png") type("image/png")
    ) center center / cover no-repeat !important;
}

/* Geneeriset ensimmäiset kortit eivät saa muuttua maisematapetiksi */
main > section.card:first-of-type:not(.hero-section):not(.notice) {
  background:
    linear-gradient(180deg, rgba(255, 245, 203, 0.06), rgba(255, 245, 203, 0.02)),
    linear-gradient(135deg, rgba(11, 24, 18, 0.84), rgba(4, 11, 8, 0.92)) !important;
}

/* Mobiilissa keskitetään kuvan kiinnostavin kohta paremmin */
@media (max-width: 760px) {
  body > section.hero {
    background-position: 62% center !important;
  }

  body > section.hero::after {
    opacity: 0.72 !important;
  }

  .hero-inner {
    background: rgba(3, 8, 10, 0.76) !important;
  }
}

/* Fallback jos image-set ei ole käytössä */
@supports not (background: image-set(url("x.webp") type("image/webp"), url("x.png") type("image/png"))) {
  body > section.hero {
    background:
      linear-gradient(90deg,
        rgba(3, 8, 10, 0.88) 0%,
        rgba(3, 8, 10, 0.58) 27%,
        rgba(3, 8, 10, 0.18) 52%,
        rgba(3, 8, 10, 0.18) 72%,
        rgba(3, 8, 10, 0.34) 100%
      ),
      radial-gradient(circle at 64% 32%, rgba(128, 103, 230, 0.30), transparent 20rem),
      url("/assets/peralan-portti-hero-02d.png") center center / cover no-repeat !important;
  }

  main > header.hero {
    background:
      linear-gradient(90deg,
        rgba(3, 8, 10, 0.86),
        rgba(3, 8, 10, 0.42) 46%,
        rgba(3, 8, 10, 0.54) 100%
      ),
      url("/assets/peralan-portti-hero-02d.png") center center / cover no-repeat !important;
  }

  main > section.hero-section {
    background:
      linear-gradient(90deg,
        rgba(3, 8, 10, 0.82),
        rgba(3, 8, 10, 0.36) 48%,
        rgba(3, 8, 10, 0.52) 100%
      ),
      radial-gradient(circle at 72% 30%, rgba(125, 104, 219, 0.20), transparent 18rem),
      url("/assets/peralan-portti-hero-02d.png") center center / cover no-repeat !important;
  }
}