/* ============================================
   SOKOLOV AGENCY - Main Stylesheet
   Pixel Perfect Implementation
   ============================================ */

/* CSS Custom Properties (Variables) */
:root {
  /* Colors */
  --color-bg-primary: #010101;
  --color-bg-secondary: #0D0E0F;
  --color-bg-card: rgba(245, 247, 251, 0.05);
  --color-bg-card-dark: rgba(8, 8, 11, 0.5);
  --color-bg-overlay: rgba(15, 15, 15, 0.25);
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F5F7FB;
  
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(239, 245, 255, 0.8);
  --color-text-tertiary: rgba(245, 247, 251, 0.5);
  --color-text-muted: #898989;
  --color-text-dark: #0B0B0C;
  
  --color-accent-primary: #FF4545;
  --color-accent-secondary: #205CDF;
  --color-accent-green: #4AFFB7;
  
  --color-border: rgba(245, 247, 251, 0.05);
  --color-border-light: rgba(255, 255, 255, 0.06);
  
  /* Gradients - точные из Figma */
  --gradient-hero-1: radial-gradient(circle at 11% 5%, rgba(0, 0, 0, 0) 52%, rgba(255, 77, 77, 1) 100%);
  --gradient-hero-2: radial-gradient(circle at 50% 39%, rgba(0, 0, 0, 0) 68%, rgba(255, 255, 255, 1) 100%);
  --gradient-hero-3: radial-gradient(circle at 62% 3%, rgba(0, 0, 0, 0) 58%, rgba(255, 154, 53, 1) 100%);
  --gradient-hero-4: radial-gradient(circle at 32% 0%, rgba(0, 0, 0, 0) 38%, rgba(228, 41, 41, 1) 100%);
  --gradient-overlay: linear-gradient(0deg, rgba(1, 1, 1, 0) 81%, rgba(1, 1, 1, 1) 94%);
  
  /* Typography */
  --font-primary: 'Random Grotesque Standard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-slim: 'Random Grotesque Slim', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Fluid Typography - точные размеры из Figma */
  --font-size-hero: clamp(2.5rem, 5vw + 1rem, 4.048rem); /* 64.768px */
  --font-size-hero-line-height: 0.83; /* 0.830000011779562em */
  --font-size-hero-letter-spacing: -0.03em; /* -3% */
  
  --font-size-subtitle: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); /* 20px */
  --font-size-subtitle-line-height: 1.21; /* 1.2100000381469727em */
  --font-size-subtitle-letter-spacing: 0.03em; /* 3% */
  
  --font-size-card-title: clamp(1rem, 1.5vw, 1.15625rem); /* 18.493px */
  --font-size-card-title-line-height: 1.05; /* 1.0499999123336905em */
  
  --font-size-tag: clamp(0.75rem, 1vw, 0.875rem); /* 14px */
  --font-size-tag-line-height: 1.11; /* 1.1099999972752161em */
  --font-size-tag-letter-spacing: 0.03em; /* 3% */
  
  /* Spacing - точные из Figma */
  --spacing-hero-x: clamp(1.5rem, 3vw, 3.125rem); /* 50px */
  --spacing-hero-y: clamp(12rem, 25vw, 24.5rem); /* 392px */
  --spacing-hero-gap: clamp(1.5rem, 2vw, 3.125rem); /* 50px */
  --spacing-hero-text-gap: clamp(1.5rem, 2vw, 1.5rem); /* 24px */
  --spacing-hero-cards-gap: clamp(1rem, 2vw, 1.25rem); /* 20px */
  
  /* Border Radius - точные из Figma */
  --radius-card: 28.451353073120117px;
  --radius-tag: 10px;
  --radius-play: 14px;
  
  /* Shadows */
  --shadow-card-action: 0px 0px 4px 0px rgba(0, 0, 0, 0.1), 0px 1px 25.4px 0px rgba(255, 69, 69, 0.35);
  --shadow-card-white: 0px 0px 4px 0px rgba(0, 0, 0, 0.1), 0px 1px 25.4px 0px rgba(255, 255, 255, 0.35);
  
  /* Backdrop Blur */
  --blur-tag: blur(16px);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
  overflow-y: visible !important; /* важно для sticky */
  /* Мобильное меню должно быть поверх всего */
  position: relative;
  font-kerning: normal;
  font-synthesis: none; /* не подделывать bold/italic */
}

body {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
  overflow-y: visible !important; /* важно для sticky */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  font-variant-ligatures: common-ligatures;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern" 1, "liga" 1;
  font-variant-ligatures: common-ligatures;
  transform: translateZ(0); /* Принудительное аппаратное ускорение для четкости */
  -webkit-transform: translateZ(0);
}

/* ============================================
   Video Loading Indicator (global)
   ============================================ */
.video-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; /* компактный размер 40-50px */
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(245, 247, 251, 0.08); /* темный фон, тонкая обводка */
  border-top-color: var(--color-accent-primary); /* акцентный цвет */
  animation: video-loader-spin 0.9s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.video-loading-indicator--hidden {
  display: none;
}

@keyframes video-loader-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   Image Loading Indicator (global)
   ============================================ */
.image-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; /* компактный размер 40-50px */
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(245, 247, 251, 0.08); /* темный фон, тонкая обводка */
  border-top-color: var(--color-accent-primary); /* акцентный цвет */
  animation: video-loader-spin 0.9s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.image-loading-indicator--hidden {
  display: none;
}

p {
  line-height: var(--font-size-subtitle-line-height);
}

/* Links & Buttons */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover,
a:focus {
  opacity: 0.8;
}

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

button:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Images */
img {
  height: auto;
  display: block;
}

picture {
  display: block;
}

/* Utility Classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skeleton loading - стили теперь в skeleton.css */

/* Анимация появления сверху вниз */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Класс для анимируемых элементов */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Для секции cases убираем transform после анимации, чтобы sticky работал */
.cases.animate-on-scroll.animated {
  transform: none !important;
}

/* Анимации для hero секции с задержками */
.hero-animate-delay-1 {
  transition-delay: 0.1s;
}

.hero-animate-delay-2 {
  transition-delay: 0.3s;
}

.hero-animate-delay-3 {
  transition-delay: 0.5s;
}

.hero-animate-delay-4 {
  transition-delay: 0.7s;
}

.hero-animate-delay-5 {
  transition-delay: 0.9s;
}

.hero-animate-delay-6 {
  transition-delay: 1.1s;
}

.hero-animate-delay-7 {
  transition-delay: 1.3s;
}

.hero-animate-delay-8 {
  transition-delay: 1.5s;
}

/* Анимация для хедера */
.header-animate {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.header-animate.animated {
  opacity: 1;
  transform: translateY(0);
}