/* --------------------------------------------------
   Law Liberty Network – Animations
   Subtle motion for hero, sections, ticker & modal
   -------------------------------------------------- */

/* ============ Keyframes ============ */

/* Generic fade in */
@keyframes ll-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade in + slight upward motion */
@keyframes ll-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slight scale + glow for buttons / CTAs */
@keyframes ll-pulse-soft {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(255, 204, 0, 0.2);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 18px rgba(255, 204, 0, 0.35);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(255, 204, 0, 0.2);
  }
}

/* Horizontal ticker movement for live updates */
@keyframes ll-ticker-move {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Modal slide-in */
@keyframes ll-modal-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Timeline dot attention */
@keyframes ll-timeline-ping {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 188, 255, 0.4);
  }
  70% {
    transform: scale(1.12);
    box-shadow: 0 0 0 10px rgba(0, 188, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 188, 255, 0);
  }
}

/* ============ Utility Animation Classes ============ */

.animate-fade-in {
  animation: ll-fade-in 0.6s ease-out both;
}

.animate-fade-in-up {
  animation: ll-fade-in-up 0.7s ease-out both;
}

.animate-delay-1 {
  animation-delay: 0.15s;
}

.animate-delay-2 {
  animation-delay: 0.3s;
}

.animate-delay-3 {
  animation-delay: 0.45s;
}

.animate-pulse-soft {
  animation: ll-pulse-soft 2.4s ease-in-out infinite;
}

/* ============ Hero & Header ============ */

.hero-section {
  animation: ll-fade-in 0.7s ease-out both;
}

.hero-title,
.hero-subtitle,
.hero-kicker {
  animation: ll-fade-in-up 0.7s ease-out both;
}

.hero-title {
  animation-delay: 0.1s;
}

.hero-subtitle {
  animation-delay: 0.2s;
}

.ai-search-area {
  animation: ll-fade-in-up 0.8s ease-out both;
  animation-delay: 0.3s;
}

/* ============ Buttons / CTAs ============ */

.btn.gold,
.btn.primary,
.nav-login {
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    background-color 0.15s ease-out;
}

.btn.gold:hover,
.btn.primary:hover,
.nav-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

/* You can selectively add pulse effect:
   e.g., .vault-section .btn.gold { animation: ll-pulse-soft 3s ease-in-out infinite; } */

/* ============ Ticker Animations ============ */

.ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.ticker li {
  display: inline-block;
  padding-inline: 2rem;
  animation: ll-ticker-move 30s linear infinite;
}

/* When JS duplicates content for seamless scrolling, this still looks smooth */

/* ============ Section Reveal (optional progressive feel) ============ */
/* If you want, add class `section-animated` in HTML and toggle
   `is-visible` via JS on scroll. For now they just fade in on load. */

.section-header,
.acts-grid,
.articles-grid,
.vault-content,
.contact-layout,
.timeline {
  animation: ll-fade-in-up 0.7s ease-out both;
}

/* ============ Timeline ============ */

.timeline-node .timeline-dot {
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.timeline-node:focus .timeline-dot,
.timeline-node:hover .timeline-dot {
  animation: ll-timeline-ping 0.9s ease-out;
}

/* ============ Modal ============ */

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay:not([hidden]) {
  animation: ll-fade-in 0.25s ease-out;
}

.modal-box {
  animation: ll-modal-in 0.25s ease-out;
}

/* ============ Misc Smoothness ============ */

a,
button {
  transition:
    color 0.15s ease-out,
    background-color 0.15s ease-out,
    border-color 0.15s ease-out;
}

input,
textarea {
  transition:
    box-shadow 0.15s ease-out,
    border-color 0.15s ease-out,
    background-color 0.15s ease-out;
}

input:focus,
textarea:focus {
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.4);
}