/* =========================================================
   SMART IT – Custom Stylesheet
   (Tailwind CDN handles utility classes; this file adds
   custom keyframes, animations, and component overrides.)
   ========================================================= */

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDownIn {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Animation helpers ---------- */
.animate-fade-in      { animation: fadeIn      0.6s ease-out forwards; }
.animate-scale-in     { animation: scaleIn     0.6s ease-out forwards; }
.animate-slide-up-in  { animation: slideUpIn   0.7s ease-out forwards; }
.animate-slide-down-in{ animation: slideDownIn 0.7s ease-out forwards; }
.animate-slide-in-right{ animation: slideInRight 0.5s ease-out forwards; }
.animate-scroll       { animation: scroll 20s linear infinite; }
.animate-scroll-slow  { animation: scroll 30s linear infinite; }

/* Paused on hover */
.scroll-track:hover .animate-scroll,
.scroll-track:hover .animate-scroll-slow {
  animation-play-state: paused;
}

/* Elements visible only after JS marks them in-view */
.reveal            { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible    { opacity: 1; transform: translateY(0); }
.reveal-left       { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible{ opacity: 1; transform: translateX(0); }

/* ---------- Hover-scale helper ---------- */
.hover-scale { transition: transform 0.2s ease; }
.hover-scale:hover { transform: scale(1.04); }

/* ---------- Header ---------- */
#site-header { transition: box-shadow 0.3s ease; }
#site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* ---------- Hero ---------- */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Dropdown menus ---------- */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 0.75rem;
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  border-radius: 0.25rem;
  transition: color 0.2s, background 0.2s;
}
.nav-dropdown-menu a:hover { color: #0891b2; background: #f0fdfe; }
.nav-dropdown-parent:hover .nav-dropdown-menu,
.nav-dropdown-menu.open { display: block; }

/* Mobile menu */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ---------- Scrolling ticker (logo strips) ---------- */
.logo-strip { display: flex; width: max-content; }

/* ---------- Tech logos grayscale ---------- */
.tech-logo-img {
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.tech-logo-img:hover { filter: grayscale(0%); transform: scale(1.05); }

/* ---------- Card hover lift ---------- */
.card-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-hover:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.12); transform: translateY(-6px); }

/* ---------- Gradient text ---------- */
.gradient-text {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Counter ---------- */
.counter-num { font-variant-numeric: tabular-nums; }

/* ---------- Form focus ---------- */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.15);
}

/* ---------- Toast notification ---------- */
#toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  min-width: 280px;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#toast.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
#toast.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }