/* ===========================================================
   Anfield IT — shared theme styles (used by every page)
   =========================================================== */
body { font-family: 'Inter', system-ui, sans-serif; background: #f5f7fb; overflow-x: hidden; }
.font-display { font-family: 'Space Grotesk', Inter, sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0c0833; }
::-webkit-scrollbar-thumb { background: linear-gradient(#05B4F2, #0B7EC2); border-radius: 9px; }

/* Tech grid + drift */
.tech-grid {
  background-image:
    linear-gradient(rgba(63,198,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,198,255,.10) 1px, transparent 1px);
  background-size: 48px 48px;
}
.grid-drift { animation: gridDrift 18s linear infinite; }
@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 48px 48px, 48px 48px; } }

.glow        { box-shadow: 0 0 40px -8px rgba(11,126,194,.55); }
.glow-strong { box-shadow: 0 0 70px -10px rgba(63,198,255,.7); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

/* Animated gradient text */
.text-gradient {
  background: linear-gradient(90deg, #05B4F2, #3fc6ff, #05B4F2);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: textShine 6s linear infinite;
}
.text-gradient-ink {
  background: linear-gradient(90deg, #0B7EC2, #05B4F2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes textShine { to { background-position: 200% center; } }

/* Aurora blobs */
.aurora { position: absolute; border-radius: 9999px; filter: blur(70px); pointer-events: none; }
.aurora-1 { animation: drift1 16s ease-in-out infinite; }
.aurora-2 { animation: drift2 20s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-20px) scale(1.1); } }

/* Glassmorphism */
.glass { background: rgba(255,255,255,.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); }

/* Rotating conic glow ring */
.conic-ring::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 0deg, #3fc6ff, #0B7EC2, transparent, #3fc6ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 8s linear infinite; opacity: .85;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Gradient border on hover */
.grad-border::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(5,180,242,.8), rgba(11,126,194,.2), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  opacity: 0; transition: opacity .4s;
}
.grad-border:hover::after { opacity: 1; }

/* Cursor spotlight cards */
.svc-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(5,180,242,.16), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.svc-card:hover::before { opacity: 1; }
.svc-card > * { position: relative; z-index: 1; }

/* Shimmer badge */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

/* Live bars */
.bar { animation: bar 1.6s ease-in-out infinite; transform-origin: bottom; }
@keyframes bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Marquee */
.marquee { display: flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-mask { -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* Pulsing status dot */
.pulse-dot { box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* Scroll cue */
.scroll-cue { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Gauge ring draw-in */
.gauge-ring { stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.8s ease; }
.gauge-ring.drawn { stroke-dashoffset: 3; }

/* ---- Services dropdown (desktop) ---- */
.dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Keyboard focus visibility */
a:focus-visible, button:focus-visible { outline: 2px solid #05B4F2; outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .gauge-ring { stroke-dashoffset: 3; }
}