/* ========== SHANG site-wide animations ========== */

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

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

/* ----- Keyframes ----- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50%     { box-shadow: 0 6px 30px rgba(37,211,102,.85); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ----- Page entrance ----- */
nav { animation: slideDown .6s ease-out both; }
.hero, .page-header { animation: fadeIn .8s ease-out both; }
.hero h1, .page-header h1 { animation: fadeUp .8s .15s ease-out both; }
.hero p, .page-header p { animation: fadeUp .8s .3s ease-out both; }
.hero-btns, .hero .btn { animation: fadeUp .8s .45s ease-out both; }

/* Animated gradient on hero / page-header / cta-banner */
.hero, .page-header, .cta-banner, .tagline-card {
  background-size: 200% 200% !important;
  animation: gradientShift 12s ease-in-out infinite, fadeIn .8s ease-out both;
}

/* ----- Scroll-reveal helpers (added by animations.js) ----- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .48s; }

/* ----- Card hovers (extend existing cards) ----- */
.contact-card, .info-card, .service-card, .feature-card, .step-card, .form-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover, .info-card:hover, .service-card:hover, .feature-card:hover, .step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Icon micro-interaction inside cards */
.cc-icon, .service-icon, .feature-icon { transition: transform .35s ease; }
.contact-card:hover .cc-icon,
.service-card:hover .service-icon,
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(-4deg); }

/* ----- Buttons ----- */
.btn, button[type="submit"], .submit-btn, .send-btn {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.btn:hover, button[type="submit"]:hover, .submit-btn:hover, .send-btn:hover {
  transform: translateY(-2px);
}
.btn:active, button[type="submit"]:active, .submit-btn:active, .send-btn:active {
  transform: translateY(0) scale(.98);
}

/* Shimmer sweep on white pill buttons */
.btn-white { position: relative; overflow: hidden; }
.btn-white::after {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-white:hover::after { left: 130%; }

/* ----- Nav links ----- */
.nav-links a { position: relative; }
.nav-links a:not(.active)::before {
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: 4px;
  height: 2px; background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:not(.active):hover::before { transform: scaleX(1); }

/* Logo hover */
.nav-logo img { transition: transform .35s ease; }
.nav-logo:hover img { transform: rotate(-8deg) scale(1.06); }

/* ----- WhatsApp float button ----- */
a[href*="wa.me"][style*="position:fixed"] {
  animation: pulseGlow 2.5s ease-in-out infinite, fadeIn .6s ease-out both;
}

/* ----- Form inputs ----- */
input, textarea, select { transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
input:focus, textarea:focus, select:focus { transform: translateY(-1px); }

/* ----- Section titles ----- */
.section-title { position: relative; }
.section-title::after {
  content: "";
  display: block;
  width: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  margin: 12px auto 0;
  transition: width .8s ease;
}
.section-title.in-view::after { width: 120px; }

/* ----- Dropdown polish ----- */
.nav-dropdown-content { transform: translateY(-6px); }
.nav-dropdown:hover .nav-dropdown-content { transform: translateY(0); }
.nav-dropdown-content a { transition: background .15s, color .15s, padding-left .2s; }
.nav-dropdown-content a:hover { padding-left: 26px; }

/* ----- Footer ----- */
footer { animation: fadeIn .6s ease-out both; }
footer a { transition: color .2s; }
footer a:hover { color: #fff; }