/* WOW — blur-in, shimmer, card-glow, ripple, custom cursor */

/* === Blur-in reveal === */
.blur-in {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-out),
              filter 800ms var(--ease-out),
              transform 800ms var(--ease-out);
  will-change: opacity, filter, transform;
}
.blur-in.in-view {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* === Shimmer gradient text === */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--accent-tg) 0%,
    var(--accent-violet) 35%,
    var(--accent-mint) 65%,
    var(--accent-tg) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* === Mouse-tracking glow на карточках === */
.glow-card {
  position: relative;
  isolation: isolate;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(46, 166, 255, 0.18),
    transparent 45%
  );
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
  z-index: 1;
}
.glow-card:hover::before { opacity: 1; }
.glow-card > * { position: relative; z-index: 2; }

/* === Global ripple === */
.ripple-wave {
  position: fixed;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, var(--accent-tg) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 700ms var(--ease-out) forwards;
  mix-blend-mode: screen;
}
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

/* === Custom cursor ring (только desktop + pointer:fine) === */
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1px solid rgba(46, 166, 255, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 180ms var(--ease-out),
              height 180ms var(--ease-out),
              border-color 180ms var(--ease-out),
              opacity 300ms var(--ease-out);
  opacity: 0;
}
#cursor-ring.on { opacity: 1; }
body.cursor-active #cursor-ring.on { opacity: 1; }
#cursor-ring.hover {
  width: 52px; height: 52px;
  border-color: rgba(178, 75, 243, 0.7);
}
#cursor-ring.click {
  width: 24px; height: 24px;
  background: rgba(46, 166, 255, 0.25);
}

@media (hover: none), (pointer: coarse) {
  #cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .text-shimmer { animation: none; }
  .blur-in { transition: opacity 300ms; filter: none; transform: none; }
  .ripple-wave { display: none; }
}