/*
  PERALA_PUBLIC_FOREST_VIVID_BEGIN
  Tarkoitus: elävöittää metsätaustaa hillitysti.
  Ei muuta sisältöä. Ei RGB-hubia. Ei markkinointisirkusta.
*/

:root {
  --perala-vivid-leaf: rgba(142, 210, 92, 0.24);
  --perala-vivid-moss: rgba(76, 150, 70, 0.20);
  --perala-vivid-gold: rgba(236, 188, 72, 0.18);
  --perala-vivid-fog: rgba(210, 238, 190, 0.055);
}

html {
  background:
    radial-gradient(circle at 18% 8%, var(--perala-vivid-leaf), transparent 25rem),
    radial-gradient(circle at 83% 14%, var(--perala-vivid-gold), transparent 24rem),
    radial-gradient(circle at 50% 88%, rgba(35, 90, 46, 0.24), transparent 32rem),
    linear-gradient(180deg, #07130a 0%, #08160c 42%, #030704 100%) !important;
}

body {
  text-rendering: optimizeLegibility;
}

body::before {
  filter: saturate(1.16) brightness(1.08) contrast(1.04);
}

body::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.34), transparent 22%, transparent 78%, rgba(0,0,0,0.32)),
    radial-gradient(circle at 50% 18%, rgba(244, 214, 130, 0.11), transparent 19rem),
    radial-gradient(circle at 20% 72%, rgba(104, 176, 86, 0.10), transparent 22rem),
    radial-gradient(circle at 80% 68%, rgba(132, 194, 105, 0.08), transparent 20rem),
    linear-gradient(180deg, rgba(2,6,3,0.10), rgba(2,6,3,0.62)) !important;
}

.hero,
.hero-section,
header,
.card,
.feature,
.notice,
.morko,
section,
article {
  border-color: rgba(200, 235, 160, 0.34) !important;
}

.card,
.feature,
.notice,
.morko,
section.card,
article.card {
  background:
    radial-gradient(circle at 18% 0%, rgba(165, 225, 112, 0.095), transparent 14rem),
    linear-gradient(180deg, rgba(5, 17, 9, 0.91), rgba(4, 12, 7, 0.84)) !important;
  box-shadow:
    0 20px 52px rgba(0,0,0,0.33),
    inset 0 1px 0 rgba(255, 246, 190, 0.07) !important;
}

.hero,
.hero-section {
  background:
    radial-gradient(circle at 72% 28%, rgba(236, 188, 72, 0.18), transparent 17rem),
    radial-gradient(circle at 22% 18%, rgba(132, 210, 92, 0.13), transparent 18rem),
    linear-gradient(120deg, rgba(5, 14, 8, 0.93), rgba(10, 31, 15, 0.76)) !important;
}

h1, h2, h3 {
  text-shadow:
    0 2px 0 rgba(0,0,0,0.34),
    0 0 20px rgba(216, 168, 50, 0.16);
}

a,
.button {
  text-underline-offset: 0.18em;
}

.button,
button,
input[type="submit"] {
  filter: saturate(1.08) brightness(1.03);
}

input,
textarea,
select,
pre,
code {
  background-color: rgba(3, 9, 5, 0.88) !important;
}

/* Pieni saavutettavuusjarru: jos käyttäjä pyytää vähemmän liikettä, ei lisätä mitään liikkuvaa. */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

/*
  PERALA_PUBLIC_FOREST_VIVID_END
*/