/* ==========================================
   CivilsAI - Animations & Micro-interactions
   ========================================== */

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(255, 179, 71, 0.4), 0 0 20px rgba(255, 179, 71, 0.2);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 179, 71, 0.8), 0 0 30px rgba(255, 107, 0, 0.6);
    transform: scale(1.2);
  }
}

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2.5s infinite ease-in-out;
}

.animate-float {
  animation: float-gentle 4s infinite ease-in-out;
}

.animate-fade-up {
  animation: fade-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Digital Shift Section Combined Animations */
@keyframes beam-pulse-move {
  0% {
    left: -40%;
  }
  100% {
    left: 120%;
  }
}

.energy-beam-container {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 4px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(255, 107, 0, 0.15);
}

.energy-beam-pulse {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent 0%, #ff6b00 30%, #ffffff 50%, #ffb347 70%, transparent 100%);
  box-shadow: 0 0 20px #ff6b00, 0 0 35px #ffb347;
  animation: beam-pulse-move 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes arrow-pulse-horizontal {
  0%, 100% {
    transform: translateX(0);
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
  }
  50% {
    transform: translateX(7px);
    box-shadow: 0 0 30px rgba(255, 107, 0, 0.8);
  }
}

@keyframes arrow-move-upwards {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 0 28px rgba(249, 115, 22, 0.9);
  }
}

.animate-arrow-up {
  animation: arrow-move-upwards 1.6s infinite ease-in-out;
}

@keyframes rocket-float-tilt {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(-6deg);
  }
}

@keyframes digital-card-breathing {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(255, 107, 0, 0.15), 0 0 15px rgba(255, 107, 0, 0.1);
    border-color: rgba(255, 107, 0, 0.3);
  }
  50% {
    box-shadow: 0 12px 45px rgba(255, 107, 0, 0.35), 0 0 30px rgba(255, 179, 71, 0.3);
    border-color: rgba(255, 107, 0, 0.6);
  }
}

.arrow-pulsing {
  animation: arrow-pulse-horizontal 2.2s infinite ease-in-out;
}

.rocket-floating {
  animation: rocket-float-tilt 3s ease-in-out infinite;
}

.digital-card-glow {
  animation: digital-card-breathing 4s ease-in-out infinite;
}

/* Process Strip Motion Animations */
@keyframes process-glow-wave {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.2);
    border-color: rgba(255, 107, 0, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 107, 0, 0.75), 0 0 35px rgba(255, 179, 71, 0.45);
    border-color: rgba(255, 179, 71, 0.9);
    transform: scale(1.08);
  }
}

.process-step-item {
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.process-step-item:hover {
  transform: translateY(-4px);
}

.process-step-item:hover .process-icon-box {
  background: rgba(255, 107, 0, 0.25) !important;
  box-shadow: 0 0 25px rgba(255, 107, 0, 0.8), 0 0 45px rgba(255, 179, 71, 0.5) !important;
  border-color: #ff6b00 !important;
  color: #ffffff !important;
}

.process-step-item:hover h4 {
  color: #ffb347 !important;
}

.process-icon-animate-1 {
  animation: process-glow-wave 3.2s ease-in-out infinite;
  animation-delay: 0s;
}

.process-icon-animate-2 {
  animation: process-glow-wave 3.2s ease-in-out infinite;
  animation-delay: 0.8s;
}

.process-icon-animate-3 {
  animation: process-glow-wave 3.2s ease-in-out infinite;
  animation-delay: 1.6s;
}

.process-icon-animate-4 {
  animation: process-glow-wave 3.2s ease-in-out infinite;
  animation-delay: 2.4s;
}

.process-pill-container {
  transition: all 0.4s ease;
}

.process-pill-container:hover {
  border-color: rgba(255, 107, 0, 0.45) !important;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 107, 0, 0.15) !important;
}

/* Unique Business 3D Showcase Animations */
@keyframes building-levitate {
  0%, 100% {
    transform: translateY(0px) rotateX(10deg) rotateY(-15deg);
  }
  50% {
    transform: translateY(-8px) rotateX(8deg) rotateY(-13deg);
  }
}

@keyframes orbit-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.35), inset 0 0 15px rgba(255, 107, 0, 0.2);
    border-color: rgba(255, 107, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 0, 0.7), inset 0 0 30px rgba(255, 179, 71, 0.4);
    border-color: rgba(255, 179, 71, 0.9);
  }
}

@keyframes orbit-badge-pulse {
  0%, 100% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 107, 0, 0.3);
  }
  50% {
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 107, 0, 0.7);
  }
}

.building-float {
  animation: building-levitate 5s ease-in-out infinite;
  transform-style: preserve-3d;
}

.orbit-ring-glow {
  animation: orbit-ring-pulse 3.5s ease-in-out infinite;
}

.orbit-badge-float-1 { animation: orbit-badge-pulse 4s ease-in-out infinite; animation-delay: 0s; }
.orbit-badge-float-2 { animation: orbit-badge-pulse 4s ease-in-out infinite; animation-delay: 0.8s; }
.orbit-badge-float-3 { animation: orbit-badge-pulse 4s ease-in-out infinite; animation-delay: 1.6s; }
.orbit-badge-float-4 { animation: orbit-badge-pulse 4s ease-in-out infinite; animation-delay: 2.4s; }
.orbit-badge-float-5 { animation: orbit-badge-pulse 4s ease-in-out infinite; animation-delay: 3.2s; }

/* =========================================================
   Cinematic Morph & Glass Bloom Transition for Story Modal
   ========================================================= */

#story-modal-overlay {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#story-modal-overlay.open {
  opacity: 1;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  pointer-events: auto;
}

#story-modal-overlay .modal-container {
  opacity: 0;
  transform: scale(0.88) translateY(24px);
  box-shadow: 0 0 0 rgba(255, 107, 0, 0);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease;
  position: relative;
}

#story-modal-overlay.open .modal-container {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: glass-bloom-glow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Expanding Energy Bloom on Entrance */
@keyframes glass-bloom-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.8), 0 0 20px rgba(255, 107, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(255, 107, 0, 0), 0 0 45px rgba(255, 107, 0, 0.3);
  }
  100% {
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 107, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Left Image Cinematic Fade & Focus Entrance */
#story-modal-overlay #story-image {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(8px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

#story-modal-overlay.open #story-image {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Right Content Staggered Cinematic Cascade */
#story-modal-overlay #story-tag {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

#story-modal-overlay.open #story-tag {
  opacity: 1;
  transform: translateY(0);
}

#story-modal-overlay #story-hook {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}

#story-modal-overlay.open #story-hook {
  opacity: 1;
  transform: translateY(0);
}

#story-modal-overlay #story-body {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.28s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
}

#story-modal-overlay.open #story-body {
  opacity: 1;
  transform: translateY(0);
}

#story-modal-overlay #story-cta-btn {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, background-color 0.3s ease, box-shadow 0.3s ease;
}

#story-modal-overlay.open #story-cta-btn {
  opacity: 1;
  transform: translateY(0);
}



/* FAQ Accordion Styling & Animation */
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(255, 107, 0, 0.3);
}

.faq-question {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
}

.faq-icon {
  transition: transform 0.3s ease;
  color: var(--secondary);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.active .faq-answer {
  max-height: 250px;
  padding: 0 24px 20px 24px;
}