/* ============================================================
   AI Koutsi — efektikerros, testiversio 2026-06-10
   Efektit 1–4: count-up-numerot, marker-pyyhkäisy,
   korttien hover-nosto, nappien mikroliike.
   Brändi: cream #FDF6E3, energy-yellow #F5B041, navy #1E3A5F
   ============================================================ */

/* --- 2. Marker-pyyhkäisy: keltainen korostus piirtyy vasemmalta ---
   Ilman JS:ää (ei html.fx-ready) tausta on normaalisti 100 % näkyvissä,
   joten korostus ei koskaan katoa vaikka skripti ei latautuisi. */
.arkeen-block {
  background: linear-gradient(#F5B041, #F5B041) no-repeat left center / 100% 100%;
}
html.fx-ready .arkeen-block {
  background-size: 0% 100%;
  transition: background-size 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
html.fx-ready .arkeen-block.fx-marker-on {
  background-size: 100% 100%;
}

/* --- 3. Korttien hover-nosto --- */
.v3-stair,
.ti-product-card,
.ti-team-card,
.v3-faq-card {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-stair:hover,
.v3-stair:focus-within,
.ti-product-card:hover,
.ti-product-card:focus-within,
.ti-team-card:hover,
.ti-team-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(30, 58, 95, 0.13);
}
/* Numerobadge syttyy keltaiseksi kortin hoverissa */
.v3-stair:hover .v3-stair-num,
.v3-stair:focus-within .v3-stair-num {
  color: #F5B041;
  transition: color 0.22s ease;
}

/* --- 4. Nappien mikroliike --- */
.cta, .cta-secondary, .site-nav-cta, .v3-stair-cta,
.ti-hero-services-link, .cta-band-cta {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:active, .cta-secondary:active, .site-nav-cta:active,
.v3-stair-cta:active, .cta-band-cta:active {
  transform: translateY(1px);
}
/* Nuoli liukuu oikealle hoverissa (JS käärii nuolen span.fx-arrow:iin) */
.fx-arrow {
  display: inline-block;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
a:hover .fx-arrow, button:hover .fx-arrow {
  transform: translateX(4px);
}

/* --- 1. Count-up: estä rivinvaihtohyppy animaation aikana --- */
.fx-countup {
  font-variant-numeric: tabular-nums;
}

/* --- Saavutettavuus: liike pois jos käyttäjä on sen kieltänyt --- */
@media (prefers-reduced-motion: reduce) {
  .arkeen-block,
  html.fx-ready .arkeen-block,
  html.fx-ready .arkeen-block.fx-marker-on {
    background: #F5B041;
    background-size: 100% 100%;
    transition: none;
  }
  .v3-stair, .ti-product-card, .ti-team-card, .v3-faq-card,
  .cta, .cta-secondary, .site-nav-cta, .v3-stair-cta,
  .ti-hero-services-link, .cta-band-cta, .fx-arrow {
    transition: none;
  }
  .v3-stair:hover, .ti-product-card:hover, .ti-team-card:hover {
    transform: none;
  }
}