/* ============================================================
   DELTA PROTECH SOLUTIONS LLC — Shared utilities
   Design system: "Cyber-Shield Kinetic" (Corporate Modern + Glassmorphism)
   ============================================================ */

:root {
  --dp-black: #0a0a0a;
  --dp-blue: #0055ff;
  --dp-blue-soft: #b6c4ff;
  --dp-orange: #ff8a0d;
}

html { scroll-behavior: smooth; }

body {
  background-color: #131313;
}

/* Material Symbols ------------------------------------------------ */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Glassmorphism (Level 2) ---------------------------------------- */
.glass-panel {
  background-color: rgba(46, 46, 50, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
}

/* Glows ----------------------------------------------------------- */
.glow-blue { box-shadow: 0 0 20px rgba(0, 85, 255, 0.4); }
.glow-blue-hover:hover {
  box-shadow: 0 0 25px rgba(0, 85, 255, 0.6);
  transform: translateY(-2px);
}
.text-glow { text-shadow: 0 0 12px rgba(182, 196, 255, 0.5); }

.pulse-orange { animation: pulse-orange 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse-orange {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 13, 0.8); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 138, 13, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 13, 0); }
}

/* Backgrounds ----------------------------------------------------- */
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
}
.hero-glow {
  background: radial-gradient(circle at 30% 40%, rgba(0, 85, 255, 0.15) 0%, transparent 60%);
}

/* Fingerprint-shield watermark motif ------------------------------ */
.bg-motif {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 24 24' fill='none' stroke='%23b6c4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 40%;
  opacity: 0.05;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Card hover (service / feature) ---------------------------------- */
.service-card:hover {
  border-color: rgba(255, 138, 13, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 138, 13, 0.05);
  transform: translateY(-4px);
}
.service-card:hover .material-symbols-outlined.accent { color: var(--dp-orange); }

/* Buttons --------------------------------------------------------- */
.btn-primary {
  background-color: var(--dp-blue);
  color: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 0 0 20px rgba(0, 85, 255, 0.4);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #004dea;
  box-shadow: 0 0 25px rgba(0, 85, 255, 0.6);
  transform: translateY(-2px);
}
.btn-secondary {
  background-color: rgba(32, 32, 31, 0.3);
  border: 1px solid rgba(67, 70, 86, 0.5);
  color: #ffffff;
  border-radius: 0.125rem;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  border-color: rgba(0, 85, 255, 0.5);
  background-color: rgba(32, 32, 31, 0.5);
}
.btn-urgent {
  background-color: var(--dp-orange);
  color: #ffffff;
  border-radius: 0.125rem;
  transition: all 0.3s ease;
}
.btn-urgent:hover { box-shadow: 0 0 18px rgba(255, 138, 13, 0.5); }

/* Status chip ----------------------------------------------------- */
.status-chip-secure {
  background-color: rgba(0, 85, 255, 0.1);
  border: 1px solid rgba(0, 85, 255, 0.5);
  color: #b6c4ff;
}

/* ============================================================
   New design layer — animations, accessibility, shader host
   (from the "Final Accessible Experience" Stitch redesign)
   ============================================================ */

/* Animated background host (CSS fallback shown if WebGL is unavailable) */
[data-shader-bg] {
  background:
    radial-gradient(circle at 22% 28%, rgba(0,85,255,0.28), transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(255,138,13,0.14), transparent 52%),
    #191a1f;
}
[data-shader-bg].shader-ready { background: #16171c; }

/* Entrance animations ------------------------------------------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Scroll-reveal (triggered by IntersectionObserver in main.js) -- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Animated underline nav link ----------------------------------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background-color: var(--dp-blue);
  transform: scaleX(0); transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: bottom left; }

/* Accessible focus ring ----------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--dp-blue-soft);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-to-content link ------------------------------------------ */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: var(--dp-blue); color: #fff;
  padding: 10px 16px; border-radius: 4px; font-weight: 600;
  transform: translateY(-150%); transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Respect reduced motion & manual pause ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .pulse-orange { animation: none !important; }
  *[class*="animate-[spin"] { animation: none !important; }
}
.motion-paused .animate-fade-in-up,
.motion-paused .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
.motion-paused .pulse-orange { animation: none !important; }
.motion-paused *[class*="animate-[spin"] { animation: none !important; }