/* Footer social icons: liquid-glass tiles (Corey 2026-09-27).
   ONE source for every footer's social row - .fsocial (unifoot + la-footer light/cosmic/icy),
   .foot-social (/ai, /free, /jarvis) and .slim-social (home). The same file is committed to
   launch-case-studies/css/ so /custom/website-redesign/* (a separate Worker) gets it too.
   Load it LAST (just before </body>) so it wins over the older per-page rules; :not(#_) lifts the
   specificity above their !important hover colours.
   Each tile: dark glass base (reads on light and dark footers), a purple liquid layer that rises,
   holds with a short edge glow, drains, rests. 12s cycle, icons offset 1.5s. Only transform and
   opacity animate. The glyph never moves. /js/social-liquid.js pauses rows that are off screen. */

:is(.fsocial,.foot-social,.slim-social){display:flex!important;flex-wrap:wrap;gap:12px!important;align-items:center}

:is(.fsocial,.foot-social,.slim-social)>a:not(#_){
  position:relative!important;isolation:isolate;overflow:hidden!important;
  width:44px!important;height:44px!important;min-width:44px;padding:0!important;margin:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:12px!important;border:1px solid rgba(196,170,255,.5)!important;
  background:linear-gradient(160deg,rgba(46,22,84,.92),rgba(18,8,34,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(10,4,24,.35)!important;
  color:#f5f0ff!important;font-size:1.12rem!important;line-height:1!important;text-decoration:none!important;
  transform:none;
  transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out!important;
  -webkit-tap-highlight-color:transparent;
}
/* glyph: always above the liquid, never animated */
:is(.fsocial,.foot-social,.slim-social)>a:not(#_)>*{position:relative;z-index:2;color:inherit!important;filter:drop-shadow(0 1px 1px rgba(20,6,45,.55))}
:is(.fsocial,.foot-social,.slim-social)>a:not(#_) svg{width:18px;height:18px}

/* the liquid: taller than the tile so the domed meniscus clears the top edge when full */
:is(.fsocial,.foot-social,.slim-social)>a:not(#_)::before{
  content:"";position:absolute;left:-2px;right:-2px;top:-6px;bottom:0;z-index:0;pointer-events:none;
  border-radius:50% 50% 0 0/7px 7px 0 0;
  background:
    linear-gradient(180deg,rgba(243,232,255,.55) 0,rgba(243,232,255,0) 3px),
    linear-gradient(180deg,#b57bff 0,#8b3dff 30%,#6d28d9 65%,#4c1d95 100%);
  transform:translateY(102%);
  animation:slFill 12s cubic-bezier(.45,.05,.35,1) infinite;animation-delay:var(--sl-d,0s);
  will-change:transform;
}
/* the edge glow at full height (inside the tile, so it never bleeds onto nearby links) */
:is(.fsocial,.foot-social,.slim-social)>a:not(#_)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(233,213,255,.85),inset 0 0 12px rgba(196,140,255,.75);
  opacity:0;
  animation:slGlow 12s linear infinite;animation-delay:var(--sl-d,0s);
}
/* stagger: icon n fills 1.5s after icon n-1 (negative delays so the row is already mid-cycle) */
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(1){--sl-d:-12s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(2){--sl-d:-10.5s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(3){--sl-d:-9s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(4){--sl-d:-7.5s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(5){--sl-d:-6s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(6){--sl-d:-4.5s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(7){--sl-d:-3s}
:is(.fsocial,.foot-social,.slim-social)>a:nth-child(8){--sl-d:-1.5s}

/* 12s: fill 0-25% (3s), hold + glow 25-33.3% (1s), drain 33.3-50% (2s), rest 50-100% */
@keyframes slFill{
  0%{transform:translateY(102%)}
  25%{transform:translateY(0)}
  33.3%{transform:translateY(0)}
  50%{transform:translateY(102%)}
  100%{transform:translateY(102%)}
}
@keyframes slGlow{
  0%,23%{opacity:0}
  26%,32%{opacity:1}
  37%,100%{opacity:0}
}

/* paused while the footer is off screen (set by /js/social-liquid.js) */
.sl-off>a::before,.sl-off>a::after{animation-play-state:paused!important}

/* hover (real pointers only - no first-tap trap on touch) and keyboard focus: fill now, glow, lift */
@media (hover:hover){
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_):hover{
    transform:translateY(-2px)!important;border-color:#e9d5ff!important;color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(196,140,255,.35),0 4px 14px rgba(139,61,255,.45)!important;
  }
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_):hover::before{animation:none;transform:translateY(0);transition:transform .22s ease-out}
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_):hover::after{animation:none;opacity:1;transition:opacity .22s ease-out}
}
:is(.fsocial,.foot-social,.slim-social)>a:not(#_):focus-visible{
  outline:2px solid #e9d5ff!important;outline-offset:3px!important;color:#fff!important;border-color:#e9d5ff!important;
  box-shadow:0 0 0 1px rgba(196,140,255,.35),0 4px 14px rgba(139,61,255,.45)!important;
}
:is(.fsocial,.foot-social,.slim-social)>a:not(#_):focus-visible::before{animation:none;transform:translateY(0)}
:is(.fsocial,.foot-social,.slim-social)>a:not(#_):focus-visible::after{animation:none;opacity:1}

/* reduced motion: static glass tiles, gentle colour response on interaction */
@media (prefers-reduced-motion:reduce){
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_)::before,
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_)::after{animation:none!important;transition:opacity .2s linear!important}
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_)::before{transform:translateY(0)!important;opacity:0}
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_):is(:hover,:focus-visible)::before{opacity:1}
  :is(.fsocial,.foot-social,.slim-social)>a:not(#_):hover{transform:none!important}
}