/* ═══════════════════════════════════════════════════
   RabtPCS Theme — Animation System
   Uses data-anim attributes + IntersectionObserver JS
   ═══════════════════════════════════════════════════ */

/* ── Scroll-reveal base ── */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  var(--rabtpcs-ease-slow),
    transform var(--rabtpcs-ease-slow);
}

/* Animation variants */
[data-anim="fade-up"]   { transform: translateY(28px); }
[data-anim="fade-down"] { transform: translateY(-28px); }
[data-anim="fade-left"] { transform: translateX(28px); }   /* LTR: comes from right */
[data-anim="fade-right"]{ transform: translateX(-28px); }
[data-anim="fade-in"]   { transform: none; }
[data-anim="scale-up"]  { transform: scale(0.94); }
[data-anim="scale-down"]{ transform: scale(1.06); }

/* Visible state — added by animations.js */
[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays (apply data-anim-delay="1..6" to child elements) */
[data-anim-delay="1"] { transition-delay: 80ms; }
[data-anim-delay="2"] { transition-delay: 160ms; }
[data-anim-delay="3"] { transition-delay: 240ms; }
[data-anim-delay="4"] { transition-delay: 320ms; }
[data-anim-delay="5"] { transition-delay: 400ms; }
[data-anim-delay="6"] { transition-delay: 480ms; }

/* ── Hover micro-interactions ── */
.rabtpcs-lift {
  transition:
    transform  var(--rabtpcs-ease),
    box-shadow var(--rabtpcs-ease);
}

.rabtpcs-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--rabtpcs-shadow-card-hover);
}

/* ── Image zoom on hover (apply to the card, target the img) ── */
.rabtpcs-img-zoom {
  overflow: hidden;
}

.rabtpcs-img-zoom img {
  transition: transform var(--rabtpcs-ease-slow);
  will-change: transform;
}

.rabtpcs-img-zoom:hover img {
  transform: scale(1.07);
}

/* ── Skeleton shimmer (for loading states) ── */
.rabtpcs-skeleton {
  background: linear-gradient(
    90deg,
    var(--rabtpcs-light-gray) 25%,
    var(--rabtpcs-off-white) 50%,
    var(--rabtpcs-light-gray) 75%
  );
  background-size: 200% 100%;
  animation: rabtpcs-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--rabtpcs-r-sm);
}

@keyframes rabtpcs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Page entrance ── */
.rabtpcs-page-enter {
  animation: rabtpcs-page-fade 0.35s ease;
  margin-bottom: 20px;
}

@keyframes rabtpcs-page-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Pulse (for badges, notifications) ── */
.rabtpcs-pulse {
  animation: rabtpcs-pulse-ring 2s ease-in-out infinite;
}

@keyframes rabtpcs-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rabtpcs-primary-rgb), 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(var(--rabtpcs-primary-rgb), 0); }
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .rabtpcs-lift,
  .rabtpcs-img-zoom img,
  .rabtpcs-skeleton,
  .rabtpcs-pulse {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}