/* ==========================================================================
   Entry animations & transitions (shared by every page via header.php).
   Respects prefers-reduced-motion throughout.
   ========================================================================== */
:root {
  --reveal-duration: .6s;
  --reveal-ease: cubic-bezier(.16, .84, .44, 1);
}

html { scroll-behavior: smooth; }

/* ----- Page fade-in on load ----- */
body { animation: page-fade-in .5s ease both; }
@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----- Hero slide entry — replays automatically every time Bootstrap
   swaps the "active" slide, since the child selectors only match once
   that class lands on a fresh slide. ----- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.carousel-item.active .hero-caption h1 { animation: hero-rise .7s var(--reveal-ease) both; }
.carousel-item.active .hero-caption p { animation: hero-rise .7s var(--reveal-ease) .12s both; }
.carousel-item.active .hero-caption .btn-hero { animation: hero-rise .7s var(--reveal-ease) .24s both; }

/* ----- Scroll-reveal — js/main.js adds .reveal/.reveal-fade on load,
   then toggles .in-view via IntersectionObserver as each block scrolls in. ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-fade {
  opacity: 0;
  transition: opacity var(--reveal-duration) var(--reveal-ease);
}
.reveal-fade.in-view { opacity: 1; }

/* Cards that already own a hover transition (transform/box-shadow) need that
   transition explicitly combined with the reveal fade, or one silently wins
   over the other since `transition` isn't additive across rules. */
.service-card.reveal-fade,
.employee-card.reveal-fade,
.hover-swap.reveal-fade {
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform .25s, box-shadow .25s !important;
}

/* ----- Desktop nav dropdown / submenu: fade + slide instead of an instant snap ----- */
@media (min-width: 1400px) {
  .main-nav .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .main-nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
  }
  .dropend > .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .dropend:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; opacity: 1; }
  .carousel-item.active .hero-caption h1,
  .carousel-item.active .hero-caption p,
  .carousel-item.active .hero-caption .btn-hero { animation: none; }
  .reveal, .reveal-fade,
  .service-card.reveal-fade, .employee-card.reveal-fade, .hover-swap.reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}