/* ───────────────────────────────────────────────────────────────
   INTERACTIONS

   Hover and scroll effects shared across the site. Classes here are
   applied by core/interact.js; the JS only writes custom properties,
   so all the visual decisions stay in CSS.
   ─────────────────────────────────────────────────────────────── */

/* ── Reveal on scroll ── */
.page-reveal, .card-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.page-reveal.is-revealed, .card-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 720ms var(--ease-out) var(--delay, 0ms),
    transform 720ms var(--ease-out) var(--delay, 0ms);
}

/* ── Scroll-linked drift ── */
.has-parallax {
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}

/* ── Spotlight: a highlight that follows the cursor ── */
/* `relative` establishes a containing block for the ::before overlay. Any
   element that is already positioned must out-specify this rule — see
   .wheel__stage .wheel__item in wheel.css. */
.has-spotlight { position: relative; }
.has-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(225, 20, 28, 0.16),
    rgba(225, 20, 28, 0.05) 40%,
    transparent 70%
  );
  transition: opacity var(--dur-base) var(--ease-out);
}
.has-spotlight:hover::before,
.has-spotlight:focus-within::before { opacity: 1; }

/* ── Tilt ── */
.has-tilt {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateZ(var(--tilt-z, 0px));
  transition: transform 420ms var(--ease-out);
  transform-style: preserve-3d;
}
.has-tilt:hover { transition-duration: 120ms; }

/* Tilt and reveal both want `transform`. While an element is still
   revealing, the reveal owns it; tilt takes over once revealed.
   Both selectors below must out-specify `.card-reveal.is-revealed`
   (0,2,0) or the reveal's `transform: none` silently wins and the
   tilt never appears. */
.card-reveal.has-tilt:not(.is-revealed) { transform: translate3d(0, 28px, 0); }

.card-reveal.is-revealed.has-tilt,
.page-reveal.is-revealed.has-tilt {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateZ(var(--tilt-z, 0px));
}

.card-reveal.is-revealed.has-parallax,
.page-reveal.is-revealed.has-parallax {
  transform: translate3d(0, var(--shift, 0px), 0);
}

/* ── Magnetic buttons ── */
.has-magnet {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform 320ms var(--ease-out), background var(--dur-fast) var(--ease-out);
}

/* ── Buttons: a sheen that wipes across on hover ── */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

/* ── Product cards ── */
.pcard {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.pcard:hover {
  border-color: var(--red-deep);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.9);
}
.pcard__media img {
  transition: transform 720ms var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.pcard:hover .pcard__media img {
  transform: scale(1.07);
  filter: brightness(1.08);
}
/* The CTA arrow only exists on hover, so it reads as a response. */
.pcard__cta { position: relative; display: inline-flex; align-items: center; gap: 0; }
.pcard__cta::after {
  content: '→';
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out);
}
.pcard:hover .pcard__cta::after { max-width: 1.4em; opacity: 1; margin-left: var(--space-2); }

/* ── Category rows ── */
.catlist__item {
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.catlist__item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.catlist__item:hover::after { transform: scaleX(1); }
.catlist__media img { transition: transform 720ms var(--ease-out); }
.catlist__item:hover .catlist__media img { transform: scale(1.08); }

/* ── Wheel items ── */
.wheel__item {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.wheel__item:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red-deep), 0 24px 70px -18px var(--red-glow);
}
.wheel__item-media img { transition: transform 620ms var(--ease-out); }
.wheel__item:hover .wheel__item-media img { transform: scale(1.08); }

/* ── Size chart rows ── */
.sizechart__table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.sizechart__table tbody tr:hover { background: rgba(225, 20, 28, 0.10); }
.sizechart__table tbody tr:hover th { color: var(--red-text); }

/* ── Feature tiles ── */
.pdp__features li {
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.pdp__features li::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.pdp__features li:hover::before { transform: scaleY(1); }
.pdp__features li:hover { background: var(--surface-panel); }

/* ── Product media ── */
.pdp__media { transition: border-color var(--dur-base) var(--ease-out); }
.pdp__media:hover { border-color: var(--red-deep); }

/* ── Footer links ── */
.footer__link {
  position: relative;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-base) var(--ease-out);
}
.footer__link:hover { color: var(--text-primary); }
.footer__link:hover::after { transform: scaleX(1); }

/* ── Catalogue sheets ── */
.catalogue__sheet { transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.catalogue__preview:hover .catalogue__sheet { border-color: var(--red-deep); }

/* ── Touch devices: keep the states, drop the pointer tricks ── */
@media (hover: none) {
  .has-spotlight::before { display: none; }
  .has-tilt { transform: none; }
  .pcard__cta::after { max-width: 1.4em; opacity: 1; margin-left: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .page-reveal, .card-reveal { opacity: 1; transform: none; }
  .has-parallax { transform: none; }
  .has-tilt { transform: none; }
  .has-magnet { transform: none; }
  .btn::after { display: none; }
}