/* ========================================
   LOYAL CORPORATE SITE - ANIMATIONS
   ======================================== */

/* ---------- FADE UP ANIMATION ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.15s;
}

.delay-2 {
  transition-delay: 0.3s;
}

.delay-3 {
  transition-delay: 0.45s;
}

/* ---------- HERO SPECIFIC ANIMATIONS ---------- */
.hero .fade-up {
  opacity: 0;
  transform: translateY(30px);
}

.hero .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- STRENGTH CARD HOVER ---------- */
.strength-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- CONCERN CARD HOVER ---------- */
.concern-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- SERVICE BLOCK ---------- */
.service-block {
  transition: all 0.3s ease;
}

/* ---------- FLOW STEP ANIMATION ---------- */
.flow-step::before {
  transition: all 0.3s ease;
}

.flow-step:hover::before {
  transform: translateX(-4px) scale(1.5);
}

/* ---------- SMOOTH SECTION TRANSITIONS ---------- */
.section {
  will-change: auto;
}

/* ---------- HEADER TRANSITION ---------- */
.header {
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* ---------- LOADING ANIMATION ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: fadeIn 0.6s ease;
}

/* ---------- GEOMETRIC GRID ANIMATION ---------- */
@keyframes pulse {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-line::after {
    animation: none;
  }

  body {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}