/**
 * Robwoh Unified Advisory - Executive Motion & Animation System
 *
 * Designed with fiduciary restraint, weighted deceleration curves,
 * and high-performance GPU-accelerated micro-interactions.
 *
 * @version 1.0.0
 */

:root {
  --ease-executive: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --anim-duration-reveal: 1.1s;
  --anim-duration-micro: 0.45s;
  --anim-duration-fast: 0.25s;
}

/* =========================================================================
   1. READING / SCROLL PROGRESS BAR (HAIRLINE EMERALD-GOLD)
   ========================================================================= */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #1ca77a 0%, #22c55e 40%, #d4af37 80%, #ffd700 100%);
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(28, 167, 122, 0.6);
  transition: width 0.12s linear;
}

/* =========================================================================
   2. SCROLL REVEAL FOUNDATION (GPU-ACCELERATED)
   ========================================================================= */
.rv-reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--anim-duration-reveal) var(--ease-executive),
              transform var(--anim-duration-reveal) var(--ease-executive);
}

.rv-reveal-up {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
  transition: opacity var(--anim-duration-reveal) var(--ease-executive),
              transform var(--anim-duration-reveal) var(--ease-executive);
}

.rv-reveal-fade {
  opacity: 0;
  transform: none;
  will-change: opacity;
  transition: opacity var(--anim-duration-reveal) var(--ease-executive);
}

.rv-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  will-change: opacity, transform;
  transition: opacity var(--anim-duration-reveal) var(--ease-executive),
              transform var(--anim-duration-reveal) var(--ease-executive);
}

.rv-reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  will-change: opacity, transform;
  transition: opacity var(--anim-duration-reveal) var(--ease-executive),
              transform var(--anim-duration-reveal) var(--ease-executive);
}

.rv-reveal-right {
  opacity: 0;
  transform: translateX(36px);
  will-change: opacity, transform;
  transition: opacity var(--anim-duration-reveal) var(--ease-executive),
              transform var(--anim-duration-reveal) var(--ease-executive);
}

/* Revealed Active State */
.rv-reveal.is-revealed,
.rv-reveal-up.is-revealed,
.rv-reveal-fade.is-revealed,
.rv-reveal-scale.is-revealed,
.rv-reveal-left.is-revealed,
.rv-reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* Stagger Delays */
.rv-delay-1 { transition-delay: 0.08s !important; }
.rv-delay-2 { transition-delay: 0.16s !important; }
.rv-delay-3 { transition-delay: 0.24s !important; }
.rv-delay-4 { transition-delay: 0.32s !important; }
.rv-delay-5 { transition-delay: 0.40s !important; }
.rv-delay-6 { transition-delay: 0.48s !important; }
.rv-delay-7 { transition-delay: 0.56s !important; }
.rv-delay-8 { transition-delay: 0.64s !important; }

/* =========================================================================
   3. FIDUCIARY CARD MICRO-INTERACTIONS & HOVER ELEVATION
   ========================================================================= */
.pillar-card,
.practice-card,
.leadership-profile-card,
.article-card,
.contact-card,
.service-detail-feature,
.executive-gateway-card,
.contact-info-card,
.faq-accordion-item {
  transition: transform var(--anim-duration-micro) var(--ease-executive),
              box-shadow var(--anim-duration-micro) var(--ease-executive),
              border-color var(--anim-duration-micro) ease !important;
}

.pillar-card:hover,
.practice-card:hover,
.article-card:hover,
.contact-card:hover,
.contact-info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.16),
              0 0 0 1px rgba(28, 167, 122, 0.3) !important;
}

/* =========================================================================
   4. BUTTON & CTA TACTILE MAGNETIC RESPONSIVENESS
   ========================================================================= */
.header-cta-btn,
.hero-cta-primary,
.hero-cta-secondary,
.newsletter-submit-btn,
.service-cta-btn,
.btn-primary,
.btn-secondary {
  transition: transform var(--anim-duration-fast) var(--ease-executive),
              box-shadow var(--anim-duration-fast) var(--ease-executive),
              background-color var(--anim-duration-fast) ease !important;
}

.header-cta-btn:hover,
.hero-cta-primary:hover,
.newsletter-submit-btn:hover,
.service-cta-btn:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(28, 167, 122, 0.45) !important;
}

.header-cta-btn:active,
.hero-cta-primary:active,
.newsletter-submit-btn:active {
  transform: translateY(0);
}

/* Magnetic Icon Drift */
.header-cta-btn .header-cta-icon,
.hero-cta-primary .hero-cta-icon,
.service-cta-btn .service-btn-icon,
.newsletter-submit-btn .newsletter-btn-icon {
  display: inline-flex;
  transition: transform 0.35s var(--ease-executive);
}

.header-cta-btn:hover .header-cta-icon,
.hero-cta-primary:hover .hero-cta-icon,
.service-cta-btn:hover .service-btn-icon,
.newsletter-submit-btn:hover .newsletter-btn-icon {
  transform: translate(3px, -3px);
}

/* =========================================================================
   5. AMBIENT BREATHING FLOAT FOR BADGES & FLOATING PILLS
   ========================================================================= */
@keyframes ambientFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-6px);
  }
}

.hero-trust-badge,
.newsletter-bell-badge,
.floating-stat-badge {
  animation: ambientFloat 4.5s ease-in-out infinite alternate;
}

/* =========================================================================
   6. IMAGE HOVER ZOOM (KEN BURNS EFFECT)
   ========================================================================= */
.hero-image-wrap img,
.practice-card-image img,
.article-thumbnail-wrap img,
.leadership-portrait-wrap img {
  transition: transform 0.85s var(--ease-executive) !important;
}

.practice-card:hover .practice-card-image img,
.article-card:hover .article-thumbnail-wrap img,
.leadership-profile-card:hover .leadership-portrait-wrap img {
  transform: scale(1.04);
}

/* =========================================================================
   7. FORM FOCUS ILLUMINATION
   ========================================================================= */
.form-control,
.newsletter-field,
.contact-input,
.consultation-input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}

.form-control:focus,
.newsletter-field:focus,
.contact-input:focus,
.consultation-input:focus {
  border-color: #1ca77a !important;
  box-shadow: 0 0 0 3px rgba(28, 167, 122, 0.18) !important;
}

/* =========================================================================
   8. STAT COUNTER NUMERICAL FLUIDITY
   ========================================================================= */
.stat-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  will-change: contents;
}

/* =========================================================================
   9. DIGITAL BUSINESS CARD 3D TILT
   ========================================================================= */
.business-card {
  transition: transform 0.45s var(--ease-executive),
              box-shadow 0.45s var(--ease-executive) !important;
  transform-style: preserve-3d;
}

.business-card:hover {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.85),
              0 0 60px rgba(28, 167, 122, 0.16) !important;
}

/* =========================================================================
   10. WCAG 2.2 AA REDUCED MOTION SAFEGUARD
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  #scrollProgressBar {
    display: none !important;
  }

  .rv-reveal,
  .rv-reveal-up,
  .rv-reveal-fade,
  .rv-reveal-scale,
  .rv-reveal-left,
  .rv-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-trust-badge,
  .newsletter-bell-badge,
  .floating-stat-badge {
    animation: none !important;
  }

  .pillar-card:hover,
  .practice-card:hover,
  .article-card:hover,
  .contact-card:hover,
  .business-card:hover {
    transform: none !important;
  }
}