/**
 * ERP Genius Pro — motion layer (loads after style.css)
 * Respects prefers-reduced-motion.
 */

:root {
  --erp-motion-duration: 0.55s;
  --erp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --erp-shadow-primary: 0 12px 32px rgba(2, 5, 161, 0.28);
  --erp-shadow-lift: 0 8px 24px rgba(2, 5, 161, 0.18);
}

/* -------------------------------------------------------------------------- */
/* Inner pages — page header (/features, /about, etc.)                        */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .page-header .row > [class*="col-"] {
    animation: erp-page-header-in 0.7s var(--erp-motion-ease) both;
  }

  @keyframes erp-page-header-in {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* -------------------------------------------------------------------------- */
/* Hero & imagery                                                            */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .banner .bann img,
  .banner .bann .img-fluid {
    animation: erp-float-y 7s ease-in-out infinite;
  }

  /* Feature / inner pages: hero-style image columns */
  #erp-main .container .bann img.w-100,
  #erp-main .container .bann img.img-fluid {
    animation: erp-float-y 8s ease-in-out infinite;
  }

  @keyframes erp-float-y {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-12px);
    }
  }

  /* Soft pulse on primary hero CTA (first screen) */
  .banner .btn-primary {
    animation: erp-cta-pulse 2.8s ease-in-out 2;
  }

  @keyframes erp-cta-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(81, 181, 109, 0.5);
    }
    45% {
      box-shadow: 0 0 0 14px rgba(81, 181, 109, 0);
    }
  }
}

/* -------------------------------------------------------------------------- */
/* Buttons — lift, shadow, shine sweep, icon slide                           */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .btn:not(.effect-none) {
    transition:
      transform 0.35s var(--erp-motion-ease),
      box-shadow 0.35s var(--erp-motion-ease),
      filter 0.35s ease;
  }

  .btn:not(.effect-none):hover,
  .btn:not(.effect-none):focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--erp-shadow-lift) !important;
  }

  .btn-primary:not(.effect-none):hover,
  .btn-primary:not(.effect-none):focus-visible {
    box-shadow:
      var(--erp-shadow-primary),
      0 0 36px rgba(81, 181, 109, 0.35) !important;
    filter: brightness(1.05);
  }

  /* Arrow / icon nudge inside buttons */
  .btn .fa-arrow-right,
  .btn .fas.fa-arrow-right {
    display: inline-block;
    transition: transform 0.4s var(--erp-motion-ease);
  }

  .btn:hover .fa-arrow-right,
  .btn:focus-visible .fa-arrow-right,
  .btn:hover .fas.fa-arrow-right,
  .btn:focus-visible .fas.fa-arrow-right {
    transform: translateX(6px);
  }

  /* Outline & pill-style controls (module tabs, etc.) */
  .btn-outline-primary:not(.effect-none) {
    transition:
      transform 0.3s var(--erp-motion-ease),
      box-shadow 0.3s var(--erp-motion-ease),
      background-color 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease;
  }

  .btn-outline-primary:not(.effect-none):hover,
  .btn-outline-primary:not(.effect-none):focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(2, 5, 161, 0.15) !important;
  }

  .nav-pills .nav-link.btn-outline-primary:not(.active):hover {
    transform: translateY(-2px);
  }
}

/* -------------------------------------------------------------------------- */
/* Navigation links — underline grow                                         */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle) {
    position: relative;
  }

  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0205a1, #51b56d);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.32s var(--erp-motion-ease);
  }

  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::before,
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):focus-visible::before {
    width: 70%;
  }

  /* Header CTA */
  header.navigation .btn.btn-primary {
    transition:
      transform 0.35s var(--erp-motion-ease),
      box-shadow 0.35s var(--erp-motion-ease);
  }

  header.navigation .btn.btn-primary:hover,
  header.navigation .btn.btn-primary:focus-visible {
    transform: translateY(-2px) scale(1.03);
  }
}

/* -------------------------------------------------------------------------- */
/* Cards & feature tiles                                                      */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .service-item {
    transition: transform 0.4s var(--erp-motion-ease), box-shadow 0.4s ease;
  }

  .service-item:hover {
    transform: translateY(-6px);
  }

  .service-item .block {
    transition: transform 0.35s var(--erp-motion-ease);
  }

  .service-item:hover .block {
    transform: scale(1.02);
  }

  /* Feature grid (/features, our-services, about, how-it-works) */
  .icon-box-item {
    transition: transform 0.4s var(--erp-motion-ease);
  }

  .icon-box-item > .rounded.shadow {
    transition:
      transform 0.4s var(--erp-motion-ease),
      box-shadow 0.4s ease;
  }

  .icon-box-item:hover > .rounded.shadow {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 40px rgba(2, 5, 161, 0.14) !important;
  }

  .icon-box-item .icon i {
    transition: transform 0.45s var(--erp-motion-ease), color 0.3s ease;
  }

  .icon-box-item:hover .icon i {
    transform: scale(1.12) translateY(-2px);
    color: #51b56d;
  }

  /* About core values & similar (.block, no .rounded.shadow) */
  .icon-box-item > .block {
    transition:
      transform 0.4s var(--erp-motion-ease),
      box-shadow 0.4s ease;
  }

  .icon-box-item:hover > .block {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(2, 5, 161, 0.12) !important;
  }

  .icon-box-item .rounded-number {
    transition: transform 0.4s var(--erp-motion-ease), color 0.3s ease;
  }

  .icon-box-item:hover .rounded-number {
    transform: scale(1.08);
    color: #51b56d;
  }

  /* Pricing tables (/pricing) */
  .pricingTable {
    transition:
      transform 0.45s var(--erp-motion-ease),
      box-shadow 0.45s ease;
  }

  .pricingTable:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 48px rgba(2, 5, 161, 0.16) !important;
  }

  /* How it works — step cards */
  .step-item {
    transition: transform 0.4s var(--erp-motion-ease);
  }

  .step-item:hover {
    transform: translateY(-6px);
  }

  .step-item .count {
    transition:
      transform 0.45s var(--erp-motion-ease),
      color 0.3s ease;
  }

  .step-item:hover .count {
    transform: scale(1.1);
    color: #51b56d;
  }

  /* Subscribe / contact form panels */
  .shadow.rounded.bg-white.p-5 {
    transition:
      transform 0.4s var(--erp-motion-ease),
      box-shadow 0.4s ease;
  }

  #erp-main .shadow.rounded.bg-white.p-5:hover {
    box-shadow: 0 18px 44px rgba(2, 5, 161, 0.12) !important;
  }

  .difference-of-us-item {
    transition:
      transform 0.4s var(--erp-motion-ease),
      box-shadow 0.4s ease,
      border-color 0.3s ease;
  }

  .difference-of-us-item:hover {
    transform: translateX(6px);
    box-shadow: 0 10px 36px rgba(2, 5, 161, 0.1) !important;
  }

  .difference-of-us-item .icon i {
    transition: transform 0.45s var(--erp-motion-ease), color 0.3s ease;
  }

  .difference-of-us-item:hover .icon i {
    transform: scale(1.12) rotate(-4deg);
    color: #51b56d;
  }
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal (class + .is-inview toggled by script)                       */
/* -------------------------------------------------------------------------- */

html.js-reveal-erp .reveal-fade:not(.is-inview) {
  opacity: 0;
  transform: translateY(32px);
}

.reveal-fade {
  transition:
    opacity var(--erp-motion-duration) var(--erp-motion-ease),
    transform var(--erp-motion-duration) var(--erp-motion-ease);
}

html.js-reveal-erp .reveal-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal-erp .reveal-fade:not(.is-inview) {
    opacity: 1;
    transform: none;
  }

  .banner .bann img,
  .banner .bann .img-fluid,
  .banner .btn-primary {
    animation: none !important;
  }

  #erp-main .container .bann img.w-100,
  #erp-main .container .bann img.img-fluid {
    animation: none !important;
  }

  .page-header .row > [class*="col-"] {
    animation: none !important;
  }
}
