/* ============================================================
   Santee Appliance Repairs — sa-animations.css
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes sa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sa-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sa-fade-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sa-fade-right {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sa-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sa-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes sa-pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes sa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sa-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes sa-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes sa-bar-grow {
  from { width: 0; }
}
@keyframes sa-count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sa-hero-entrance {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sa-dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%            { transform: scale(1); }
}

/* ── Scroll-Reveal Base States ───────────────────────────── */
.sa-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.sa-reveal.sa-visible {
  opacity: 1;
  transform: translateY(0);
}
.sa-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.sa-reveal-left.sa-visible {
  opacity: 1;
  transform: translateX(0);
}
.sa-reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.sa-reveal-right.sa-visible {
  opacity: 1;
  transform: translateX(0);
}
.sa-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
              transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.sa-reveal-scale.sa-visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays */
.sa-delay-1 { transition-delay: 0.1s; }
.sa-delay-2 { transition-delay: 0.2s; }
.sa-delay-3 { transition-delay: 0.3s; }
.sa-delay-4 { transition-delay: 0.4s; }
.sa-delay-5 { transition-delay: 0.5s; }

/* ── Hero Entrance ────────────────────────────────────────── */
.sa-hero-eyebrow  { animation: sa-hero-entrance 0.7s 0.1s both ease; }
.sa-hero-title    { animation: sa-hero-entrance 0.7s 0.25s both ease; }
.sa-hero-desc     { animation: sa-hero-entrance 0.7s 0.4s both ease; }
.sa-hero-actions  { animation: sa-hero-entrance 0.7s 0.55s both ease; }
.sa-hero-badges   { animation: sa-hero-entrance 0.7s 0.7s both ease; }

/* ── Floating Element ─────────────────────────────────────── */
.sa-float-element { animation: sa-float 4s ease-in-out infinite; }

/* ── Pulse Ring (CTA highlight) ──────────────────────────── */
.sa-pulse-wrap { position: relative; display: inline-flex; }
.sa-pulse-wrap::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  animation: sa-pulse-ring 2s ease-out infinite;
}

/* ── Loading Spinner ──────────────────────────────────────── */
.sa-spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: var(--sa-white);
  border-radius: 50%;
  animation: sa-spin 0.75s linear infinite;
  display: inline-block;
}

/* ── Shimmer Skeleton ─────────────────────────────────────── */
.sa-skeleton {
  background: linear-gradient(90deg,
    var(--sa-light-grey) 0px,
    #e8edf3 40px,
    var(--sa-light-grey) 80px);
  background-size: 400px;
  animation: sa-shimmer 1.4s infinite linear;
  border-radius: var(--sa-radius-sm);
}

/* ── Scroll Progress Bar ──────────────────────────────────── */
.sa-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 3px;
  background: transparent;
}
.sa-scroll-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sa-sky), var(--sa-accent));
  width: 0%;
  transition: width 0.1s linear;
}

/* ── Animated Underline Link ──────────────────────────────── */
.sa-animated-link {
  position: relative;
  display: inline-block;
}
.sa-animated-link::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--sa-sky);
  transition: width 0.3s ease;
}
.sa-animated-link:hover::after { width: 100%; }

/* ── Card Hover Lift ──────────────────────────────────────── */
.sa-hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.sa-hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(26,43,74,0.15); }

/* ── Image Zoom on Hover ──────────────────────────────────── */
.sa-img-zoom-wrap { overflow: hidden; border-radius: inherit; }
.sa-img-zoom-wrap img { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.sa-img-zoom-wrap:hover img { transform: scale(1.06); }

/* ── Nav Slide Down ───────────────────────────────────────── */
.sa-nav-scrolled { animation: sa-slide-down 0.3s ease; }

/* ── Active Tab Indicator ─────────────────────────────────── */
.sa-tab-indicator-bar {
  height: 3px;
  background: var(--sa-sky);
  border-radius: 3px;
  transition: left 0.3s ease, width 0.3s ease;
  position: absolute; bottom: 0;
}

/* ── Bounce-in Notification ───────────────────────────────── */
@keyframes sa-bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}
.sa-bounce-in { animation: sa-bounce-in 0.5s cubic-bezier(0.36,0.07,0.19,0.97); }

/* ── Typewriter cursor ────────────────────────────────────── */
.sa-typewriter-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--sa-sky);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: sa-blink 1s step-start infinite;
}
@keyframes sa-blink { 50% { opacity: 0; } }

/* ── Section divider wave ─────────────────────────────────── */
.sa-wave-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.sa-wave-divider svg { display: block; }