/* ============================================================
   Fiberglass Repair — fg-animations.css
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fg-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fg-slide-right {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fg-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fg-pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes fg-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes fg-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fg-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes fg-counter-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fg-bar-grow {
  from { width: 0; }
}
@keyframes fg-hero-words {
  0%   { opacity: 0; transform: translateY(20px) rotate(-2deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ── Scroll Reveal ─────────────────────────────────────────── */
.fg-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.fg-reveal.fg-visible {
  opacity: 1; transform: translateY(0);
}
.fg-reveal-left {
  opacity: 0; transform: translateX(-28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fg-reveal-left.fg-visible { opacity: 1; transform: translateX(0); }
.fg-reveal-right {
  opacity: 0; transform: translateX(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fg-reveal-right.fg-visible { opacity: 1; transform: translateX(0); }
.fg-reveal-scale {
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fg-reveal-scale.fg-visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.fg-delay-1 { transition-delay: 0.1s; }
.fg-delay-2 { transition-delay: 0.2s; }
.fg-delay-3 { transition-delay: 0.3s; }
.fg-delay-4 { transition-delay: 0.4s; }
.fg-delay-5 { transition-delay: 0.5s; }
.fg-delay-6 { transition-delay: 0.6s; }

/* ── Hero Animations ───────────────────────────────────────── */
.fg-hero-eyebrow  { animation: fg-fade-in 0.6s ease 0.3s both; }
.fg-hero-heading  { animation: fg-fade-up  0.8s ease 0.5s both; }
.fg-hero-sub      { animation: fg-fade-up  0.8s ease 0.65s both; }
.fg-hero-actions  { animation: fg-fade-up  0.8s ease 0.8s both; }
.fg-hero-stats    { animation: fg-fade-up  0.8s ease 0.95s both; }
.fg-hero-visual   { animation: fg-scale-in 1s ease 0.4s both; }

/* ── Floating badge ────────────────────────────────────────── */
.fg-hero-badge { animation: fg-float 4s ease-in-out infinite; }

/* ── Parallax Container ────────────────────────────────────── */
.fg-parallax { will-change: transform; }

/* ── Number Counter ────────────────────────────────────────── */
.fg-count-num { animation: fg-counter-up 0.6s ease both; }

/* ── Skeleton/Shimmer ──────────────────────────────────────── */
.fg-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400px 100%;
  animation: fg-shimmer 1.4s ease infinite;
  border-radius: var(--fg-radius);
}

/* ── Hover lift ─────────────────────────────────────────────── */
.fg-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.fg-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,0.12); }

/* ── Pulse Icon ─────────────────────────────────────────────── */
.fg-pulse-icon {
  position: relative; display: inline-block;
}
.fg-pulse-icon::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; background: rgba(226,92,0,0.3);
  animation: fg-pulse-ring 2s ease infinite;
}

/* ── Ticker ─────────────────────────────────────────────────── */
.fg-ticker-wrap { overflow: hidden; white-space: nowrap; background: var(--fg-orange); padding: 0.65rem 0; }
.fg-ticker-inner { display: inline-flex; gap: 0; }
.fg-ticker-track { display: inline-flex; gap: 0; animation: fg-ticker-scroll 28s linear infinite; }
.fg-ticker-track:hover { animation-play-state: paused; }
.fg-ticker-item {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0 2.5rem;
  font-family: var(--fg-font-display); font-size: 1rem;
  letter-spacing: 0.05em; color: var(--fg-white);
}
.fg-ticker-item i { font-size: 0.8rem; opacity: 0.6; }

@keyframes fg-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Image hover overlay ───────────────────────────────────── */
.fg-img-hover { position: relative; overflow: hidden; }
.fg-img-hover::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(226,92,0,0.0);
  transition: background 0.4s ease;
}
.fg-img-hover:hover::after { background: rgba(226,92,0,0.15); }

/* ── Underline grow ─────────────────────────────────────────── */
.fg-underline-grow {
  position: relative; display: inline-block;
}
.fg-underline-grow::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 2px; background: var(--fg-orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.fg-underline-grow:hover::after { transform: scaleX(1); }

/* ── Spinner ─────────────────────────────────────────────────── */
.fg-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(226,92,0,0.2);
  border-top-color: var(--fg-orange);
  animation: fg-spin-slow 0.8s linear infinite;
}

/* ── Marquee (second row in section) ──────────────────────── */
.fg-marquee-row { overflow: hidden; padding: 1.5rem 0; }
.fg-marquee-track {
  display: flex; gap: 1.5rem; width: max-content;
  animation: fg-ticker-scroll 22s linear infinite;
}
.fg-marquee-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2rem; padding: 0.5rem 1.4rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.5);
  white-space: nowrap; letter-spacing: 0.05em;
}