/* ==========================================================================
   interactions.css — Webflow IX2 -animaatioiden korvaajat
   --------------------------------------------------------------------------
   Käsin kirjoitettu. Korvaa exportin poistetut osat:
     - index.html:n <style>-lohko (IX2:n alkutilat data-w-id-valitsimilla)
     - .btn-bg / .btn-icon-arrow -elementtien inline-transformit
     - .layout422_hover-content -embedin duplikoitu <style>
   Lähde: ix2-config.json (actionListit a-27…a-37) ja mittaukset alkuperäisestä
   renderöinnistä. Aikojen ja easingien vastineet:
     ease        cubic-bezier(.25, .1, .25, 1)      (= CSS ease)
     outQuart    cubic-bezier(.165, .84, .44, 1)
     inOutCubic  cubic-bezier(.645, .045, .355, 1)
     inOutExpo   cubic-bezier(1, 0, 0, 1)
     inOutQuint  cubic-bezier(.86, 0, .07, 1)
   ========================================================================== */

:root {
  --ix-ease: cubic-bezier(.25, .1, .25, 1);
  --ix-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ix-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ix-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ix-in-out-quint: cubic-bezier(.86, 0, .07, 1);
}

/* --------------------------------------------------------------------------
   a-36 / a-37 — "c11 / Button / Hover In|Out"  (.button-7.c-11)
   Taustaliuku -100 % → -1 % (400 ms inOutCubic) ja molemmat nuolet
   0 → 100 % (500 ms inOutExpo). Alkuperäisessä IX2 osoitti erikseen myös
   .btn-icon-arrow.hover-nuoleen, mutta laajempi .btn-icon-arrow-sääntö ajoi
   sen yli — mitattu käyttäytyminen on että molemmat nuolet liikkuvat yhdessä,
   jolloin .hover-nuoli (left:-100 %) tulee näkyviin ja tavallinen liukuu ulos.
   .hover-nuolen lepotila on IX2:n alkuarvo -16 %; alkuperäisessä se jää
   hoverin jälkeen arvoon 0 (yliajon sivuvaikutus), tässä se palaa -16 %:iin.
   Kumpikin on kääreen (overflow:hidden) ulkopuolella.
   -------------------------------------------------------------------------- */
.btn-bg.c-10 {
  transform: translate3d(-100%, 0, 0);
  transform-style: preserve-3d;
  transition: transform .4s var(--ix-in-out-cubic);
}

.button-7:hover .btn-bg.c-10,
.button-7:focus-visible .btn-bg.c-10 {
  transform: translate3d(-1%, 0, 0);
}

.btn-icon-arrow {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ix-in-out-expo);
}

.btn-icon-arrow.hover {
  transform: translate3d(-16%, 0, 0);
}

.button-7:hover .btn-icon-arrow,
.button-7:focus-visible .btn-icon-arrow {
  transform: translate3d(100%, 0, 0);
}

/* --------------------------------------------------------------------------
   a-33 / a-34 — "Layout 422 Card [Hover In|Out]"  (vain ≥992 px)
   Kortti 50 % → 70 % , overlay rgba(0,0,0,.5) → .7 , sisältöosa
   opacity 0→1 / translateY(100 %)→0 / height 0→auto.
   Sisään 300 ms outQuart, ulos 200 ms outQuart (overlay ease).
   Luonnollinen korkeus mitataan main.js:ssä muuttujaan --l422-bottom-h.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .layout422_card {
    transition: width .2s var(--ix-out-quart);
  }

  .layout422_card:hover {
    width: 70%;
    transition-duration: .3s;
  }

  .layout422_overlay {
    background-color: rgba(0, 0, 0, .5);
    transition: background-color .2s var(--ix-ease);
  }

  .layout422_card:hover .layout422_overlay {
    background-color: rgba(0, 0, 0, .7);
    transition-duration: .3s;
  }

  .layout422_card-content-bottom {
    opacity: 0;
    height: 0;
    transform: translate3d(0, 100%, 0);
    transform-style: preserve-3d;
    transition: opacity .2s var(--ix-out-quart),
                height .2s var(--ix-out-quart),
                transform .2s var(--ix-out-quart);
  }

  .layout422_card:hover .layout422_card-content-bottom {
    opacity: 1;
    height: var(--l422-bottom-h, auto);
    transform: translate3d(0, 0, 0);
    transition-duration: .3s;
  }
}

/* Korvaa poistetun jQuery-embedin duplikoidun <style>-lohkon. Exportissa nämä
   säännöt olivat mediakyselyn ulkopuolella, joten myös tässä. */
.layout422_card-content {
  opacity: 1;
  transition: opacity .3s;
}

.layout422_card-content.inactive {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   a-27 / a-28 — "Navbar 2 menu [Open|Close]"  (400 ms inOutQuint)
   -------------------------------------------------------------------------- */
.menu-icon2_line-top,
.menu-icon2_line-bottom,
.menu-icon2_line-middle {
  transform-style: preserve-3d;
  transition: transform .4s var(--ix-in-out-quint),
              opacity .4s var(--ix-in-out-quint);
}

.navbar2_menu-button.w--open .menu-icon2_line-top {
  transform: translate3d(0, 8px, 0) rotateZ(45deg);
}

.navbar2_menu-button.w--open .menu-icon2_line-bottom {
  transform: translate3d(0, -8px, 0) rotateZ(-45deg);
}

.navbar2_menu-button.w--open .menu-icon2_line-middle {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   a-29 … a-32 — "Navbar 2 dropdown [Open|Close]"
   Chevron kääntyy 180° (300 ms ease) molemmilla leveyksillä.
   Työpöydällä lista liukuu 3rem → 0 ja häivähtää sisään; tabletissa/mobiilissa
   listan korkeus animoituu 0 ↔ auto (main.js asettaa px-arvon).
   `.is-open` lisätään vasta reflow'n jälkeen, jotta siirtymä lähtee käyntiin.
   -------------------------------------------------------------------------- */
.navbar2_dropdwn-toggle .dropdown-chevron {
  transform-style: preserve-3d;
  transition: transform .3s var(--ix-ease);
}

.navbar2_dropdwn-toggle.w--open .dropdown-chevron {
  transform: rotateZ(180deg);
}

/* Siirtymä on voimassa vain animaation ajan (.is-animating). Jos se jää
   elementille pysyvästi, Chromium pitää sen omalla komposiittikerroksella ja
   tekstin antialiasointi muuttuu — juuri se erotti tämän alkuperäisestä. */
@media screen and (min-width: 992px) {
  .navbar2_dropdown-list {
    opacity: 0;
    transform: translate3d(0, 3rem, 0);
    transform-style: preserve-3d;
  }

  .navbar2_dropdown-list.is-animating {
    transition: transform .3s var(--ix-ease), opacity .2s var(--ix-ease);
  }

  .navbar2_dropdown-list.w--open.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media screen and (max-width: 991px) {
  .navbar2_dropdown-list {
    height: 0;
  }

  .navbar2_dropdown-list.is-animating {
    transition: height .2s var(--ix-ease);
  }

  .navbar2_dropdown-list.is-animating.is-open {
    transition-duration: .3s;
  }
}

/* --------------------------------------------------------------------------
   Navbar-valikon liuku (webflow.js:n navbar-moduuli, data-animation="default",
   data-duration="400"). main.js siirtää valikon .w-nav-overlayn sisään ja
   asettaa siirtymän tähän luokkaan tukeutuen.
   -------------------------------------------------------------------------- */
.w-nav-overlay [data-nav-menu-open].is-sliding {
  transition: transform .4s var(--ix-ease);
}

/* --------------------------------------------------------------------------
   a-2 / a-4 — "Preferences Checkbox [CHECK|UNCHECK]"
   Evästeasetusten liukukytkin. Alkuperäinen IX2 kuunteli klikkauksia; CSS:n
   :checked seuraa myös fs-cc:n ohjelmallisia muutoksia, joten se on tarkempi.
   -------------------------------------------------------------------------- */
.fs-cc-prefs_toggle {
  transform-style: preserve-3d;
  transition: transform .25s var(--ix-ease);
}

.fs-cc-prefs_checkbox-field {
  transition: background-color .2s var(--ix-ease);
}

.fs-cc-prefs_checkbox:checked ~ .fs-cc-prefs_toggle {
  transform: translate3d(20px, 0, 0);
}

.fs-cc-prefs_checkbox-field:has(.fs-cc-prefs_checkbox:checked) {
  background-color: rgb(67, 83, 255);
}

/* --------------------------------------------------------------------------
   a-35 / a-38 … a-41 — "Background Parallax": .div-background liikkuu
   0 → −20vh sen mukaan, miten .section-wrapper kulkee näkymän läpi.
   Siirtymän hoitaa main.js (rAF), tässä vain will-change-vihje.
   -------------------------------------------------------------------------- */
/* IX2 asetti nämä itse inline-tyyleinä jatkuvan animaation ajaksi; main.js
   tekee saman, joten CSS:ssä ei tarvita mitään. Reduced motion kuitenkin
   nollaa siirtymän. */

@media (prefers-reduced-motion: reduce) {
  .div-background {
    transform: none !important;
    will-change: auto;
  }
}