/* ==========================================================================
   HUMTAL MINING LOGISTICS — MOTION
   Restrained by design: this is a formal B2B brand, not a playful one.
   Motion should confirm and orient, never decorate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal — used by main.js (IntersectionObserver toggles .is-visible)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-fade.is-visible {
  opacity: 1;
}

/* stagger helpers for grids of cards */
.reveal-stagger > * { --reveal-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { --reveal-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { --reveal-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { --reveal-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { --reveal-delay: 320ms; }
.reveal-stagger > *:nth-child(6) { --reveal-delay: 400ms; }

/* --------------------------------------------------------------------------
   Header — appears on scroll via main.js toggling .is-scrolled
   -------------------------------------------------------------------------- */
.site-header {
  transition: box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.mega-panel {
  /* opacity/transform/visibility handled below; padding-top in style.css
     keeps the panel flush against the trigger so there's no hover dead-zone */
}

/* --------------------------------------------------------------------------
   Mega menu panels
   -------------------------------------------------------------------------- */
.mega-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   In-page sticky sub-nav (Copper / Gold & Precious Metals / Mining Partners)
   -------------------------------------------------------------------------- */
.subnav-link {
  position: relative;
  transition: color var(--duration-fast) var(--ease-standard);
}
.subnav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--duration-base) var(--ease-standard);
}
.subnav-link.is-active {
  color: var(--color-accent-deep);
}
.subnav-link.is-active::after {
  right: 0;
}

/* --------------------------------------------------------------------------
   Hover micro-interactions
   -------------------------------------------------------------------------- */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hover-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-standard);
}
.hover-underline:hover {
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   Mobile nav drawer
   -------------------------------------------------------------------------- */
.mobile-nav {
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-standard);
}
.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav-scrim {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
.mobile-nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

.animate-fade-in {
  animation: fade-in var(--duration-slow) var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   Respect user preference — belt-and-braces alongside the global rule
   in style.css, scoped here in case this file is ever loaded standalone.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mega-panel,
  .mobile-nav,
  .mobile-nav-scrim,
  .hover-lift,
  .hover-underline,
  .subnav-link::after {
    transition: none;
  }
  .hover-lift:hover {
    transform: none;
  }
}