/* ================================================================
   AHDC — React-Style Animation System
   ================================================================ */

/* ---------- IMPORT FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&display=swap');

/* ---------- ROOT TOKENS ---------- */
:root {
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  200ms;
  --dur-med:   400ms;
  --dur-slow:  600ms;
  --dur-xslow: 900ms;
}

/* ---------- PAGE TRANSITION ---------- */
html { scroll-behavior: smooth; }
body { animation: pageEnter var(--dur-med) var(--ease-out) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- SCROLL REVEAL BASE ---------- */
[data-aos] {
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--dur-slow);
}
[data-aos="fade-up"]    { opacity: 0; transform: translateY(40px); }
[data-aos="fade-down"]  { opacity: 0; transform: translateY(-40px); }
[data-aos="fade-left"]  { opacity: 0; transform: translateX(40px); }
[data-aos="fade-right"] { opacity: 0; transform: translateX(-40px); }
[data-aos="zoom-in"]    { opacity: 0; transform: scale(0.88); }
[data-aos="flip-up"]    { opacity: 0; transform: perspective(600px) rotateX(20deg); }
[data-aos].aos-animate  { opacity: 1; transform: none; }

/* Stagger delays */
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="350"] { transition-delay: 350ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="450"] { transition-delay: 450ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }

/* ---------- NAVBAR ANIMATIONS ---------- */
.navbar {
  transition: background var(--dur-med) var(--ease-in-out),
              box-shadow var(--dur-med) var(--ease-in-out),
              padding var(--dur-med) var(--ease-in-out) !important;
}
.navbar.scrolled {
  background: rgba(0,86,166,0.97) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.35) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  backdrop-filter: blur(16px) !important;
}
.nav-link {
  position: relative;
  transition: color var(--dur-fast) !important;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--color-gold, #F7941D);
  border-radius: 1px;
  transition: width var(--dur-med) var(--ease-spring), left var(--dur-med) var(--ease-spring);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; left: 0; }

/* ---------- HERO SECTION ---------- */
.hero-slide-content > * {
  animation: heroSlideUp var(--dur-slow) var(--ease-out) both;
}
.hero-slide-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-slide-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-slide-content > *:nth-child(3) { animation-delay: 0.4s; }
.hero-slide-content > *:nth-child(4) { animation-delay: 0.55s; }
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ken Burns on hero image */
.hero-slide img, .swiper-slide img.hero-img {
  animation: kenBurns 12s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1);    }
  to   { transform: scale(1.06); }
}

/* ---------- CARD HOVER EFFECTS ---------- */
/* Project cards */
.project-card {
  transition: transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-in-out) !important;
  will-change: transform;
}
.project-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18) !important;
}
.project-card-img img {
  transition: transform 600ms var(--ease-out) !important;
}
.project-card:hover .project-card-img img {
  transform: scale(1.08) !important;
}
.project-card-overlay {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-med), transform var(--dur-med) var(--ease-spring) !important;
}
.project-card:hover .project-card-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Service cards */
.service-card {
  transition: transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-in-out),
              border-color var(--dur-med) !important;
  will-change: transform;
}
.service-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18) !important;
}
.service-card:hover .service-icon i {
  animation: iconBounce 0.5s var(--ease-spring);
}
@keyframes iconBounce {
  0%  { transform: scale(1); }
  40% { transform: scale(1.25) rotate(-5deg); }
  70% { transform: scale(0.92) rotate(3deg); }
  100%{ transform: scale(1); }
}

/* Blog cards */
.blog-card {
  transition: transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) !important;
}
.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.13) !important;
}
.blog-card-img img {
  transition: transform 600ms var(--ease-out) !important;
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.07) !important;
}

/* ---------- BUTTONS ---------- */
.btn {
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast),
              background var(--dur-fast),
              border-color var(--dur-fast),
              color var(--dur-fast) !important;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.btn:hover::before { opacity: 1; }
.btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important; }
.btn:active { transform: translateY(0) scale(0.97); }

/* Ripple on click */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- SECTION HEADER ---------- */
.section-label {
  display: inline-block;
  animation: labelPop var(--dur-med) var(--ease-spring) both;
}
@keyframes labelPop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.gold-divider {
  transition: width var(--dur-slow) var(--ease-out);
  width: 0;
}
.gold-divider.in-view { width: 60px; }

/* ---------- COUNTER ANIMATION ---------- */
.stat-number {
  transition: color var(--dur-med);
}
.stat-item:hover .stat-number { color: #fff !important; }

/* ---------- TESTIMONIAL SWIPER ---------- */
.testimonial-card {
  transition: transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) !important;
}
.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25) !important;
}

/* ---------- GALLERY ---------- */
.gallery-item {
  overflow: hidden;
  border-radius: 12px;
  transition: transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) !important;
  cursor: pointer;
}
.gallery-item img {
  transition: transform 600ms var(--ease-out), filter 400ms !important;
  width: 100%; height: 100%; object-fit: cover;
}
.gallery-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important;
}
.gallery-item:hover img {
  transform: scale(1.08) !important;
  filter: brightness(0.85) !important;
}
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  opacity: 0;
  transition: opacity var(--dur-med) !important;
  display: flex; align-items: flex-end; padding: 20px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1 !important; }

/* ---------- LIGHTBOX ---------- */
.ahdc-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.93);
  display: flex; align-items: center; justify-content: center;
  animation: lightboxIn var(--dur-med) var(--ease-out);
  backdrop-filter: blur(8px);
}
@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ahdc-lightbox img {
  max-width: 90vw; max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  animation: lightboxImgIn var(--dur-med) var(--ease-spring);
}
@keyframes lightboxImgIn {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-close {
  position: fixed; top: 20px; right: 24px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.1) rotate(90deg); }

/* ---------- FORM INPUTS — FLOATING LABELS ---------- */
.float-group {
  position: relative; margin-bottom: 24px;
}
.float-group input,
.float-group textarea,
.float-group select {
  width: 100%; padding: 16px 14px 8px;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 10px; outline: none;
  font-size: 0.95rem; background: #fff;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.float-group label {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.9rem; color: #888;
  transition: all var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.float-group input:focus,
.float-group textarea:focus,
.float-group select:focus { border-color: #F7941D; box-shadow: 0 0 0 3px rgba(247,148,29,0.15); }
.float-group input:focus + label,
.float-group input:not(:placeholder-shown) + label,
.float-group textarea:focus + label,
.float-group textarea:not(:placeholder-shown) + label {
  top: 4px; font-size: 0.72rem; color: #F7941D; font-weight: 600;
}

/* ---------- LOADING SKELETON ---------- */
@keyframes shimmer {
  from { background-position: -800px 0; }
  to   { background-position:  800px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ---------- FILTER TABS ---------- */
.filter-tab {
  position: relative;
  transition: color var(--dur-fast), background var(--dur-fast) !important;
  overflow: hidden;
}
.filter-tab::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--color-gold, #F7941D);
  transform: scaleX(0);
  transition: transform var(--dur-med) var(--ease-spring);
  transform-origin: center;
}
.filter-tab.active::after,
.filter-tab:hover::after { transform: scaleX(1); }

/* ---------- MOBILE MENU ---------- */
.mobile-nav {
  transform: translateX(-100%);
  transition: transform var(--dur-med) var(--ease-out) !important;
}
.mobile-nav.open { transform: translateX(0) !important; }

/* ---------- SCROLL TO TOP ---------- */
.scroll-top-btn {
  transition: transform var(--dur-fast) var(--ease-spring),
              opacity var(--dur-fast),
              background var(--dur-fast) !important;
}
.scroll-top-btn:hover { transform: translateY(-4px) scale(1.1) !important; }

/* ---------- SECTION TRANSITIONS ---------- */
section { overflow: hidden; }

/* ---------- WHY CHOOSE ITEMS ---------- */
.why-item {
  transition: transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) !important;
}
.why-item:hover {
  transform: translateX(6px) !important;
  box-shadow: 0 12px 32px rgba(247,148,29,0.15) !important;
}
.why-item .why-icon {
  transition: transform var(--dur-med) var(--ease-spring) !important;
}
.why-item:hover .why-icon { transform: rotate(-8deg) scale(1.1) !important; }

/* ---------- STAT ITEMS ---------- */
.stat-item {
  transition: background var(--dur-med) !important;
}
.stat-item:hover { background: rgba(255,255,255,0.05) !important; border-radius: 12px; }

/* ---------- HEADER SECTION LABEL PULSE ---------- */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.9); }
}

/* ---------- BACK TO TOP PULSE ---------- */
@keyframes backTopPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247,148,29,0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(247,148,29,0); }
}
.scroll-top-btn { animation: backTopPulse 2s infinite; }

/* ---------- FOOTER ---------- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #F7941D, transparent);
}