/*
 * product-cards.css
 * All card animations for product pages only.
 * Loaded exclusively via footer include on product pages.
 * Home page (index.php) is NOT affected.
 */

/* ─────────────────────────────────────────────────────────────
   1. STAGGERED FADE-UP ENTRANCE
   ───────────────────────────────────────────────────────────── */
.feature-card,
.app-card,
.fo-prod-card {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(3px);
  transition:
    opacity   .55s ease,
    transform .55s ease,
    filter    .55s ease,
    /* keep existing hover transitions below */
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease);
}
.feature-card.pc-visible,
.app-card.pc-visible,
.fo-prod-card.pc-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ─────────────────────────────────────────────────────────────
   10. CONTINUOUS FLOATING (slow bob — only when visible)
   ───────────────────────────────────────────────────────────── */
@keyframes pcFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}
.feature-card.pc-visible,
.app-card.pc-visible,
.fo-prod-card.pc-visible {
  animation: pcFloat 4s ease-in-out infinite;
}
/* Stagger the float delay per card index (set via JS data-pc-delay) */
.feature-card.pc-visible  { animation-delay: var(--pc-delay, 0s); }
.app-card.pc-visible      { animation-delay: var(--pc-delay, 0s); }
.fo-prod-card.pc-visible  { animation-delay: var(--pc-delay, 0s); }

/* Pause float on hover so tilt/lift feels clean */
.feature-card:hover,
.app-card:hover,
.fo-prod-card:hover {
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────────────────────
   2. MAGNETIC LIFT HOVER  (overrides existing hover transform)
   ───────────────────────────────────────────────────────────── */
.feature-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(33,198,223,.15), 0 6px 16px rgba(0,0,0,.07);
}
.app-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(33,198,223,.15), 0 6px 16px rgba(0,0,0,.07);
}
.fo-prod-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(33,198,223,.15), 0 6px 16px rgba(0,0,0,.07);
}

/* ─────────────────────────────────────────────────────────────
   3. ICON HOVER — TECH ICON PULSE
   ───────────────────────────────────────────────────────────── */
.feature-icon,
.app-icon,
.fo-prod-img {
  transition:
    background   .28s var(--ease),
    border-color .28s var(--ease),
    transform    .28s var(--ease),
    box-shadow   .28s var(--ease);
}
.feature-card:hover .feature-icon,
.app-card:hover .app-icon,
.fo-prod-card:hover .fo-prod-img {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(33,198,223,.12), 0 0 20px rgba(33,198,223,.22);
}

/* ─────────────────────────────────────────────────────────────
   4. ANIMATED GRADIENT BORDER  (pseudo-element sweep)
   ───────────────────────────────────────────────────────────── */
.feature-card,
.app-card,
.fo-prod-card {
  position: relative;
  /* keep overflow visible for 3D tilt; clip shine only */
}

/* Thin traveling border shimmer — top edge only */
.feature-card::before,
.app-card::before,
.fo-prod-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: auto;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), rgba(33,198,223,.3), transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  animation: pcBorderSweep 2.2s linear infinite paused;
}
@keyframes pcBorderSweep {
  0%   { left: -60%; }
  100% { left: 140%; }
}
.feature-card:hover::before,
.app-card:hover::before,
.fo-prod-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* ─────────────────────────────────────────────────────────────
   6. GLASSMORPHISM ICON BOX
   ───────────────────────────────────────────────────────────── */
.feature-icon {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(33,198,223,.10);
  border: 1.5px solid rgba(33,198,223,.28);
}
.feature-card:hover .feature-icon {
  background: rgba(33,198,223,.18);
  border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(33,198,223,.10), 0 0 18px rgba(33,198,223,.25);
}

.app-icon {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─────────────────────────────────────────────────────────────
   7. TEXT CONTENT SLIDE REVEAL
   ───────────────────────────────────────────────────────────── */
.feature-card p {
  transform: translateY(4px);
  opacity: .85;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.feature-card:hover p {
  transform: translateY(0);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   9. DIAGONAL LIGHT SWEEP (shine streak)
   ───────────────────────────────────────────────────────────── */
.feature-card,
.app-card,
.fo-prod-card {
  overflow: hidden; /* needed for shine clip */
}

.feature-card::after,
.app-card::after,
.fo-prod-card::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 50%;
  height: 220%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.32) 50%,
    transparent 70%
  );
  transform: skewX(-15deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.feature-card:hover::after,
.app-card:hover::after,
.fo-prod-card:hover::after {
  opacity: 1;
  animation: pcShine .55s ease forwards;
}
@keyframes pcShine {
  0%   { left: -80%; }
  100% { left: 160%; }
}

/* ─────────────────────────────────────────────────────────────
   8. 3D PERSPECTIVE TILT  (applied via JS mousemove)
   ───────────────────────────────────────────────────────────── */
.feature-card,
.app-card,
.fo-prod-card {
  will-change: transform;
  transform-style: preserve-3d;
  /* perspective set on parent via JS */
}

/* ─────────────────────────────────────────────────────────────
   5. RADIAL SPOTLIGHT HOVER  (applied via JS mousemove)
      .pc-spotlight is a <span> injected into each card by JS
   ───────────────────────────────────────────────────────────── */
.pc-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 120px at var(--mx, 50%) var(--my, 50%),
    rgba(33,198,223,.10) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}
.feature-card:hover .pc-spotlight,
.app-card:hover .pc-spotlight,
.fo-prod-card:hover .pc-spotlight {
  opacity: 1;
}

/* Ensure card content stays above spotlight */
.feature-card > *:not(.pc-spotlight):not(::before):not(::after),
.app-card    > *:not(.pc-spotlight):not(::before):not(::after),
.fo-prod-card > *:not(.pc-spotlight):not(::before):not(::after) {
  position: relative;
  z-index: 1;
}