/* ==========================================================================
   MMA Sistemi — "Kinetic Logic" motion layer
   Shared across every page. Link with:  ../assets/animations.css
   All effects degrade gracefully and respect prefers-reduced-motion.
   ========================================================================== */

/* --- Accessibility: kill motion for users who ask for it --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- 1. Scroll reveal (staggered) ------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px); /* fallback if no direction was assigned */
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  /* will-change is applied only while an element is animating in (see
     initReveal) and cleared afterwards — keeping it here permanently forced a
     GPU compositor layer for every card/heading on the page at once. */
}
[data-reveal].is-revealing { will-change: opacity, transform; }
/* Varied entrance vectors, chosen per element by initReveal() */
[data-reveal][data-reveal-dir="up"]    { transform: translateY(34px); }
[data-reveal][data-reveal-dir="left"]  { transform: translateX(-44px); }
[data-reveal][data-reveal-dir="right"] { transform: translateX(44px); }
[data-reveal][data-reveal-dir="scale"] { transform: scale(0.9); }
/* Settled state — must stay last so it wins over the direction rules */
[data-reveal].reveal-visible {
  opacity: 1;
  transform: none;
}

/* --- 2. Top nav condenses & darkens on scroll ------------------------------ */
nav.fixed, header.fixed {
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
nav.fixed > div, header.fixed > div {
  transition: padding-top 0.35s ease, padding-bottom 0.35s ease;
}
.nav-scrolled {
  background-color: rgba(5, 11, 20, 0.78) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.nav-scrolled > div {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* --- 3. Glass cards: cursor-following spotlight + lift --------------------- */
.glass-card { position: relative; }
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;               /* only ever brightens, never muddies text */
  background: radial-gradient(
    220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(57, 143, 252, 0.22),
    transparent 65%
  );
}
.glass-card:hover::before { opacity: 1; }

/* --- 4. Animated hero background mesh -------------------------------------- */
.hero-mesh { position: relative; }
.hero-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(57, 143, 252, 0.14), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(0, 219, 233, 0.10), transparent 46%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.75; }
  100% { transform: translate3d(0, -3%, 0) scale(1.18); opacity: 1; }
}

/* --- 5. Neon headline glow (per design doc) ------------------------------- */
.kinetic-glow { text-shadow: 0 0 26px rgba(57, 143, 252, 0.45); }

/* --- 6. Infinite partner marquee ------------------------------------------ */
.partner-marquee {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.partner-marquee:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 7. Live status dot (shared fallback) --------------------------------- */
.glow-dot {
  width: 8px; height: 8px;
  background: #00e676; border-radius: 50%;
  box-shadow: 0 0 8px #00e676;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(1);   opacity: 1; }
}

/* --- 8. Primary buttons: clean shine sweep on hover ------------------------ */
/* Replaces the old magnetic-pull + click-ripple. A single light streak glides
   across the button on hover; the gentle scale/glow already live in the
   Tailwind classes (hover:scale-105, active:scale-[0.98], hover:shadow). */
a.bg-primary, button.bg-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease;
}
a.bg-primary::after, button.bg-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.25, 0.6, 0.3, 1);
}
a.bg-primary:hover::after, button.bg-primary:hover::after {
  left: 130%;
}

/* --- 9. Form submit success state ----------------------------------------- */
.form-success-btn {
  background: #00e676 !important;
  color: #04210f !important;
  box-shadow: 0 0 24px rgba(0, 230, 118, 0.45) !important;
}

/* --- 10. Reading-progress bar --------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #3b90fe, #00dbe9);
  box-shadow: 0 0 12px rgba(57, 143, 252, 0.6);
  z-index: 9999;
  pointer-events: none;
}

/* --- 13. Animated gradient border on accent cards ------------------------- */
@property --kin-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.gradient-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                 /* thickness of the ring */
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from var(--kin-angle),
    rgba(57, 143, 252, 0) 0%,
    rgba(57, 143, 252, 0.9) 25%,
    rgba(0, 219, 233, 0.9) 50%,
    rgba(57, 143, 252, 0) 75%
  );
  /* show only the 1px ring by masking out the interior */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* Static ring by default. Animating the conic-gradient angle repaints the
     whole ring every frame on every accent card at once — costly. Only spin
     it while the card is hovered, where the motion is actually noticed. */
}
.gradient-border:hover::after {
  animation: kin-border-rotate 6s linear infinite;
  animation-delay: var(--kin-delay, 0s);
}
@keyframes kin-border-rotate {
  to { --kin-angle: 360deg; }
}

/* --- 14. Ambient drift on decorative glow orbs ---------------------------- */
/* The big blurred background circles gently float instead of sitting still,
   giving image-less sections a subtle sense of depth and life. */
.ambient-float {
  animation: ambientFloat var(--amb-dur, 16s) ease-in-out var(--amb-delay, 0s) infinite alternate;
}
@keyframes ambientFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(var(--amb-x, 4%), var(--amb-y, -5%), 0) scale(1.12); }
}

/* --- 15. Shimmering gradient sweep on highlighted headline words ---------- */
.kinetic-shimmer {
  background: linear-gradient(100deg, #a8c8ff 0%, #7df4ff 50%, #a8c8ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Static gradient. The sweeping version animated background-position, which
     repaints the clipped text every frame for the life of the page. */
}

/* --- 16. Icon nudges up when its glass card is hovered -------------------- */
.glass-card .material-symbols-outlined {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.glass-card:hover .material-symbols-outlined {
  transform: translateY(-2px) scale(1.08);
}

/* --- Performance: solid panels instead of live backdrop blur -------------
   backdrop-filter: blur() cannot be cached while the page scrolls behind it —
   the browser re-blurs each card's backdrop on every scroll frame. On large /
   high-DPI displays (e.g. a 35") that's a big area per card and made scrolling
   stutter. Semi-opaque dark panels look nearly identical on this dark theme
   and cost nothing per frame.

   This file loads after each page's inline <style>, so overriding .glass-card
   here removes the blur everywhere in one place (all 7 pages share the rule).
   -------------------------------------------------------------------------- */
.glass-card {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  background-color: rgba(20, 26, 36, 0.72) !important;
}
.glass-card:hover {
  background-color: rgba(28, 36, 48, 0.82) !important;
}

/* Drop the smaller frosted utilities too. The nav is position:fixed, so its
   blur reprocesses the whole page on every scroll frame — the biggest single
   win here. Badges and info boxes lose only a barely-visible blur. */
.backdrop-blur-xl,
.backdrop-blur-md,
.backdrop-blur-sm {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Elements that relied on the blur for separation get a solid-ish backing so
   sharp content doesn't show through now that the blur is gone. */
nav.fixed, header.fixed { background-color: rgba(5, 11, 20, 0.85); }
#mma-mobile-menu { background-color: rgba(5, 11, 20, 0.96); }

/* reCAPTCHA v3: hide the floating badge — the required attribution is printed
   under the contact form instead (see assets/contact-form.js). */
/* .grecaptcha-badge { visibility: hidden; } */