/* ============================================================
   5MinHelp — Service Card Micro-Interaction System
   service-animations.css
   Entrance · Idle · Hover · Icon animations per-card
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   BASE STATE — Cards start hidden before JS assigns animations
   ═══════════════════════════════════════════════════════════════ */
.service-card.svc-hidden {
  opacity: 0;
  pointer-events: none;
}
.service-card.svc-entered {
  pointer-events: auto;
  opacity: 1 !important;
}

/* GPU layer for all service cards */
.service-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition:
    border-color   0.3s ease,
    box-shadow     0.3s ease,
    background     0.3s ease;
}
.service-card.svc-entered {
  will-change: auto;
}
.service-card .service-card-icon {
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Compatibility: neutralise .card:hover transform on service cards ──
   .service-card.svc-hover--X:hover is more specific and handles
   the transform, but we still want the glass overlay & border from
   .card:hover to apply, just not the generic translateY(-6px). ────────── */
.service-card:hover {
  transform: none; /* reset base; each svc-hover--* class sets its own */
}

/* ─── Compatibility: icon hover ──────────────────────────────────────────
   The existing .service-card:hover .service-card-icon in components.css
   adds transform:scale(1.12)rotate(-4deg) which fights our CSS keyframe
   icon animations. We override it here so the keyframe alone controls
   the icon transform during hover; the speed-up rules handle the energy. */
.service-card:hover .service-card-icon[class*="svc-icon"] {
  transform: none; /* let the keyframe animation own the transform */
}

/* ─── Compatibility: ::before / ::after pseudo-elements ─────────────────
   Hover variants shine, glass-sweep, and border-trace use ::before /
   ::after themselves. Override the generic .card::before opacity rule
   so they don't visually conflict for those specific variants. ────────── */
.service-card.svc-hover--shine:hover::before,
.service-card.svc-hover--glass-sweep:hover::before,
.service-card.svc-hover--border-trace:hover::before {
  opacity: 0; /* suppress card gradient overlay — our ::before takes over */
}

/* ═══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATION KEYFRAMES  (16 variants)
   ═══════════════════════════════════════════════════════════════ */

@keyframes svcSlideFromLeft {
  from { opacity: 0; transform: translateX(-65px) translateZ(0); }
  to   { opacity: 1; transform: translateX(0)     translateZ(0); }
}
@keyframes svcSlideFromRight {
  from { opacity: 0; transform: translateX(65px)  translateZ(0); }
  to   { opacity: 1; transform: translateX(0)     translateZ(0); }
}
@keyframes svcSlideFromTop {
  from { opacity: 0; transform: translateY(-55px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)     translateZ(0); }
}
@keyframes svcSlideFromBottom {
  from { opacity: 0; transform: translateY(65px)  translateZ(0); }
  to   { opacity: 1; transform: translateY(0)     translateZ(0); }
}
@keyframes svcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes svcScaleIn {
  from { opacity: 0; transform: scale(0.68) translateZ(0); }
  to   { opacity: 1; transform: scale(1)    translateZ(0); }
}
@keyframes svcZoomIn {
  from { opacity: 0; transform: scale(1.22) translateZ(0); }
  to   { opacity: 1; transform: scale(1)    translateZ(0); }
}
@keyframes svcFlipX {
  from { opacity: 0; transform: perspective(700px) rotateX(88deg) translateZ(0); }
  to   { opacity: 1; transform: perspective(700px) rotateX(0deg)  translateZ(0); }
}
@keyframes svcFlipY {
  from { opacity: 0; transform: perspective(700px) rotateY(88deg) translateZ(0); }
  to   { opacity: 1; transform: perspective(700px) rotateY(0deg)  translateZ(0); }
}
@keyframes svcRotateIn {
  from { opacity: 0; transform: rotate(-14deg) scale(0.82) translateZ(0); }
  to   { opacity: 1; transform: rotate(0deg)   scale(1)    translateZ(0); }
}
@keyframes svcBounceIn {
  0%   { opacity: 0; transform: scale(0.28) translateZ(0); }
  55%  { opacity: 1; transform: scale(1.10) translateZ(0); }
  75%  {             transform: scale(0.95) translateZ(0); }
  90%  {             transform: scale(1.04) translateZ(0); }
  100% {             transform: scale(1)    translateZ(0); }
}
@keyframes svcElastic {
  0%   { opacity: 0; transform: translateY(-45px) scale(0.78) translateZ(0); }
  55%  { opacity: 1; transform: translateY(8px)   scale(1.04) translateZ(0); }
  75%  {             transform: translateY(-4px)  scale(0.98) translateZ(0); }
  90%  {             transform: translateY(2px)   scale(1.01) translateZ(0); }
  100% {             transform: translateY(0)     scale(1)    translateZ(0); }
}
@keyframes svcPop {
  0%   { opacity: 0; transform: scale(0.35)  translateZ(0); }
  55%  { opacity: 1; transform: scale(1.12)  translateZ(0); }
  78%  {             transform: scale(0.96)  translateZ(0); }
  90%  {             transform: scale(1.04)  translateZ(0); }
  100% {             transform: scale(1)     translateZ(0); }
}
@keyframes svcSkewIn {
  from { opacity: 0; transform: skewX(13deg) translateX(-38px) translateZ(0); }
  to   { opacity: 1; transform: skewX(0deg)  translateX(0)     translateZ(0); }
}
@keyframes svcBlurIn {
  from { opacity: 0; filter: blur(12px); transform: scale(0.93) translateZ(0); }
  to   { opacity: 1; filter: blur(0px);  transform: scale(1)    translateZ(0); }
}
@keyframes svcGlowIn {
  0%   { opacity: 0; transform: scale(0.88) translateZ(0);
         box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  60%  { opacity: 1; transform: scale(1.03) translateZ(0);
         box-shadow: 0 0 40px 10px rgba(99,102,241,0.35); }
  100% {             transform: scale(1)    translateZ(0);
         box-shadow: var(--shadow-card); }
}

/* ─── Entrance Class Bindings ────────────────────────────────── */
.svc-enter--slide-left.svc-entering   { animation: svcSlideFromLeft   0.75s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--slide-right.svc-entering  { animation: svcSlideFromRight  0.75s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--slide-top.svc-entering    { animation: svcSlideFromTop    0.70s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--slide-bottom.svc-entering { animation: svcSlideFromBottom 0.70s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--fade.svc-entering         { animation: svcFadeIn          0.85s ease                          both; }
.svc-enter--scale-in.svc-entering     { animation: svcScaleIn         0.65s cubic-bezier(0.34,1.56,0.64,1) both; }
.svc-enter--zoom-in.svc-entering      { animation: svcZoomIn          0.60s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--flip-x.svc-entering       { animation: svcFlipX           0.72s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--flip-y.svc-entering       { animation: svcFlipY           0.72s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--rotate-in.svc-entering    { animation: svcRotateIn        0.65s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--bounce-in.svc-entering    { animation: svcBounceIn        0.85s cubic-bezier(0.34,1.56,0.64,1) both; }
.svc-enter--elastic.svc-entering      { animation: svcElastic         0.95s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--pop.svc-entering          { animation: svcPop             0.78s cubic-bezier(0.34,1.56,0.64,1) both; }
.svc-enter--skew-in.svc-entering      { animation: svcSkewIn          0.68s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--blur-in.svc-entering      { animation: svcBlurIn          0.80s cubic-bezier(0.16,1,0.3,1)    both; }
.svc-enter--glow-in.svc-entering      { animation: svcGlowIn          0.85s cubic-bezier(0.16,1,0.3,1)    both; }

/* ═══════════════════════════════════════════════════════════════
   IDLE ANIMATION KEYFRAMES  (7 variants)
   CSS Individual Transform Properties (translate, scale, rotate)
   compose with the card's transform:hover without conflict.
   ═══════════════════════════════════════════════════════════════ */

@keyframes svcIdleFloatKf {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 calc(var(--idle-amp, -5px) * 1); }
}
@keyframes svcIdleFloatSlowKf {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 -3px; }
}
@keyframes svcIdleSwayKf {
  0%, 100% { translate: 0 0; }
  25%       { translate: 3px 0; }
  75%       { translate: -3px 0; }
}
@keyframes svcIdleBreatheKf {
  0%, 100% { scale: 1; }
  50%       { scale: 1.019; }
}
@keyframes svcIdleRotateKf {
  0%, 100% { rotate: 0deg; }
  33%       { rotate:  1.3deg; }
  66%       { rotate: -1.3deg; }
}
@keyframes svcIdleGlowKf {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%       { box-shadow: var(--shadow-card), 0 0 22px rgba(99,102,241,0.22); }
}
@keyframes svcIdleFloatRevKf {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 4px; }
}

/* ─── Idle Classes ────────────────────────────────────────────── */
.svc-idle--float         { animation: svcIdleFloatKf     var(--idle-dur, 4s) ease-in-out  var(--idle-del, 0s) infinite; }
.svc-idle--float-slow    { animation: svcIdleFloatSlowKf var(--idle-dur, 6s) ease-in-out  var(--idle-del, 0s) infinite; }
.svc-idle--sway          { animation: svcIdleSwayKf      var(--idle-dur, 5s) ease-in-out  var(--idle-del, 0s) infinite; }
.svc-idle--breathe       { animation: svcIdleBreatheKf   var(--idle-dur, 4s) ease-in-out  var(--idle-del, 0s) infinite; }
.svc-idle--rotate-idle   { animation: svcIdleRotateKf    var(--idle-dur, 5s) ease-in-out  var(--idle-del, 0s) infinite; }
.svc-idle--glow-idle     { animation: svcIdleGlowKf      var(--idle-dur, 3s) ease-in-out  var(--idle-del, 0s) infinite; }
.svc-idle--float-reverse { animation: svcIdleFloatRevKf  var(--idle-dur, 4.5s) ease-in-out var(--idle-del, 0s) infinite; }

/* ═══════════════════════════════════════════════════════════════
   HOVER EFFECT CLASSES  (11 variants)
   All selectors include #services to achieve specificity (1,2,1),
   which beats the base reset (1,2,0) and .card:hover (0,1,1).
   ═══════════════════════════════════════════════════════════════ */

/* 1 — Lift */
.service-card.svc-hover--lift:hover {
  transform: translateY(-13px) scale(1.03) translateZ(0);
  box-shadow: 0 24px 56px rgba(0,0,0,0.55), 0 0 32px rgba(99,102,241,0.18);
}

/* 2 — Tilt Left */
.service-card.svc-hover--tilt-left:hover {
  transform: translateY(-9px) rotate(-2.8deg) scale(1.025) translateZ(0);
  box-shadow: var(--shadow-lg), -4px 16px 40px rgba(99,102,241,0.14);
}

/* 3 — Tilt Right */
.service-card.svc-hover--tilt-right:hover {
  transform: translateY(-9px) rotate(2.8deg) scale(1.025) translateZ(0);
  box-shadow: var(--shadow-lg), 4px 16px 40px rgba(99,102,241,0.14);
}

/* 4 — Scale */
.service-card.svc-hover--scale:hover {
  transform: scale(1.07) translateZ(0);
  z-index: 3;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 20px rgba(99,102,241,0.15);
}

/* 5 — Glow Border (gradient glow behind card) */
.service-card.svc-hover--glow-border {
  position: relative;
}
.service-card.svc-hover--glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--gradient-primary);
  border-radius: calc(var(--radius-lg) + 2px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s ease;
  filter: blur(6px);
  pointer-events: none;
}
.service-card.svc-hover--glow-border:hover {
  transform: translateY(-9px) scale(1.02) translateZ(0);
  border-color: rgba(99,102,241,0.6);
}
.service-card.svc-hover--glow-border:hover::before { opacity: 0.75; }

/* 6 — Neon Shadow */
.service-card.svc-hover--neon-shadow:hover {
  transform: translateY(-9px) scale(1.025) translateZ(0);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.55),
    0 0 18px rgba(99,102,241,0.45),
    0 0 56px rgba(99,102,241,0.20),
    0 20px 48px rgba(0,0,0,0.45);
}

/* 7 — Shine Sweep */
@keyframes svcShineSweep {
  from { left: -120%; }
  to   { left:  200%; }
}
.service-card.svc-hover--shine {
  overflow: hidden;
}
/* Use ::after for the shine ray — ::before is already used by .card */
.service-card.svc-hover--shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.07) 50%,
    transparent 75%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}
.service-card.svc-hover--shine:hover::after {
  animation: svcShineSweep 0.55s ease forwards;
}
.service-card.svc-hover--shine:hover {
  transform: translateY(-9px) scale(1.02) translateZ(0);
}

/* 8 — Glass Reflection Sweep */
@keyframes svcGlassSweep {
  0%   { transform: translateX(-180%) skewX(-22deg); }
  100% { transform: translateX(280%)  skewX(-22deg); }
}
.service-card.svc-hover--glass-sweep {
  overflow: hidden;
}
.service-card.svc-hover--glass-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-180%) skewX(-22deg);
  pointer-events: none;
  z-index: 2;
}
.service-card.svc-hover--glass-sweep:hover::after {
  animation: svcGlassSweep 0.65s ease forwards;
}
.service-card.svc-hover--glass-sweep:hover {
  transform: translateY(-9px) translateZ(0);
}

/* 9 — Border Trace */
@keyframes svcBorderTrace {
  0%   { opacity: 0; clip-path: inset(0 100% 100% 0 round 20px); }
  33%  { opacity: 1; clip-path: inset(0 0 100% 0 round 20px); }
  66%  {             clip-path: inset(0 0 0 100% round 20px); }
  100% {             clip-path: inset(0 0 0 0 round 20px); }
}
.service-card.svc-hover--border-trace {
  position: relative;
}
.service-card.svc-hover--border-trace::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius-lg) + 1.5px);
  background: var(--gradient-primary);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.service-card.svc-hover--border-trace:hover::before {
  animation: svcBorderTrace 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
.service-card.svc-hover--border-trace:hover {
  transform: translateY(-7px) translateZ(0);
}

/* 10 — Pulse Glow */
@keyframes svcHoverPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.45), var(--shadow-md); }
  50%       { box-shadow: 0 0 0 14px rgba(99,102,241,0), 0 12px 40px rgba(99,102,241,0.30); }
}
.service-card.svc-hover--pulse-glow:hover {
  transform: translateY(-7px) translateZ(0);
  animation: svcHoverPulseGlow 1.3s ease infinite;
}

/* 11 — Lift + Rotate */
.service-card.svc-hover--lift-rotate:hover {
  transform: translateY(-11px) rotate(1.4deg) scale(1.03) translateZ(0);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 24px rgba(139,92,246,0.18);
}

/* ═══════════════════════════════════════════════════════════════
   ICON ANIMATION KEYFRAMES  (8 variants)
   ═══════════════════════════════════════════════════════════════ */

@keyframes svcIconSpinKf {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes svcIconBounceKf {
  0%, 100% { transform: translateY(0); }
  35%       { transform: translateY(-11px); }
  55%       { transform: translateY(-5px); }
  75%       { transform: translateY(-9px); }
}
@keyframes svcIconPulseKf {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.22); }
}
@keyframes svcIconFloatKf {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
@keyframes svcIconWiggleKf {
  0%, 100% { transform: rotate(0deg); }
  15%       { transform: rotate(-9deg) scale(1.1); }
  30%       { transform: rotate(9deg)  scale(1.1); }
  45%       { transform: rotate(-5deg); }
  60%       { transform: rotate(5deg); }
  75%       { transform: rotate(-2deg); }
  90%       { transform: rotate(2deg); }
}
@keyframes svcIconGlowKf {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0);
             filter: brightness(1); }
  50%       { box-shadow: 0 0 18px 4px rgba(99,102,241,0.45);
             filter: brightness(1.2); }
}
@keyframes svcIconScalePulseKf {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.18) rotate(8deg); }
}
@keyframes svcIconShakeKf {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%       { transform: translateX(-3px) rotate(-3deg); }
  40%       { transform: translateX(3px)  rotate(3deg); }
  60%       { transform: translateX(-2px) rotate(-1deg); }
  80%       { transform: translateX(2px)  rotate(1deg); }
}

/* ─── Icon Animation Classes ─────────────────────────────────── */
.service-card-icon.svc-icon--spin-slow   { animation: svcIconSpinKf       9s linear        0s infinite; }
.service-card-icon.svc-icon--bounce      { animation: svcIconBounceKf      2.8s ease-in-out 0s infinite; }
.service-card-icon.svc-icon--pulse       { animation: svcIconPulseKf       2.2s ease-in-out 0s infinite; }
.service-card-icon.svc-icon--float       { animation: svcIconFloatKf       3.2s ease-in-out 0s infinite; }
.service-card-icon.svc-icon--wiggle      { animation: svcIconWiggleKf      3.5s ease-in-out 0s infinite; }
.service-card-icon.svc-icon--glow        { animation: svcIconGlowKf        2.5s ease-in-out 0s infinite; }
.service-card-icon.svc-icon--scale-pulse { animation: svcIconScalePulseKf  2.8s ease-in-out 0s infinite; }
.service-card-icon.svc-icon--shake       { animation: svcIconShakeKf       3.0s ease-in-out 0s infinite; }

/* ─── Icon speed-up on card hover ────────────────────────────── */
.service-card:hover .service-card-icon.svc-icon--spin-slow   { animation-duration: 1.8s; }
.service-card:hover .service-card-icon.svc-icon--bounce      { animation-duration: 0.55s; }
.service-card:hover .service-card-icon.svc-icon--pulse       { animation-duration: 0.45s; }
.service-card:hover .service-card-icon.svc-icon--float       { animation-duration: 0.7s; }
.service-card:hover .service-card-icon.svc-icon--wiggle      { animation-duration: 0.4s; }
.service-card:hover .service-card-icon.svc-icon--glow        { animation-duration: 0.6s; }
.service-card:hover .service-card-icon.svc-icon--scale-pulse { animation-duration: 0.5s; }
.service-card:hover .service-card-icon.svc-icon--shake       { animation-duration: 0.3s; animation-iteration-count: 4; }

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — Respect user preference
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Show all cards immediately, no entrance */
  .service-card.svc-hidden   { opacity: 1 !important; }
  .service-card.svc-entering { animation: none !important; opacity: 1 !important; }

  /* Kill all idle animations */
  .service-card[class*="svc-idle"]  { animation: none !important; }

  /* Kill all icon animations */
  .service-card-icon[class*="svc-icon"]       { animation: none !important; }

  /* Minimal hover — only transform, no glow */
  .service-card[class*="svc-hover"]:hover {
    transform: translateY(-5px) translateZ(0) !important;
    animation: none !important;
  }
}