/* ════════════════════════════════════════════════════════════════
   VC CARD FX — wyraziste efekty kart obrazów
   3D tilt na ruch myszy + pointer-driven glare + glow ring.
   Sterowane zmiennymi CSS ustawianymi przez vc-card-fx.js.
   Wszystko wyłączane przy prefers-reduced-motion i na ekranach dotykowych.
   ════════════════════════════════════════════════════════════════ */

[data-vc-fx] {
  --fx-rx: 0deg;
  --fx-ry: 0deg;
  --fx-lift: 0px;
  --fx-mx: 50%;
  --fx-my: 50%;
  --fx-glare: 0;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}

/* Potrójny atrybut = wyższa specyficzność niż inline [data-reveal].is-visible,
   dzięki czemu tilt FX włada transformem (reveal zostaje jako fade opacity). */
[data-vc-fx][data-vc-fx][data-vc-fx] {
  transform: perspective(900px) rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) translateY(var(--fx-lift));
}

/* w trakcie ruchu myszy reagujemy szybciej (płynny tilt) */
[data-vc-fx].vc-fx-active {
  transition: transform .08s linear, box-shadow .35s ease;
  box-shadow: 0 26px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(255,18,48,.28), 0 0 38px rgba(255,18,48,.18);
  will-change: transform;
  z-index: 2;
}

/* Glare — świetlny refleks podążający za kursorem */
.vc-fx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: var(--fx-glare);
  transition: opacity .3s ease;
  background: radial-gradient(
    260px circle at var(--fx-mx) var(--fx-my),
    rgba(255,255,255,.22),
    rgba(255,255,255,.06) 38%,
    transparent 60%
  );
  mix-blend-mode: screen;
}

/* Animowane obramowanie / glow ring (pojawia się na aktywnej karcie) */
.vc-fx-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: var(--fx-glare);
  transition: opacity .3s ease;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,18,48,.65), rgba(255,18,48,0) 45%, rgba(255,255,255,.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Brak tilt/glare na ekranach dotykowych — zostaje zwykły hover */
@media (hover: none), (pointer: coarse) {
  [data-vc-fx] {
    transform: none !important;
    transition: box-shadow .35s ease;
  }
  .vc-fx-glare, .vc-fx-ring { display: none; }
}

/* Pełne wyłączenie ruchu */
@media (prefers-reduced-motion: reduce) {
  [data-vc-fx] {
    transform: none !important;
    transition: none !important;
  }
  .vc-fx-glare, .vc-fx-ring { display: none !important; }
}