/* Поддержка Safe Area для iOS */
.header-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

.gradient-text {
  background: linear-gradient(135deg, #059669 0%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Мелкая техническая сетка для Hero */
.bg-grid-micro-light {
  background-size: 24px 24px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.7) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 80%);
}

/* Мелкие частые точки для темных секций */
.bg-dot-micro-dark {
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 0.8px, transparent 0.8px);
  background-size: 12px 12px;
}

/* Анимация перелива (блика) для кнопки квиза */
@keyframes shimmerSweep {
  0% { transform: translateX(-150%) skewX(-25deg); }
  20%, 100% { transform: translateX(200%) skewX(-25deg); }
}
.animate-shimmer-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
  animation: shimmerSweep 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}


/* ================= АНИМАЦИИ ШКАЛ (ФИНАЛ) ================= */

/* Обрезаем последнюю шкалу в форме стрелки вверх */
.seo-arrow-clip {
  clip-path: polygon(50% 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
}
@media (min-width: 640px) {
  .seo-arrow-clip {
    clip-path: polygon(50% 0%, 100% 35px, 100% 100%, 0% 100%, 0% 35px);
  }
}

/* 
 * Анимация высоты. 
 * Шкалы теперь растут от 0% до своих значений (25%, 45%, 65%, 100%),
 * опираясь на фиксированную высоту родителя (h-64). Это работает всегда.
 */
.seo-bar-1 { height: 0%; animation: growSeoBar1 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards; }
.seo-bar-2 { height: 0%; animation: growSeoBar2 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards; }
.seo-bar-3 { height: 0%; animation: growSeoBar3 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s forwards; }
.seo-bar-4 { height: 0%; animation: growSeoBar4 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 2.0s forwards; }

@keyframes growSeoBar1 { to { height: 25%; } }
@keyframes growSeoBar2 { to { height: 45%; } }
@keyframes growSeoBar3 { to { height: 65%; } }
@keyframes growSeoBar4 { to { height: 100%; } }

/* 
 * Всплывание плашек с текстом.
 * Плашки позиционируются жестко по высоте финальной шкалы (bottom: 25% и т.д.),
 * поэтому они не зависят от процесса анимации бара.
 */
.seo-label-1 { bottom: 25%; margin-bottom: 0.75rem; opacity: 0; animation: popSeoLabel 0.4s ease-out 0.6s forwards; }
.seo-label-2 { bottom: 45%; margin-bottom: 0.75rem; opacity: 0; animation: popSeoLabel 0.4s ease-out 1.2s forwards; }
.seo-label-3 { bottom: 65%; margin-bottom: 0.75rem; opacity: 0; animation: popSeoLabel 0.4s ease-out 1.8s forwards; }
.seo-label-4 { bottom: 100%; margin-bottom: 0.75rem; opacity: 0; animation: popSeoLabel 0.5s ease-out 2.6s forwards; }

@keyframes popSeoLabel {
  0% { opacity: 0; transform: translate(-50%, 15px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}