/* ==========================================================================
   ADCOM TECHNOLOGIES – Advanced Animation System
   Inspired by Global Nova: Particle Canvas, Cursor FX, Scroll Reveal,
   Typewriter Glitch, Magnetic Buttons, Floating Orbs, Tilt Cards, etc.
   ========================================================================== */

/* ─── Custom Cursor ──────────────────────────────────────────────────────── */
*, *::before, *::after { cursor: none !important; }

#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: #00d2ff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, width 0.2s, height 0.2s, background 0.2s;
  box-shadow: 0 0 12px #00d2ff, 0 0 30px rgba(0,210,255,0.5);
}

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(0,210,255,0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform 0.18s cubic-bezier(0.25,0.46,0.45,0.94),
              width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
}

body.cursor-hover #cursor-dot {
  width: 14px; height: 14px;
  background: #ffffff;
  box-shadow: 0 0 18px #fff, 0 0 40px rgba(0,210,255,0.7);
}

body.cursor-hover #cursor-ring {
  width: 60px; height: 60px;
  border-color: rgba(0,102,245,0.8);
  background: rgba(0,102,245,0.06);
}

body.cursor-click #cursor-dot {
  transform: translate(-50%,-50%) scale(0.5);
}

body.cursor-click #cursor-ring {
  transform: translate(-50%,-50%) scale(1.5);
  opacity: 0.4;
}

/* ─── Particle Canvas Background ─────────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ─── Floating Ambient Orbs ──────────────────────────────────────────────── */
.orb-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: orb-drift linear infinite;
}

.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,102,245,0.22) 0%, transparent 70%);
  top: -100px; left: -100px;
  animation-duration: 22s;
  animation-delay: 0s;
}
.orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,210,255,0.18) 0%, transparent 70%);
  top: 40%; right: -80px;
  animation-duration: 18s;
  animation-delay: -7s;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(100,60,255,0.14) 0%, transparent 70%);
  bottom: 5%; left: 30%;
  animation-duration: 26s;
  animation-delay: -13s;
}
.orb-4 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(0,102,245,0.15) 0%, transparent 70%);
  top: 60%; left: -50px;
  animation-duration: 30s;
  animation-delay: -20s;
}

@keyframes orb-drift {
  0%   { transform: translate(0px, 0px) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(60px, -40px) scale(1.05); }
  50%  { transform: translate(-30px, 80px) scale(0.95); }
  75%  { transform: translate(50px, 30px) scale(1.08); }
  90%  { opacity: 1; }
  100% { transform: translate(0px, 0px) scale(1);   opacity: 0; }
}

/* ─── Page Load Intro / Preloader ────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: #030a16;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  animation: loader-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes loader-pulse {
  from { transform: scale(0.96); opacity: 0.7; }
  to   { transform: scale(1.04); opacity: 1; }
}

.preloader-logo svg { width: 70px; height: 70px; }
.preloader-logo span {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, #fff 30%, #00d2ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.preloader-bar-track {
  width: 240px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0066f5, #00d2ff);
  border-radius: 2px;
  animation: bar-fill 1.8s cubic-bezier(0.4,0,0.2,1) forwards;
  box-shadow: 0 0 12px rgba(0,210,255,0.6);
}

@keyframes bar-fill {
  0%   { width: 0%; }
  60%  { width: 85%; }
  100% { width: 100%; }
}

.preloader-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,210,255,0.7);
}

/* ─── Hero Text Typewriter + Glitch ─────────────────────────────────────── */
.typewriter-text {
  display: inline-block;
  position: relative;
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #00d2ff;
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: blink-cursor 0.75s step-end infinite;
  box-shadow: 0 0 8px #00d2ff;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Glitch Text Effect */
.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: transparent;
  clip-path: inset(0 0 0 0);
}

.glitch-text::before {
  color: #00d2ff;
  animation: glitch-clip-1 4s infinite linear;
  left: 2px;
  text-shadow: -2px 0 #0066f5;
}

.glitch-text::after {
  color: #0066f5;
  animation: glitch-clip-2 4s infinite linear;
  left: -2px;
  text-shadow: 2px 0 #00d2ff;
}

@keyframes glitch-clip-1 {
  0%,90%,100%  { clip-path: inset(100% 0 0 0); opacity: 0; }
  91%          { clip-path: inset(8% 0 85% 0); opacity: 0.8; transform: translateX(-3px); }
  93%          { clip-path: inset(44% 0 50% 0); opacity: 0.8; transform: translateX(2px); }
  95%          { clip-path: inset(80% 0 4% 0); opacity: 0.8; transform: translateX(-1px); }
  97%          { clip-path: inset(30% 0 60% 0); opacity: 0.6; }
}

@keyframes glitch-clip-2 {
  0%,92%,100%  { clip-path: inset(100% 0 0 0); opacity: 0; }
  92.5%        { clip-path: inset(50% 0 40% 0); opacity: 0.7; transform: translateX(3px); }
  94.5%        { clip-path: inset(15% 0 75% 0); opacity: 0.7; transform: translateX(-2px); }
  96.5%        { clip-path: inset(70% 0 20% 0); opacity: 0.5; }
}

/* ─── Scroll Reveal Animations ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}

.reveal.reveal-left {
  transform: translateX(-50px);
}

.reveal.reveal-right {
  transform: translateX(50px);
}

.reveal.reveal-scale {
  transform: scale(0.88);
}

.reveal.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: none; }

/* ─── Magnetic Button Ripple ─────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
}

.btn .ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: ripple-expand 0.65s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* Button Shimmer Sweep */
.btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}

.btn:hover::after {
  animation: shimmer-sweep 0.65s ease forwards;
}

@keyframes shimmer-sweep {
  from { left: -75%; }
  to   { left: 125%; }
}

/* ─── Card 3D Tilt Effect ─────────────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease;
}

.tilt-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

/* Card Glow Border on Hover (Gradient Border Animation) */
.service-card {
  position: relative;
  z-index: 1;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 30%,
    #0066f5 50%,
    #00d2ff 60%,
    transparent 80%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: spin-border 3s linear infinite;
}

.service-card:hover::after {
  opacity: 1;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin-border {
  to { --angle: 360deg; }
}

/* ─── Animated Gradient Text Shimmer ─────────────────────────────────────── */
.animated-gradient-text {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #7dd3fc 25%,
    #00d2ff 50%,
    #0066f5 75%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 4s linear infinite;
}

@keyframes text-shimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ─── Number Counter Flash ────────────────────────────────────────────────── */
.trust-num {
  animation: none;
}

.trust-num.counting {
  animation: count-flash 0.1s ease;
}

@keyframes count-flash {
  0%   { color: #00d2ff; }
  100% { color: #ffffff; }
}

/* ─── Typing / Rotating Words ─────────────────────────────────────────────── */
.rotating-words-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.3em;
  vertical-align: bottom;
}

.rotating-word {
  display: block;
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.rotating-word.active {
  opacity: 1;
  transform: translateY(0);
}

.rotating-word.exiting {
  opacity: 0;
  transform: translateY(-100%);
}

/* ─── Grid Lines Background (Global Nova Style) ───────────────────────────── */
.grid-lines-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,210,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,210,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

/* ─── Animated Scanning Line (Hero Section Radar Feel) ───────────────────── */
.scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,210,255,0.6) 50%, transparent 100%);
  animation: scan-sweep 5s linear infinite;
  pointer-events: none;
  z-index: 1;
  filter: blur(1px);
}

@keyframes scan-sweep {
  0%   { top: 0%;    opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%;  opacity: 0; }
}

/* ─── Hero Badge Entrance Animation ──────────────────────────────────────── */
.hero-tag {
  animation: slide-down-fade 0.8s cubic-bezier(0.4,0,0.2,1) 0.3s both;
}

.hero-title {
  animation: slide-up-fade 0.9s cubic-bezier(0.4,0,0.2,1) 0.5s both;
}

.hero-subhead {
  animation: slide-up-fade 0.9s cubic-bezier(0.4,0,0.2,1) 0.7s both;
}

.hero-pill-grid {
  animation: slide-up-fade 0.9s cubic-bezier(0.4,0,0.2,1) 0.85s both;
}

.hero-cta-group {
  animation: slide-up-fade 0.9s cubic-bezier(0.4,0,0.2,1) 1s both;
}

.hero-visual-card {
  animation: slide-left-fade 1s cubic-bezier(0.4,0,0.2,1) 0.6s both;
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down-fade {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-left-fade {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Floating Badge Entrance ────────────────────────────────────────────── */
.hero-float-badge.badge-top {
  animation: float-badge-in 0.8s cubic-bezier(0.4,0,0.2,1) 1.2s both,
             float-slow 6s ease-in-out 2s infinite;
}

.hero-float-badge.badge-bottom {
  animation: float-badge-in 0.8s cubic-bezier(0.4,0,0.2,1) 1.4s both,
             float-slow-rev 7s ease-in-out 2.2s infinite;
}

@keyframes float-badge-in {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes float-slow-rev {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(8px); }
}

/* ─── Header Logo & Links Entrance ───────────────────────────────────────── */
.header .logo-container {
  animation: slide-down-fade 0.6s ease 0.1s both;
}

.header .nav-links {
  animation: slide-down-fade 0.6s ease 0.2s both;
}

.header .nav-actions {
  animation: slide-down-fade 0.6s ease 0.3s both;
}

/* ─── Trust Strip Entrance ────────────────────────────────────────────────── */
.trust-item {
  transition: transform 0.3s ease;
}

.trust-item:hover {
  transform: translateY(-4px);
}

/* ─── Section Heading Underline Draw ──────────────────────────────────────── */
.section-title::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #0066f5, #00d2ff);
  border-radius: 2px;
  margin: 0.75rem auto 0;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1) 0.3s;
}

.section-header.visible .section-title::after {
  width: 80px;
}

/* ─── Strength Cards Entrance ─────────────────────────────────────────────── */
.strength-card.reveal.visible {
  animation: card-pop-in 0.6s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes card-pop-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Quote Banner Glow Pulse ─────────────────────────────────────────────── */
.quote-box {
  animation: glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from { box-shadow: 0 20px 50px rgba(0,102,245,0.35), inset 0 1px 0 rgba(255,255,255,0.18); }
  to   { box-shadow: 0 30px 70px rgba(0,102,245,0.6), 0 0 30px rgba(0,210,255,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
}

/* ─── Moving Conic Gradient on Section Borders ────────────────────────────── */
.animated-border-section {
  position: relative;
}

.animated-border-section::before {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,210,255,0.5) 30%,
    rgba(0,102,245,0.8) 50%,
    rgba(0,210,255,0.5) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: border-shimmer 3s linear infinite;
}

@keyframes border-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Live Dot Glow Ping ─────────────────────────────────────────────────── */
.live-dot {
  position: relative;
}

.live-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #10b981;
  opacity: 0;
  animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}

@keyframes ping {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ─── Floating Particles (CSS Only Supplement) ────────────────────────────── */
.css-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(0,210,255,0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: css-float linear infinite;
}

@keyframes css-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-500px) translateX(var(--dx,0px)); opacity: 0; }
}

/* ─── Dashboard Tabs Indicator ───────────────────────────────────────────── */
.dash-tab {
  position: relative;
  overflow: hidden;
}

.dash-tab.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-blue);
  border-radius: inherit;
  z-index: -1;
  animation: tab-activate 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes tab-activate {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── FAQ Card Border on Open ────────────────────────────────────────────── */
.faq-card.open {
  animation: faq-open-glow 0.4s ease forwards;
}

@keyframes faq-open-glow {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 20px rgba(0,210,255,0.15), 0 4px 20px rgba(0,0,0,0.4); }
}

/* ─── Footer Logo Hover Spin ──────────────────────────────────────────────── */
.footer .logo-svg {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.footer .logo-container:hover .logo-svg {
  transform: rotate(360deg) scale(1.1);
}

/* ─── Scroll Progress Bar (Top of Viewport) ───────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0066f5, #00d2ff, #ffffff);
  z-index: 99999;
  box-shadow: 0 0 10px rgba(0,210,255,0.8);
  transition: width 0.1s linear;
}

/* ─── Interactive Gradient Mouse-Follow Spotlight ─────────────────────────── */
#mouse-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(0,102,245,0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%,-50%);
  transition: left 0.12s ease, top 0.12s ease;
  filter: blur(30px);
}

/* ─── Side Social Rail ────────────────────────────────────────────────────── */
.side-rail {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.side-rail::before,
.side-rail::after {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(0,210,255,0.4));
}

.side-rail::after {
  background: linear-gradient(0deg, transparent, rgba(0,210,255,0.4));
}

.side-rail a {
  color: rgba(255,255,255,0.35);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-rail a:hover {
  color: #00d2ff;
  transform: scale(1.3);
}

/* ─── Contact Form Focus Glow ─────────────────────────────────────────────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: input-glow 0.3s ease forwards;
}

@keyframes input-glow {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 0 2px rgba(0,210,255,0.25), 0 0 20px rgba(0,210,255,0.15); }
}

/* ─── Floating WhatsApp Button Pulse ──────────────────────────────────────── */
.floating-contact-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(37,211,102,0.35);
  z-index: -1;
  animation: whatsapp-ping 2s ease-out infinite;
}

@keyframes whatsapp-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ─── Responsive: Hide side-rail on small screens ─────────────────────────── */
@media (max-width: 1100px) {
  .side-rail { display: none; }
}