/*
  PERALA_FOREST_SHOWCASE
  Graafinen ulkoasukerros.
  Ei JavaScriptiä. Ei ulkoisia resursseja. Ei automaattista päivitystä.
  Tarkoitus: isompi hero, metsäisempi tunnelma, parempi luettavuus.
*/

:root {
  --perala-night: #020604;
  --perala-forest-deep: #061109;
  --perala-forest: #102315;
  --perala-moss: #7e9f62;
  --perala-gold: #d8a832;
  --perala-warm: #f3e4b3;
  --perala-card: rgba(5, 15, 8, 0.78);
  --perala-card-strong: rgba(4, 11, 7, 0.90);
  --perala-line: rgba(238, 207, 126, 0.23);
  --perala-glow: rgba(216, 168, 50, 0.22);
}

html {
  background: var(--perala-night);
}

body {
  color: var(--perala-warm);
  background:
    radial-gradient(circle at 50% 7rem, rgba(216, 168, 50, 0.20), transparent 18rem),
    radial-gradient(circle at 12% 18rem, rgba(91, 139, 78, 0.22), transparent 22rem),
    linear-gradient(180deg, rgba(1, 4, 3, 0.18), rgba(1, 5, 3, 0.90) 36rem, #020604 100%),
    url("/assets/peralan-portti-hero.png") center top / min(1920px, 165vw) auto no-repeat,
    var(--perala-night) !important;
}

/* Suurempi ja näyttävämpi ensivaikutelma ilman tekstimuutoksia */
:where(main > section:first-of-type, .hero, .hero-section, header.hero) {
  position: relative;
  overflow: hidden;
  min-height: clamp(430px, 62vh, 720px);
  display: grid;
  align-content: center;
  border: 1px solid rgba(238, 207, 126, 0.25);
  border-radius: clamp(1.1rem, 2vw, 2rem);
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 244, 192, 0.06);
  background:
    linear-gradient(90deg, rgba(2, 7, 4, 0.88), rgba(4, 13, 7, 0.52), rgba(2, 7, 4, 0.86)),
    radial-gradient(circle at 66% 35%, rgba(216, 168, 50, 0.20), transparent 19rem),
    url("/assets/peralan-portti-hero.png") center center / cover no-repeat !important;
}

:where(main > section:first-of-type, .hero, .hero-section, header.hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(126, 159, 98, 0.16), transparent 34rem);
  mix-blend-mode: screen;
  opacity: 0.8;
}

:where(main > section:first-of-type, .hero, .hero-section, header.hero) > * {
  position: relative;
  z-index: 1;
  max-width: 54rem;
}

/* Pääsisällön ryhti */
main {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

:where(section, article, .card, .panel, .box, form, main > div) {
  border-radius: 1.25rem;
}

:where(section:not(:first-of-type), article, .card, .panel, .box, form) {
  border: 1px solid var(--perala-line);
  background:
    linear-gradient(180deg, rgba(255, 244, 192, 0.055), rgba(255, 244, 192, 0.018)),
    var(--perala-card) !important;
  box-shadow:
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(7px);
}

:where(section:not(:first-of-type), article, .card, .panel, .box, form):hover {
  border-color: rgba(216, 168, 50, 0.35);
  box-shadow:
    0 1.4rem 3.1rem rgba(0, 0, 0, 0.42),
    0 0 2.4rem rgba(126, 159, 98, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

/* Otsikot hieman portinvartijamaisemmiksi, mutta ei sirkusta */
:where(h1, h2, h3) {
  text-wrap: balance;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.25rem, 6vw, 5.2rem);
  line-height: 0.95;
  text-shadow:
    0 0.22rem 0.85rem rgba(0, 0, 0, 0.72),
    0 0 2.2rem rgba(216, 168, 50, 0.24);
}

h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
}

p, li {
  line-height: 1.68;
}

/* Linkit ja napit: näkyvät, mutta ei neon-hubia */
a {
  color: #f0c65f;
  text-underline-offset: 0.18em;
}

:where(a.button, .button, button, input[type="submit"], input[type="button"]) {
  border-radius: 999px !important;
  border: 1px solid rgba(238, 207, 126, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(216, 168, 50, 0.30), rgba(86, 111, 54, 0.35)),
    rgba(8, 20, 10, 0.88) !important;
  color: var(--perala-warm) !important;
  box-shadow:
    0 0.85rem 1.8rem rgba(0, 0, 0, 0.30),
    0 0 1.7rem rgba(216, 168, 50, 0.12);
}

:where(a.button, .button, button, input[type="submit"], input[type="button"]):hover {
  transform: translateY(-1px);
  border-color: rgba(255, 226, 147, 0.66) !important;
  box-shadow:
    0 1rem 2.1rem rgba(0, 0, 0, 0.36),
    0 0 2.1rem rgba(216, 168, 50, 0.18);
}

/* Lomakkeet pysyvät selkeinä */
:where(input, textarea, select) {
  border-radius: 0.85rem;
  border: 1px solid rgba(238, 207, 126, 0.28);
  background: rgba(2, 8, 4, 0.78);
  color: var(--perala-warm);
}

:where(input, textarea, select):focus {
  outline: 2px solid rgba(216, 168, 50, 0.52);
  outline-offset: 2px;
}

/* Mainosalustan yhteensopivuus: ei peitetä, ei piiloteta, ei tehdä sticky-ansoja */
:where(.perala-ad-placeholder, [data-perala-ad-placeholder]) {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Mobiili: näyttävä, mutta ei murskaa luettavuutta */
@media (max-width: 760px) {
  body {
    background-size: 1450px auto, auto !important;
  }

  :where(main > section:first-of-type, .hero, .hero-section, header.hero) {
    min-height: clamp(360px, 58vh, 560px);
    border-radius: 1rem;
    background-position: center top !important;
  }

  main {
    width: min(100% - 1rem, 1120px);
  }

  h1 {
    font-size: clamp(2.05rem, 13vw, 3.45rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}