/* =====================================================================
   ANIMATIONS.CSS — Premium Keyframes, 3D Effects & Micro-Interactions
   ===================================================================== */

/* ─────────────────────────────────────────────
   Core Keyframes
───────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes shimmer-wide {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(204,0,0,0.7); }
  50%       { transform: scale(1.4); opacity: 0.7; box-shadow: 0 0 0 8px rgba(204,0,0,0); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-14px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  33%       { transform: translateY(-24px) rotate(2deg) scale(1.02); }
  66%       { transform: translateY(-12px) rotate(-1deg) scale(0.99); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25%       { transform: translateY(-18px) translateX(8px); }
  50%       { transform: translateY(-8px) translateX(-5px); }
  75%       { transform: translateY(-22px) translateX(12px); }
}

@keyframes float-wa {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes rotate {
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

@keyframes rotate-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(204,0,0,0.4), 0 0 40px rgba(204,0,0,0.1); }
  50%       { box-shadow: 0 0 60px rgba(204,0,0,0.9), 0 0 120px rgba(204,0,0,0.4), 0 0 180px rgba(204,0,0,0.1); }
}

@keyframes glow-pulse-blue {
  0%, 100% { box-shadow: 0 0 20px rgba(26,95,200,0.4); }
  50%       { box-shadow: 0 0 60px rgba(26,95,200,0.9), 0 0 100px rgba(26,95,200,0.4); }
}

@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up-sm {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide-in-left {
  0%   { opacity: 0; transform: translateX(-48px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  0%   { opacity: 0; transform: translateX(48px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%       { transform: translateY(-5px); opacity: 1; }
}

@keyframes counter-up {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes web-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

@keyframes hexagon-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.08); }
}

/* Spider-Man web-swing animation */
@keyframes web-swing {
  0%   { transform: rotate(-8deg) translateY(0px); }
  25%  { transform: rotate(0deg) translateY(-15px); }
  50%  { transform: rotate(8deg) translateY(0px); }
  75%  { transform: rotate(0deg) translateY(-10px); }
  100% { transform: rotate(-8deg) translateY(0px); }
}

@keyframes spider-eye {
  0%, 90%, 100% { transform: scale(1); opacity: 1; }
  95%           { transform: scale(0.1); opacity: 0.3; }
}

@keyframes web-shoot {
  0%   { stroke-dashoffset: 500; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.6; }
}

@keyframes web-glow {
  0%, 100% { opacity: 0.03; }
  50%       { opacity: 0.09; }
}

@keyframes line-draw {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

@keyframes hero-text-reveal {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}

/* Premium glitch effect */
@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 98% 0); transform: translateX(-4px); }
  20%       { clip-path: inset(30% 0 50% 0); transform: translateX(4px); }
  40%       { clip-path: inset(60% 0 20% 0); transform: translateX(-2px); }
  60%       { clip-path: inset(80% 0 5% 0); transform: translateX(2px); }
  80%       { clip-path: inset(10% 0 80% 0); transform: translateX(-4px); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(98% 0 0 0); transform: translateX(4px); }
  20%       { clip-path: inset(50% 0 30% 0); transform: translateX(-4px); }
  40%       { clip-path: inset(20% 0 60% 0); transform: translateX(2px); }
  60%       { clip-path: inset(5% 0 80% 0); transform: translateX(-2px); }
  80%       { clip-path: inset(80% 0 10% 0); transform: translateX(4px); }
}

/* Magnetic ripple */
@keyframes ripple {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}

/* Border glow sweep */
@keyframes border-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Cursor glow pulse */
@keyframes cursor-pulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.8; }
  50%       { transform: translate(-50%,-50%) scale(1.5); opacity: 0.4; }
}

/* Number count-up reveal */
@keyframes number-reveal {
  0%   { opacity: 0; transform: translateY(30px) scale(0.9); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Noise grain texture animation */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%       { transform: translate(-2%, -3%); }
  20%       { transform: translate(3%, 2%); }
  30%       { transform: translate(-1%, 4%); }
  40%       { transform: translate(4%, -1%); }
  50%       { transform: translate(-3%, 3%); }
  60%       { transform: translate(2%, -4%); }
  70%       { transform: translate(-4%, 1%); }
  80%       { transform: translate(1%, -2%); }
  90%       { transform: translate(-2%, 4%); }
}

/* Premium orb drift */
@keyframes orb-drift {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(30px,-20px) scale(1.05); }
  50%  { transform: translate(-10px,-40px) scale(0.95); }
  75%  { transform: translate(-30px,-15px) scale(1.02); }
  100% { transform: translate(0,0) scale(1); }
}

/* Scanline sweep */
@keyframes scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -100px; }
}

/* ─────────────────────────────────────────────
   Hero Canvas
───────────────────────────────────────────── */
#hero-canvas {
  opacity: 0.9;
  transition: opacity 1s ease;
}

/* ─────────────────────────────────────────────
   Floating 3D Orbs (Premium)
───────────────────────────────────────────── */
.floating-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  animation: orb-drift 16s ease-in-out infinite;
  will-change: transform;
}

.orb-red {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle at 40% 40%, rgba(204,0,0,0.25), rgba(204,0,0,0.05) 60%, transparent);
  top: -180px;
  right: -150px;
  animation-duration: 18s;
}

.orb-blue {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle at 40% 40%, rgba(26,95,200,0.18), rgba(26,95,200,0.04) 60%, transparent);
  bottom: -100px;
  left: -80px;
  animation-duration: 22s;
  animation-delay: -6s;
}

.orb-purple {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(140,0,0,0.12), transparent);
  top: 40%;
  right: 20%;
  animation-duration: 26s;
  animation-delay: -12s;
}

/* ─────────────────────────────────────────────
   Geometric Shapes
───────────────────────────────────────────── */
.geo-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.12;
  animation: float 10s ease-in-out infinite;
}

.geo-triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid var(--color-primary);
  filter: blur(1px);
}

.geo-circle {
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  animation: web-spin 20s linear infinite;
}

.geo-diamond {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  transform: rotate(45deg);
  opacity: 0.1;
}

/* ─────────────────────────────────────────────
   Premium Noise Texture Overlay
───────────────────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: -200px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grain 0.5s steps(1) infinite;
  will-change: transform;
}

/* ─────────────────────────────────────────────
   Custom Cursor
───────────────────────────────────────────── */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  mix-blend-mode: screen;
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(204,0,0,0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, transform 0.08s linear;
  will-change: transform;
}

.cursor-ring.hovering {
  width: 56px;
  height: 56px;
  border-color: rgba(204,0,0,0.9);
  background: rgba(204,0,0,0.06);
}

.cursor-dot.hovering {
  width: 4px;
  height: 4px;
  background: white;
}

/* ─────────────────────────────────────────────
   3D Tilt Card Effect
───────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.08s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.tilt-card .tilt-inner {
  transform: translateZ(20px);
}

.tilt-card:hover {
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(204,0,0,0.15);
}

/* ─────────────────────────────────────────────
   Glow Text
───────────────────────────────────────────── */
.glow-text-red {
  text-shadow: 0 0 20px rgba(204,0,0,0.8), 0 0 40px rgba(204,0,0,0.4), 0 0 80px rgba(204,0,0,0.2);
}

.glow-text-blue {
  text-shadow: 0 0 20px rgba(26,95,200,0.8), 0 0 40px rgba(26,95,200,0.4);
}

/* ─────────────────────────────────────────────
   Hero Title Glitch Layer
───────────────────────────────────────────── */
.hero-title-wrapper {
  position: relative;
  display: inline-block;
}

.hero-title-wrapper::before,
.hero-title-wrapper::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  color: white;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  opacity: 0;
  pointer-events: none;
}

.hero-title-wrapper:hover::before {
  color: #cc0000;
  text-shadow: 2px 0 rgba(204,0,0,0.6);
  animation: glitch-1 0.4s steps(2, end) 0s 3;
  opacity: 0.5;
}

.hero-title-wrapper:hover::after {
  color: #1a5fc8;
  text-shadow: -2px 0 rgba(26,95,200,0.6);
  animation: glitch-2 0.4s steps(2, end) 0.05s 3;
  opacity: 0.5;
}

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

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

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

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

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delays */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal:nth-child(6) { transition-delay: 0.5s; }

/* ─────────────────────────────────────────────
   Service Card Hover Icon Pulse
───────────────────────────────────────────── */
.service-card:hover .service-icon {
  animation: glow-pulse 1.5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   Stat Number Animation
───────────────────────────────────────────── */
.stat-number.animated {
  animation: number-reveal 0.6s cubic-bezier(0.4,0,0.2,1) both;
}

/* ─────────────────────────────────────────────
   Logo Icon Glint
───────────────────────────────────────────── */
.logo-icon {
  position: relative;
  overflow: hidden;
}

.logo-icon::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 340deg, rgba(255,255,255,0.35) 360deg);
  animation: rotate-slow 3s linear infinite;
}

/* ─────────────────────────────────────────────
   Animated Border (Premium Cards)
───────────────────────────────────────────── */
.animated-border {
  position: relative;
}

.animated-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--color-primary),
    var(--color-accent),
    rgba(255,255,255,0.3),
    var(--color-primary)
  );
  background-size: 300%;
  animation: shimmer-wide 4s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.animated-border:hover::after {
  opacity: 0.7;
}

/* ─────────────────────────────────────────────
   Magnetic Button Ripple
───────────────────────────────────────────── */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  width: 10px;
  height: 10px;
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

/* ─────────────────────────────────────────────
   Spider-Web SVG Background
───────────────────────────────────────────── */
.web-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: web-glow 4s ease-in-out infinite;
  background-image:
    repeating-conic-gradient(from 0deg at 0% 0%,
      transparent 0deg, transparent 11deg,
      rgba(204,0,0,0.07) 11deg, rgba(204,0,0,0.07) 12deg
    ),
    radial-gradient(circle at 0% 0%,
      transparent 50px, rgba(204,0,0,0.05) 50px, rgba(204,0,0,0.05) 51px,
      transparent 51px, transparent 100px,
      rgba(204,0,0,0.04) 100px, rgba(204,0,0,0.04) 101px,
      transparent 101px, transparent 150px,
      rgba(204,0,0,0.03) 150px, rgba(204,0,0,0.03) 151px,
      transparent 151px, transparent 200px,
      rgba(204,0,0,0.02) 200px, rgba(204,0,0,0.02) 201px,
      transparent 201px
    );
  background-size: 200px 200px, 200px 200px;
}

/* ─────────────────────────────────────────────
   Progress/Loading Bar
───────────────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 9998;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  box-shadow: 0 0 12px var(--color-primary);
}

/* ─────────────────────────────────────────────
   Page Load Animation
───────────────────────────────────────────── */
body {
  animation: fade-in 0.6s ease both;
}

.hero-content {
  animation: fade-in-up 1s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.3s;
}

/* ─────────────────────────────────────────────
   Section Line Accent
───────────────────────────────────────────── */
.section-line-accent {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  transition: width 1.2s ease;
}

.section-line-accent.visible {
  width: 100%;
}

/* ─────────────────────────────────────────────
   Hover Lift (general utility)
───────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(204,0,0,0.1);
}

/* ─────────────────────────────────────────────
   Scroll Progress Indicator
───────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #cc0000, #1a5fc8, #cc0000);
  background-size: 200%;
  animation: shimmer 3s linear infinite;
  z-index: 9998;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(204,0,0,0.8);
}