/*
 * Shared visual-polish layer for the EVNORIX marketing site.
 * Adds depth (ambient motion, layered shadows) and scroll-driven reveals
 * on top of the existing Tailwind design-token classes — no new colors,
 * no new fonts, just motion and elevation.
 */

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Ambient floating gradient orbs (hero backgrounds) ---- */
.float-orb {
  animation: evx-float 10s ease-in-out infinite;
}
.float-orb.float-orb--slow {
  animation-duration: 16s;
}
.float-orb.float-orb--delay {
  animation-delay: -4s;
}
@keyframes evx-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(14px, -18px, 0) scale(1.05);
  }
}

/* ---- Subtle dot-grid texture for hero sections ---- */
.evx-texture {
  position: relative;
}
.evx-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -20;
  pointer-events: none;
  background-image: radial-gradient(
    currentColor 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  color: rgba(20, 57, 125, 0.08);
  -webkit-mask-image: linear-gradient(
    to bottom,
    black,
    transparent 85%
  );
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

/* ---- Primary CTA pulse glow ---- */
.cta-pulse {
  position: relative;
}
.cta-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 165, 168, 0.45);
  animation: evx-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes evx-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 165, 168, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(0, 165, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 165, 168, 0);
  }
}

/* ---- Click/tap-toggled header dropdowns (see nav-dropdown.js) ----
 * The panels already open on :hover via Tailwind's group-hover
 * utility (fade + slide in), for desktop mouse users. This class
 * forces the same open state when JS toggles it explicitly —
 * required for touch devices, where :hover never fires, and for an
 * actual click response generally. */
[data-dropdown-panel].dropdown-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ---- Mobile/tablet menu accordion (native <details>, see header) ---- */
#mobile-menu summary::-webkit-details-marker {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .float-orb,
  .cta-pulse::after {
    animation: none;
  }
}