/* ================================
   Global variables (safe fallback)
   ================================ */
:root{
  --text-main:#e5e7eb;
  --text-muted:#9ca3af;

  --accent:#22d3ee;
  --accent-strong:#38bdf8;

  --bg-card:rgba(15,23,42,.88);
  --border-soft:rgba(148,163,184,.35);

  --focus-ring:rgba(34,211,238,.9);
}

/* ================================
   Footer socials
   ================================ */

.footer-socials{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

/* базовый стиль кнопок соцсетей */
.social-icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;

  border:1px solid var(--border-soft);
  background:rgba(15,23,42,.55);
  color:var(--text-muted);

  position:relative;
  overflow:hidden;
  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    color .25s ease,
    background .25s ease;
}

.social-icon svg{
  width:20px;
  height:20px;
  fill:currentColor;
  transition:transform .25s ease;
}

/* subtle animated sheen */
.social-icon::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.18) 45%,
    transparent 60%
  );
  transform:translateX(-60%) rotate(18deg);
  transition:transform .5s ease;
  pointer-events:none;
}

/* hover base */
.social-icon:hover{
  color:#fff;
  transform:translateY(-2px) scale(1.03);
  border-color:var(--accent-strong);
  box-shadow:0 0 26px rgba(56,189,248,.35);
}

.social-icon:hover svg{
  transform:scale(1.08);
}

.social-icon:hover::after{
  transform:translateX(60%) rotate(18deg);
}

/* brand accents */
.social-icon.facebook:hover{
  border-color:#1877f2;
  box-shadow:0 0 26px rgba(24,119,242,.45);
}
.social-icon.instagram:hover{
  border-color:#e1306c;
  box-shadow:0 0 26px rgba(225,48,108,.45);
}
.social-icon.tiktok:hover{
  border-color:#25f4ee;
  box-shadow:0 0 26px rgba(37,244,238,.45);
}

/* accessibility */
.social-icon:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}

/* ================================
   Footer reveal animation (improved)
   - with transition-delay
   - with socials cascade
   ================================ */

footer{
  /* стартовое состояние до появления */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);

  /* добавили delay, чтобы эффект был заметнее даже если футер сразу в viewport */
  transition:
    opacity .55s ease,
    transform .55s ease,
    filter .55s ease;
  transition-delay: .08s;

  will-change: opacity, transform, filter;
}

footer.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Cascade: соцсети проявляются чуть позже футера */
footer .footer-socials{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: .18s; /* каскад */
  will-change: opacity, transform;
}

footer.is-visible .footer-socials{
  opacity: 1;
  transform: translateY(0);
}

/* (Опционально) лёгкий каскад внутри ряда иконок */
footer .footer-socials .social-icon{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

footer.is-visible .footer-socials .social-icon{
  opacity: 1;
  transform: translateY(0);
}

footer.is-visible .footer-socials .social-icon:nth-child(1){ transition-delay: .22s; }
footer.is-visible .footer-socials .social-icon:nth-child(2){ transition-delay: .28s; }
footer.is-visible .footer-socials .social-icon:nth-child(3){ transition-delay: .34s; }

/* Для пользователей, которые отключили анимации */
@media (prefers-reduced-motion: reduce){
  footer,
  footer .footer-socials,
  footer .footer-socials .social-icon{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
.telegram-ai-btn {
  border-color: rgba(34, 211, 238, 0.6);
  color: #a5f3fc;
  position: relative;
}

.telegram-ai-btn:hover {
  color: #22d3ee;
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.45);
  transform: translateY(-1px);
}