/* ===========================================
   ANIMATIONS — Keyframes и визуальные эффекты
   =========================================== */

/* ─── Page load hero entrance ─── */
@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__heading {
  animation: hero-fade-in 0.8s var(--ease-smooth) 0.1s both;
}

.toggle {
  animation: hero-fade-in 0.8s var(--ease-smooth) 0.3s both;
}

.hero__cta {
  animation: hero-fade-in 0.8s var(--ease-smooth) 0.5s both;
}

.hero__right .info-card:nth-child(1) {
  animation: hero-fade-in 0.8s var(--ease-smooth) 0.4s both;
}

.hero__right .info-card:nth-child(2) {
  animation: hero-fade-in 0.8s var(--ease-smooth) 0.6s both;
}

/* ─── Staggered entrance for mode-specific content ─── */
@keyframes mode-item-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero__subs--visible .sub-pill {
  animation: mode-item-in 0.6s var(--ease-smooth) both;
}
.hero__subs--visible .sub-pill:nth-child(1) { animation-delay: 0.15s; }
.hero__subs--visible .sub-pill:nth-child(2) { animation-delay: 0.25s; }
.hero__subs--visible .sub-pill:nth-child(3) { animation-delay: 0.35s; }
.hero__subs--visible .sub-pill:nth-child(4) { animation-delay: 0.45s; }
.hero__subs--visible .sub-pill:nth-child(5) { animation-delay: 0.55s; }

.hero__content--visible .hero__cta .btn {
  animation: mode-item-in 0.6s var(--ease-smooth) both;
}
.hero__content--visible .hero__cta .btn:nth-child(1) { animation-delay: 0.35s; }
.hero__content--visible .hero__cta .btn:nth-child(2) { animation-delay: 0.45s; }
.hero__content--visible .hero__cta .btn:nth-child(3) { animation-delay: 0.55s; }

.hero__phones--visible .phone-block {
  animation: mode-item-in 0.6s var(--ease-smooth) both;
}
.hero__phones--visible .phone-block:nth-child(1) { animation-delay: 0.6s; }
.hero__phones--visible .phone-block:nth-child(2) { animation-delay: 0.72s; }

.hero__right--visible .info-card {
  animation: mode-item-in 0.7s var(--ease-smooth) both;
}
.hero__right--visible .info-card:nth-child(1) { animation-delay: 0.25s; }
.hero__right--visible .info-card:nth-child(2) { animation-delay: 0.4s; }

/* ─── Photo parallax on hero (subtle zoom on load) ─── */
@keyframes hero-photo-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1.02); }
}

.hero__photo {
  animation: hero-photo-zoom 8s var(--ease-smooth) both;
}

/* ─── Pulse for featured badge ─── */
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 2px 8px rgba(36,76,138,0.3); }
  50% { box-shadow: 0 2px 16px rgba(36,76,138,0.5); }
}

.program-badge {
  animation: pulse-badge 3s ease-in-out infinite;
}

/* ─── Counter animation ─── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat__number[data-animated] {
  animation: count-up 0.5s var(--ease-out) both;
}

/* ─── Shimmer effect for card images ─── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.content-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity var(--t-base);
}

.content-card:hover .content-card__image::after {
  opacity: 1;
}

/* ─── Gradient line animation for section headers ─── */
@keyframes gradient-slide {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.section-divider::before {
  background: linear-gradient(90deg, var(--cyan), var(--sky), var(--cyan));
  background-size: 200% 100%;
  animation: gradient-slide 4s ease infinite;
}

/* ─── Card entrance stagger ─── */
.stagger .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger .reveal:nth-child(2) { transition-delay: 100ms; }
.stagger .reveal:nth-child(3) { transition-delay: 200ms; }
.stagger .reveal:nth-child(4) { transition-delay: 300ms; }

/* ─── Smooth mode transition on body ─── */
body {
  transition: --mode-primary var(--t-slower),
              --mode-accent var(--t-slower);
}

/* ─── Nav link hover animation ─── */
@keyframes nav-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ─── Modal backdrop fade ─── */
@keyframes modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal--open .modal__overlay {
  animation: modal-overlay-in 0.3s ease both;
}

/* ─── Scroll indicator ─── */
@keyframes scroll-hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 56px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-base);
  transition: filter var(--t-base) var(--ease-out);
  /* белый ореол - розовый шеврон читается на светлом фото */
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 14px rgba(255, 255, 255, 0.5));
}

.hero__scroll-hint:hover {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 1))
          drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 18px rgba(255, 255, 255, 0.6));
}

/* Стрелка убирается, когда контент hero подошёл к ней вплотную
   (зум 125% и выше, низкое окно). Класс ставит initHeroScrollHintGuard */
.hero__scroll-hint--crowded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}

.hero__scroll-hint svg {
  width: 48px;
  height: 45px;
  animation: scroll-hint 3.4s ease-in-out infinite;
}

/* цвет как у кнопки «Личный кабинет», CSS перебивает stroke-атрибут SVG */
.hero__scroll-hint svg g {
  stroke: var(--accent);
  stroke-width: 6;
}

.hero__scroll-hint:hover svg g {
  stroke: var(--accent-dark);
}

/* ─── Toggle hint pulse (вариант 1 - пульсация кнопки, закомментирован) ─── */
/*
@keyframes toggle-hint-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 172, 209, 0);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 18px 4px rgba(26, 172, 209, 0.35);
  }
}

.toggle__btn--pulse {
  animation: toggle-hint-pulse 2s ease-in-out infinite;
  border-radius: var(--radius-pill);
}
*/

/* ─── Toggle hint (вариант 3 - рисованная от руки обводка и стрелка) ─── */
.toggle-hint {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.toggle-hint__circle,
.toggle-hint__arrow,
.toggle-hint__arrowhead {
  fill: none;
  stroke: #3a7bd5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toggle-hint__circle {
  stroke-width: 2.6;
  opacity: 0.7;
}

.toggle-hint__arrow {
  stroke-width: 2.2;
  opacity: 0.75;
}

.toggle-hint__arrowhead {
  stroke-width: 2.6;
  opacity: 0.8;
}

.toggle-hint--visible .toggle-hint__circle {
  animation: hint-draw 1.4s ease-out forwards;
}

.toggle-hint--visible .toggle-hint__arrow {
  animation: hint-draw 0.6s ease-out 1.2s forwards;
}

.toggle-hint--visible .toggle-hint__arrowhead {
  animation: hint-draw 0.2s ease-out 1.7s forwards;
}

@keyframes hint-draw {
  to { stroke-dashoffset: 0; }
}

.toggle-hint__text {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  fill: #3a7bd5;
  opacity: 0;
}

.toggle-hint--visible .toggle-hint__text {
  animation: hint-text-appear 0.5s ease 1.8s forwards;
}

@keyframes hint-text-appear {
  to { opacity: 0.85; }
}

.toggle-hint--hidden {
  opacity: 0 !important;
  transition: opacity 0.5s ease;
}

/* ─── Search bar focus pulse ─── */
@keyframes search-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26,172,209,0.2); }
  70% { box-shadow: 0 0 0 8px rgba(26,172,209,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,172,209,0); }
}

.search-section__bar input:focus {
  animation: search-pulse 1.5s ease 1;
}