/* -------------------------------------------------------
/* =======================================================
   ALETTA SCROLL REVEAL + ABOUT HOVER EFFECTS
   Add at the end of Customized Additional CSS
======================================================= */

/* -------------------------------------------------------
   Scroll reveal
   Elements remain visible if JavaScript is unavailable.
------------------------------------------------------- */

html.aletta-motion-ready .aletta-reveal {
  --aletta-reveal-delay: 0ms;
  opacity: 0;
  translate: 0 28px;
  will-change: opacity, translate;
}

html.aletta-motion-ready .aletta-reveal.is-visible {
  animation: aletta-reveal-in 0.72s cubic-bezier(0.22, 1, 0.36, 1)
    var(--aletta-reveal-delay) both;
}

@keyframes aletta-reveal-in {
  from {
    opacity: 0;
    translate: 0 28px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* -------------------------------------------------------
   About and owner-image hover effects
   Desktop/laptop devices only
------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .aletta-about__image img,
  .aletta-about-page-hero__image img {
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s ease,
      filter 0.4s ease;
    transform-origin: center;
  }

  .aletta-about__image:hover img,
  .aletta-about-page-hero__image:hover img {
    transform: translateY(-5px) scale(1.015);
    filter: saturate(1.025) contrast(1.015);
    box-shadow: 0 34px 85px rgba(23, 55, 47, 0.18);
  }

  .aletta-about__highlights > div,
  .aletta-about-story__side > div,
  .aletta-about-expertise__grid > div {
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s ease,
      border-color 0.3s ease,
      background-color 0.3s ease;
  }

  .aletta-about__highlights > div:hover,
  .aletta-about-story__side > div:hover,
  .aletta-about-expertise__grid > div:hover {
    transform: translateY(-5px);
    border-color: rgba(95, 127, 111, 0.22);
    box-shadow: 0 24px 62px rgba(23, 55, 47, 0.13);
  }

  .aletta-about-expertise__grid > div span {
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.3s ease,
      color 0.3s ease;
  }

  .aletta-about-expertise__grid > div:hover span {
    transform: translateY(-2px) scale(1.06);
    background: #d5e7de;
    color: #17372f;
  }

}

/* Slightly shorter motion on phones and tablets */

@media (max-width: 700px) {
  html.aletta-motion-ready .aletta-reveal {
    translate: 0 20px;
  }

  html.aletta-motion-ready .aletta-reveal.is-visible {
    animation-duration: 0.6s;
  }

  @keyframes aletta-reveal-in {
    from {
      opacity: 0;
      translate: 0 20px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* Accessibility: disable movement when requested by the device */

@media (prefers-reduced-motion: reduce) {
  html.aletta-motion-ready .aletta-reveal,
  html.aletta-motion-ready .aletta-reveal.is-visible {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }

  .aletta-about__image img,
  .aletta-about-page-hero__image img,
  .aletta-about__highlights > div,
  .aletta-about-story__side > div,
  .aletta-about-expertise__grid > div,
  .aletta-about-expertise__grid > div span {
    transition: none !important;
  }
}