/*
  PERALA_PUBLIC_FOREST_BACKGROUND
  Tarkoitus: yhtenäinen julkisen webin metsämaisema-taustakerros.
  Ei sisällön muutoksia. Ei toiminnallisia muutoksia.
*/

:root {
  color-scheme: dark;
  --perala-forest-bg: #050b06;
  --perala-forest-panel: rgba(4, 12, 7, 0.86);
  --perala-forest-border: rgba(185, 224, 143, 0.28);
  --perala-forest-gold: rgba(216, 168, 50, 0.36);
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 10%, rgba(132, 190, 96, 0.22), transparent 27rem),
    radial-gradient(circle at 82% 12%, rgba(216, 168, 50, 0.13), transparent 25rem),
    linear-gradient(180deg, rgba(3, 7, 4, 0.78), rgba(5, 12, 7, 0.96)),
    url("/assets/peralan-portti-rpg-forest-ui.svg") center top / cover fixed no-repeat,
    var(--perala-forest-bg) !important;
}

body {
  min-height: 100%;
  background: transparent !important;
}

/* tumma lasi päälle, jotta teksti pysyy luettavana eikä metsä hyökkää silmille kuin ylikierroksilla oleva creeper */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.46), transparent 24%, transparent 76%, rgba(0,0,0,0.44)),
    radial-gradient(circle at 50% 16%, rgba(221, 190, 104, 0.10), transparent 18rem),
    radial-gradient(circle at 50% 62%, transparent 38%, rgba(0,0,0,0.46)),
    linear-gradient(180deg, rgba(2,6,3,0.18), rgba(2,6,3,0.74));
}

/* Kortit saavat yhtenäisen metsälasin, mutta sisältö ja järjestys säilyvät ennallaan */
:where(main, section, article, form, .card, .panel, .box, .content, .wrap > div) {
  border-color: var(--perala-forest-border) !important;
}

:where(.card, .panel, .box, form, main > section, article.card) {
  background:
    radial-gradient(circle at 14% 0%, rgba(170, 220, 126, 0.07), transparent 13rem),
    linear-gradient(180deg, rgba(5, 15, 8, 0.90), rgba(4, 11, 7, 0.82)) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255, 244, 186, 0.045) !important;
}

/* Hero pidetään näyttävänä, mutta ei vaihdeta sisältöä */
:where(.hero, .hero-section, header.hero) {
  background:
    linear-gradient(180deg, rgba(3, 8, 5, 0.20), rgba(3, 8, 5, 0.88)),
    url("/assets/peralan-portti-rpg-forest-ui.svg") center center / cover no-repeat,
    linear-gradient(180deg, #07100b, #101b12) !important;
}

/* Lomakkeet pysyvät luettavina */
:where(input, textarea, select) {
  background: rgba(4, 10, 6, 0.88) !important;
  border-color: rgba(185, 224, 143, 0.32) !important;
}

/* Pieni saavutettavuus: jos käyttäjä vähentää liikettä, fixed-tausta ei pakota fiilistelyä */
@media (prefers-reduced-motion: reduce) {
  html {
    background-attachment: scroll !important;
  }
}