/* ============================================================
   SHILPI ARCHITECTS — ANIMATIONS
   ============================================================ */

/* ── 1. FADE + SLIDE UP on scroll (base state) ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.72s cubic-bezier(.22,1,.36,1),
              transform 0.72s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1),
              transform 0.6s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s;    opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s;  opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s;  opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s;  opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.4s;  opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.5s;  opacity:1; transform:translateY(0); }

/* Fade only (no slide) */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.reveal-fade.visible { opacity: 1; }

/* ── 2. HERO ENTRANCE ── */
@keyframes heroSlideUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes heroFade {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes heroLineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

.hero-tag    { animation: heroSlideUp 0.7s cubic-bezier(.22,1,.36,1) 0.1s both; }
.hero-h      { animation: heroSlideUp 0.8s cubic-bezier(.22,1,.36,1) 0.22s both; }
.hero-sub    { animation: heroSlideUp 0.8s cubic-bezier(.22,1,.36,1) 0.36s both; }
.hero-btns   { animation: heroSlideUp 0.8s cubic-bezier(.22,1,.36,1) 0.48s both; }
.hero-r      { animation: heroFade   1.1s ease 0.1s both; }
.hero-proj   { animation: heroSlideUp 0.7s cubic-bezier(.22,1,.36,1) 0.55s both; }

/* ── 3. NAV ENTRANCE ── */
@keyframes navDrop {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}
nav { animation: navDrop 0.55s cubic-bezier(.22,1,.36,1) 0s both; }

/* ── 4. STAT NUMBER COUNT-UP FLASH ── */
@keyframes statPop {
  0%   { opacity:0; transform:scale(0.7) translateY(10px); }
  70%  { transform:scale(1.08) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
.stat-n.counted { animation: statPop 0.55s cubic-bezier(.34,1.56,.64,1) both; }

/* ── 5. IMAGE OVERLAY WIPE ── */
@keyframes imgWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.img-wipe {
  opacity: 0;
}
.img-wipe.visible {
  opacity: 1;
  animation: imgWipe 0.9s cubic-bezier(.77,0,.175,1) both;
}

/* ── 6. CARD HOVER LIFT ── */
.proj-card,
.pfull-card,
.aw-card,
.job-card,
.val,
.svc,
.pillar,
.exp-item {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.proj-card:hover,
.pfull-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26,26,24,0.10);
}
.aw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(26,26,24,0.08);
}
.val:hover,
.svc:hover,
.exp-item:hover {
  background: rgba(196,135,58,0.04);
}

/* ── 7. BUTTON ANIMATIONS ── */
.btn-dark, .btn-outline, .btn-white {
  transition: background 0.2s ease, color 0.2s ease,
              transform 0.15s ease, box-shadow 0.2s ease,
              border-color 0.2s ease;
}
.btn-dark:hover   { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,26,24,0.18); }
.btn-white:hover  { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196,135,58,0.25); }
.btn-dark:active,
.btn-white:active { transform: translateY(0) scale(0.98); }

/* ── 8. NAV LINK UNDERLINE ANIMATION ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.nav-cta::after { display: none; }

/* ── 9. LOGO HOVER ── */
.logo-img {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.logo-img:hover { opacity: 0.8; transform: scale(0.97); }

/* ── 10. PROJECT IMAGE ZOOM (already on .pthumb img but enhanced) ── */
.pthumb img,
.pfull-thumb img,
.pd-hero-img img,
.about-imgs img,
.car-imgs img {
  transition: transform 0.55s cubic-bezier(.22,1,.36,1);
}
.pthumb:hover img,
.pfull-thumb:hover img { transform: scale(1.06); }
.about-imgs img:hover  { transform: scale(1.04); }

/* ── 11. GALLERY IMAGE HOVER ── */
.pd-gallery img {
  transition: opacity 0.22s ease, transform 0.35s cubic-bezier(.22,1,.36,1);
}
.pd-gallery img:hover { opacity: 0.88; transform: scale(1.02); }

/* ── 12. SECTION HEADER ACCENT LINE ── */
.sec-hd h2,
.pp-hero h1,
.ds-hd h2,
.ppl-hero h1,
.ahl h1,
.car-hl h1,
.con-hero h1 {
  position: relative;
}

/* ── 13. CTA BAR PULSE on hover ── */
.cta-bar .btn-white {
  position: relative;
  overflow: hidden;
}
.cta-bar .btn-white::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(196,135,58,0.15);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.cta-bar .btn-white:hover::before { transform: scaleX(1); }

/* ── 14. FILTER BUTTON SLIDE ── */
.fb {
  position: relative;
  overflow: hidden;
}
.fb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
}
.fb:hover::after,
.fb.active::after { transform: scaleX(1); }

/* ── 15. PAGE TRANSITION ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body {
  animation: pageFadeIn 0.45s cubic-bezier(.22,1,.36,1) both;
}

/* ── 16. FOOTER LINK HOVER ── */
footer ul li a,
footer ul li {
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}
footer ul li:hover { transform: translateX(4px); }

/* ── 17. SOCIAL LINK BOUNCE ── */
.sl {
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.sl:hover { transform: translateY(-3px) scale(1.04); }

/* ── 18. AWARD CARD ICON SPIN ── */
.aw-ic {
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.2s ease;
}
.aw-card:hover .aw-ic { transform: rotate(12deg) scale(1.1); }

/* ── 19. HERO IMAGE SLOW PAN ── */
@keyframes slowPan {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.04) translateX(-2%); }
}
.hero-r img.bg {
  animation: slowPan 12s ease-in-out infinite alternate;
}

/* ── 20. STAT ROW HOVER HIGHLIGHT ── */
.stat {
  transition: background 0.2s ease;
}
.stat:hover { background: rgba(196,135,58,0.04); }

/* ── REDUCED MOTION SAFETY ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}