/*
 * Lightweight motion layer.
 * Remove this stylesheet from inc/enqueue.php to disable visual animation.
 */

:root {
  --motion-duration: 560ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveal content only after JavaScript confirms animation support. */
.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-reveal.motion-fade-in {
  transform: none;
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Homepage About image reveal and staggered overlay panel. */
.motion-ready .home-about-image-reveal.motion-reveal {
  transform: scale(1.035);
  transform-origin: center;
  transition-duration: 760ms;
}

.motion-ready .home-about-image-reveal.motion-reveal.is-visible {
  transform: scale(1);
}

/* Buttons and text links. */
a,
button,
input[type="submit"],
input[type="button"] {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease,
    opacity 220ms ease, transform 220ms var(--motion-ease);
}

a[class*="bg-"],
button[class*="bg-"],
input[type="submit"],
input[type="button"] {
  transform: translateZ(0);
}

a[class*="bg-"]:hover,
button[class*="bg-"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translate3d(0, -2px, 0) scale(1.015);
}

a:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: scale(0.985);
}

/* Card shadow fades through a pseudo-element; the card itself only transforms. */
.motion-card {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 300ms var(--motion-ease), border-color 220ms ease;
}

.motion-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 16px 38px rgba(0, 45, 98, 0.16);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.motion-card:hover {
  transform: translate3d(0, -5px, 0) scale(1.008);
  border-color: var(--secondary-color, #e1007a);
}

.motion-card:hover::after {
  opacity: 1;
}

main a:not([class*="bg-"]):hover {
  color: var(--secondary-color, #e1007a);
}

/* Sticky header shrink state is added by animations.js. */
#site-header,
#site-header .header-top,
#site-header .header-main,
#site-header .custom-logo-link img,
#site-header .header-main > div:first-child img {
  transition: opacity 280ms ease, transform 280ms var(--motion-ease),
    max-height 280ms var(--motion-ease), height 280ms var(--motion-ease),
    padding 280ms var(--motion-ease), box-shadow 280ms ease, background-color 280ms ease;
}

#site-header.header-scrolled .custom-logo-link img,
#site-header.header-scrolled .header-main > div:first-child img {
  transform: scale(0.9);
  transform-origin: left center;
}

/* Mobile drawer and backdrop remain mounted so close animations can finish. */
#mobile-menu-backdrop {
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

#mobile-menu-backdrop.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#mobile-menu {
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: transform 340ms var(--motion-ease), opacity 240ms ease, visibility 340ms ease;
  will-change: transform;
}

#mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-ready .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-card:hover,
  a[class*="bg-"]:hover,
  button[class*="bg-"]:hover {
    transform: none !important;
  }
}