/* ═══════════════════════════════════════════════════
   PresentationCG v2 — ANIMATIONS (40+ штук)
   Классы: .anim-{name}
   Задержки: .anim-delay-1 … .anim-delay-8
   ═══════════════════════════════════════════════════ */

/* ── Задержки (шаг 0.1s) ── */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }
.anim-delay-8 { animation-delay: 0.8s; }

/* ══════════════════════════════════
   ПОЯВЛЕНИЕ (10 шт.)
   ══════════════════════════════════ */

/* 1. Fade-in */
.anim-fade-in {
  opacity: 0;
  animation: a-fade-in var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-fade-in {
  to { opacity: 1; }
}

/* 2. Slide-up */
.anim-slide-up {
  opacity: 0; transform: translateY(30px);
  animation: a-slide-up var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-slide-up {
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Slide-down */
.anim-slide-down {
  opacity: 0; transform: translateY(-30px);
  animation: a-slide-down var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-slide-down {
  to { opacity: 1; transform: translateY(0); }
}

/* 4. Slide-left */
.anim-slide-left {
  opacity: 0; transform: translateX(40px);
  animation: a-slide-left var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-slide-left {
  to { opacity: 1; transform: translateX(0); }
}

/* 5. Slide-right */
.anim-slide-right {
  opacity: 0; transform: translateX(-40px);
  animation: a-slide-right var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-slide-right {
  to { opacity: 1; transform: translateX(0); }
}

/* 6. Scale-in */
.anim-scale-in {
  opacity: 0; transform: scale(0.88);
  animation: a-scale-in var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-scale-in {
  to { opacity: 1; transform: scale(1); }
}

/* 7. Blur-in */
.anim-blur-in {
  opacity: 0; filter: blur(16px);
  animation: a-blur-in var(--dur-slow) var(--ease-out) forwards;
}
@keyframes a-blur-in {
  to { opacity: 1; filter: blur(0); }
}

/* 8. Clip-reveal (horizontal wipe) */
.anim-clip-reveal {
  clip-path: inset(0 100% 0 0);
  animation: a-clip-reveal var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-clip-reveal {
  to { clip-path: inset(0 0 0 0); }
}

/* 9. Clip-reveal vertical */
.anim-clip-reveal-v {
  clip-path: inset(100% 0 0 0);
  animation: a-clip-reveal-v var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-clip-reveal-v {
  to { clip-path: inset(0 0 0 0); }
}

/* 10. Rotate-in */
.anim-rotate-in {
  opacity: 0; transform: rotate(-8deg) scale(0.9);
  animation: a-rotate-in var(--dur-base) var(--ease-out) forwards;
}
@keyframes a-rotate-in {
  to { opacity: 1; transform: rotate(0) scale(1); }
}

/* ══════════════════════════════════
   HOVER КАРТОЧЕК (7 шт.)
   ══════════════════════════════════ */

/* 11. Lift */
.anim-hover-lift {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.anim-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* 12. Magnetic */
.anim-hover-magnetic {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.anim-hover-magnetic:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
}

/* 13. Glow border */
.anim-hover-glow {
  position: relative;
  overflow: hidden;
}
.anim-hover-glow::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
  opacity: 0;
  transition: opacity var(--dur-fast);
  z-index: 0;
}
.anim-hover-glow > * { position: relative; z-index: 1; }
.anim-hover-glow:hover::before {
  opacity: 1;
  animation: a-glow-spin 2s linear infinite;
}
@keyframes a-glow-spin { to { transform: rotate(360deg); } }

/* 14. Tilt */
.anim-hover-tilt {
  transform-style: preserve-3d;
  transition: transform var(--dur-fast) var(--ease-out);
}
.anim-hover-tilt:hover {
  transform: perspective(600px) rotateX(5deg) rotateY(-6deg) translateY(-3px);
}

/* 15. Media zoom */
.anim-hover-zoom img {
  transition: transform var(--dur-fast) var(--ease-out);
}
.anim-hover-zoom:hover img {
  transform: scale(1.06);
}

/* 16. Inner parallax */
.anim-hover-parallax > :first-child,
.anim-hover-parallax > :last-child {
  transition: transform var(--dur-fast) var(--ease-out);
}
.anim-hover-parallax:hover > :first-child { transform: translateY(-3px); }
.anim-hover-parallax:hover > :last-child  { transform: translateY(2px); }

/* 17. Soft shadow */
.anim-hover-shadow {
  position: relative;
}
.anim-hover-shadow::after {
  content: "";
  position: absolute;
  inset: auto 14px -10px 14px; height: 14px;
  border-radius: var(--radius-full);
  background: radial-gradient(ellipse, rgba(0,0,0,0.35), transparent 60%);
  opacity: 0; transform: translateY(-4px) scale(0.95);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
}
.anim-hover-shadow:hover::after {
  opacity: 1; transform: translateY(0) scale(1);
}

/* ══════════════════════════════════
   SCROLL-TRIGGERED (4 шт., CSS native)
   ══════════════════════════════════ */

/* 18. Scroll reveal */
.anim-scroll-reveal {
  opacity: 0; transform: translateY(30px);
  animation: a-slide-up linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

/* 19. Scroll parallax background */
.anim-scroll-parallax {
  animation: a-scroll-parallax linear;
  animation-timeline: scroll();
  animation-range: entry 0% exit 100%;
  will-change: transform;
}
@keyframes a-scroll-parallax {
  from { transform: translateY(-8%); }
  to   { transform: translateY(8%);  }
}

/* 20. Scroll stagger (комбинировать с .anim-delay-N) */
.anim-scroll-stagger {
  opacity: 0; transform: translateY(20px);
  animation: a-slide-up var(--dur-base) var(--ease-out) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

/* 21. Scroll counter (для stats) — привязка к CSS @property в effects */
.anim-scroll-counter {
  animation: a-counter linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 60%;
}

/* ══════════════════════════════════
   МИКРО-АНИМАЦИИ (8 шт.)
   ══════════════════════════════════ */

/* 22. CTA pulse */
.anim-cta-pulse { position: relative; }
.anim-cta-pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,0.4);
  opacity: 0; transform: scale(0.9);
  pointer-events: none;
}
.anim-cta-pulse:hover::after {
  animation: a-cta-pulse 0.7s var(--ease-out);
}
@keyframes a-cta-pulse {
  from { opacity: 0.8; transform: scale(0.9); }
  to   { opacity: 0;   transform: scale(1.2); }
}

/* 23. Chevron rotate */
.anim-chevron {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.is-open .anim-chevron { transform: rotate(180deg); }

/* 24. Skeleton shimmer */
.anim-skeleton {
  position: relative; overflow: hidden;
  background: var(--bg-alt);
}
.anim-skeleton::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: a-shimmer 1.2s linear infinite;
}
@keyframes a-shimmer { to { transform: translateX(100%); } }

/* 25. Spinner */
.anim-spinner {
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: a-spin 0.6s linear infinite;
}
@keyframes a-spin { to { transform: rotate(360deg); } }

/* 26. Typed cursor */
.anim-typed-cursor::after {
  content: "|";
  animation: a-blink 0.8s step-end infinite;
  margin-left: 2px;
}
@keyframes a-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ══════════════════════════════════
   СПЕЦИАЛЬНЫЕ (8 шт.)
   ══════════════════════════════════ */

/* 27. Confetti — запускается JS, этот класс для контейнера */
.anim-confetti-canvas {
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: none;
}

/* 28. Glitch text */
.anim-glitch {
  position: relative;
  animation: a-glitch 0.4s steps(2) infinite;
}
@keyframes a-glitch {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 1px); }
  25%  { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
  50%  { clip-path: inset(40% 0 30% 0); transform: translate(-1px, 2px); }
  75%  { clip-path: inset(10% 0 70% 0); transform: translate(1px, -2px); }
  100% { clip-path: inset(0); transform: translate(0); }
}

/* 29. Counter roll (CSS @property) */
@property --counter-val {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.anim-counter-roll {
  --counter-val: 0;
  counter-reset: val var(--counter-val);
  font-variant-numeric: tabular-nums;
  transition: --counter-val var(--dur-xslow) var(--ease-out);
}
.anim-counter-roll::after {
  content: counter(val);
}
.anim-counter-roll.is-visible {
  /* JS устанавливает --counter-val: <target> */
}

/* 30. Progress bar fill */
.anim-progress-fill {
  width: 0;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* 31. SVG draw */
.anim-draw-svg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: a-draw-svg var(--dur-xslow) var(--ease-out) forwards;
}
@keyframes a-draw-svg {
  to { stroke-dashoffset: 0; }
}

/* 32. Bounce-in */
.anim-bounce-in {
  opacity: 0; transform: scale(0.6);
  animation: a-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes a-bounce-in {
  to { opacity: 1; transform: scale(1); }
}

/* 33. Float (вечная) */
.anim-float {
  animation: a-float 3s ease-in-out infinite;
}
@keyframes a-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 34. Shake (ошибка / внимание) */
.anim-shake {
  animation: a-shake 0.5s ease-in-out;
}
@keyframes a-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}