/* /site/assets/css/footer.css */
@property --ft-angle { syntax:'<angle>'; initial-value:0deg; inherits:false }
@property --ring-angle { syntax:'<angle>'; initial-value:0deg; inherits:false }

.footer-shell{ position:relative; border-radius:1.25rem; padding:2px;
  background:conic-gradient(from var(--ft-angle),var(--brand-c),var(--brand-b),var(--brand-a),var(--brand-c));
  animation:ftSpin 24s linear infinite; box-shadow:0 30px 60px -28px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset; isolation:isolate }
.footer-shell::before{
  content:""; position:absolute; inset:-10px; border-radius:inherit;
  background:conic-gradient(from var(--ft-angle), rgba(4,178,237,.35), rgba(0,104,139,.2), rgba(0,90,120,.2), rgba(4,178,237,.35));
  filter:blur(22px); animation:ftSpin 4s linear infinite; pointer-events:none }
@keyframes ftSpin{ to{ --ft-angle:360deg } }

.footer-inner{ position:relative; border-radius:inherit; background:linear-gradient(180deg,#0d1319f2,#0d1319e6);
  border:1px solid rgba(255,255,255,.08); backdrop-filter:saturate(1.15) blur(10px); overflow:hidden; z-index:1 }
.footer-grid{ position:absolute; inset:-20%;
  background:radial-gradient(circle at center, rgba(255,255,255,.12) 1px, transparent 1.6px) 0 0/22px 22px,
             radial-gradient(circle at center, rgba(4,178,237,.12) 1px, transparent 1.6px) 11px 11px/22px 22px;
  opacity:.22; filter:blur(.2px); mask-image:radial-gradient(70% 70% at 50% 40%, #000 55%, transparent 85%);
  pointer-events:none; z-index:1 }
.footer-ring{ position:absolute; inset:0; border-radius:inherit; z-index:2; pointer-events:none }
.footer-ring::before{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ring-angle), rgba(4,178,237,.95) 0deg, rgba(0,104,139,.95) 120deg, rgba(0,90,120,.95) 240deg, rgba(4,178,237,.95) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:ringSpin 12s linear infinite;
  box-shadow:0 0 14px rgba(4,178,237,.35), inset 0 0 0 1px rgba(255,255,255,.06); opacity:.9 }
@keyframes ringSpin{ to{ --ring-angle:360deg } }

.footer-inner::before,.footer-inner::after{ content:""; position:absolute; border-radius:9999px; filter:blur(60px); opacity:.28; pointer-events:none; z-index:1 }
.footer-inner::before{ width:28rem; height:28rem; right:-10rem; top:-8rem; background:radial-gradient(closest-side,#00688B,transparent 70%) }
.footer-inner::after{ width:22rem; height:22rem; left:-8rem; bottom:-10rem; background:radial-gradient(closest-side,#04B2ED,transparent 70%) }
.footer-divider{ height:1px; background:linear-gradient(90deg,#005A78 0%,#00688B 40%,#04B2ED 60%,#005A78 100%); opacity:.75 }

.footer-links a{ position:relative; color:#cbd5e1; transition:color .2s ease }
.footer-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--brand-c),var(--brand-b)); transform:scaleX(0);
  transform-origin:left; transition:transform .25s ease; opacity:.85 }
.footer-links a:hover{ color:#e2e8f0 }
.footer-links a:hover::after{ transform:scaleX(1) }

.footer-social a{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem;
  border-radius:9999px; color:#e5f0f4; text-decoration:none; background:linear-gradient(180deg,#0f172a,#0c141b);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 28px -18px rgba(0,0,0,.55); transition:.2s }
.footer-social a:hover{ transform:translateY(-2px); border-color:rgba(4,178,237,.45); color:#fff;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset }
@media (prefers-reduced-motion:reduce){ .footer-shell,.footer-shell::before,.footer-ring::before{ animation:none } }