/* ═══ EFFECTS — wow-эффекты, tier-aware ═══ */

/* ── AURORA в hero ───────────────────────────────────────── */
@keyframes auroraShift {
  0%   { transform: translateX(-20%) skewX(-8deg); opacity: 0.55; }
  50%  { transform: translateX(10%)  skewX(6deg);  opacity: 0.8;  }
  100% { transform: translateX(-20%) skewX(-8deg); opacity: 0.55; }
}
.hero-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora-band {
  position: absolute; left: -30%; width: 160%; height: 3px;
  filter: blur(12px); animation: auroraShift linear infinite;
  border-radius: 50%;
}
.aurora-band:nth-child(1) {
  top: 30%; height: 80px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,245,255,0.35) 30%, rgba(176,96,255,0.45) 60%, transparent 100%);
  animation-duration: 9s;
}
.aurora-band:nth-child(2) {
  top: 45%; height: 50px;
  background: linear-gradient(90deg, transparent 10%, rgba(176,96,255,0.25) 40%, rgba(0,245,255,0.2) 70%, transparent 100%);
  animation-duration: 13s; animation-delay: -4s;
}
.aurora-band:nth-child(3) {
  top: 60%; height: 30px;
  background: linear-gradient(90deg, transparent 5%, rgba(249,115,22,0.15) 35%, rgba(0,245,255,0.2) 65%, transparent 100%);
  animation-duration: 17s; animation-delay: -7s;
}
/* Aurora только на high-end */
.perf-mid .hero-aurora,
.perf-low .hero-aurora { display: none; }

/* ── HOLOGRAPHIC SHIMMER ─────────────────────────────────── */
.holo-shine {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
  z-index: 2;
}

/* ── RIPPLE WAVE ─────────────────────────────────────────── */
@keyframes ripple-wave {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(1); opacity: 0; }
}
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  animation: ripple-wave 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── NAV LOGO GLITCH при hover ───────────────────────────── */
@keyframes glitch-1 {
  0%, 100% { clip-path: none; transform: none; }
  20%       { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 0); }
  40%       { clip-path: inset(50% 0 30% 0); transform: translate(3px, 0); color: #00f5ff; }
  60%       { clip-path: inset(80% 0 5% 0);  transform: translate(-2px, 0); }
  80%       { clip-path: none; transform: none; }
}
.perf-high .nav-logo:hover {
  animation: glitch-1 0.4s steps(1) 1;
}

/* ── STAT COUNTER GLOW при появлении ────────────────────── */
@keyframes statReveal {
  from { opacity: 0; transform: scale(0.7); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}
.stat-n.animated { animation: statReveal 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── SECTION ENTRANCE — улучшенные reveal ───────────────── */
.reveal     { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-l   { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-r   { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* ── CARD ENTER SCALE (усиление reveal на high) ─────────── */
.perf-high .case-card,
.perf-high .svc-card,
.perf-high .review-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}

/* ── GLOW LINE PULSE ─────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 12px rgba(0,245,255,0.3); }
  50%       { opacity: 0.9; box-shadow: 0 0 28px rgba(0,245,255,0.7), 0 0 60px rgba(176,96,255,0.3); }
}
.glow-line { animation: glowPulse 4s ease-in-out infinite; }
.perf-low .glow-line { animation: none; opacity: 0.5; }

/* ── MOBILE ANIMATIONS ───────────────────────────────────── */
@keyframes mSlideUp {
  from { transform: translateY(36px) scale(0.97); opacity: 0.4; }
  to   { transform: translateY(0)    scale(1);    opacity: 1;   }
}
@keyframes mBadgeIn {
  from { transform: translateY(14px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
@keyframes mPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,96,255,0.5), 0 8px 32px rgba(176,96,255,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(176,96,255,0), 0 8px 32px rgba(0,245,255,0.3); }
}
@keyframes mHeadIn {
  from { transform: translateX(-24px); opacity: 0.3; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes mStatPop {
  0%   { transform: scale(0.7);  filter: blur(6px);  opacity: 0.3; }
  70%  { transform: scale(1.12); filter: blur(0);    opacity: 1; }
  100% { transform: scale(1);    filter: blur(0);    opacity: 1; }
}
@keyframes mEyebrowPop {
  0%   { transform: scale(0.85) translateY(-8px); opacity: 0; }
  70%  { transform: scale(1.05) translateY(2px);  opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* Карточки: видимы всегда, анимация при появлении */
.m-ready { opacity: 1; }
.m-ready.m-in { animation: mSlideUp 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) both; }

/* Tap feedback */
.m-tap { transform: scale(0.96) !important; transition: transform 0.12s ease !important; }

/* CTA pulse */
.m-pulse { animation: mPulseGlow 2.2s ease-in-out infinite; }

/* Hero badges */
.m-badge-in { animation: mBadgeIn 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) both; }

/* Section headings */
.m-head { opacity: 1; }
.m-head.m-head-in { animation: mHeadIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) both; }

/* Stat pop */
.m-stat-pop { animation: mStatPop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both; }

/* Form neon border */
.m-form-focus { box-shadow: 0 0 0 2px rgba(0,245,255,0.4), 0 0 30px rgba(0,245,255,0.15) !important; transition: box-shadow 0.3s ease; }

/* Eyebrow bounce */
.m-eyebrow-pop { animation: mEyebrowPop 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) both; }

/* ── EYEBROW SHIMMER ─────────────────────────────────────── */
@keyframes shimmerMove {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}
.perf-high .hero-eyebrow {
  background-image: linear-gradient(90deg,
    rgba(0,245,255,0.1) 0%,
    rgba(0,245,255,0.1) 40%,
    rgba(255,255,255,0.2) 50%,
    rgba(0,245,255,0.1) 60%,
    rgba(0,245,255,0.1) 100%
  );
  background-size: 200% auto;
  animation: shimmerMove 3s linear infinite;
}