/* Liike. Periaatteet: sisääntulo vain kerran, lyhyt nousu ja häivytys, vain opacity ja transform.
   Sisältö on näkyvissä ilman JavaScriptiä: piilotus koskee vain tilaa html.mt-motion, jonka head-skripti asettaa
   (ei vähennetyn liikkeen tilassa) ja poistaa, jos site.js ei käynnisty. Ehdotelma: clients/mediatrade/design/motion/. */

/* 1 Hero asettuu (sivun ensimmäinen hero, ei odota skriptiä) */
@keyframes mt-rise{from{opacity:0;transform:translateY(var(--mt-rise))}}
@keyframes mt-settle{from{transform:scale(1.06)}}
.mt-motion .mt-hero__copy>*{animation:mt-rise var(--mt-dur-3) var(--mt-ease-out) both}
.mt-motion .mt-hero__copy>:nth-child(2){animation-delay:var(--mt-stagger)}
.mt-motion .mt-hero__copy>:nth-child(3){animation-delay:calc(var(--mt-stagger)*2)}
.mt-motion .mt-hero__copy>:nth-child(n+4){animation-delay:calc(var(--mt-stagger)*3)}
.mt-motion .mt-hero :is(.mt-hero__bg,.mt-hero__media) img{animation:mt-settle var(--mt-dur-4) var(--mt-ease-out) both}

/* 2 Osio tulee näkyviin: ryhmät nousevat, listan kohdat porrastetaan (enintään neljä porrasta) */
.mt-motion .mt-section .mt-wrap>:not([class*="__list"]),.mt-motion .mt-section [class*="__list"]>:not(.mt-card){transition:opacity var(--mt-dur-3) var(--mt-ease-out),transform var(--mt-dur-3) var(--mt-ease-out)}
.mt-motion .mt-section:not(.is-in) .mt-wrap>:not([class*="__list"]),.mt-motion .mt-section:not(.is-in) [class*="__list"]>:not(.mt-card){opacity:0;transform:translateY(var(--mt-rise))}
.mt-motion .mt-section .mt-wrap>:nth-child(2),.mt-motion .mt-section [class*="__list"]>:nth-child(2){transition-delay:var(--mt-stagger)}
.mt-motion .mt-section .mt-wrap>:nth-child(3),.mt-motion .mt-section [class*="__list"]>:nth-child(3){transition-delay:calc(var(--mt-stagger)*2)}
.mt-motion .mt-section .mt-wrap>:nth-child(n+4),.mt-motion .mt-section [class*="__list"]>:nth-child(n+4){transition-delay:calc(var(--mt-stagger)*3)}

/* 3 Kuvalaatat ja kortit: kuva suurenee hieman */
.mt-svc--tiles .mt-svc__image img,.mt-svc--media .mt-svc__image img,.mt-ref__media img,.mt-post__media img{transition:transform var(--mt-dur-3) var(--mt-ease-out)}
.mt-svc:is(:hover,:focus-within) .mt-svc__image img,.mt-ref:is(:hover,:focus-within) .mt-ref__media img,.mt-post:is(:hover,:focus-within) .mt-post__media img{transform:scale(1.04)}

/* 4 Prosessin numerot täyttyvät järjestyksessä */
.mt-motion .mt-steps__item::before{transition:background-color var(--mt-dur-2),color var(--mt-dur-2),border-color var(--mt-dur-2)}
.mt-motion .mt-section:not(.is-in) .mt-steps__item::before{background:var(--mt-white);color:var(--mt-muted)}
.mt-motion .mt-steps__item:nth-child(2)::before{transition-delay:300ms}
.mt-motion .mt-steps__item:nth-child(3)::before{transition-delay:600ms}
.mt-motion .mt-steps__item:nth-child(n+4)::before{transition-delay:900ms}

/* 6 Nuolilinkit ja painikkeet: nuoli liikahtaa */
:is(.mt-btn,.mt-link-arrow,.mt-services__more,.mt-svc__more) .mt-icon{transition:transform var(--mt-dur-1) var(--mt-ease-out)}
:is(.mt-btn,.mt-link-arrow,.mt-services__more):hover .mt-icon,.mt-svc:hover .mt-svc__more .mt-icon{transform:translateX(.1875rem)}

/* 6 Paneelit: haku ja valikot laskeutuvat ja häivittyvät (display-siirtymä, tukemattomassa selaimessa vaihtuu heti) */
.mt-finder__panel{transition:opacity var(--mt-dur-2) var(--mt-ease-out),transform var(--mt-dur-2) var(--mt-ease-out)}
.mt-finder__scrim{transition:opacity var(--mt-dur-2) var(--mt-ease-out)}
@starting-style{.mt-finder.is-open .mt-finder__panel{opacity:0;transform:translateY(-.5rem)}.mt-finder.is-open .mt-finder__scrim{opacity:0}}
.mt-header__panel,.mt-nav__sub{transition:opacity var(--mt-dur-2) var(--mt-ease-out),transform var(--mt-dur-2) var(--mt-ease-out),display var(--mt-dur-2) allow-discrete}
@starting-style{.mt-header__toggle[aria-expanded=true]+.mt-header__panel,.mt-nav__link[aria-expanded=true]+.mt-nav__sub{opacity:0;transform:translateY(-.375rem)}}
/* Megavalikot työpöytänäkymässä: sivusto 77 rem:stä, kauppa 68 rem:stä (samat rajat kuin valikoiden asettelussa). */
@media (min-width:77rem){
  .mt-megamenu{transition:opacity var(--mt-dur-1) var(--mt-ease-out),transform var(--mt-dur-1) var(--mt-ease-out),display var(--mt-dur-1) allow-discrete;opacity:0;transform:translateY(-.5rem)}
  .mt-nav__link[aria-expanded=true]+.mt-megamenu{opacity:1;transform:none;transition-duration:var(--mt-dur-2)}
  @starting-style{.mt-nav__link[aria-expanded=true]+.mt-megamenu{opacity:0;transform:translateY(-.5rem)}}
}
@media (min-width:68rem){
  .mt-mega{transition:opacity var(--mt-dur-1) var(--mt-ease-out),transform var(--mt-dur-1) var(--mt-ease-out),display var(--mt-dur-1) allow-discrete;opacity:0;transform:translateY(-.5rem)}
  .mt-rail__toggle[aria-expanded=true]+.mt-mega{opacity:1;transform:none;transition-duration:var(--mt-dur-2)}
  @starting-style{.mt-rail__toggle[aria-expanded=true]+.mt-mega{opacity:0;transform:translateY(-.5rem)}}
}
.mt-rail__icon{transition:background-color var(--mt-dur-1),color var(--mt-dur-1)}

/* 7 Tuotekortti: kuva suurenee, listaus itse ei animoidu sisään */
.mt-card__media img{transition:transform var(--mt-dur-3) var(--mt-ease-out)}
.mt-card:is(:hover,:focus-within) .mt-card__media img{transform:scale(1.05)}

/* 8 Lisää koriin: laskuri ponnahtaa kerran, ilmoitus liukuu paikalleen */
@keyframes mt-bump{35%{transform:scale(1.35)}}
@keyframes mt-slide-in{from{opacity:0;transform:translateX(-.5rem)}}
.mt-motion [data-mt-cart-count].is-bump,.mt-motion .wc-block-mini-cart__badge.is-bump{animation:mt-bump 420ms var(--mt-ease-out)}
.mt-motion .mt-cart-status:not(:empty){animation:mt-slide-in var(--mt-dur-2) var(--mt-ease-out)}

/* 9 Suodatus ja sivutus: vanha listaus himmenee, uusi tulee sisään nopealla porrastuksella (8 ensimmäistä) */
[data-mt-swap=listing]{transition:opacity var(--mt-dur-1)}
[data-mt-swap=listing][aria-busy=true]{opacity:.4}
@keyframes mt-fresh{from{opacity:0;transform:translateY(.5rem)}}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card{animation:mt-fresh var(--mt-dur-3) var(--mt-ease-out) both}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(2){animation-delay:35ms}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(3){animation-delay:70ms}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(4){animation-delay:105ms}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(5){animation-delay:140ms}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(6){animation-delay:175ms}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(7){animation-delay:210ms}
.mt-motion [data-mt-swap=listing].is-fresh .mt-card:nth-child(n+8){animation-delay:245ms}

/* 10 Haitarit avautuvat korkeuteensa (details, tukemattomassa selaimessa avautuu heti) */
@supports (interpolate-size:allow-keywords){
  :is(.mt-acc__item,.mt-faq__item,.pdp-offer)::details-content{block-size:0;overflow:hidden;transition:block-size var(--mt-dur-2) var(--mt-ease-in-out),content-visibility var(--mt-dur-2) allow-discrete;interpolate-size:allow-keywords}
  :is(.mt-acc__item,.mt-faq__item,.pdp-offer)[open]::details-content{block-size:auto}
}

/* 11 Galleria: uusi kuva häivittyy sisään */
@keyframes mt-fade{from{opacity:0;transform:scale(.98)}}
.mt-motion .mt-gallery__fig.is-swapped img{animation:mt-fade var(--mt-dur-2) var(--mt-ease-out)}

/* Vähennetty liike: ei sisääntuloja eikä animaatioita (siirtymät nollaa foundation.css) */
@media (prefers-reduced-motion:reduce){
  :root{--mt-dur-1:1ms;--mt-dur-2:1ms;--mt-dur-3:1ms;--mt-dur-4:1ms;--mt-rise:0rem;--mt-stagger:0ms}
  .mt-v2 *,.mt-v2 *::before,.mt-v2 *::after{animation:none!important}
  .mt-v2 :is(.mt-svc,.mt-ref,.mt-post,.mt-card) img{transform:none!important}
}