/* ============================================================
   CPN SOLUTIONS — animations.css
   All transitions, keyframes, scroll reveals, hover effects,
   loading states, and micro-interactions
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. KEYFRAME DEFINITIONS
══════════════════════════════════════════════════════════ */

/* Fade & Slide Entrances */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Floating / Pulse */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(2deg); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27,79,138,0.35); }
  50%       { box-shadow: 0 0 0 14px rgba(27,79,138,0); }
}

@keyframes pulseWhite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Shimmer (skeleton loader) */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Typewriter cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Counter count-up (visual bounce) */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Underline slide-in */
@keyframes underlineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Background gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Ripple */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Slide-in from bottom (mobile nav / drawers) */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Progress bar fill */
@keyframes fillBar {
  from { width: 0%; }
  to   { width: var(--fill); }
}

/* Icon wobble on hover */
@keyframes wobble {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-12deg); }
  30%  { transform: rotate(10deg); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(6deg); }
  75%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Dot loading (three dots) */
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%            { transform: translateY(-10px); }
}

/* Notification badge shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

/* Hero background orb drift */
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.08); }
  66%  { transform: translate(-20px, 30px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Card flip */
@keyframes flipIn {
  from { opacity: 0; transform: perspective(600px) rotateY(-20deg); }
  to   { opacity: 1; transform: perspective(600px) rotateY(0); }
}

/* ══════════════════════════════════════════════════════════
   2. PAGE LOAD — HERO STAGGER
══════════════════════════════════════════════════════════ */

/* Navbar logo / links entrance */
.navbar {
  animation: fadeInDown 0.6s cubic-bezier(0.4,0,0.2,1) both;
}

/* Hero content — cascading stagger */
.hero-content .badge {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}

.hero-content h1 {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.22s both;
}

.hero-content .hero-tagline {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.36s both;
}

.hero-content p {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.44s both;
}

.hero-actions {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.56s both;
}

.hero-stats {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.68s both;
}

/* Hero image floats in from right */
.hero-image {
  animation: fadeInRight 0.9s cubic-bezier(0.4,0,0.2,1) 0.3s both;
}

/* Hero img badge pops in */
.hero-img-badge {
  animation: scaleInBounce 0.6s cubic-bezier(0.4,0,0.2,1) 1s both;
}

/* Floating animation on hero image wrapper */
.hero-img-wrap {
  animation: floatSlow 6s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Page hero (inner pages) */
.page-hero h1 {
  animation: fadeInUp 0.65s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}

.page-hero p {
  animation: fadeInUp 0.65s cubic-bezier(0.4,0,0.2,1) 0.22s both;
}

.breadcrumb {
  animation: fadeIn 0.5s ease 0.05s both;
}

/* ══════════════════════════════════════════════════════════
   3. SCROLL REVEAL SYSTEM
══════════════════════════════════════════════════════════ */

/* Base state — hidden before revealed */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.75s cubic-bezier(0.4,0,0.2,1),
    transform 0.75s cubic-bezier(0.4,0,0.2,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity  0.75s cubic-bezier(0.4,0,0.2,1),
    transform 0.75s cubic-bezier(0.4,0,0.2,1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity  0.75s cubic-bezier(0.4,0,0.2,1),
    transform 0.75s cubic-bezier(0.4,0,0.2,1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity   0.7s cubic-bezier(0.4,0,0.2,1),
    transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.reveal-group > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-group > *:nth-child(7) { transition-delay: 0.65s; }
.reveal-group > *:nth-child(8) { transition-delay: 0.70s; }

/* ══════════════════════════════════════════════════════════
   4. NAVBAR TRANSITIONS & SCROLL EFFECT
══════════════════════════════════════════════════════════ */

.navbar {
  transition:
    box-shadow  0.35s cubic-bezier(0.4,0,0.2,1),
    background  0.35s cubic-bezier(0.4,0,0.2,1),
    border-color 0.35s cubic-bezier(0.4,0,0.2,1);
}

.navbar.scrolled {
  box-shadow: 0 4px 28px rgba(27,79,138,0.13);
}

/* Nav link hover underline */
.nav-links a::after {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  transform-origin: left center;
}

/* Mobile nav slide down */
.mobile-nav {
  animation: slideDown 0.28s cubic-bezier(0.4,0,0.2,1) both;
}

/* Hamburger bars morph */
.hamburger span {
  transition:
    transform 0.3s cubic-bezier(0.4,0,0.2,1),
    opacity   0.2s ease,
    width     0.2s ease;
}

/* ══════════════════════════════════════════════════════════
   5. BUTTON MICRO-INTERACTIONS
══════════════════════════════════════════════════════════ */

.btn {
  transition:
    background   0.28s cubic-bezier(0.4,0,0.2,1),
    color        0.28s cubic-bezier(0.4,0,0.2,1),
    border-color 0.28s cubic-bezier(0.4,0,0.2,1),
    transform    0.22s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.28s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}

/* Ripple on click */
.btn::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  background: rgba(255,255,255,0.28);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: none;
}

.btn:active::after {
  inset: -50%;
  transform: scale(1);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Arrow icon inside btn slides right on hover */
.btn .btn-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}

.btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* ══════════════════════════════════════════════════════════
   6. CARD HOVER TRANSITIONS
══════════════════════════════════════════════════════════ */

/* Generic card */
.card,
.service-card,
.testimonial-card,
.blog-card,
.job-card,
.newsletter-card,
.why-card,
.industry-card {
  transition:
    transform    0.32s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.32s cubic-bezier(0.4,0,0.2,1),
    border-color 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* Card top accent line */
.card::before {
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  transform-origin: left;
}

/* Card icon background change */
.card-icon {
  transition:
    background 0.3s cubic-bezier(0.4,0,0.2,1),
    transform  0.3s cubic-bezier(0.4,0,0.2,1);
}

.card:hover .card-icon {
  transform: scale(1.1) rotate(-4deg);
}

/* Service card image zoom */
.service-card-img {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.service-card:hover .service-card-img {
  transform: scale(1.06);
}

/* Blog card image zoom */
.blog-card-img {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.blog-card:hover .blog-card-img {
  transform: scale(1.06);
}

/* Industry card hover */
.industry-card {
  transition:
    background   0.32s cubic-bezier(0.4,0,0.2,1),
    transform    0.32s cubic-bezier(0.4,0,0.2,1),
    border-color 0.32s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.32s cubic-bezier(0.4,0,0.2,1);
}

.industry-icon {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.industry-card:hover .industry-icon {
  transform: scale(1.2) translateY(-3px);
  animation: wobble 0.6s ease;
}

/* ══════════════════════════════════════════════════════════
   7. FLOATING SOCIAL BAR TRANSITIONS
══════════════════════════════════════════════════════════ */

.social-float {
  animation: fadeInRight 0.6s cubic-bezier(0.4,0,0.2,1) 1s both;
}

.social-float a {
  transition:
    width      0.32s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),
    filter     0.28s ease;
}

.social-float a:hover {
  filter: brightness(1.12);
}

.social-float a .sf-label {
  transition: opacity 0.2s ease 0.08s;
}

.social-float a .sf-icon {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.social-float a:hover .sf-icon {
  transform: scale(1.15);
}

/* Pulse animation on WhatsApp icon (draw attention) */
.sf-whatsapp {
  animation: pulse 2.5s ease-in-out 3s infinite;
}

/* ══════════════════════════════════════════════════════════
   8. FORM TRANSITIONS
══════════════════════════════════════════════════════════ */

.form-group input,
.form-group textarea,
.form-group select {
  transition:
    border-color 0.25s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.25s cubic-bezier(0.4,0,0.2,1),
    background   0.25s ease;
}

/* Label float effect (optional — applied via JS .has-value) */
.form-group.floating {
  position: relative;
}

.form-group.floating label {
  position: absolute;
  top: 13px; left: 16px;
  font-size: 0.95rem;
  color: var(--text-light);
  pointer-events: none;
  transition:
    top      0.22s cubic-bezier(0.4,0,0.2,1),
    font-size 0.22s cubic-bezier(0.4,0,0.2,1),
    color     0.22s cubic-bezier(0.4,0,0.2,1);
  background: var(--white);
  padding: 0 4px;
}

.form-group.floating input:focus ~ label,
.form-group.floating input:not(:placeholder-shown) ~ label,
.form-group.floating textarea:focus ~ label,
.form-group.floating textarea:not(:placeholder-shown) ~ label {
  top: -10px;
  font-size: 0.78rem;
  color: var(--blue-mid);
}

/* Submit button loading state */
.btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn.loading::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* Success state */
.btn.success {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

/* ══════════════════════════════════════════════════════════
   9. STAT COUNTER ANIMATION
══════════════════════════════════════════════════════════ */

.stat-item h2,
.hero-stat-item h3 {
  display: inline-block;
  animation: countUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
}

.stats-bar .stat-item:nth-child(1) h2 { animation-delay: 0.05s; }
.stats-bar .stat-item:nth-child(2) h2 { animation-delay: 0.15s; }
.stats-bar .stat-item:nth-child(3) h2 { animation-delay: 0.25s; }
.stats-bar .stat-item:nth-child(4) h2 { animation-delay: 0.35s; }

/* ══════════════════════════════════════════════════════════
   10. FOOTER LINK TRANSITIONS
══════════════════════════════════════════════════════════ */

.footer-links a {
  transition:
    color        0.25s cubic-bezier(0.4,0,0.2,1),
    padding-left 0.25s cubic-bezier(0.4,0,0.2,1);
}

.footer-links a::before {
  transition:
    opacity   0.25s ease,
    transform 0.25s ease;
}

.footer-social a {
  transition:
    background 0.28s cubic-bezier(0.4,0,0.2,1),
    color      0.28s cubic-bezier(0.4,0,0.2,1),
    transform  0.28s cubic-bezier(0.34,1.56,0.64,1);
}

/* ══════════════════════════════════════════════════════════
   11. SCROLL-TO-TOP BUTTON
══════════════════════════════════════════════════════════ */

.scroll-top {
  transition:
    opacity    0.35s cubic-bezier(0.4,0,0.2,1),
    background 0.28s ease,
    transform  0.28s cubic-bezier(0.34,1.56,0.64,1);
}

.scroll-top:hover {
  transform: translateY(-5px) scale(1.08);
}

/* ══════════════════════════════════════════════════════════
   12. SECTION BADGE ENTRANCE
══════════════════════════════════════════════════════════ */

.section-header .badge {
  animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

.section-header h2 {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}

.section-header p {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}

/* ══════════════════════════════════════════════════════════
   13. TESTIMONIAL CARD HOVER DETAIL
══════════════════════════════════════════════════════════ */

.testimonial-card::before {
  transition:
    color    0.3s ease,
    opacity  0.3s ease,
    transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.testimonial-card:hover::before {
  transform: scale(1.15) translateY(-4px);
  opacity: 0.6;
}

/* Star rating micro animation */
.stars {
  display: inline-block;
  animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}

/* ══════════════════════════════════════════════════════════
   14. HERO BACKGROUND ORBS
══════════════════════════════════════════════════════════ */

.hero::before {
  animation: orbDrift 14s ease-in-out infinite;
}

/* Animated gradient hero background */
.hero {
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

/* ══════════════════════════════════════════════════════════
   15. SKELETON LOADER (for dynamic content)
══════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f4f8 25%,
    #e2eaf2 50%,
    #f0f4f8 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}

.skeleton-text  { height: 14px; margin-bottom: 10px; }
.skeleton-title { height: 22px; width: 65%; margin-bottom: 16px; }
.skeleton-img   { height: 200px; width: 100%; border-radius: 14px; }

/* ══════════════════════════════════════════════════════════
   16. ABOUT IMAGE ENTRANCE
══════════════════════════════════════════════════════════ */

.about-img-wrap img {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.about-img-wrap:hover img {
  transform: scale(1.03);
}

.about-accent-card {
  transition:
    transform  0.35s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.35s ease;
}

.about-img-wrap:hover .about-accent-card {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(27,79,138,0.25);
}

/* ══════════════════════════════════════════════════════════
   17. PROCESS STEP STAGGER
══════════════════════════════════════════════════════════ */

.process-steps .process-step:nth-child(1) { transition-delay: 0.05s; }
.process-steps .process-step:nth-child(2) { transition-delay: 0.15s; }
.process-steps .process-step:nth-child(3) { transition-delay: 0.25s; }
.process-steps .process-step:nth-child(4) { transition-delay: 0.35s; }

.step-number {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.process-step:hover .step-number {
  transform: scale(1.15) rotate(-5deg);
}

/* ══════════════════════════════════════════════════════════
   18. FOUNDER SECTION
══════════════════════════════════════════════════════════ */

.founder-img {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.founder-grid:hover .founder-img {
  transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════
   19. CTA BANNER PULSE BUTTON
══════════════════════════════════════════════════════════ */

.cta-banner .btn-white {
  animation: pulseWhite 3s ease-in-out 2s infinite;
}

/* ══════════════════════════════════════════════════════════
   20. CONTACT INFO CARD HOVER
══════════════════════════════════════════════════════════ */

.contact-info-card {
  transition:
    transform    0.3s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.3s ease,
    border-color 0.3s ease;
}

.contact-info-card:hover {
  transform: translateX(6px);
  border-color: var(--blue-mid);
  box-shadow: -4px 0 20px rgba(27,79,138,0.1);
}

.contact-info-icon {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.contact-info-card:hover .contact-info-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* ══════════════════════════════════════════════════════════
   21. MOBILE NAV LINK STAGGER
══════════════════════════════════════════════════════════ */

.mobile-nav a {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity    0.25s cubic-bezier(0.4,0,0.2,1),
    transform  0.25s cubic-bezier(0.4,0,0.2,1),
    background 0.2s ease,
    color      0.2s ease;
}

.mobile-nav.open a:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.mobile-nav.open a:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; }
.mobile-nav.open a:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
.mobile-nav.open a:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.20s; }
.mobile-nav.open a:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.25s; }
.mobile-nav.open a:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.30s; }
.mobile-nav.open a:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.35s; }
.mobile-nav.open a:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.40s; }

/* ══════════════════════════════════════════════════════════
   22. TYPEWRITER EFFECT (applied via JS)
══════════════════════════════════════════════════════════ */

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--blue-light);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blink 0.8s step-end infinite;
}

/* ══════════════════════════════════════════════════════════
   23. NEWSLETTER CARD HEADER SHIMMER
══════════════════════════════════════════════════════════ */

.newsletter-card-header {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ══════════════════════════════════════════════════════════
   24. SUBSCRIBE FORM BUTTON
══════════════════════════════════════════════════════════ */

.subscribe-form .btn {
  transition:
    background   0.28s ease,
    transform    0.22s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.28s ease;
}

.subscribe-form .btn:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   25. GLOBAL LINK HOVER
══════════════════════════════════════════════════════════ */

a {
  transition: color 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════════════
   26. DIVIDER ANIMATION (on scroll reveal)
══════════════════════════════════════════════════════════ */

.divider {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) 0.3s;
}

.section-header.visible .divider,
.reveal.visible ~ .divider,
.divider.visible {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════════════════════
   27. WHY-CARD NUMBER FLOAT
══════════════════════════════════════════════════════════ */

.why-number {
  transition:
    color     0.3s ease,
    transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.why-card:hover .why-number {
  color: var(--blue-pale);
  transform: scale(1.1) translateX(-4px);
}

/* ══════════════════════════════════════════════════════════
   28. BLOG READ-MORE ARROW
══════════════════════════════════════════════════════════ */

.blog-read-more {
  transition: gap 0.25s cubic-bezier(0.4,0,0.2,1), color 0.25s ease;
}

.blog-card:hover .blog-read-more {
  gap: 10px;
  color: var(--blue-mid);
}

/* ══════════════════════════════════════════════════════════
   29. HERO STAT COUNTER — ODOMETER FEEL (via JS)
      .counting class triggers animation
══════════════════════════════════════════════════════════ */

.stat-number {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.stat-number.counting {
  animation: countUp 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ══════════════════════════════════════════════════════════
   30. REDUCE MOTION — RESPECT USER PREFERENCE
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  .hero-img-wrap     { animation: none; }
  .social-float      { animation: none; }
  .sf-whatsapp       { animation: none; }
  .cta-banner .btn-white { animation: none; }
  .newsletter-card-header { animation: none; }
  .hero              { animation: none; }
  .hero::before      { animation: none; }
}