/* ============================================
   ANIMATIONS & EFFECTS
   Extracted from source site (Studio.Design)
   Easing: cubic-bezier(0.4, 0.4, 0, 1)
   ============================================ */

/* --- Page Reveal (full-page entrance animation) --- */
/* Blue overlay covers entire viewport, slides left→right to reveal page */
.em-page-reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--em-blue);
  z-index: 9999;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 1s cubic-bezier(0.4, 0.4, 0, 1);
  pointer-events: none;
}

.em-page-reveal--hidden {
  transform: scaleX(0);
}

/* --- Scroll Animations (Fade Up) --- */

/* Base: invisible until IntersectionObserver triggers */
.em-animate {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0.4, 0, 1), transform 1s cubic-bezier(0.4, 0.4, 0, 1);
}

/* H2 section titles: translateY(48px), 1s */
.em-animate--up-lg {
  transform: translateY(48px);
}

/* H3 category titles: translateY(48px), 1s */
/* Uses same --up-lg class */

/* A/Link elements: translateY(24px), 0.8s */
.em-animate--up-sm {
  transform: translateY(24px);
  transition-duration: 0.8s;
}

/* P / DIV: opacity only (no transform), 1s */
/* Default .em-animate handles this */

/* Visible state */
.em-animate--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child elements */
.em-animate--delay-1 { transition-delay: 0.1s; }
.em-animate--delay-2 { transition-delay: 0.2s; }
.em-animate--delay-3 { transition-delay: 0.3s; }

/* --- Hover Effects --- */

/* H1: Nav links — scale + opacity */
.em-header__nav-link {
  transition: opacity 0.3s cubic-bezier(0.4, 0.4, 0, 1), transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-header__nav-link:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

/* H2: Footer CTA cards — children dim + icon shift */
.em-footer__cta-card {
  transition: all 0.8s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-footer__cta-card:hover .em-footer__cta-card-title,
.em-footer__cta-card:hover .em-footer__cta-card-text,
.em-footer__cta-card:hover .em-footer__cta-card-subtitle {
  opacity: 0.5;
}

.em-footer__cta-card:hover .material-icons {
  opacity: 0.5;
  transform: translateX(10px);
}

/* H3: CTA buttons — shadow dissolve + shift */
.em-cta-link,
.em-hero__cta,
.em-contact__btn,
.em-contact-cta__link,
.em-careers__cta,
.em-brands__back-link .em-cta-link {
  box-shadow: rgba(0, 0, 0, 0.2) 20px 20px 30px 0px;
  transition: box-shadow 0.6s cubic-bezier(0.4, 0.4, 0, 1), transform 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-cta-link:hover,
.em-hero__cta:hover,
.em-contact__btn:hover,
.em-contact-cta__link:hover,
.em-careers__cta:hover,
.em-brands__back-link .em-cta-link:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
  transform: translate(10px, 10px);
}

/* H4: "VIEW MORE" links — opacity + arrow shift */
.em-portfolio__viewmore,
.em-news__viewmore {
  transition: opacity 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-portfolio__viewmore:hover,
.em-news__viewmore:hover {
  opacity: 0.5;
}

.em-portfolio__viewmore .material-icons,
.em-news__viewmore .material-icons {
  transition: transform 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-portfolio__viewmore:hover .material-icons,
.em-news__viewmore:hover .material-icons {
  transform: translateX(6px);
}

/* H5: Portfolio cards — image shadow + card shift */
.em-portfolio__card-image {
  box-shadow: rgba(0, 0, 0, 0.1) 40px 50px 30px 0px;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-portfolio__card {
  transition: box-shadow 0.6s cubic-bezier(0.4, 0.4, 0, 1), transform 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-portfolio__card:hover {
  transform: translate(10px, 10px);
}

.em-portfolio__card:hover .em-portfolio__card-image {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;
}

/* H7: News category filter — bg + color transition */
.em-news-filter__btn {
  transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1),
              color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  border-radius: 80px;
}

.em-news-filter__btn:hover {
  background-color: var(--em-blue);
  color: var(--em-white);
}

/* H8: Footer nav links — opacity */
.em-footer__nav-link {
  transition: opacity 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-footer__nav-link:hover {
  opacity: 0.5;
}

/* H9: Archive/external links — opacity + arrow shift */
.em-news__archive-link {
  transition: opacity 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-news__archive-link:hover {
  opacity: 0.5;
}

.em-news__archive-link .material-icons {
  transition: transform 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-news__archive-link:hover .material-icons {
  transform: translateX(6px);
}

/* H10: Staff/team links — shadow dissolve + shift */
.em-team__link,
.em-staff-back__btn {
  box-shadow: rgba(0, 0, 0, 0.2) 20px 20px 30px 0px;
  transition: box-shadow 0.6s cubic-bezier(0.4, 0.4, 0, 1),
              transform 0.6s cubic-bezier(0.4, 0.4, 0, 1);
}

.em-team__link:hover,
.em-staff-back__btn:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
  transform: translate(10px, 10px);
}

/* --- Image Scale Zoom (source site pattern) --- */
/* Parent wrapper: overflow hidden, clips the zoom */
.em-animate-img {
  overflow: hidden;
}

/* Image element: scale(1) → scale(1.05) on appear */
.em-animate-img img {
  opacity: 0;
  transform: scale(1, 1);
  transition: opacity 1s cubic-bezier(0.4, 0.4, 0, 1), transform 3s cubic-bezier(0.4, 0.4, 0, 1);
}

/* Visible state: subtle zoom-in */
.em-animate-img--visible img {
  opacity: 1;
  transform: scale(1.05, 1.05);
}

/* --- Curtain Reveal (block reveal animation) --- */
/* Blue overlay slides left→right to reveal image beneath */
.em-curtain-reveal {
  position: relative;
}

.em-curtain-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--em-blue);
  transform: scaleX(1);
  transform-origin: right center;
  z-index: 2;
  transition: transform 1s cubic-bezier(0.4, 0.4, 0, 1) 0.5s;
}

.em-curtain-reveal--visible::after {
  transform: scaleX(0);
  pointer-events: none;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .em-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .em-animate--up-lg,
  .em-animate--up-sm {
    transform: none;
  }

  .em-animate-img img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .em-page-reveal {
    transition: none;
    transform: scaleX(0);
  }

  .em-curtain-reveal::after {
    transition: none;
    transform: scaleX(0);
  }

  .em-header__nav-link,
  .em-footer__cta-card,
  .em-cta-link,
  .em-hero__cta,
  .em-contact__btn,
  .em-contact-cta__link,
  .em-careers__cta,
  .em-portfolio__viewmore,
  .em-news__viewmore,
  .em-portfolio__card,
  .em-portfolio__card-image,
  .em-news__card,
  .em-news-filter__btn,
  .em-footer__nav-link,
  .em-news__archive-link,
  .em-team__link,
  .em-staff-back__btn,
  .em-brands__back-link .em-cta-link,
  .em-footer__social-link,
  .em-en-about__cta {
    transition: none;
  }

  .em-footer__cta-card .material-icons,
  .em-portfolio__viewmore .material-icons,
  .em-news__viewmore .material-icons,
  .em-news__archive-link .material-icons,
  .em-en-about__cta .material-icons {
    transition: none;
  }

  .em-brands__card-image a img,
  .em-en-brands__logo a img {
    transition: none;
  }

  .em-header__dropdown-link:hover {
    animation: none;
  }

  .em-news__card:hover .em-news__card-image img {
    transform: none;
  }
}