/* ============================================================
   PROFESSIONAL ANIMATIONS & 3D EFFECTS
   ============================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

:root {
  --ease-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

.perspective-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-smooth);
}

.card-3d:hover {
  transform: rotateX(8deg) rotateY(-8deg) translateZ(20px);
}

main {
  animation: fadeInUp 0.9s var(--ease-standard) 0.1s backwards;
}

.site-header {
  animation: fadeInDown 0.7s var(--ease-standard);
}

.hero { overflow: hidden; }

.hero__inner > div:nth-child(1) {
  animation: slideInLeft 1s var(--ease-smooth) 0.15s backwards;
}

.hero__inner > div:nth-child(2) {
  animation: slideInRight 1s var(--ease-smooth) 0.3s backwards;
}

.hero__bg {
  animation: scaleIn 1.4s var(--ease-standard) backwards;
}

.svc-card {
  animation: slideUp 0.8s var(--ease-standard) backwards;
  transition: all 0.5s var(--ease-smooth);
}

.svc-grid > .svc-card:nth-child(1) { animation-delay: 0.25s; }
.svc-grid > .svc-card:nth-child(2) { animation-delay: 0.4s; }
.svc-grid > .svc-card:nth-child(3) { animation-delay: 0.55s; }

.svc-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -20px rgba(0, 61, 165, 0.4);
}

.feat {
  animation: fadeInUp 0.7s var(--ease-standard) backwards;
}

.feat-grid > .feat:nth-child(1) { animation-delay: 0.15s; }
.feat-grid > .feat:nth-child(2) { animation-delay: 0.25s; }
.feat-grid > .feat:nth-child(3) { animation-delay: 0.35s; }
.feat-grid > .feat:nth-child(4) { animation-delay: 0.45s; }

.feat__ic { animation: scaleIn 0.6s var(--ease-smooth); }

.step {
  animation: fadeInUp 0.8s var(--ease-standard) backwards;
  transition: all 0.4s var(--ease-smooth);
}

.steps > .step:nth-child(1) { animation-delay: 0.1s; }
.steps > .step:nth-child(2) { animation-delay: 0.2s; }
.steps > .step:nth-child(3) { animation-delay: 0.3s; }
.steps > .step:nth-child(4) { animation-delay: 0.4s; }

.step:hover { transform: translateX(8px); }

.value {
  animation: slideUp 0.7s var(--ease-standard) backwards;
  transition: transform 0.3s var(--ease-smooth);
}

.values > .value:nth-child(1) { animation-delay: 0.1s; }
.values > .value:nth-child(2) { animation-delay: 0.2s; }
.values > .value:nth-child(3) { animation-delay: 0.3s; }
.values > .value:nth-child(4) { animation-delay: 0.4s; }

.value:hover { transform: translateY(-4px); }

.img-reveal img { animation: scaleIn 1.2s var(--ease-standard); }

.stat__num { animation: slideUp 0.8s var(--ease-standard) backwards; }

.stats > div:nth-child(1) .stat__num { animation-delay: 0.1s; }
.stats > div:nth-child(2) .stat__num { animation-delay: 0.2s; }
.stats > div:nth-child(3) .stat__num { animation-delay: 0.3s; }
.stats > div:nth-child(4) .stat__num { animation-delay: 0.4s; }

.btn { transition: all 0.3s var(--ease-smooth); }

.btn--amber:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(232, 149, 28, 0.3);
}

.btn--navy:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 61, 165, 0.3);
}

.btn--ghost:hover { transform: translateY(-3px); }

html { scroll-behavior: smooth; }

.field { animation: fadeInUp 0.6s var(--ease-standard) backwards; }

.field:nth-child(1) { animation-delay: 0.1s; }
.field:nth-child(2) { animation-delay: 0.15s; }
.field:nth-child(3) { animation-delay: 0.2s; }

.success-panel { animation: scaleIn 0.5s var(--ease-smooth); }

.success-panel .check { animation: floatUp 2s ease-in-out infinite; }

/* ============================================================
   SMOOTHER, MORE RELIABLE TRANSITIONS
   Promote elements to their own compositor layer ONLY while they
   still need to animate, then release the hint so we don't hold
   GPU memory. This keeps reveals and hovers jank-free.
   ============================================================ */

.reveal:not(.is-in),
.img-reveal:not(.is-in) img { will-change: transform, opacity; }

.svc-card:hover,
.why-card:hover,
.value:hover,
.step:hover,
.btn:hover { will-change: transform; }

/* Consistent, buttery scroll for in-page anchor links. */
@supports (scroll-behavior: smooth) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal:not(.is-in),
  .img-reveal:not(.is-in) img,
  .svc-card:hover,
  .why-card:hover,
  .value:hover,
  .step:hover,
  .btn:hover { will-change: auto; }
}