/* ============================================================
   Tracify — enhanced motion (Lovable-light premium)
   Layered on top of base .card-hover and .fade-up.
   Compositor-friendly: transform + opacity only.
   ============================================================ */


/* ---------- Layer 0: Base scroll-reveal (.fade-up / .fade-left / .fade-right) ---------- */
/* Per-page inline <style> blocks may override these (defined first → lower precedence) */

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-right.visible { opacity: 1; transform: translateX(0); }



/* ---------- Layer 1: Premium hover lift + soft accent glow ---------- */
/* Extends existing .card-hover transition declared inline per page.   */

.card-hover {
  will-change: transform;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 48px -16px rgba(91, 27, 255, 0.18),
    0 12px 24px -12px rgba(255, 61, 138, 0.10),
    0 0 0 1px rgba(91, 27, 255, 0.10) inset;
  border-color: rgba(91, 27, 255, 0.22);
}

/* Pin card stays stronger for featured cards (purple border) */
.card-hover[class*="rgba(91,27,255,0.20)"]:hover,
.card-hover[class*="rgba(91,27,255,0.25)"]:hover {
  transform: translateY(-8px);
  box-shadow:
    0 32px 60px -18px rgba(91, 27, 255, 0.28),
    0 16px 30px -14px rgba(255, 61, 138, 0.14),
    0 0 0 1px rgba(91, 27, 255, 0.20) inset;
}


/* ---------- Layer 2: Staggered reveal cascade ---------- */
/* Applied to grids marked with .tile-grid                  */
/* Children inherit .fade-up with sequential delay         */

.tile-grid > .fade-up { transition-delay: 0ms; }
.tile-grid > .fade-up:nth-child(2) { transition-delay: 90ms; }
.tile-grid > .fade-up:nth-child(3) { transition-delay: 180ms; }
.tile-grid > .fade-up:nth-child(4) { transition-delay: 270ms; }
.tile-grid > .fade-up:nth-child(5) { transition-delay: 360ms; }
.tile-grid > .fade-up:nth-child(6) { transition-delay: 450ms; }
.tile-grid > .fade-up:nth-child(7) { transition-delay: 540ms; }
.tile-grid > .fade-up:nth-child(8) { transition-delay: 630ms; }


/* ---------- Layer 3: Magnetic tilt + radial cursor glow ---------- */
/* Activated via data-tilt attribute (tilt.js handles the rotation) */

[data-tilt] {
  transform-style: preserve-3d;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 400ms ease;
  will-change: transform;
}

[data-tilt]:hover {
  z-index: 2;
}

[data-tilt-glow] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Glow renderowany POD contentem (z-index -1 w isolated stack context).
   Children NIE są dotykane → absolute pozycje (np. badge "Polecany") nietknięte. */
[data-tilt-glow]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(91, 27, 255, 0.16) 0%,
    rgba(255, 61, 138, 0.08) 28%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: -1;
}

[data-tilt-glow]:hover::before { opacity: 1; }


/* ---------- Layer 4: Animated conic-gradient border (featured cards) ---------- */

@property --grad-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.gradient-border-glow {
  position: relative;
  isolation: isolate;
}

.gradient-border-glow::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--grad-angle, 0deg),
    #5b1bff,
    #b06bff,
    #ff3d8a,
    #6b8eff,
    #5b1bff
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 480ms ease;
  z-index: -1;
  pointer-events: none;
}

.gradient-border-glow:hover::before {
  opacity: 1;
  animation: gradient-rotate 4s linear infinite;
}

@keyframes gradient-rotate {
  to { --grad-angle: 360deg; }
}

/* Browsers without @property fallback: static gradient */
@supports not (background: conic-gradient(from var(--x, 0deg), #000, #fff)) {
  .gradient-border-glow:hover::before {
    background: linear-gradient(135deg, #5b1bff, #ff3d8a);
    animation: none;
  }
}


/* ---------- Reduced motion: disable all enhancements ---------- */

@media (prefers-reduced-motion: reduce) {
  .card-hover,
  .card-hover:hover,
  [data-tilt],
  [data-tilt]:hover,
  .gradient-border-glow,
  .gradient-border-glow::before,
  [data-tilt-glow]::before {
    transform: none !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .tile-grid > .fade-up { transition-delay: 0ms !important; }
}


/* ---------- Touch devices: disable tilt (CSS hint, JS guards too) ---------- */

@media (hover: none) {
  [data-tilt] { transform: none !important; }
  [data-tilt-glow]::before { display: none; }
}