/* =====================================================================
   animations.css — Architech
   Award-winning reveal system. Subtle, precise, professional.
   Principle: elements settle into place — they don't perform.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   EASING TOKENS (referenced below)
   --spring  : slight overshoot, settles fast — feels alive
   --smooth  : clean deceleration — feels confident
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   1. BASE REVEAL — lift + fade (used on most elements)
   ───────────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────
   2. STAGGER DELAYS — grid children get these from nav.js
   ───────────────────────────────────────────────────────────────────── */
.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.18s; }
.reveal-delay-4 { transition-delay: 0.24s; }
.reveal-delay-5 { transition-delay: 0.30s; }
.reveal-delay-6 { transition-delay: 0.36s; }
.reveal-delay-7 { transition-delay: 0.42s; }
.reveal-delay-8 { transition-delay: 0.48s; }

/* ─────────────────────────────────────────────────────────────────────
   3. FADE ONLY — for text blocks, labels, descriptions
   ───────────────────────────────────────────────────────────────────── */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.reveal-fade.visible { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   4. SCALE — for cards, images, portfolio items
   Barely perceptible scale change makes cards feel "present"
   ───────────────────────────────────────────────────────────────────── */
.reveal-scale {
  opacity: 0;
  transform: scale(0.97) translateY(12px);
  transition:
    opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────
   5. DIRECTIONAL — for split sections, side-by-side layouts
   ───────────────────────────────────────────────────────────────────── */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-left.visible  { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ─────────────────────────────────────────────────────────────────────
   6. HERO SEQUENCE — each element lands one after another
   ───────────────────────────────────────────────────────────────────── */
@keyframes heroLand {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroGlow {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-eyebrow  { animation: heroLand 0.7s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
.hero h1       { animation: heroLand 0.8s cubic-bezier(0.22,1,0.36,1) 0.22s both; }
.hero-sub      { animation: heroLand 0.7s cubic-bezier(0.22,1,0.36,1) 0.36s both; }
.hero-actions  { animation: heroLand 0.7s cubic-bezier(0.22,1,0.36,1) 0.48s both; }
.hero-stats    { animation: heroGlow 0.8s cubic-bezier(0.22,1,0.36,1) 0.60s both; }
.hero-scroll   { animation: heroGlow 0.8s cubic-bezier(0.22,1,0.36,1) 1.00s both; }
.trust-bar     { animation: heroGlow 0.6s cubic-bezier(0.22,1,0.36,1) 0.80s both; }

/* ─────────────────────────────────────────────────────────────────────
   7. NAV ENTRANCE
   ───────────────────────────────────────────────────────────────────── */
nav { animation: heroGlow 0.5s cubic-bezier(0.22,1,0.36,1) 0.05s both; }

/* ─────────────────────────────────────────────────────────────────────
   8. STAT COUNTERS — pop in with scale
   ───────────────────────────────────────────────────────────────────── */
@keyframes statPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-stat:not(.is-animated) {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}
.hero-stat.is-animated {
  animation: statPop 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

/* ─────────────────────────────────────────────────────────────────────
   9. MARQUEE
   ───────────────────────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}
.marquee-section:hover .marquee-track { animation-play-state: paused; }

/* ─────────────────────────────────────────────────────────────────────
   10. PAGE LOADER EXIT
   ───────────────────────────────────────────────────────────────────── */
.page-loader {
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), visibility 0.75s;
}

/* ─────────────────────────────────────────────────────────────────────
   11. HOVER INTERACTIONS — micro-motion, not drama
   ───────────────────────────────────────────────────────────────────── */

/* Service cards */
.service-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,169,110,0.3);
  background:   rgba(201,169,110,0.04);
  box-shadow:   0 24px 56px rgba(0,0,0,0.26), 0 0 0 1px rgba(201,169,110,0.1) inset;
}

/* Process steps */
.process-step {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s ease, background 0.3s ease;
}
.process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(201,169,110,0.22);
  background:   rgba(201,169,110,0.03);
}

/* Testimonials */
.testimonial {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s ease, background 0.3s ease;
}
.testimonial:hover {
  transform: translateY(-3px);
  border-color: rgba(201,169,110,0.2);
  background:   rgba(201,169,110,0.02);
}

/* Credential badges */
.cred-badge {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s ease, background 0.3s ease;
}
.cred-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(201,169,110,0.3);
  background:   rgba(201,169,110,0.06);
}

/* Portfolio items — gold reveal line */
.portfolio-item::before {
  transition: right 0.5s cubic-bezier(0.22,1,0.36,1);
}
.portfolio-item:hover::before { right: 0; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item:hover .portfolio-item-index,
.portfolio-item:hover .portfolio-item-icon {
  opacity: 1;
  transform: none;
}

/* Image parallax zoom */
.split-visual img {
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1);
}
.split-visual:hover img { transform: scale(1.05); }

/* FAQ accordion */
.faq-answer {
  transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
}

/* Form focus glow */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: rgba(201,169,110,0.5)  !important;
  background:   rgba(201,169,110,0.04) !important;
  box-shadow:   0 0 0 3px rgba(201,169,110,0.07) !important;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

/* Floating WA button entrance */
@keyframes floatSlideIn {
  from { opacity: 0; transform: translateX(-18px) scale(0.92); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.wa-float { animation: floatSlideIn 0.65s cubic-bezier(0.22,1,0.36,1) 1.2s both; }

/* Back-to-top show/hide */
.back-top {
  transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1),
              visibility 0.35s;
}
.back-top:not(.visible) {
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.88);
}
.back-top.visible {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────────────────────────────
   12. REDUCED MOTION — full accessibility compliance
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fade, .reveal-scale, .reveal-left, .reveal-right {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  .hero-eyebrow, .hero h1, .hero-sub, .hero-actions,
  .hero-stats, .hero-scroll, .trust-bar, nav,
  .wa-float, .hero-stat { animation: none !important; opacity: 1 !important; transform: none !important; }
  .marquee-track { animation-duration: 80s !important; }
  .service-card, .process-step, .testimonial,
  .cred-badge, .split-visual img { transition: none !important; }
}