/*
  Matglad motion layer
  Keskitetty scroll reveal + hillitty hover-liike. Sisalto pysyy nakyvissa,
  jos JS ei kaynnisty tai kayttaja suosii vahennettya liiketta.
*/

:root {
  --mg-motion-duration: 620ms;
  --mg-motion-media-duration: 760ms;
  --mg-motion-ease: cubic-bezier(.22, .61, .36, 1);
  --mg-motion-y: 18px;
  --mg-motion-media-y: 24px;
  --mg-hover-duration: 280ms;
  --mg-hover-shadow: 0 18px 38px rgba(var(--thm-black-bg-rgb, 22, 46, 77), .10);
}

html.mg-motion-ready:not(.mg-reduced-motion) body:not(.scomediting) .mg-reveal {
  opacity: 0;
  transform: translate3d(0, var(--mg-reveal-y, var(--mg-motion-y)), 0);
  transition:
    opacity var(--mg-reveal-duration, var(--mg-motion-duration)) var(--mg-motion-ease),
    transform var(--mg-reveal-duration, var(--mg-motion-duration)) var(--mg-motion-ease);
  transition-delay: var(--mg-reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.mg-motion-ready:not(.mg-reduced-motion) body:not(.scomediting) .mg-reveal-media {
  --mg-reveal-y: var(--mg-motion-media-y);
  --mg-reveal-duration: var(--mg-motion-media-duration);
}

html.mg-motion-ready:not(.mg-reduced-motion) body:not(.scomediting) .mg-reveal-strong {
  --mg-reveal-y: 22px;
  --mg-reveal-duration: 700ms;
}

html.mg-motion-ready:not(.mg-reduced-motion) body:not(.scomediting) .mg-reveal.mg-is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

body.scomediting .mg-reveal,
html.mg-reduced-motion .mg-reveal,
html:not(.mg-motion-ready) .mg-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body:not(.scomediting) .mg-motion-hover {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--mg-hover-duration) ease,
    box-shadow var(--mg-hover-duration) ease;
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.scomediting) .mg-motion-hover:hover,
  body:not(.scomediting) .mg-motion-hover:focus-within {
    transform: translate3d(0, -4px, 0) scale(1.006);
    box-shadow: var(--mg-hover-shadow);
  }

  body:not(.scomediting) .mg-motion-button {
    transition:
      transform 220ms ease,
      box-shadow 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      color 220ms ease;
  }

  body:not(.scomediting) .mg-motion-button:hover,
  body:not(.scomediting) .mg-motion-button:focus-visible {
    transform: translate3d(0, -2px, 0);
  }
}

.accordion-box .block,
.accordion-box .accordion,
.accordion-box-style1 .accordion {
  transition: transform var(--mg-hover-duration) ease, box-shadow var(--mg-hover-duration) ease;
}

.accordion-box .acc-btn,
.accordion-box-style1 .accord-btn {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.accordion-box .acc-btn::before,
.accordion-box-style1 .accord-btn::after,
.accordion-box-style1 .accord-btn .left::before {
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.accordion-box .acc-btn.active::before,
.accordion-box-style1 .accord-btn.active::after {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  :root {
    --mg-motion-duration: 460ms;
    --mg-motion-media-duration: 560ms;
    --mg-motion-y: 10px;
    --mg-motion-media-y: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .mg-reveal,
  .mg-reveal-media,
  .mg-reveal-strong,
  .mg-motion-hover,
  .mg-motion-button {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}