/*
  PERALA_HERO_02D
  Uniikki maisemallinen hero-käyttöönottokerros.
  Tavoite:
  - uusi Minecraft-henkinen järvi/portti/repeämä-maisema käyttöön
  - EI samaa kuvaa kaikkialle
  - vähemmän copy-paste-fiilistä
  - säilytetään käytettävyys ja yhteensopivuus
*/

:root {
  --perala-hero-02d-png: url("/assets/peralan-portti-hero-02d.png");
  --perala-hero-02d-webp: url("/assets/peralan-portti-hero-02d.webp");
  --perala-night: #03080a;
  --perala-deep: #071018;
  --perala-gold: rgba(216, 168, 50, 0.26);
  --perala-green: rgba(84, 130, 98, 0.18);
}

/* Oletuksena EI käytetä uutta hero-kuvaa koko bodyyn.
   Tämä poistaa copypaste-tuntua. */
body {
  background:
    radial-gradient(circle at 14% 18%, var(--perala-green), transparent 24rem),
    radial-gradient(circle at 82% 10%, rgba(96, 85, 153, 0.12), transparent 22rem),
    linear-gradient(180deg, rgba(2, 8, 10, 0.16), rgba(3, 8, 10, 0.88) 30rem, var(--perala-night) 100%) !important;
}

/* Etusivu: iso näyttävä sankarimaisema */
body > section.hero {
  min-height: clamp(640px, 84vh, 960px) !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 10, 0.86) 0%, rgba(4, 12, 10, 0.40) 38%, rgba(3, 8, 10, 0.70) 100%),
    radial-gradient(circle at 65% 28%, rgba(125, 104, 219, 0.24), transparent 18rem),
    image-set(
      var(--perala-hero-02d-webp) type("image/webp"),
      var(--perala-hero-02d-png) type("image/png")
    ) center center / cover no-repeat !important;
  box-shadow:
    inset 0 -8rem 8rem rgba(3, 8, 10, 0.92),
    0 2rem 4rem rgba(0, 0, 0, 0.48);
}

/* Etusivun hero-kehys */
body > section.hero::before {
  content: "";
  position: absolute;
  inset: clamp(0.7rem, 2vw, 1.6rem);
  pointer-events: none;
  border-radius: clamp(1rem, 2vw, 2rem);
  border: 1px solid rgba(216, 168, 50, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 4rem rgba(125, 104, 219, 0.08);
}

/* Hero-tekstiboksi erottuu, mutta kuva näkyy */
.hero-inner {
  max-width: 780px !important;
  padding: clamp(1rem, 3vw, 2.2rem);
  background:
    linear-gradient(90deg, rgba(3, 8, 10, 0.70), rgba(3, 8, 10, 0.34), transparent) !important;
  border-left: 3px solid rgba(216, 168, 50, 0.48);
  border-radius: 1.25rem;
  backdrop-filter: blur(2px);
}

/* Säännöt-sivu: hero kyllä, mutta rauhallisempi */
main > header.hero {
  min-height: clamp(380px, 52vh, 560px) !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 10, 0.90), rgba(3, 8, 10, 0.50), rgba(3, 8, 10, 0.82)),
    image-set(
      var(--perala-hero-02d-webp) type("image/webp"),
      var(--perala-hero-02d-png) type("image/png")
    ) center center / cover no-repeat !important;
}

/* Tietoja-sivu: pelimäisempi hero, mutta ei ihan yhtä massiivinen kuin etusivu */
main > section.hero-section {
  min-height: clamp(420px, 58vh, 620px) !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 10, 0.86), rgba(3, 8, 10, 0.44), rgba(3, 8, 10, 0.78)),
    radial-gradient(circle at 72% 30%, rgba(125, 104, 219, 0.18), transparent 18rem),
    image-set(
      var(--perala-hero-02d-webp) type("image/webp"),
      var(--perala-hero-02d-png) type("image/png")
    ) center center / cover no-repeat !important;
}

/* TÄRKEÄ: älä käytä samaa taustaa geneerisesti kaikkien sivujen ensimmäiseen korttiin */
main > section.card:first-of-type:not(.hero-section):not(.notice) {
  background:
    linear-gradient(180deg, rgba(255, 245, 203, 0.055), rgba(255, 245, 203, 0.015)),
    linear-gradient(135deg, rgba(11, 24, 18, 0.82), rgba(4, 11, 8, 0.90)) !important;
  min-height: auto !important;
}

/* Form-sivut pidetään selkeinä ja luettavina */
form,
input,
textarea,
select {
  background-color: rgba(5, 12, 10, 0.92) !important;
}

/* Nappien ja tekstin kontrasti */
body > section.hero h1,
main > header.hero h1,
main > section.hero-section h1 {
  text-shadow:
    0 0.25rem 1rem rgba(0, 0, 0, 0.88),
    0 0 2rem rgba(0, 0, 0, 0.38);
}

body > section.hero p,
main > header.hero p,
main > section.hero-section p {
  text-shadow: 0 0.12rem 0.8rem rgba(0,0,0,0.65);
}

/* Mainospaikkoihin ei kosketa aggressiivisesti */
.perala-ad-placeholder,
[data-perala-ad-placeholder] {
  position: relative !important;
  z-index: 1;
  isolation: isolate;
}

/* Mobiili */
@media (max-width: 760px) {
  body > section.hero {
    min-height: clamp(500px, 70vh, 760px) !important;
    background-position: 62% center !important;
  }

  main > header.hero,
  main > section.hero-section {
    min-height: clamp(300px, 48vh, 480px) !important;
    background-position: 60% center !important;
  }

  .hero-inner {
    padding: 1rem;
    border-left-width: 2px;
  }
}

/* Jos selain ei ymmärrä image-setiä, fallback PNG */
@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.86) 0%, rgba(4, 12, 10, 0.40) 38%, rgba(3, 8, 10, 0.70) 100%),
      radial-gradient(circle at 65% 28%, rgba(125, 104, 219, 0.24), transparent 18rem),
      var(--perala-hero-02d-png) center center / cover no-repeat !important;
  }

  main > header.hero {
    background:
      linear-gradient(90deg, rgba(3, 8, 10, 0.90), rgba(3, 8, 10, 0.50), rgba(3, 8, 10, 0.82)),
      var(--perala-hero-02d-png) center center / cover no-repeat !important;
  }

  main > section.hero-section {
    background:
      linear-gradient(90deg, rgba(3, 8, 10, 0.86), rgba(3, 8, 10, 0.44), rgba(3, 8, 10, 0.78)),
      radial-gradient(circle at 72% 30%, rgba(125, 104, 219, 0.18), transparent 18rem),
      var(--perala-hero-02d-png) center center / cover no-repeat !important;
  }
}