/* JV Autoasi, yhden ruudun landing.
   Sommitelma on yksi toimituksellinen pinta, ei korttien kokoelma. */

@font-face {
  font-family: "Archivo";
  src: url("../../assets/fonts/archivo-400.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../../assets/fonts/archivo-500.woff2?v=2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../../assets/fonts/archivo-700.woff2?v=2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../assets/fonts/ibm-plex-sans-400.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../assets/fonts/ibm-plex-sans-500.woff2?v=2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../assets/fonts/ibm-plex-mono-400.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--pohja);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100svh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--pohja);
  color: var(--muste);
  font-family: var(--fontti-leipa);
  font-size: var(--koko-perus);
  font-weight: var(--paino-ohut);
  line-height: var(--rivi-perus);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.ohita {
  position: absolute;
  left: var(--tila-4);
  top: -100%;
  z-index: 20;
  padding: var(--tila-3) var(--tila-5);
  background: var(--sininen);
  color: var(--pohja);
  text-decoration: none;
  transition: top var(--kesto-nopea) var(--easing-pehmea);
}

.ohita:focus-visible {
  top: var(--tila-4);
}

:where(a, button):focus-visible {
  outline: var(--fokus-paksuus) solid var(--sininen-kirkas);
  outline-offset: var(--tila-1);
}

/* Ylätunniste */

.ylatunniste {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--tila-5);
  width: 100%;
  max-width: var(--leveys-sisalto);
  margin-inline: auto;
  padding: var(--tila-4) var(--sivupehmuste);
}

.merkki {
  min-height: var(--kosketus-minimi);
  display: inline-flex;
  align-items: center;
  gap: var(--tila-3);
  color: var(--sininen);
  text-decoration: none;
}

.merkki__kuva {
  width: calc(var(--tila-7) + var(--tila-1));
  height: calc(var(--tila-7) + var(--tila-1));
  flex: none;
}

.merkki__kuva svg {
  width: 100%;
  height: 100%;
}

.merkki__nimi {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-merkki);
  font-weight: var(--paino-raskas);
  letter-spacing: var(--kirjainvali-numero);
}

.pilli {
  display: inline-flex;
  align-items: center;
  gap: var(--tila-2);
  margin: 0 0 0 auto;
  padding: var(--tila-1) 0 var(--tila-1) var(--tila-3);
  border-left: var(--raja-paksuus) solid var(--raja-keskivahva);
  color: var(--sininen);
  font-family: var(--fontti-tekni);
  font-size: var(--koko-mikro);
  letter-spacing: calc(var(--kirjainvali-mikro) * 0.45);
  text-transform: uppercase;
  white-space: nowrap;
}

.pilli__piste {
  width: calc(var(--tila-2) - var(--tila-1));
  height: calc(var(--tila-2) - var(--tila-1));
  flex: none;
  border-radius: 50%;
  background: var(--tila-vihrea);
  box-shadow: 0 0 0 var(--tila-1) var(--status-hehku);
}

/* Päänäyttämö */

.naytos {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: var(--leveys-sisalto);
  margin-inline: auto;
}

.naytos::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--sivupehmuste);
  right: var(--sivupehmuste);
  bottom: var(--tietorivi-korkeus);
  height: var(--raja-paksuus);
  background: var(--raja-hento);
}

.naytto {
  --x: var(--linssi-lepo-x);
  --y: var(--linssi-lepo-y);
  --x-vana: var(--linssi-lepo-x);
  --y-vana: var(--linssi-lepo-y);
  position: absolute;
  isolation: isolate;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: var(--tietorivi-korkeus);
  left: 25%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--pinta);
  clip-path: polygon(
    var(--kuvaleikkaus) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--kuvaleikkaus)
  );
}

.naytto__media,
.lapivalaisu__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.naytto__media {
  isolation: isolate;
}

.lapivalaisu__media {
  background: var(--sininen-syva);
}

.naytto__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      var(--valkoinen-hento),
      var(--pohja-lapinakyva) 29% 68%,
      var(--tumma-lasi)
    ),
    radial-gradient(
      ellipse at 82% 18%,
      var(--valkoinen-heijastus),
      var(--pohja-lapinakyva) 42%
    );
  box-shadow:
    inset 0 0 var(--tila-8) var(--valkoinen-hento),
    inset calc(-1 * var(--tila-5)) 0 var(--tila-9) var(--tumma-lasi);
  opacity: var(--lasi-usva-voimakkuus);
}

.naytto__kuva,
.lapivalaisu__kuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.naytto__kuva {
  object-position: var(--kuva-kohdistus-x) var(--kuva-kohdistus-y);
}

.lapivalaisu__kuva {
  color: transparent;
  object-position: var(--paljastus-kohdistus-x) var(--paljastus-kohdistus-y);
  transform: translate(var(--paljastus-siirto-x), var(--paljastus-siirto-y))
             scale(var(--paljastus-skaala-x), var(--paljastus-skaala-y));
  transform-origin: center;
  filter: saturate(var(--paljastus-kylläisyys))
          contrast(var(--paljastus-kontrasti))
          brightness(var(--paljastus-kirkkaus));
}

.naytto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--pohja-peittava) 0,
      var(--pohja-puolikas) 19%,
      var(--pohja-lapinakyva) 48%
    ),
    linear-gradient(
      180deg,
      var(--pohja-lapinakyva) 72%,
      var(--pohja-puolikas) 100%
    );
}

.naytto::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--tila-8));
  bottom: calc(-1 * var(--tila-8));
  left: calc(-1 * var(--lasi-kiilto-leveys));
  width: var(--lasi-kiilto-leveys);
  pointer-events: none;
  background: linear-gradient(
    var(--lasi-kiilto-kulma),
    var(--pohja-lapinakyva) 15%,
    var(--valkoinen-hento) 38%,
    var(--valkoinen-heijastus) 50%,
    var(--valkoinen-hento) 62%,
    var(--pohja-lapinakyva) 85%
  );
  filter: blur(var(--lasi-kiilto-sumeus));
  opacity: var(--lasi-kiilto-voimakkuus);
  transform: translate3d(0, 0, 0);
  animation: liuuta-kiilto var(--lasi-kiilto-kesto) var(--easing-pehmea) infinite;
  will-change: transform;
}

.lapivalaisu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--paljastus-lepo);
  transition: opacity var(--paljastus-herays) var(--easing-pehmea);
  -webkit-mask-image:
    radial-gradient(
      circle calc(var(--paljastus-koko) / 2) at var(--paljastus-x) var(--paljastus-y),
      var(--maski-taysi) 0 var(--paljastus-ydin-loppu),
      var(--maski-pehmea) var(--paljastus-hajoama-alku),
      var(--valkoinen-heijastus) var(--paljastus-hajoama-keski),
      var(--maski-tyhja) var(--paljastus-hajoama-loppu)
    ),
    var(--auto-maski-kuva);
  -webkit-mask-composite: source-in;
  -webkit-mask-size: 100% 100%, cover;
  -webkit-mask-position:
    0 0,
    var(--auto-maski-kohdistus-x) var(--auto-maski-kohdistus-y);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-image:
    radial-gradient(
      circle calc(var(--paljastus-koko) / 2) at var(--paljastus-x) var(--paljastus-y),
      var(--maski-taysi) 0 var(--paljastus-ydin-loppu),
      var(--maski-pehmea) var(--paljastus-hajoama-alku),
      var(--valkoinen-heijastus) var(--paljastus-hajoama-keski),
      var(--maski-tyhja) var(--paljastus-hajoama-loppu)
    ),
    var(--auto-maski-kuva);
  mask-composite: intersect;
  mask-size: 100% 100%, cover;
  mask-position:
    0 0,
    var(--auto-maski-kohdistus-x) var(--auto-maski-kohdistus-y);
  mask-repeat: no-repeat, no-repeat;
}

.lapivalaisu--vana {
  --paljastus-x: var(--x-vana);
  --paljastus-y: var(--y-vana);
  --paljastus-koko: var(--vana-koko);
  --paljastus-ydin-loppu: var(--vana-ydin-loppu);
  --paljastus-hajoama-alku: var(--vana-hajoama-alku);
  --paljastus-hajoama-keski: var(--vana-hajoama-keski);
  --paljastus-hajoama-loppu: var(--vana-hajoama-loppu);
  z-index: 3;
  opacity: var(--vana-voimakkuus);
}

.lapivalaisu--karki {
  --paljastus-x: var(--x);
  --paljastus-y: var(--y);
  --paljastus-koko: var(--karki-koko);
  --paljastus-ydin-loppu: var(--karki-ydin-loppu);
  --paljastus-hajoama-alku: var(--karki-hajoama-alku);
  --paljastus-hajoama-keski: var(--karki-hajoama-keski);
  --paljastus-hajoama-loppu: var(--karki-hajoama-loppu);
  z-index: 4;
}

.lapivalaisu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 30% 24% at calc(var(--paljastus-x) - 4%) calc(var(--paljastus-y) - 7%),
      var(--valkoinen-heijastus),
      var(--pohja-lapinakyva) 100%
    ),
    radial-gradient(
      ellipse 38% 30% at calc(var(--paljastus-x) + 7%) calc(var(--paljastus-y) + 8%),
      var(--tumma-lasi),
      var(--pohja-lapinakyva) 100%
    );
  mix-blend-mode: soft-light;
  filter: blur(var(--optinen-sumeus));
  opacity: var(--lasi-sisakiilto-voimakkuus);
}

.lapivalaisu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--valkoinen-heijastus) 0,
    var(--pohja-lapinakyva) var(--rake-piste)
  );
  background-size: var(--rake-koko) var(--rake-koko);
  mix-blend-mode: overlay;
  opacity: var(--rake-voimakkuus);
}

.kaiverruskerros {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(
      circle calc(var(--karki-koko) / 2) at var(--x) var(--y),
      var(--maski-taysi) 0 var(--karki-ydin-loppu),
      var(--maski-pehmea) var(--karki-hajoama-keski),
      var(--maski-tyhja) var(--karki-hajoama-loppu)
    ),
    linear-gradient(
      to bottom,
      var(--maski-taysi) 0 64%,
      var(--maski-tyhja) 78%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(
      circle calc(var(--karki-koko) / 2) at var(--x) var(--y),
      var(--maski-taysi) 0 var(--karki-ydin-loppu),
      var(--maski-pehmea) var(--karki-hajoama-keski),
      var(--maski-tyhja) var(--karki-hajoama-loppu)
    ),
    linear-gradient(
      to bottom,
      var(--maski-taysi) 0 64%,
      var(--maski-tyhja) 78%
    );
  mask-composite: intersect;
}

.kaiverrus {
  position: absolute;
  z-index: 1;
  top: var(--kaiverrus-yla);
  left: var(--kaiverrus-vasen);
  width: var(--kaiverrus-leveys);
  height: auto;
  opacity: var(--kaiverrus-voimakkuus);
  mix-blend-mode: normal;
  transform: rotate(var(--kaiverrus-kaanto));
  transform-origin: center;
}

.loopi {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  width: var(--looppi-koko);
  height: var(--looppi-koko);
  /* Ei reunaviivaa eikä inset-varjoja: ne piirsivät terävän kehän pehmeän
     maskin päälle, ja juuri se luki leikattuna pallona. Jäljelle jää
     hyvin hento hehku joka häipyy olemattomiin ennen reunaa. */
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 58% 40% at 28% 24%,
      var(--valkoinen-heijastus) 0,
      var(--valkoinen-hento) 38%,
      var(--pohja-lapinakyva) 78%
    ),
    radial-gradient(
      ellipse 64% 46% at 74% 78%,
      var(--tumma-lasi) 0,
      var(--pohja-lapinakyva) 78%
    );
  box-shadow: none;
  filter: blur(var(--looppi-hohde-sumeus));
  opacity: var(--looppi-hehku-voimakkuus, 0.5);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  will-change: left, top, transform;
}


.loopi::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(
    circle,
    var(--valkoinen-heijastus) 0,
    var(--pohja-lapinakyva) var(--rake-piste)
  );
  background-size: var(--rake-koko) var(--rake-koko);
  -webkit-mask-image: radial-gradient(
    circle,
    var(--maski-pehmea) 0 28%,
    var(--auto-maski-pehmea) 58%,
    var(--maski-tyhja) 88%
  );
  mask-image: radial-gradient(
    circle,
    var(--maski-pehmea) 0 28%,
    var(--auto-maski-pehmea) 58%,
    var(--maski-tyhja) 88%
  );
  opacity: var(--rake-voimakkuus);
}

.loopi::after {
  content: none;
}


.loopi__sisareuna {
  display: none;
}

.naytto__vihje {
  position: absolute;
  z-index: 6;
  left: var(--tila-5);
  bottom: var(--tila-5);
  margin: 0;
  padding: var(--tila-2) var(--tila-3);
  border-left: calc(var(--raja-paksuus) * 2) solid var(--sininen);
  background: var(--pohja-puolikas);
  color: var(--sininen);
  font-family: var(--fontti-tekni);
  font-size: var(--koko-mikro);
  letter-spacing: var(--kirjainvali-mikro);
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(var(--tila-2));
  backdrop-filter: blur(var(--tila-2));
  transition: opacity var(--kesto-vihje) var(--easing-pehmea);
}

.naytto.on-tutkittu .lapivalaisu {
  opacity: var(--paljastus-aktiivinen);
}

.naytto.on-tutkittu .naytto__vihje {
  opacity: 0;
}

/* Typografinen kerros */

.kertoja {
  position: absolute;
  z-index: 6;
  inset: 0 var(--sivupehmuste);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) var(--tietorivi-korkeus);
  column-gap: var(--tila-5);
  pointer-events: none;
}

.kertoja a {
  pointer-events: auto;
}

.sisaltopino {
  grid-column: 1 / 8;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--pino-leveys);
  max-width: 100%;
  min-width: 0;
}

.silmakulma,
.merkkilappu {
  margin: 0;
  color: var(--sininen);
  font-family: var(--fontti-tekni);
  font-size: var(--koko-silmakulma);
  font-weight: var(--paino-ohut);
  letter-spacing: var(--kirjainvali-mikro);
  line-height: var(--rivi-tiivis);
  text-transform: uppercase;
}

.silmakulma {
  margin-top: var(--pino-vali);
}

.merkkilappu {
  display: inline-flex;
  align-items: center;
  gap: var(--tila-2);
  padding-left: var(--tila-3);
  border-left: calc(var(--raja-paksuus) * 2) solid var(--sininen);
  font-size: var(--koko-merkkilappu);
  font-weight: var(--paino-keskivahva);
  letter-spacing: calc(var(--kirjainvali-mikro) * 0.82);
}

.merkkilappu span {
  font-size: 0.58em;
  opacity: 0.7;
}

.otsikko {
  margin: var(--pino-otsikko-ylavali) 0 0;
  color: var(--sininen);
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-h1);
  font-weight: var(--paino-raskas);
  letter-spacing: var(--kirjainvali-otsikko);
  line-height: var(--rivi-otsikko);
  text-wrap: nowrap;
}

.otsikko__rivi {
  display: block;
  width: max-content;
  max-width: 100%;
  transform-origin: left center;
}

.ingressi {
  max-width: 40ch;
  margin: var(--pino-otsikko-alavali) 0 0;
  color: var(--muste-pehmea);
  font-size: var(--koko-ingressi);
  font-weight: var(--paino-ohut);
  line-height: var(--rivi-ingressi);
}

.ingressi__korostus {
  display: block;
  color: var(--sininen);
  font-weight: var(--paino-keskivahva);
}

.toimet {
  width: min(100%, var(--toiminto-leveys));
  min-width: 0;
  margin-top: var(--pino-toiminto-ylavali);
}

.nappi {
  text-decoration: none;
}

.nappi--ensi {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: calc(var(--tila-8) + var(--tila-2));
  display: flex;
  align-items: center;
  gap: var(--tila-3);
  padding: var(--tila-3) var(--tila-5) calc(var(--tila-3) + var(--cta-syvyys)) var(--tila-3);
  border: 0;
  background: var(--sininen);
  color: var(--pohja);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cta-leikkaus)) 0,
    100% var(--cta-leikkaus),
    100% 100%,
    0 100%
  );
  box-shadow: inset 0 0 0 var(--raja-paksuus) var(--tumma-reuna);
  filter: drop-shadow(0 var(--cta-varjo-y) var(--cta-varjo-sumeus) var(--tumma-varjo));
  transform: translate3d(0, 0, 0);
  transition:
    background var(--kesto-nopea) var(--easing-pehmea),
    transform var(--kesto-nopea) var(--easing-pehmea),
    filter var(--kesto-nopea) var(--easing-pehmea);
}

.nappi--ensi::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--raja-paksuus);
  right: calc(var(--cta-leikkaus) + var(--tila-1));
  left: var(--raja-paksuus);
  height: var(--raja-paksuus);
  background: var(--valkoinen-lasi);
  opacity: var(--cta-valoreuna-voimakkuus);
}

.nappi--ensi::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--cta-syvyys);
  background: var(--sininen-syva);
}

.nappi--ensi:hover {
  background: var(--sininen-kirkas);
  filter: drop-shadow(0 calc(var(--cta-varjo-y) + var(--raja-paksuus)) var(--cta-varjo-sumeus) var(--tumma-varjo));
  transform: translate3d(0, var(--cta-nosto), 0);
}

.nappi--ensi:active {
  background: var(--sininen-syva);
  filter: drop-shadow(0 var(--raja-paksuus) var(--tila-1) var(--tumma-varjo));
  transform: translate3d(0, var(--cta-painuma), 0);
}

.nappi--ensi:focus-visible {
  box-shadow: inset 0 0 0 var(--fokus-paksuus) var(--pohja);
}

.nappi__ikoni,
.nappi__teksti {
  position: relative;
  z-index: 1;
}

.nappi__ikoni {
  width: var(--cta-ikoni-koko);
  height: var(--cta-ikoni-koko);
  flex: none;
  display: grid;
  place-items: center;
  border: var(--raja-paksuus) solid var(--valkoinen-heijastus);
  border-top-color: var(--valkoinen-lasi);
  background: var(--valkoinen-hento);
  box-shadow: inset 0 calc(-1 * var(--cta-syvyys)) 0 var(--tumma-reuna);
}

.nappi__kuva {
  width: var(--cta-kuvake-koko);
  height: var(--cta-kuvake-koko);
}

.nappi__teksti {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tila-1);
  line-height: 1;
}

.nappi__verbi {
  color: var(--valkoinen-lasi);
  font-family: var(--fontti-tekni);
  font-size: var(--koko-mikro-matala);
  font-weight: var(--paino-ohut);
  letter-spacing: calc(var(--kirjainvali-mikro) * 0.7);
  text-transform: uppercase;
}

.nappi__numero {
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-numero);
  font-weight: var(--paino-raskas);
  letter-spacing: var(--kirjainvali-numero);
  white-space: nowrap;
}

.osoite {
  display: inline-flex;
  align-items: center;
  gap: var(--tila-2);
  text-decoration: underline;
  text-decoration-thickness: var(--raja-paksuus);
  text-underline-offset: 0.35em;
  text-decoration-color: var(--raja-keskivahva);
  min-height: var(--kosketus-minimi);
  margin-top: 0;
  padding-block: 0;
  color: var(--sinkki);
  font-size: var(--koko-osoite);
  font-weight: var(--paino-keskivahva);
  line-height: var(--rivi-tiivis);
  text-decoration: none;
  transition:
    color var(--kesto-nopea) var(--easing-pehmea),
    transform var(--kesto-nopea) var(--easing-pehmea);
}

/* Ei koristeviivaa osoitteen edessä: se luki ajatusviivana, ja vaikka se on
   CSS-elementti eikä merkki, se rikkoo saman säännön hengen. Osoite erottuu
   toissijaiseksi värillä ja koolla. */
.osoite::before {
  content: none;
}


.osoite:hover {
  color: var(--sininen);
  transform: translateX(var(--tila-1));
}

.osoite:hover::before {
  width: var(--tila-5);
  background: var(--sininen);
}

.faktat {
  grid-column: 1 / 11;
  grid-row: 2;
  align-self: center;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.faktat__eri {
  min-width: 0;
  padding-inline: var(--tila-5);
  border-left: var(--raja-paksuus) solid var(--raja-hento);
}

.faktat__eri:first-child {
  padding-left: 0;
  border-left: 0;
}

.faktat dt {
  margin-bottom: var(--tila-2);
  color: var(--sinkki);
  font-family: var(--fontti-tekni);
  font-size: var(--koko-mikro);
  font-weight: var(--paino-ohut);
  letter-spacing: calc(var(--kirjainvali-mikro) * 0.82);
  line-height: var(--rivi-tiivis);
  text-transform: uppercase;
}

.faktat dd {
  margin: 0;
  color: var(--sininen);
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-fakta);
  font-weight: var(--paino-keskivahva);
  line-height: var(--rivi-tiivis);
}

/* Alatunniste */

.alatunniste {
  width: 100%;
  min-width: 0;
  max-width: var(--leveys-sisalto);
  margin-inline: auto;
  padding: var(--tila-3) var(--sivupehmuste);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tila-2) var(--tila-5);
  border-top: var(--raja-paksuus) solid var(--raja-hento);
  color: var(--sinkki);
  font-size: var(--koko-footer-hiljainen);
  line-height: var(--rivi-tiivis);
}

.alatunniste p {
  margin: 0;
}

.alatunniste a {
  color: var(--sininen);
  text-decoration: none;
}

.alatunniste a:hover {
  text-decoration: underline;
  text-underline-offset: var(--tila-1);
}

.alatunniste__oikeus,
.alatunniste__ytunnus {
  white-space: nowrap;
}

.alatunniste__krediitti {
  color: var(--muste-pehmea);
  font-size: var(--koko-footer-krediitti);
  font-weight: var(--paino-keskivahva);
}

/* Krediittilinkkien kosketusala. Mitattu 390x844: linkit olivat 65x15 ja
   84x15 pikselia eli selvasti alle 44 pikselin suosituksen.
   Kosketusala kasvatetaan VAIN YLOSPAIN. Alaspain kasvattaminen tyonsi
   linkkilaatikon sivun alareunan yli (mitattu 820x1180: laatikko 44 px,
   pohja 1187 px, ikkuna 1180 px, eli 7 px vuoto), ja negatiivinen
   marginaali ei sita korjaa: se kumoaa asettelun muttei maalattua
   laatikkoa. Ylospain tilaa on alatunnisteen omassa valissa. */
.alatunniste__krediitti a {
  display: inline-block;
  padding-top: 1.9rem;
  margin-top: -1.9rem;
}

.alatunniste__kaiku {
  justify-self: end;
  color: var(--sininen);
  font-family: var(--fontti-tekni);
  letter-spacing: calc(var(--kirjainvali-mikro) * 0.45);
  white-space: nowrap;
  opacity: 0.72;
}

/* CSS-varakoreografia, jos GSAP ei lataudu */

.saapuu .naytto {
  animation: avaa-kuva var(--kesto-kuva) var(--easing-paljastus) both;
}

.saapuu .otsikko__rivi {
  animation: pyyhkaise-otsikko var(--kesto-otsikko) var(--easing-saapuu) both;
}

.saapuu .otsikko__rivi + .otsikko__rivi {
  animation-delay: var(--viive-rivi);
}

.saapuu .loopi {
  animation: tarkenna-linssi var(--kesto-linssi) var(--easing-saapuu) both;
}

.saapuu .nappi--ensi {
  animation: avaa-toiminto var(--kesto-toiminto) var(--easing-saapuu) both;
}

.saapuu .ingressi,
.saapuu .silmakulma,
.saapuu .merkkilappu,
.saapuu .faktat {
  animation: selkiytyy var(--kesto-teksti) var(--easing-pehmea) both;
}

@keyframes liuuta-kiilto {
  0%,
  12% {
    transform: translate3d(0, 0, 0);
  }

  88%,
  100% {
    transform: translate3d(var(--lasi-kiilto-matka), 0, 0);
  }
}

@keyframes avaa-kuva {
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 0);
  }
}

@keyframes pyyhkaise-otsikko {
  from {
    clip-path: inset(0 100% 0 0);
    transform: translateX(calc(-1 * var(--tila-5)));
  }
  to {
    clip-path: inset(0);
    transform: none;
  }
}

@keyframes tarkenna-linssi {
  from {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.72) rotate(-7deg);
  }
}

@keyframes avaa-toiminto {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes selkiytyy {
  from {
    opacity: 0;
  }
}

/* Tabletit ja puhelimet */

@media (max-width: 900px) {
  .ylatunniste {
    padding: var(--tila-3) var(--sivupehmuste-mobiili);
  }

  .merkki__kuva {
    width: var(--kosketus-minimi);
    height: var(--kosketus-minimi);
  }

  .merkki__nimi {
    font-size: var(--koko-merkki-mobiili);
  }

  .naytos {
    display: flex;
    flex-direction: column;
    padding-left: 0;
  }

  .naytos::after {
    display: none;
  }

  .naytto {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(12rem, 32svh, 18rem);
    min-height: 0;
    flex: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }

  .naytto__kuva {
    object-position: var(--kuva-kohdistus-x-mobiili) var(--kuva-kohdistus-y);
  }

  .lapivalaisu--karki {
    --paljastus-koko: var(--karki-koko-mobiili);
  }

  .lapivalaisu--vana {
    --paljastus-koko: var(--vana-koko-mobiili);
  }

  .loopi {
    width: var(--looppi-koko-mobiili);
    height: var(--looppi-koko-mobiili);
  }

  .naytto::before {
    background: linear-gradient(
      180deg,
      var(--pohja-lapinakyva) 58%,
      var(--pohja-puolikas) 100%
    );
  }

  .naytto__vihje {
    left: var(--sivupehmuste-mobiili);
    bottom: var(--tila-3);
  }

  .kertoja {
    position: static;
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--tila-3) var(--sivupehmuste-mobiili);
    pointer-events: auto;
  }

  .sisaltopino {
    flex: none;
    width: 100%;
    max-width: 46rem;
  }

  .silmakulma {
    position: static;
    margin-top: var(--pino-vali);
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .otsikko {
    align-self: auto;
    padding: 0;
    font-size: var(--koko-h1-mobiili);
    line-height: var(--rivi-otsikko-mobiili);
  }

  .toimet {
    align-self: auto;
    width: min(100%, var(--toiminto-leveys));
  }

  .nappi--ensi {
    min-height: calc(var(--tila-7) + var(--tila-2));
    padding: var(--tila-2) var(--tila-4) calc(var(--tila-2) + var(--cta-syvyys)) var(--tila-2);
  }

  .nappi__ikoni {
    width: var(--cta-ikoni-koko-mobiili);
    height: var(--cta-ikoni-koko-mobiili);
  }

  .nappi__numero {
    font-size: var(--koko-numero-mobiili);
  }

  .osoite {
    margin-top: var(--tila-2);
  }

  .merkkilappu {
    align-self: auto;
    margin: 0;
  }

  .ingressi {
    align-self: auto;
    max-width: 46ch;
    font-size: var(--koko-ingressi-mobiili);
  }

  .faktat {
    align-self: auto;
    width: 100%;
    grid-template-columns: 0.82fr 0.9fr 1.28fr;
    margin-top: auto;
    padding-top: var(--tila-3);
    border-top: var(--raja-paksuus) solid var(--raja-hento);
  }

  .faktat__eri {
    padding-inline: var(--tila-3);
  }

  .faktat dt {
    margin-bottom: var(--tila-1);
  }

  .faktat dd {
    font-size: var(--koko-fakta-mobiili);
  }

  .alatunniste {
    padding: var(--tila-2) var(--sivupehmuste-mobiili);
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: var(--tila-3);
  }

  .alatunniste__krediitti {
    grid-column: 1 / 3;
  }

  .alatunniste__kaiku {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 900px) and (max-height: 820px) {
  .naytto {
    height: clamp(11.5rem, 28svh, 14rem);
  }
}

@media (min-width: 600px) and (max-width: 900px) and (max-height: 820px) {
  .toimet {
    width: 100%;
    display: grid;
    grid-template-columns: var(--toiminto-leveys) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--tila-5);
  }
}

@media (min-width: 600px) and (max-width: 900px) and (min-height: 900px) {
  .naytto {
    height: var(--kuva-korkeus-tabletti);
    --looppi-koko-mobiili: var(--looppi-koko-tabletti);
    --karki-koko-mobiili: var(--karki-koko-tabletti);
    --vana-koko-mobiili: var(--vana-koko-tabletti);
  }

  .otsikko {
    font-size: var(--koko-h1-tabletti);
  }
}

@media (max-width: 520px) {
  .ylatunniste {
    gap: var(--tila-3);
  }

  .pilli {
    padding-left: var(--tila-2);
    font-size: var(--koko-mikro);
    letter-spacing: calc(var(--kirjainvali-mikro) * 0.25);
  }

  .faktat__eri {
    padding-inline: var(--tila-2);
  }

  .faktat dt {
    letter-spacing: calc(var(--kirjainvali-mikro) * 0.55);
  }

  .alatunniste {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    row-gap: var(--tila-1);
  }

  .alatunniste p {
    grid-column: 1;
    min-width: 0;
    max-width: 100%;
  }

  .alatunniste__krediitti {
    grid-column: 1;
  }

  .alatunniste__kaiku {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: none;
  }
}

@media (max-width: 380px) {
  .faktat {
    grid-template-columns: 0.78fr 0.86fr 1.36fr;
  }

  .faktat__eri {
    padding-inline: var(--tila-1);
  }
}

/* Lyhyet puhelimet ja matalat tabletit */

@media (max-width: 900px) and (max-height: 720px) {
  .ylatunniste {
    padding-block: var(--tila-2);
  }

  .naytto {
    height: 8.25rem;
  }

  .lapivalaisu--karki {
    --paljastus-koko: var(--karki-koko-matala);
  }

  .lapivalaisu--vana {
    --paljastus-koko: var(--vana-koko-matala);
  }

  .loopi {
    width: var(--looppi-koko-matala);
    height: var(--looppi-koko-matala);
  }

  .naytto__vihje {
    bottom: var(--tila-2);
    padding-block: var(--tila-1);
    font-size: var(--koko-mikro-matala);
  }

  .kertoja {
    padding-block: var(--tila-2);
  }

  .sisaltopino {
    --pino-vali: var(--tila-1);
    --pino-otsikko-ylavali: var(--tila-2);
    --pino-otsikko-alavali: var(--tila-2);
    --pino-toiminto-ylavali: var(--tila-2);
  }

  .otsikko {
    font-size: var(--koko-h1-mobiili-matala);
  }

  .nappi--ensi {
    min-height: var(--tila-7);
  }

  .osoite {
    margin-top: var(--tila-1);
    font-size: var(--koko-mikro);
  }

  .silmakulma,
  .merkkilappu,
  .faktat dt {
    font-size: var(--koko-mikro-matala);
  }

  .ingressi {
    font-size: var(--koko-ingressi-matala);
    line-height: calc(var(--rivi-ingressi) * 0.94);
  }

  .faktat {
    padding-top: var(--tila-2);
  }

  .faktat dd {
    font-size: var(--koko-fakta-mobiili);
  }

  .alatunniste {
    padding-block: var(--tila-1);
    font-size: var(--koko-footer-hiljainen);
  }
}

@media (max-width: 900px) and (max-height: 639px) {
  body {
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .kertoja {
    flex: none;
  }
}

/* Matalat työpöydät */

@media (min-width: 901px) and (max-height: 760px) {
  .ylatunniste {
    padding-block: var(--tila-3);
  }

  .naytos::after {
    bottom: var(--tietorivi-korkeus-matala);
  }

  .naytto {
    bottom: var(--tietorivi-korkeus-matala);
    height: auto;
  }

  .kertoja {
    grid-template-rows: minmax(0, 1fr) var(--tietorivi-korkeus-matala);
  }

  .sisaltopino {
    --pino-vali: var(--tila-1);
    --pino-otsikko-ylavali: var(--tila-2);
    --pino-otsikko-alavali: var(--tila-3);
    --pino-toiminto-ylavali: var(--tila-3);
  }

  .otsikko {
    padding-top: 0;
    font-size: var(--koko-h1-matala);
  }

  .ingressi {
    font-size: var(--koko-ingressi-matala);
  }

  .nappi--ensi {
    min-height: var(--tila-7);
  }

  .faktat dd {
    font-size: var(--koko-fakta-mobiili);
  }

  .alatunniste {
    padding-block: var(--tila-2);
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .kertoja {
    column-gap: var(--tila-3);
  }

  .ingressi {
    font-size: var(--koko-ingressi-matala);
  }

  .nappi--ensi {
    padding-inline: var(--tila-3);
  }

  .nappi__numero {
    font-size: var(--koko-numero-mobiili);
  }

  .faktat__eri {
    padding-inline: var(--tila-3);
  }

  .alatunniste {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .alatunniste__kaiku {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .naytto::after {
    animation: none;
    transform: translate3d(calc(var(--lasi-kiilto-matka) / 2), 0, 0);
    will-change: auto;
  }

  .loopi {
    will-change: auto;
  }

  .saapuu .naytto,
  .saapuu .otsikko__rivi,
  .saapuu .loopi,
  .saapuu .nappi--ensi,
  .saapuu .ingressi,
  .saapuu .silmakulma,
  .saapuu .merkkilappu,
  .saapuu .faktat {
    animation: none;
  }

  .ohita,
  .lapivalaisu,
  .nappi--ensi,
  .osoite,
  .osoite::before,
  .naytto__vihje {
    transition: none;
  }

  .nappi--ensi:hover,
  .nappi--ensi:active,
  .osoite:hover {
    transform: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}