/* ============================================
   EFFECTS.CSS — Визуальные эффекты 2026
   ============================================ */

/* === ЗЕРНИСТОСТЬ (кинематографическая текстура плёнки) === */
/* position: fixed + pointer-events: none = GPU-composited слой без repaints прокрутки */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: noise-anim 0.4s steps(2) infinite;
  will-change: transform;
}

@keyframes noise-anim {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3px, 2px); }
  50%  { transform: translate(2px, -3px); }
  75%  { transform: translate(3px, 1px); }
  100% { transform: translate(-2px, 3px); }
}

/* === SCROLL PROGRESS BAR === */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent-pink), var(--color-accent-cyan));
  z-index: 9999;
  box-shadow: 0 0 8px var(--color-accent-pink), 0 0 16px rgba(255, 0, 110, 0.25);
  pointer-events: none;
  transition: width 0.06s linear;
}

/* === CURSOR GLOW (только десктоп) === */
.cursor-glow {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 0, 110, 0.065) 0%,
    rgba(0, 245, 255, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: opacity 0.4s;
}

/* === SCROLL REVEAL === */
/* Элементы с [data-reveal] начинают с opacity:0 и анимируются при появлении в viewport */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="scale"] {
  transform: scale(0.93);
}

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

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

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

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

/* === HERO ВХОД (CSS-only, не зависит от IntersectionObserver) === */
#hero .hero-content {
  animation: hero-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === HERO SCANLINES === */
.hero-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.05) 3px,
    rgba(0, 0, 0, 0.05) 4px
  );
  z-index: 0;
}

/* === УЛУЧШЕННЫЙ ГЛИТЧ (clip-path technique) === */
.glitch-v2 {
  position: relative;
  display: inline-block;
}

/* Скрыть псевдоэлементы во время text-scramble чтобы не было конфликта */
.glitch-v2.scrambling::before,
.glitch-v2.scrambling::after {
  display: none;
}

.glitch-v2::before,
.glitch-v2::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.glitch-v2::before {
  color: var(--color-accent-cyan);
  clip-path: none;
  transform: translateX(0);
  animation: glitch-top 5s infinite;
  opacity: 0;
}

.glitch-v2::after {
  color: var(--color-accent-pink);
  clip-path: none;
  transform: translateX(0);
  animation: glitch-bottom 5s infinite;
  opacity: 0;
}

@keyframes glitch-top {
  0%, 89%, 95%, 100% { opacity: 0; transform: translateX(0); clip-path: none; }
  90% { opacity: 1; transform: translateX(-7px) skewX(-6deg); clip-path: polygon(0 4%, 100% 4%, 100% 38%, 0 38%); }
  91% { opacity: 0; transform: translateX(0); clip-path: none; }
  92% { opacity: 1; transform: translateX(5px); clip-path: polygon(0 0, 100% 0, 100% 27%, 0 27%); }
  93% { opacity: 1; transform: translateX(-3px); clip-path: polygon(0 2%, 100% 2%, 100% 35%, 0 35%); }
  94% { opacity: 0; transform: translateX(0); clip-path: none; }
}

@keyframes glitch-bottom {
  0%, 89%, 95%, 100% { opacity: 0; transform: translateX(0); clip-path: none; }
  90% { opacity: 1; transform: translateX(7px) skewX(6deg); clip-path: polygon(0 61%, 100% 61%, 100% 97%, 0 97%); }
  91% { opacity: 0; transform: translateX(0); clip-path: none; }
  92% { opacity: 1; transform: translateX(-5px); clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0 100%); }
  93% { opacity: 1; transform: translateX(3px); clip-path: polygon(0 64%, 100% 64%, 100% 99%, 0 99%); }
  94% { opacity: 0; transform: translateX(0); clip-path: none; }
}

/* === TYPING CURSOR === */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--color-accent-cyan);
  margin-left: 3px;
  vertical-align: middle;
  animation: blink-cursor 0.75s step-end infinite;
  transition: opacity 0.5s;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* === КИНЕТИЧЕСКИЙ БЕГУЩИЙ ТЕКСТ (marquee) === */
.marquee-section {
  overflow: hidden;
  padding: 13px 0;
  background: rgba(10, 10, 10, 0.72);
  border-top: 1px solid rgba(255, 0, 110, 0.14);
  border-bottom: 1px solid rgba(0, 245, 255, 0.14);
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Fade edges */
.marquee-section::before,
.marquee-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.marquee-section::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-primary), transparent);
}

.marquee-section::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-primary), transparent);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee-run 28s linear infinite;
  will-change: transform;
}

.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
  user-select: none;
}

.marquee-item.hi {
  color: var(--color-text-secondary);
}

.marquee-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent-pink);
  flex-shrink: 0;
}

.marquee-dot.c {
  background: var(--color-accent-cyan);
}

/* === STAT CARDS (вместо emoji-карточек) === */
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  /* CSS-переменные для spotlight эффекта */
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Hover gradient reveal */
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 110, 0.06) 0%,
    rgba(0, 245, 255, 0.04) 100%
  );
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}

.stat-card:hover::after {
  opacity: 1;
}

/* Spotlight radial под курсором */
.stat-card::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 0, 110, 0.13),
    transparent 80%
  );
  left: var(--mouse-x);
  top: var(--mouse-y);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover {
  border-color: rgba(255, 0, 110, 0.22);
  transform: translateY(-7px);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 0, 110, 0.07);
}

.stat-icon {
  width: 44px;
  height: 44px;
  color: var(--color-accent-cyan);
  filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.35));
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.stat-card:hover .stat-icon {
  color: var(--color-accent-pink);
  filter: drop-shadow(0 0 14px rgba(255, 0, 110, 0.6));
  transform: scale(1.18) rotate(-6deg);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: 0.02em;
  display: block;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* === SECTION TITLE REVEAL === */
/* Горизонтальные линии по бокам заголовка секции */
.section-title-decorated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-title-decorated::before,
.section-title-decorated::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 60px;
  background: linear-gradient(90deg, transparent, var(--color-accent-pink));
}

.section-title-decorated::after {
  background: linear-gradient(-90deg, transparent, var(--color-accent-cyan));
}

/* Сохраняем существующий .section-title — добавляем к нему .section-title-decorated при желании */

/* === КНОПКИ — обновлённые hover-эффекты === */
/* Усиленный shimmer sweep (через btn::before уже есть hover-sweep, оставляем) */
/* Добавляем active state — физический "нажим" */
.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary:active {
  box-shadow: var(--shadow-sm);
}

/* === СЕКЦИОННЫЙ РАЗДЕЛИТЕЛЬ === */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 110, 0.3) 25%,
    rgba(0, 245, 255, 0.3) 75%,
    transparent
  );
  margin: 0;
}