/* =====================================================================
   AEVION — Interactions
   Custom cursor · Magnetic buttons · Card tilt · Menu hover preview · Marquee
   Shared across all pages. Pointer-only effects are gated to fine pointers.
===================================================================== */

/* Hidden by default; the JS reveals them on hover-capable devices */
.ax-cursor-dot, .ax-cursor-ring, .ax-cursor-label, .ax-menu-preview { display: none; }

@media (hover: hover) and (pointer: fine) {

  /* Hide native cursor only once JS has booted (so no-JS users keep theirs) */
  html.ax-cursor-on, html.ax-cursor-on * { cursor: none !important; }

  .ax-cursor-dot, .ax-cursor-ring, .ax-cursor-label {
    display: block; position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 100000;
    transform: translate(-50%, -50%);
  }

  .ax-cursor-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff; mix-blend-mode: difference;
  }

  .ax-cursor-ring {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid #fff; mix-blend-mode: difference;
    transition: width .28s cubic-bezier(.16,1,.3,1),
                height .28s cubic-bezier(.16,1,.3,1),
                background-color .28s ease, opacity .28s ease;
  }
  .ax-cursor-ring.is-hover { width: 60px; height: 60px; background: rgba(255,255,255,.15); }
  .ax-cursor-ring.is-hide  { opacity: 0; }

  .ax-cursor-label {
    background: var(--brand-orange, #ea9a37); color: #fff;
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 11px 17px; border-radius: 100px; white-space: nowrap;
    opacity: 0; scale: 0.5;
    transition: opacity .25s ease, scale .3s cubic-bezier(.16,1,.3,1);
  }
  .ax-cursor-label.show { opacity: 1; scale: 1; }

  /* ---- Menu hover image preview ---- */
  .ax-menu-preview {
    display: block; position: fixed; top: 0; left: 0;
    width: 230px; height: 290px; border-radius: 12px; overflow: hidden;
    pointer-events: none; z-index: 99990; opacity: 0;
    transform: translate(-112%, -50%);
    transition: opacity .4s ease;
    box-shadow: 0 30px 60px rgba(0,0,0,.45);
  }
  .ax-menu-preview.show { opacity: 1; }
  .ax-menu-preview img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.25); transition: transform .8s cubic-bezier(.16,1,.3,1);
  }
  .ax-menu-preview.show img { transform: scale(1); }
}

/* ---- Marquee strip (all devices) ---- */
.ax-marquee {
  overflow: hidden; white-space: nowrap;
  background: var(--brand-purple-light, #684a9e);
  padding: 1.3rem 0; transition: background-color .4s ease;
}
body.dark-mode .ax-marquee { background: var(--brand-orange, #ea9a37); }
.ax-marquee-track {
  display: inline-flex; will-change: transform;
  animation: ax-marquee-scroll 30s linear infinite;
}
.ax-marquee:hover .ax-marquee-track { animation-play-state: paused; }
.ax-marquee-track span {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2.6rem); text-transform: uppercase;
  color: #fff; letter-spacing: .02em; padding-right: .35em;
}
@keyframes ax-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ax-marquee-track { animation: none; }
}

/* ---- Page transition (outgoing wipe) ---- */
.ax-page-transition {
  position: fixed; inset: 0; background: #050505; z-index: 99995;
  transform: translateY(100%); pointer-events: none;
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
html.ax-leaving .ax-page-transition { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ax-page-transition { transition: none; }
}