/* Landingin valokerros, rajattu yhteen halliin.
   Perityt valaisimen, lattian ja renkaiden gradientit säilyvät.
   Sivuston §27: oletustila on näkyvä, vain JS käynnistää oven.
   Harkintajälki ja kuvat: nakotodiste/itsearvio.md. */
.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--yomusta);
  pointer-events: none;
}

.scene picture,
.scene img {
  width: 100%;
  height: 100%;
}

.scene picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene img {
  /* Fablen V1a: auton ja traktorin rajaus, 16:9-kuva. */
  object-fit: cover;
  object-position: 100% 20%;
}

.scene__veil {
  position: absolute;
  inset: 0;
  /* §62.3: katon pehmeä varjo ja tekstialueen scrim samassa kuvakerroksessa. */
  background: radial-gradient(ellipse var(--hero-katto-rx) var(--hero-katto-ry) at var(--hero-katto-x) var(--hero-katto-y), var(--hero-katto) 0%, var(--hero-katto-kevyt) 40%, transparent 72%), linear-gradient(90deg, var(--hero-scrim) 0%, var(--hero-scrim-kevyt) 46%, transparent 70%);
}

/* Valokerroksen värit ovat rgba-arvoina (--valo #ffc86a, --yomusta #0d0c0a) eikä
   color-mix()-funktiona: Safari 16.0-16.1 ja Firefox < 113 hylkäisivät koko gradientin
   (Codex 2.9. KORJATTAVA 3). Jos tokenit muuttuvat, nämä päivitetään käsin.
   Heron oma kuvalamppu on lähde; hohde hengittää sen kohdalla. */
/* Märän lattian kapea vastaheijastus. Muoto syntyy kahdesta epäsäännöllisestä
   vaaleasta ytimestä, jotta se ei piirry suoraksi valokaistaksi. */
.scene__reflect {
  position: absolute;
  left: -2vw;
  bottom: -9vh;
  width: 22vw;
  height: 54vh;
  background:
    radial-gradient(
      ellipse 18% 58% at 48% 48%,
      rgba(255, 200, 106, 0.68) 0%,
      rgba(255, 200, 106, 0.22) 38%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 43% 19% at 53% 70%,
      rgba(255, 200, 106, 0.28) 0%,
      transparent 76%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 12, 10, 0.76) 20%,
    var(--yomusta) 48%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 12, 10, 0.76) 20%,
    var(--yomusta) 48%,
    transparent 100%
  );
  opacity: 0.6;
  transform-origin: 50% 100%;
}

/* Renkaiden valonpuoleinen reuna ottaa vastaan saman lämpimän lähteen. */
.scene__rim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 4.6% 26% at 69% 29%,
      rgba(255, 200, 106, 0.70) 0%,
      rgba(255, 200, 106, 0.26) 38%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 4.2% 19% at 59.5% 41%,
      rgba(255, 200, 106, 0.64) 0%,
      rgba(255, 200, 106, 0.22) 40%,
      transparent 78%
    ),
    /* Räikän paikallinen valo alaoikealla (Andy 2.9.: työkalu esiin). Sama lähde,
       sama sävy; leveä matala ellipsi lattian tasossa. */
    radial-gradient(
      ellipse 16% 9% at 84% 88%,
      rgba(255, 200, 106, 0.78) 0%,
      rgba(255, 200, 106, 0.30) 45%,
      transparent 80%
    );
  opacity: 0.22;
}

/* Valaisimen paikallinen hehku pysyy lähteessä. Pehmeys tulee gradientista,
   joten suureen kerrokseen ei tarvita jatkuvaa blur-suodatusta. */
.scene__glow {
  position: absolute;
  inset: 0;
  /* Säde vw-yksiköissä: ympyrä myös 4:5-kuvassa, lähde kuvan lampussa. */
  background: radial-gradient(
    circle at var(--hero-lamppu-x) var(--hero-lamppu-y),
    rgba(255, 200, 106, 0.85) 0,
    rgba(255, 200, 106, 0.62) 0.5vw,
    rgba(255, 200, 106, 0.55) 3vw,
    rgba(255, 200, 106, 0.32) 6vw,
    rgba(255, 200, 106, 0.16) 12vw,
    rgba(255, 200, 106, 0.055) 17vw,
    rgba(255, 200, 106, 0.012) 21vw,
    rgba(255, 200, 106, 0) 24vw
  );
  opacity: 0.64;
  transform-origin: var(--hero-lamppu-x) var(--hero-lamppu-y);
}


/* Rajaukset kohdistuvat heroon ja pölyyn, eivät sivun vieritykseen.
   Valokerroksella ei ole paikkaa palvelusivun hiljaisessa yläosassa. */
.scene__dust {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.78;
}
.scene picture { opacity: 1; }

/* Osioiden valo syntyy GSAPilla vasta onEnterissä. Staattisessa tilassa
   myös JavaScriptin tai ScrollTriggerin latausvirhe jättää sisällön näkyviin. */
[data-syty] {
  opacity: 1;
  filter: brightness(1);
}
.motion-off [data-syty] {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.motion-off .scene picture { opacity: 1 !important; }
.motion-off .scene__reflect { opacity: 0.6 !important; }
.motion-off .scene__rim { opacity: 0.22 !important; }
.motion-off .scene__glow { opacity: 0.64 !important; }
.motion-off .dust { display: none; }

@media (max-aspect-ratio: 1/1) {
  .scene img { object-position: 50% 50%; }
  .scene__veil { background: linear-gradient(180deg, var(--hero-scrim) 0%, transparent 45%); }
  .scene__reflect {
    left: -8vw;
    bottom: -4vh;
    width: 36vw;
    height: 38vh;
    opacity: 0.52;
  }
  .scene__rim {
    background:
      radial-gradient(ellipse 7% 22% at 56% 31%, rgba(255,200,106,0.66) 0%, rgba(255,200,106,0.23) 38%, transparent 76%),
      radial-gradient(ellipse 6% 17% at 52% 43%, rgba(255,200,106,0.58) 0%, rgba(255,200,106,0.20) 40%, transparent 78%);
    opacity: 0.16;
  }
  .scene__glow { opacity: 0.52; }
}
@media (prefers-reduced-motion: reduce) {
  [data-syty] { opacity: 1 !important; filter: none !important; transform: none !important; }
  .scene picture { opacity: 1 !important; }
  .scene__reflect { opacity: 0.6 !important; }
  .scene__rim { opacity: 0.22 !important; }
  .scene__glow { opacity: 0.64 !important; }
  .dust { display: none; }
}