/* ============================================================
   ANIMATIONS.CSS — Pure additive animations for chernettegegnlaw.com
   No layout, color, or structural changes. Additive only.
   ============================================================ */

/* ──────────────────────────────────────────
   1. KEYFRAME DEFINITIONS
   ────────────────────────────────────────── */

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes countUp {
  from { opacity: 0; transform: translateY(20px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes underlineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(0,0,0,0); }
}

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

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ──────────────────────────────────────────
   2. SCROLL-REVEAL BASE STATE
   Elements start invisible; JS adds .is-visible
   ────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.reveal-left {
  transform: translateX(-28px);
}
.reveal.reveal-right {
  transform: translateX(28px);
}
.reveal.reveal-scale {
  transform: scale(0.93);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 450ms; }

/* ──────────────────────────────────────────
   3. HERO SECTION — Entrance animations
   ────────────────────────────────────────── */

/* Badge pill above H1 */
.hero-badge-animate {
  animation: slideDown 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}

/* H1 staggered words */
.hero-title-animate {
  animation: fadeInUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.25s both;
}

/* Descriptor paragraph */
.hero-desc-animate {
  animation: fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s both;
}

/* Hero CTA buttons */
.hero-cta-animate {
  animation: fadeInUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}

/* Portrait card */
.hero-portrait-animate {
  animation: scaleIn 0.85s cubic-bezier(0.22,1,0.36,1) 0.3s both,
             floatPortrait 6s ease-in-out 1.5s infinite;
}

/* ──────────────────────────────────────────
   4. STAT COUNTERS — Pop in when visible
   ────────────────────────────────────────── */

.stat-animate {
  opacity: 0;
  transform: translateY(20px) scale(0.88);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.stat-animate.is-visible {
  opacity: 1;
  transform: none;
}
.stat-animate:nth-child(1) { transition-delay: 0ms; }
.stat-animate:nth-child(2) { transition-delay: 80ms; }
.stat-animate:nth-child(3) { transition-delay: 160ms; }
.stat-animate:nth-child(4) { transition-delay: 240ms; }

/* ──────────────────────────────────────────
   5. CARD HOVER MICRO-INTERACTIONS
   Only enhances existing hover, no structural change
   ────────────────────────────────────────── */

.theme-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s cubic-bezier(0.22,1,0.36,1),
              border-color 0.25s ease !important;
}
.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -8px rgba(0,0,0,0.12) !important;
}
html.dark .theme-card:hover {
  box-shadow: 0 20px 48px -8px rgba(0,0,0,0.45) !important;
}

/* ──────────────────────────────────────────
   6. NAV LINK UNDERLINE ANIMATION
   ────────────────────────────────────────── */

nav a:not(.rounded-full):not(.rounded-xl):not(.rounded-2xl) {
  position: relative;
}
nav a:not(.rounded-full):not(.rounded-xl):not(.rounded-2xl)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
nav a:not(.rounded-full):not(.rounded-xl):not(.rounded-2xl):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ──────────────────────────────────────────
   7. BUTTON PRESS ANIMATION
   ────────────────────────────────────────── */

.hero-btn-primary,
.hero-btn-secondary {
  transition: transform 0.18s ease, box-shadow 0.2s ease !important;
}
.hero-btn-primary:active,
.hero-btn-secondary:active {
  transform: scale(0.97) translateY(1px) !important;
}

/* ──────────────────────────────────────────
   8. PORTRAIT PULSE GLOW (logo badge)
   ────────────────────────────────────────── */

header .w-12.h-12 {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ──────────────────────────────────────────
   9. SECTION HEADING ACCENT UNDERLINE
   Animates the underline on h1 span when in view
   ────────────────────────────────────────── */

h1 span.underline,
h2 span.underline {
  display: inline;
  background: none;
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}

/* ──────────────────────────────────────────
   10. FOOTER LINK HOVER SLIDE
   ────────────────────────────────────────── */

footer a {
  position: relative;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}
footer a:hover {
  padding-left: 6px;
}

/* ──────────────────────────────────────────
   11. INSIGHTS / SERVICE CARDS LIST ITEMS
   ────────────────────────────────────────── */

.theme-card .lucide-arrow-right,
.theme-card svg.lucide-arrow-up-right {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.theme-card:hover .lucide-arrow-right,
.theme-card:hover svg.lucide-arrow-up-right {
  transform: translate(4px, 0);
}

/* ──────────────────────────────────────────
   12. 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;
  }
  .reveal, .reveal-stagger > *, .stat-animate {
    opacity: 1 !important;
    transform: none !important;
  }
}