/* Social icons — premium glassy treatment with brand-specific glow */

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 4px 6px;
}

.social-icons a {
  --brand-color: var(--primary-color, #00bcd4);
  --brand-gradient: var(--gradient-main-button, linear-gradient(135deg, #00bcd4, #1e88e5));
  --brand-surface: var(--card-bg-dark, rgba(15, 21, 33, 0.82));
  --brand-border: var(--border-dark, rgba(255, 255, 255, 0.08));
  --brand-glow: var(--shadow-glow, rgba(0, 188, 212, 0.28));
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--brand-color);
  text-decoration: none;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.12), transparent 54%),
    linear-gradient(145deg, var(--bg-dark-secondary, #0f1521), var(--bg-dark-primary, #0a0e1a)),
    var(--brand-surface);
  border: 1px solid var(--brand-border);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36), 0 8px 18px var(--brand-glow);
  backdrop-filter: blur(9px) saturate(150%);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    background 0.35s ease;
}

.social-icons--round-brand a {
  border-radius: 50%;
}

.social-icons a::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--brand-gradient);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.35s ease;
}

.social-icons a::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.03);
  opacity: 0.7;
  transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
  z-index: 1;
}

.social-icons a i {
  position: relative;
  z-index: 2;
  font-size: 1.1rem;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icons a:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.38), 0 12px 26px var(--brand-glow);
}

.social-icons a:hover::before {
  opacity: 1;
}

.social-icons a:hover::after {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.05), 0 0 0 3px var(--brand-glow);
}

.social-icons a:hover i {
  transform: scale(1.08);
}

.social-icons a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 0 8px var(--brand-glow);
}

/* Brand-specific accents */
.social-icons .si-facebook {
  --brand-color: #1877f2;
  --brand-gradient: linear-gradient(135deg, #1b74e4, #0f50c5);
  --brand-glow: rgba(24, 119, 242, 0.32);
}

.social-icons .si-tiktok {
  --brand-color: #25f4ee;
  --brand-gradient: linear-gradient(135deg, #25f4ee, #fe2c55);
  --brand-glow: rgba(37, 244, 238, 0.26);
}

.social-icons .si-youtube {
  --brand-color: #ff0033;
  --brand-gradient: linear-gradient(135deg, #ff1c48, #c0132e);
  --brand-glow: rgba(255, 28, 72, 0.32);
}

.social-icons .si-instagram {
  --brand-color: #e1306c;
  --brand-gradient: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af);
  --brand-glow: rgba(221, 42, 123, 0.32);
}

.social-icons .si-linkedin {
  --brand-color: #0a66c2;
  --brand-gradient: linear-gradient(135deg, #0a66c2, #004182);
  --brand-glow: rgba(10, 102, 194, 0.3);
}

.social-icons .si-twitter,
.social-icons .si-x {
  --brand-color: #1da1f2;
  --brand-gradient: linear-gradient(135deg, #1da1f2, #0b82c4);
  --brand-glow: rgba(29, 161, 242, 0.3);
}

/* Footer alignment */
.footer-section .social-icons {
  justify-content: center;
}

@media (max-width: 640px) {
  .social-icons {
    gap: 12px;
  }

  .social-icons a {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-icons a,
  .social-icons a::after,
  .social-icons a i {
    transition: none;
  }
}