/* =====================================================
   APPALACHIAN CLEAN ENERGY — MOTION SYSTEM
   Spring physics, scroll animations, keyframes
   ===================================================== */

/* ── Hero entrance animations ───────────────────────── */
@keyframes blur-lift-in {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── Orb drift (hero background) ───────────────────── */
@keyframes orb-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.08); }
  66%  { transform: translate(-30px, 50px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-2 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-80px, 30px) scale(1.12); }
  80%  { transform: translate(40px, -60px) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, 70px) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-4 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-40px, -50px) scale(1.10); }
  75%  { transform: translate(60px, 30px) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-5 {
  0%   { transform: translate(0, 0) scale(1); }
  45%  { transform: translate(70px, -30px) scale(1.05); }
  90%  { transform: translate(-20px, 60px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── Scroll cue bounce ──────────────────────────────── */
@keyframes scroll-cue {
  0%, 100% { transform: translateY(0) translateX(-50%); opacity: 1; }
  50%       { transform: translateY(8px) translateX(-50%); opacity: 0.5; }
}

/* ── Hero background slow Ken Burns drift ────────────── */
@keyframes hero-kenburns {
  from { scale: 1.06; }
  to   { scale: 1.14; }
}

/* ── Map pin pulse ring ─────────────────────────────── */
@keyframes pin-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.55; }
  70%  { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

/* ── Typing indicator bounce ────────────────────────── */
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Message entry ──────────────────────────────────── */
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Tab select ─────────────────────────────────────── */
@keyframes tab-pop {
  from { transform: scale(0.8) translateY(3px); }
  to   { transform: scale(1) translateY(0); }
}

/* ── Shimmer skeleton ───────────────────────────────── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ── Pulse ring (chat FAB) ──────────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ── Success checkmark ──────────────────────────────── */
@keyframes check-draw {
  from { stroke-dashoffset: 100; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

@keyframes check-circle-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Progress bar ───────────────────────────────────── */
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Step number pop ────────────────────────────────── */
@keyframes step-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ── Read-progress bar ──────────────────────────────── */
#read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  z-index: 1100;
  transform: scaleX(0);
  transition: transform var(--t-0) linear;
}

/* ── Scroll-reveal base state ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-4) var(--ease-expo),
    transform var(--t-4) var(--ease-expo);
}

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

.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }
.reveal-delay-5 { transition-delay: 300ms; }
.reveal-delay-6 { transition-delay: 360ms; }

/* ── FAQ accordion transition ───────────────────────── */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-3) var(--ease-expo);
}

.faq-body.is-open {
  grid-template-rows: 1fr;
}

.faq-body-inner {
  overflow: hidden;
}

/* ── Step line animation ────────────────────────────── */
.process-connector {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform var(--t-4) var(--ease-expo);
}

.process-connector.is-visible {
  transform: scaleY(1);
}