/* ============================================
   Wingi Software Technologies - Custom Styles
   ============================================ */

/* ----- Base ----- */
html { scroll-behavior: smooth; }
body { scroll-padding-top: 90px; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00B4D8, #06B6D4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #06B6D4, #00B4D8); }

/* Selection */
::selection { background: #00B4D8; color: #fff; }

/* ----- Active nav link ----- */
.nav-link.active, .mobile-link.active {
  color: #00B4D8 !important;
  background: rgba(0, 180, 216, 0.08);
}

/* ----- Navbar scrolled state ----- */
#navbar.scrolled nav > div {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 20px rgba(11, 25, 44, 0.08);
}

/* ----- Form inputs focus ring ----- */
.form-input:focus { box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.12); }

/* ----- Floating animation for hero cards ----- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
.float-card {
  animation: floatY 6s ease-in-out infinite;
}

/* ----- Floating nodes (small geometric elements) ----- */
@keyframes floatNode {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(15deg); }
}
.float-node {
  animation: floatNode 5s ease-in-out infinite;
}

/* ----- Hero bars grow animation ----- */
@keyframes barGrow {
  from { height: 0; }
  to   { height: var(--target-h, 50%); }
}
.bar {
  animation: barGrow 1.2s ease-out both;
  transform-origin: bottom;
}

/* ----- Counter pulse ----- */
@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(0, 180, 216, 0); }
  50%      { text-shadow: 0 0 20px rgba(0, 180, 216, 0.3); }
}

/* ----- Gradient text shimmer ----- */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ----- Tilt card base (vanilla-tilt adds transforms) ----- */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  will-change: transform;
}
.tilt-card > * { transform: translateZ(20px); }

/* ----- Gallery item hover overlay ----- */
.gallery-item img,
.gallery-item .mockup { transition: transform 0.4s ease; }
.gallery-item:hover img,
.gallery-item:hover .mockup { transform: scale(1.05); }

/* ----- Back to top button visible state ----- */
#back-to-top.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ----- Social button subtle scale ----- */
.social-btn { transition: transform 0.2s ease, background-color 0.2s ease; }
.social-btn:hover { transform: translateY(-2px) scale(1.05); }

/* ----- Direct card hover translate ----- */
.direct-card { transition: transform 0.25s ease, box-shadow 0.25s ease, ring-color 0.25s ease; }
.direct-card:hover { transform: translateY(-3px); }

/* ----- Gradient animated border for hero headline ----- */
.gradient-animate {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ----- Lightbox ----- */
#lightbox.open { display: flex !important; }
#lightbox-content { animation: lbIn 0.3s ease; }
#lightbox-content img { max-height: 75vh; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; }
@keyframes lbIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----- Portfolio filter buttons ----- */
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1E293B;
  background: #F1F5F9;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filter-btn:hover {
  background: #E2E8F0;
  color: #0B192C;
}
.filter-btn.active {
  background: linear-gradient(to left, #00B4D8, #06B6D4);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3);
}

/* ----- Project card filter show/hide ----- */
.project-card { transition: opacity 0.3s ease, transform 0.3s ease; }
.project-card.is-hidden {
  display: none !important;
}

/* ----- Mobile menu slide ----- */
#mobile-menu.open { animation: slideDown 0.3s ease; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .float-card, .float-node, .bar { animation: none !important; }
  html { scroll-behavior: auto; }
}