/*
  PERALA_SITE_BACKGROUND_02F
  Uusi sivuston muu taustamaisema.
  Ei korvaa 02D hero-kuvaa.
  Ei JavaScriptiä. Ei ulkoisia resursseja. Ei automaattista päivitystä.
*/

:root {
  --perala-bg-02f-png: url("/assets/peralan-portti-tausta-02f.png");
  --perala-bg-02f-webp: url("/assets/peralan-portti-tausta-02f.webp");
}

/* Muu sivusto saa oman maailmataustan.
   Hero säilyy 02D-kuvana omissa säännöissään. */
body {
  background:
    linear-gradient(180deg,
      rgba(2, 7, 9, 0.18) 0,
      rgba(2, 7, 9, 0.80) 36rem,
      rgba(2, 7, 9, 0.92) 100%
    ),
    radial-gradient(circle at 82% 18%, rgba(128, 103, 230, 0.10), transparent 24rem),
    radial-gradient(circle at 18% 62%, rgba(80, 130, 90, 0.12), transparent 28rem),
    image-set(
      var(--perala-bg-02f-webp) type("image/webp"),
      var(--perala-bg-02f-png) type("image/png")
    ) center top / cover no-repeat,
    #03080a !important;
  background-attachment: scroll !important;
}

/* Etusivun hero pidetään hyväksytyssä 02D-kuvassa.
   Tämä estää uuden taustan valumisen sankarikuvaan. */
body > section.hero,
main > header.hero,
main > section.hero-section {
  background-clip: border-box !important;
}

/* Main-alueelle pieni "maailman sumu" eikä pelkkä tasaväri */
main {
  position: relative;
}

main::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 8, 10, 0.20), rgba(3, 8, 10, 0.72)),
    radial-gradient(circle at 50% 8rem, rgba(216, 168, 50, 0.055), transparent 22rem);
  border-radius: 2rem;
}

/* Kortit saavat läpinäkyvyyttä sen verran, että taustamaailma tuntuu jatkuvan,
   mutta teksti pysyy luettavana. */
:where(main section:not(.perala-ad-placeholder), main article, main .card, main .panel, main .box, main form) {
  background:
    linear-gradient(180deg, rgba(255, 245, 203, 0.060), rgba(255, 245, 203, 0.018)),
    linear-gradient(135deg, rgba(7, 19, 15, 0.82), rgba(3, 9, 8, 0.92)) !important;
  border-color: rgba(235, 202, 116, 0.30) !important;
}

/* Korostetut kortit eri sävyllä, ettei kaikki näytä samalta läpikuultavalta laatikolta */
.card.notice,
.perala-admin-notice,
#eventit-lyhyesti {
  background:
    linear-gradient(135deg, rgba(216, 168, 50, 0.13), rgba(6, 20, 17, 0.84)),
    linear-gradient(180deg, rgba(255, 245, 203, 0.04), rgba(255, 245, 203, 0.01)) !important;
}

.card.morko {
  background:
    radial-gradient(circle at 18% 18%, rgba(174, 91, 64, 0.20), transparent 15rem),
    linear-gradient(135deg, rgba(18, 7, 5, 0.84), rgba(4, 12, 10, 0.92)) !important;
}

/* Grid-kortteihin hieman syvyyttä */
.grid > .card,
.grid > article {
  box-shadow:
    0 1.25rem 2.8rem rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.050) !important;
}

/* Lomakesivut pidetään rauhallisina, ei taustan sotkua kenttien alle */
form,
input,
textarea,
select {
  background-color: rgba(4, 11, 10, 0.94) !important;
}

/* Mainospaikat: säilytä näkyvinä, ei taustakuvan päälle liian sekavasti */
.perala-ad-placeholder,
[data-perala-ad-placeholder] {
  background:
    linear-gradient(135deg, rgba(216, 168, 50, 0.070), rgba(4, 13, 11, 0.82)),
    rgba(3, 10, 9, 0.82) !important;
  border-color: rgba(235, 202, 116, 0.34) !important;
}

/* Footer samassa maailmassa */
footer {
  background:
    linear-gradient(180deg, rgba(3, 8, 10, 0.42), rgba(3, 8, 10, 0.82)) !important;
}

/* Info-sivut joissa ei ole perala-theme.css: pidetään silti saman maailman sisällä */
.navlinks {
  background:
    linear-gradient(90deg, rgba(3, 8, 10, 0.76), rgba(5, 18, 14, 0.66)) !important;
  border-color: rgba(235, 202, 116, 0.28) !important;
}

/* Mobiilissa tausta ei saa tehdä lukemisesta raskasta */
@media (max-width: 760px) {
  body {
    background:
      linear-gradient(180deg,
        rgba(2, 7, 9, 0.32) 0,
        rgba(2, 7, 9, 0.90) 28rem,
        rgba(2, 7, 9, 0.96) 100%
      ),
      image-set(
        var(--perala-bg-02f-webp) type("image/webp"),
        var(--perala-bg-02f-png) type("image/png")
      ) 58% top / auto 760px no-repeat,
      #03080a !important;
  }

  main::before {
    inset: 0;
    border-radius: 1rem;
  }
}

/* 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 {
    background:
      linear-gradient(180deg,
        rgba(2, 7, 9, 0.18) 0,
        rgba(2, 7, 9, 0.80) 36rem,
        rgba(2, 7, 9, 0.92) 100%
      ),
      radial-gradient(circle at 82% 18%, rgba(128, 103, 230, 0.10), transparent 24rem),
      radial-gradient(circle at 18% 62%, rgba(80, 130, 90, 0.12), transparent 28rem),
      var(--perala-bg-02f-png) center top / cover no-repeat,
      #03080a !important;
  }
}