/* ==============================================
   TEAMIQUE FRONTEND — Animations & Interactions
   v3.0.0 | teamique.io
   ============================================== */

/* ── Keyframe Animations ─────────────────────── */
@keyframes tqFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tqFadeLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tqFadeRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tqScaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tqFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes tqPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(25,105,169,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(25,105,169,0); }
  100% { box-shadow: 0 0 0 0 rgba(25,105,169,0); }
}
@keyframes tqShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes tqSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll Progress Bar ─────────────────────── */
#tq-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1969A9 0%, #4F8EF7 60%, #4F8EF7 100%);
  width: 0%;
  z-index: 99999;
  transition: width .12s linear;
  border-radius: 0 2px 2px 0;
}

/* ── CTA / Button Hover — Upwork-style Lift ──── */
/* All links styled as buttons (rounded pill/rect) */
a[style*="border-radius"][style*="padding"],
button[style*="border-radius"] {
  transition: background .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.4,0,.2,1), color .28s ease !important;
  position: relative;
  overflow: hidden;
}

/* Primary blue CTAs → electric blue lift */
a[style*="background:#1969A9"],
a[style*="background: #1969A9"] {
  transition: all .28s cubic-bezier(.4,0,.2,1) !important;
}
a[style*="background:#1969A9"]:hover,
a[style*="background: #1969A9"]:hover {
  background: #4F8EF7 !important;
  box-shadow: 0 10px 32px rgba(79,142,247,.55) !important;
  transform: translateY(-3px) scale(1.02) !important;
  color: #fff !important;
}

/* Dark navy CTAs → blue shift */
a[style*="background:#0E0E1A"]:hover,
a[style*="background: #0E0E1A"]:hover {
  background: #1969A9 !important;
  box-shadow: 0 10px 28px rgba(25,105,169,.5) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* White CTAs → light blue fill */
a[style*="background:#fff"]:hover,
a[style*="background: #fff"]:hover,
a[style*="background:#ffffff"]:hover,
a[style*="background:white"]:hover {
  background: #E8F4FF !important;
  box-shadow: 0 10px 28px rgba(25,105,169,.22) !important;
  transform: translateY(-3px) scale(1.02) !important;
  color: #1969A9 !important;
}

/* WhatsApp / Green CTAs → brighter green */
a[style*="background:#27AE60"]:hover,
a[style*="background: #27AE60"]:hover,
a[style*="background:#25D366"]:hover,
a[style*="background:#0DC143"]:hover {
  background: #1DA851 !important;
  box-shadow: 0 10px 28px rgba(29,168,81,.5) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* LinkedIn button */
.tq-linkedin-btn {
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.tq-linkedin-btn:hover {
  background: #0A66C2 !important;
  box-shadow: 0 8px 22px rgba(10,102,194,.45) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* ── Card Hover Effects ───────────────────────── */
.tq-card {
  transition: transform .35s ease, box-shadow .35s ease !important;
}
.tq-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 28px 52px rgba(14,14,26,.13) !important;
}

/* Team-specific card */
.tq-team-card {
  transition: transform .35s ease, box-shadow .35s ease !important;
}
.tq-team-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 30px 56px rgba(25,105,169,.2) !important;
}

/* Service card */
.tq-service-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.tq-service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 44px rgba(25,105,169,.18) !important;
  border-color: #1969A9 !important;
}

/* ── Reveal Animations (JS-driven) ───────────── */
.tq-reveal {
  will-change: opacity, transform;
}

/* ── Floating Icon (hero decorations) ───────── */
.tq-float {
  animation: tqFloat 4s ease-in-out infinite;
}
.tq-float-delay {
  animation: tqFloat 4s 1.5s ease-in-out infinite;
}

/* ── Shimmer Skeleton (loading states) ──────── */
.tq-shimmer {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2eaf2 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: tqShimmer 1.4s infinite;
}

/* ── Pulse Ring (primary CTA attention) ──────── */
.tq-pulse-ring {
  animation: tqPulseRing 2.2s cubic-bezier(.66,0,0,1) infinite;
}

/* ── Nav link hover ───────────────────────────── */
nav a, .nav-link {
  transition: color .2s ease !important;
}

/* ── Smooth scrolling ─────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Accessible focus styles ─────────────────── */
a:focus-visible {
  outline: 3px solid #4F8EF7;
  outline-offset: 3px;
  border-radius: 4px;
}