/* Icon-only square social placeholders, inside the existing News area. */
.social-follow { width: min(660px, 100%); margin: 64px auto 0; }
.social-follow .page-motion-controls { justify-content: center; margin: 24px 0 0; padding: 0; background: transparent; }
.social-follow__grid { width: min(600px, 100%); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.social-box { --social-gradient: #5865f2; position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 24%; background: radial-gradient(ellipse at 36% 16%, rgba(255,255,255,.28), transparent 62%), radial-gradient(ellipse at 50% 38%, transparent 42%, rgba(0,0,0,.18) 100%), var(--social-gradient); color: #fff; cursor: default; box-shadow: inset 0 3px 3px rgba(255,255,255,.42), inset 3px 0 6px rgba(255,255,255,.14), inset -3px -6px 9px rgba(0,0,0,.26), 0 2px 0 #25252b, 0 4px 0 #202025, 0 7px 0 #1a1a1e, 0 12px 15px rgba(0,0,0,.48), 0 19px 28px rgba(0,0,0,.25); }
.social-box__icon { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
a.social-box { cursor: pointer; text-decoration: none; }
a.social-box:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.social-box__icon svg { display: block; width: 84%; height: 84%; flex: none; filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.social-box--instagram { --social-gradient: radial-gradient(circle at 24% 110%, #ffdc80 0%, #ff9866 30%, #f53571 57%, #ce2c8d 77%, #643b9d 100%); }
.social-box--instagram svg { width: 94%; height: 94%; }
.social-box--discord svg { width: 100%; height: 100%; }
.social-box--tiktok { --social-gradient: #09090c; }
.social-box--youtube { --social-gradient: #f00825; }
.social-box--discord { --social-gradient: #5865f2; }
@media (max-width: 480px) {
  .social-follow__grid { width: 100%; gap: 10px; }
}

/* One-row social controls: hover glow/lift and a brief click pop, not a loop. */
button.social-box { appearance: none; padding: 0; font: inherit; }
.social-box:is(a, button) { cursor: pointer; text-decoration: none; }
.social-box:is(a, button):focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.social-box { transition: transform .22s ease, filter .22s ease; }
.social-box__icon { position: relative; z-index: 1; }
.social-box__icon svg { transition: transform .26s cubic-bezier(.2,.8,.3,1.4); }
.social-box::after { content: ""; position: absolute; inset: -35%; pointer-events: none; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%); transform: translateX(-110%) rotate(-12deg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    html:not(.motion-paused) .social-box:hover { transform: translateY(-5px); filter: brightness(1.12); }
    html:not(.motion-paused) .social-box:hover .social-box__icon svg { transform: scale(1.08) rotate(-6deg); }
    html:not(.motion-paused) .social-box:hover::after { animation: social-glint .65s ease-out both; }
  }
  html:not(.motion-paused) .social-box:active { transform: translateY(2px); }
  html:not(.motion-paused) .social-box.is-social-popping .social-box__icon svg { animation: social-logo-pop .6s cubic-bezier(.2,.75,.25,1) both; }
  html:not(.motion-paused) .social-box.is-social-popping::after { animation: social-glint .6s ease-out both; }
}
@keyframes social-logo-pop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(.84) rotate(-10deg); }
  55% { transform: scale(1.15) rotate(8deg); }
  78% { transform: scale(.97) rotate(-3deg); }
}
@keyframes social-glint {
  0% { transform: translateX(-110%) rotate(-12deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(110%) rotate(-12deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .social-box, .social-box__icon svg { transition: none; }
  .social-box::after { display: none; }
}