/* Kampanjan esirippu ennakkoviikolla ja Black Weekillä: sivustolle tultaessa verho on kiinni, sauman takaa
   hehkuu valo, ja verho aukeaa sivuille. Avaus on pelkkää CSS:ää; skripti vain nopeuttaa sitä. */
/* Verho on kaiken päällä, myös evästeikkunan: ikkuna tulee esiin, kun verho on auennut. */
.kampanja-esirippu {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-items: center;
  cursor: pointer;
  animation: ke-pois 0.01s linear 2.6s forwards;
}
/* Ilman skriptiä istuntomuisti ei toimi ja verho näkyisi joka sivulla, joten se jätetään silloin pois. Sytytä
   valot, jo nähty verho ja sivulta toiselle siirtyminen asettavat arvon "ohi". */
html:not([data-kampanja]) .kampanja-esirippu,
html[data-kampanja-esirippu="ohi"] .kampanja-esirippu { display: none; }
.kampanja-esirippu .ke-puoli {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.045) 38px, rgba(0, 0, 0, 0.35) 76px, rgba(255, 255, 255, 0) 120px),
    linear-gradient(180deg, #0b0c13 0%, #050509 100%);
  will-change: transform;
  animation: ke-auki 1.05s cubic-bezier(0.7, 0, 0.2, 1) 1.5s forwards;
}
.kampanja-esirippu .ke-vasen {
  left: 0;
  --ke-suunta: -102%;
  box-shadow: inset -2px 0 0 rgba(255, 170, 96, 0.55), inset -46px 0 70px -36px rgba(255, 138, 60, 0.5);
}
.kampanja-esirippu .ke-oikea {
  right: 0;
  --ke-suunta: 102%;
  box-shadow: inset 2px 0 0 rgba(255, 170, 96, 0.55), inset 46px 0 70px -36px rgba(255, 138, 60, 0.5);
}
.kampanja-esirippu .ke-sisalto {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
  animation: ke-sisalto 1.75s ease forwards;
}
/* Tumma pohja tekstin takana peittää sauman valon, jotta se ei kulje otsikon läpi. */
.kampanja-esirippu .ke-sisalto::before {
  content: "";
  position: absolute;
  inset: -30px -70px;
  z-index: -1;
  background: radial-gradient(closest-side, #07080d 58%, rgba(7, 8, 13, 0) 100%);
}
.kampanja-esirippu .ke-sisalto img { filter: drop-shadow(0 0 26px rgba(255, 138, 60, 0.75)); }
.kampanja-esirippu .ke-otsikko {
  margin: 0;
  font: 900 clamp(46px, 9vw, 120px)/1 var(--font);
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, #fcb549 0%, #ff6a5e 50%, #f04be0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kampanja-esirippu .ke-teksti {
  margin: 0;
  font: 600 clamp(15px, 1.8vw, 20px)/1.4 var(--font);
  color: rgba(244, 245, 250, 0.82);
}
/* Klikkaus, näppäin tai vieritys avaa verhon heti. Uusi animaation nimi käynnistää avauksen alusta ilman viivettä. */
.kampanja-esirippu.ke-heti { animation: ke-pois-heti 0.01s linear 0.75s forwards; }
.kampanja-esirippu.ke-heti .ke-puoli { animation: ke-auki-heti 0.7s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
.kampanja-esirippu.ke-heti .ke-sisalto { animation: ke-sisalto-pois 0.25s ease forwards; }
@keyframes ke-auki {
  to { transform: translate3d(var(--ke-suunta), 0, 0); }
}
@keyframes ke-auki-heti {
  to { transform: translate3d(var(--ke-suunta), 0, 0); }
}
@keyframes ke-pois-heti {
  to { visibility: hidden; pointer-events: none; }
}
@keyframes ke-sisalto {
  0% { opacity: 0; transform: scale(0.96); }
  18% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes ke-sisalto-pois {
  to { opacity: 0; }
}
@keyframes ke-pois {
  to { visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kampanja-esirippu { display: none; }
}