.card-spotlight {
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth), border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .circleLight,
  .card-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      circle at var(--spotlight-x, 80px) var(--spotlight-y, 40px),
      var(--primary-glow-strong),
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
    pointer-events: none;
    z-index: 1;
  }

  .card-spotlight:hover .circleLight,
  .card-spotlight:hover::before {
    opacity: 0.6;
  }

  .card-spotlight:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-glass-hover-shadow);
    border-color: var(--card-glass-hover-border);
  }
}

@keyframes pulseLight {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

@keyframes floatChip {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-9px);
  }
}

@keyframes shimmerSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth);
  will-change: opacity, transform;
}

[data-reveal="fade-in"] {
  transform: translateY(0) scale(0.96);
}

[data-reveal="fade-left"] {
  transform: translateX(24px);
}

[data-reveal="fade-right"] {
  transform: translateX(-24px);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .card-spotlight:hover {
    transform: none !important;
  }
  .mesh-blob {
    animation: none !important;
  }
}

.ambient-mesh-engine {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
  pointer-events: none;
}

.mesh-blob--blue {
  width: min(85vw, 950px);
  height: min(85vw, 950px);
  top: -20%;
  left: -20%;
  background: radial-gradient(circle, rgba(85, 158, 226, 0.38) 0%, rgba(85, 158, 226, 0.14) 50%, transparent 72%);
  animation: fluidDisperse1 15s cubic-bezier(0.4, 0, 0.2, 1) infinite, meshBreathe 7s ease-in-out infinite;
}

.mesh-blob--green {
  width: min(80vw, 900px);
  height: min(80vw, 900px);
  top: 20%;
  right: -15%;
  background: radial-gradient(circle, rgba(0, 135, 70, 0.30) 0%, rgba(0, 98, 51, 0.13) 50%, transparent 72%);
  animation: fluidDisperse2 18s cubic-bezier(0.4, 0, 0.2, 1) infinite, meshBreathe 9s ease-in-out infinite reverse;
}

.mesh-blob--yellow {
  width: min(55vw, 600px);
  height: min(55vw, 600px);
  bottom: 15%;
  left: 20%;
  background: radial-gradient(circle, rgba(255, 212, 0, 0.14) 0%, rgba(255, 180, 0, 0.05) 50%, transparent 70%);
  animation: fluidDisperse3 11s ease-in-out infinite alternate, meshBreathe 6s ease-in-out infinite;
}

.mesh-blob--blue2 {
  width: min(75vw, 850px);
  height: min(75vw, 850px);
  bottom: -25%;
  right: 5%;
  background: radial-gradient(circle, rgba(85, 158, 226, 0.28) 0%, rgba(85, 158, 226, 0.10) 50%, transparent 72%);
  animation: fluidDisperse1 20s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse, meshBreathe 8s ease-in-out infinite;
}

.mesh-blob--green2 {
  width: min(70vw, 800px);
  height: min(70vw, 800px);
  top: 50%;
  left: -10%;
  background: radial-gradient(circle, rgba(0, 168, 89, 0.26) 0%, rgba(0, 98, 51, 0.10) 50%, transparent 72%);
  animation: fluidDisperse2 24s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse, meshBreathe 10s ease-in-out infinite reverse;
}

[data-theme="light"] .mesh-blob--blue {
  background: radial-gradient(circle, rgba(85, 158, 226, 0.30) 0%, rgba(85, 158, 226, 0.11) 50%, transparent 72%);
}

[data-theme="light"] .mesh-blob--green {
  background: radial-gradient(circle, rgba(0, 135, 70, 0.24) 0%, rgba(0, 98, 51, 0.09) 50%, transparent 72%);
}

[data-theme="light"] .mesh-blob--yellow {
  background: radial-gradient(circle, rgba(255, 212, 0, 0.13) 0%, rgba(255, 180, 0, 0.04) 50%, transparent 70%);
}

[data-theme="light"] .mesh-blob--blue2 {
  background: radial-gradient(circle, rgba(85, 158, 226, 0.26) 0%, rgba(85, 158, 226, 0.09) 50%, transparent 72%);
}

[data-theme="light"] .mesh-blob--green2 {
  background: radial-gradient(circle, rgba(0, 168, 89, 0.22) 0%, rgba(0, 98, 51, 0.08) 50%, transparent 72%);
}

@keyframes meshBreathe {
  0%, 100% {
    opacity: 1;
    filter: blur(80px);
  }
  50% {
    opacity: 0.7;
    filter: blur(95px);
  }
}

@keyframes fluidDisperse1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate3d(180px, 110px, 0) scale(1.25) rotate(90deg);
  }
  50% {
    transform: translate3d(70px, 220px, 0) scale(0.85) rotate(180deg);
  }
  75% {
    transform: translate3d(-150px, 90px, 0) scale(1.30) rotate(270deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(360deg);
  }
}

@keyframes fluidDisperse2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate3d(-200px, -130px, 0) scale(1.35) rotate(-120deg);
  }
  66% {
    transform: translate3d(140px, -90px, 0) scale(0.85) rotate(-240deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-360deg);
  }
}

@keyframes fluidDisperse3 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(130px, -150px, 0) scale(1.5);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-80px, 100px, 0) scale(1.15);
    opacity: 0.55;
  }
}