/* ============================================================
   NOUVO AYITI — Animations & Micro-Interactions
   Sophisticated premium animations for mobile-first design
   ============================================================ */

/* ================================================================
   SCROLL REVEAL ANIMATIONS
   ================================================================ */

/* Base reveal element (hidden until visible) */
.na-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 650ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 650ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Stagger effect for multiple reveals */
.na-reveal:nth-child(1) { transition-delay: 0ms; }
.na-reveal:nth-child(2) { transition-delay: 80ms; }
.na-reveal:nth-child(3) { transition-delay: 160ms; }
.na-reveal:nth-child(4) { transition-delay: 240ms; }
.na-reveal:nth-child(5) { transition-delay: 320ms; }
.na-reveal:nth-child(6) { transition-delay: 400ms; }

/* Fade-in from left */
.na-fade-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.na-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade-in from right */
.na-fade-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.na-fade-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up on reveal */
.na-scale-up {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.na-scale-up.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ================================================================
   BUTTON ANIMATIONS
   ================================================================ */

/* Enhanced button hover with glow */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.btn:hover::before {
  opacity: 1;
}

/* Button press animation */
.btn:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* Primary button hover elevation */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(18,61,143,0.25);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(227,27,35,0.25);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(53,168,74,0.25);
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(18,61,143,0.15);
}

/* Loading spinner subtle animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn.is-loading::after {
  animation: spin 0.8s linear infinite;
}

/* ================================================================
   FORM INTERACTIONS
   ================================================================ */

/* Input focus enhancement */
.form-input,
.form-select,
.form-textarea {
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background 200ms ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  transform: translateY(-1px);
}

/* Input placeholder animation */
.form-input::placeholder,
.form-textarea::placeholder {
  transition: opacity 300ms ease;
}

.form-input:focus::placeholder {
  opacity: 0.5;
}

/* Label float animation (if using floating labels) */
.form-floating-label {
  position: relative;
}

.form-floating-label input:focus ~ label,
.form-floating-label input:not(:placeholder-shown) ~ label {
  transform: translateY(-1.5rem) scale(0.85);
  color: var(--color-primary);
}

/* Checkbox & Radio custom animation */
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  transition: accent-color 200ms ease;
}

.form-check input:checked {
  animation: checkPulse 300ms ease;
}

@keyframes checkPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ================================================================
   CARD INTERACTIONS
   ================================================================ */

/* Smooth card hover elevation */
.card {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Service card premium hover */
.card-service {
  transition: box-shadow 300ms ease,
              transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 300ms ease;
}

.card-service:hover {
  transform: translateY(-8px);
}

.card-service:hover .service-icon {
  animation: iconBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconBounce {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(-4deg); }
  100% { transform: scale(1.12) rotate(-4deg); }
}

/* ================================================================
   TEXT ANIMATIONS
   ================================================================ */

/* Smooth text color transitions */
.nav-desktop a {
  transition: color 250ms ease, background 250ms ease;
}

/* Highlight on hover */
.nav-desktop a:hover,
.nav-desktop a.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ================================================================
   MOBILE MENU ANIMATIONS
   ================================================================ */

/* Burger button animation */
.burger-btn {
  transition: transform 250ms ease;
}

.burger-btn:active {
  transform: scale(0.95);
}

.burger-line {
  transform-origin: center;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 300ms ease;
}

/* Smooth menu fade in/out */
.mobile-menu {
  animation: menuSlideDown 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-menu.is-open {
  animation: menuSlideDown 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.mobile-menu a {
  transition: background 200ms ease, color 200ms ease;
}

.mobile-menu a:active {
  background: var(--color-primary-light);
}

/* ================================================================
   LOADING & SKELETON
   ================================================================ */

/* Enhanced skeleton shimmer */
@keyframes skeletonShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  animation: skeletonShimmer 2s infinite;
}

/* Smooth spinner */
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spinnerRotate 0.9s linear infinite;
}

/* ================================================================
   TOAST & ALERT ANIMATIONS
   ================================================================ */

/* Toast slide-in from bottom-right */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.toast {
  animation: toastSlideIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Alert pulse (for critical alerts) */
.alert {
  transition: all 300ms ease;
}

.alert.pulse {
  animation: alertPulse 2s ease infinite;
}

@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* ================================================================
   BADGE ANIMATIONS
   ================================================================ */

.badge {
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.badge:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ================================================================
   MODAL ANIMATIONS
   ================================================================ */

/* Modal backdrop fade */
.modal-overlay {
  animation: backdropFade 300ms ease;
}

@keyframes backdropFade {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(3px); }
}

/* Modal entrance with bounce */
.modal-overlay.is-open .modal {
  animation: modalBounceIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Close button animation */
.modal-close {
  transition: background 250ms ease, color 250ms ease, transform 250ms ease;
}

.modal-close:hover {
  transform: rotate(90deg);
}

/* ================================================================
   TAB ANIMATIONS
   ================================================================ */

.tab-btn {
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left;
}

.tab-btn[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tab-panel {
  animation: tabFadeIn 300ms ease;
}

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

/* ================================================================
   PAGINATION ANIMATIONS
   ================================================================ */

.page-btn {
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.page-btn[aria-current="page"] {
  animation: pagePulse 500ms ease;
}

@keyframes pagePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ================================================================
   LINK ANIMATIONS
   ================================================================ */

a {
  transition: color 250ms ease;
}

a:hover {
  color: var(--color-primary);
}

/* Underline animation on hover */
.link-underline {
  position: relative;
  text-decoration: none;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left;
}

.link-underline:hover::after {
  transform: scaleX(1);
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 768px) {
  /* Reduce animation complexity on mobile for performance */
  .na-reveal {
    animation-duration: 400ms;
  }

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

  /* Disable hover elevations on touch devices (use media query hover) */
  @media (hover: none) {
    .btn-primary:hover {
      transform: none;
    }

    .card:hover {
      transform: none;
    }

    .card-service:hover {
      transform: none;
    }
  }
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

/* Respect prefers-reduced-motion */
@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;
  }
}

/* Ensure focus is visible on all interactive elements */
:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}