/* Custom CSS — only what Tailwind utilities don't cover */

html { scroll-behavior: smooth; }

.whatsapp-float {
  animation: wa-pulse 2.4s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 166, 151, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(0, 166, 151, 0); }
}

/* Hero background: slow zoom-in on load for a more dynamic first impression */
.hero-bg {
  transform: scale(1);
  animation: hero-zoom 18s ease-out forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

/* Home portfolio preview horizontal scroll */
.portfolio-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.portfolio-scroll::-webkit-scrollbar { display: none; }

/* Portfolio filter buttons */
.filter-btn { transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out; }
.filter-btn.is-active { background-color: #00A697; color: #fff; border-color: #00A697; }

/* Portfolio card image zoom on hover */
.project-card .project-img { transition: transform .4s ease-in-out; }
.project-card:hover .project-img { transform: scale(1.06); }

/* Gallery item hidden state for JS filter (avoid layout jump) */
.gallery-item.is-hidden { display: none; }

/* Testimonial carousel */
.testimonial-track { transition: transform .5s ease-in-out; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #d4d4d4; transition: background-color .2s ease-in-out, width .2s ease-in-out; }
.dot.is-active { background: #00A697; width: 22px; }

/* Counter section subtle grid texture */
.stats-section {
  background-color: #10221f;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Form focus rings matching brand */
.form-field:focus { outline: none; border-color: #00A697; box-shadow: 0 0 0 3px rgba(0,166,151,0.15); }

/* Skip-link for accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #00A697; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }