/* ============================================================
   AMASH TECHNOLOGIES LTD. — 4D Animations & Motion
   ============================================================ */

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes floatY2 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-24px) rotate(1.5deg); }
}

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

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

@keyframes pulseGlow {
  0%, 100% { opacity: .5; filter: drop-shadow(0 0 12px rgba(56,225,255,.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 30px rgba(56,225,255,.9)); }
}

@keyframes scan {
  0% { top: -60%; }
  100% { top: 120%; }
}

@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes dashMove {
  to { stroke-dashoffset: -200; }
}

@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50% { opacity: .9; transform: scale(1.15); }
}

@keyframes ringPulse {
  0% { transform: translate(-50%, -50%) scale(.85); opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

@keyframes borderFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 200% 50%; }
}

@keyframes spinSlow { to { transform: rotate(360deg); } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Applied motion classes ---- */
.anim-float { animation: floatY 5.5s ease-in-out infinite; }
.anim-float-2 { animation: floatY2 7s ease-in-out infinite; }
.anim-pulse-glow { animation: pulseGlow 3.2s ease-in-out infinite; }
.anim-spin-slow { animation: spinSlow 24s linear infinite; }

.hero-logo-float { animation: floatCenter 6s ease-in-out infinite; }
@keyframes floatCenter {
  0%, 100% { transform: translate(-50%, -54%); }
  50% { transform: translate(-50%, calc(-54% - 16px)); }
}

.orbit-ring.r1 { width: 380px; height: 380px; animation: orbitSpin 26s linear infinite; }
.orbit-ring.r2 { width: 500px; height: 500px; animation: orbitSpinRev 38s linear infinite; border-color: rgba(244,185,66,.2); }
.orbit-ring.r3 { width: 620px; height: 620px; animation: orbitSpin 52s linear infinite; border-style: dotted; opacity: .6; }

.orbit-dot {
  position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), 0 0 30px rgba(56,225,255,.6);
}
.orbit-ring.r2 .orbit-dot { background: var(--gold); box-shadow: 0 0 14px var(--gold), 0 0 30px rgba(244,185,66,.6); }

/* Orbiting particle field (JS-generated spans use this) */
.orb-p {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(56,225,255,.8) 40%, transparent 70%);
  animation: twinkle 3s ease-in-out infinite;
  pointer-events: none;
}

/* Hero visual rings pulsing behind globe */
.hero-visual::before, .hero-visual::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(56,225,255,.18);
  animation: ringPulse 4s ease-out infinite;
  pointer-events: none;
}
.hero-visual::after { animation-delay: 2s; border-color: rgba(244,185,66,.15); }

/* Floating hero tech cards motion */
.fc-1 { top: 6%; left: -4%; animation: floatY 6s ease-in-out infinite; }
.fc-2 { top: 16%; right: -6%; animation: floatY2 7.5s ease-in-out infinite; }
.fc-3 { bottom: 20%; left: -8%; animation: floatY2 8s ease-in-out infinite; }
.fc-4 { bottom: 4%; right: 0%; animation: floatY 6.8s ease-in-out infinite; }

/* Gradient shift helpers */
.grad-anim { background-size: 200% 200%; animation: gradShift 8s ease infinite; }

/* Portfolio / product thumb gradient families */
.thumb-a { background: linear-gradient(135deg, #0b2f6b, #0a84ff 55%, #38e1ff); }
.thumb-b { background: linear-gradient(135deg, #1a1040, #6d28d9 55%, #38e1ff); }
.thumb-c { background: linear-gradient(135deg, #3a2a05, #d99a22 60%, #ffe3a1); }
.thumb-d { background: linear-gradient(135deg, #032a2c, #0e7490 55%, #22e6a8); }
.thumb-e { background: linear-gradient(135deg, #351224, #be2a63 55%, #ff8fb1); }
.thumb-f { background: linear-gradient(135deg, #0a1f4d, #1d4ed8 55%, #93c5fd); }
.thumb-a, .thumb-b, .thumb-c, .thumb-d, .thumb-e, .thumb-f { background-size: 160% 160%; }
.pf-card:hover .pf-thumb, .prod-card:hover .prod-thumb, .blog-card:hover .blog-thumb { animation: gradShift 4s ease infinite; }

/* 3D tilt base */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .tilt-inner { transform: translateZ(34px); }

/* Glowing border flow for featured panels */
.flow-border {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--bg1), var(--bg1)) padding-box,
    linear-gradient(120deg, var(--cyan), transparent 30%, var(--gold) 55%, transparent 80%, var(--cyan)) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: borderFlow 6s linear infinite;
}

/* Section reveal baseline (AOS handles most; fallback for no-JS) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Dashboard panel hover lift */
.panel.neon-card:hover { transform: translateY(-4px); }

/* Login card glow pulse */
.login-card { animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) both; }

/* Star field dots (JS) */
.star-dot { position: absolute; border-radius: 50%; background: #9fd4ff; animation: twinkle 4s ease-in-out infinite; pointer-events: none; }

/* Route arc drawing (SVG map) */
.route-arc {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: dashMove 4s linear infinite;
}

/* Map node pulse */
.map-node { transform-box: fill-box; transform-origin: center; animation: mapNode 2.6s ease-in-out infinite; }
@keyframes mapNode {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

/* No-GSAP fallback: hero entrance via pure CSS */
.no-gsap .gsap-in { animation: fadeUp 1s cubic-bezier(.2,.8,.2,1) both; }
.no-gsap .gsap-in:nth-child(2) { animation-delay: .15s; }
.no-gsap .gsap-in:nth-child(3) { animation-delay: .3s; }
.no-gsap .gsap-in:nth-child(4) { animation-delay: .45s; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}