/* ════════════════════════════════════════════════════════════════════
   ARTICLE ENHANCEMENTS — FirepowerSFX
   Shared CSS loaded by all 79 article pages.
   Improves engagement, scroll-reveal, contrast fixes, and UX.
   Added: 2026-04-09
   ════════════════════════════════════════════════════════════════════ */

/* ──── 1. Reading Progress Bar ──────────────────────────────────── */
#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #FF8C00, #FF4500, #FF8C00);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
}

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

/* ──── 2. Scroll-to-Top Button ──────────────────────────────────── */
#scroll-to-top {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #FF8C00, #FF4500);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 140, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease;
  z-index: 900;
  pointer-events: none;
  text-decoration: none;
}

#scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scroll-to-top:hover {
  box-shadow: 0 8px 24px rgba(255, 140, 0, 0.55);
  transform: translateY(-3px);
}

/* ──── 3. Scroll-reveal for article cards ───────────────────────── */
.effect-card,
.act-card,
.sfx-pill,
.sfx-card,
.pyro-card,
.related-card,
.milestone-card,
.faq-item,
.timeline-item,
.art-callout {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.effect-card.art-visible,
.act-card.art-visible,
.sfx-pill.art-visible,
.sfx-card.art-visible,
.pyro-card.art-visible,
.related-card.art-visible,
.milestone-card.art-visible,
.faq-item.art-visible,
.timeline-item.art-visible,
.art-callout.art-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings */
.effect-card:nth-child(2), .act-card:nth-child(2), .sfx-pill:nth-child(2), .related-card:nth-child(2) { transition-delay: 0.07s; }
.effect-card:nth-child(3), .act-card:nth-child(3), .sfx-pill:nth-child(3), .related-card:nth-child(3) { transition-delay: 0.14s; }
.effect-card:nth-child(4), .act-card:nth-child(4), .sfx-pill:nth-child(4), .related-card:nth-child(4) { transition-delay: 0.21s; }
.effect-card:nth-child(5), .act-card:nth-child(5), .sfx-pill:nth-child(5), .related-card:nth-child(5) { transition-delay: 0.28s; }
.effect-card:nth-child(6), .act-card:nth-child(6), .sfx-pill:nth-child(6), .related-card:nth-child(6) { transition-delay: 0.35s; }

/* ──── 4. Article Nav — fix low-contrast breadcrumb ────────────── */
.art-nav__current {
  color: #888 !important; /* was #555 — improved from 3.9:1 to 5.7:1 on #080808 */
}

/* ──── 5. CTA button active / press ────────────────────────────── */
.btn-fire:active,
.art-hero__cta:active {
  transform: scale(0.97) translateY(2px) !important;
  opacity: 0.9;
}

/* ──── 6. Table row hover — dark theme ──────────────────────────── */
.svc-table tbody tr,
.compare-table tbody tr,
.price-table tbody tr,
.rental-table tbody tr,
.art-table tbody tr {
  transition: background 0.18s ease;
}

.svc-table tbody tr:hover td,
.compare-table tbody tr:hover td,
.price-table tbody tr:hover td,
.rental-table tbody tr:hover td,
.art-table tbody tr:hover td {
  background: rgba(255, 140, 0, 0.06) !important;
}

/* ──── 7. Article callout — stronger left bar ───────────────────── */
.art-callout {
  transition: border-color 0.25s ease, background 0.25s ease, opacity 0.5s ease, transform 0.5s ease;
}

.art-callout:hover {
  border-left-color: #FF6500;
  background: linear-gradient(135deg, rgba(255,140,0,0.1), rgba(255,69,0,0.06));
}

/* ──── 8. FAQ item — smooth line-height for expand ──────────────── */
.faq-a {
  line-height: 1.85;
}

/* ──── 9. Related card link styling fix ─────────────────────────── */
.related-card a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.related-card:hover a,
.related-card:hover .related-card__title {
  color: #FF8C00;
}

/* ──── 10. H2 underline entrance ────────────────────────────────── */
.art-body h2::after {
  transition: width 0.4s ease;
  width: 48px;
}

.art-body h2:hover::after {
  width: 100%;
}

/* ──── 11. Mobile adjustments ────────────────────────────────────── */
@media (max-width: 768px) {
  #scroll-to-top {
    bottom: 75px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .art-cta {
    padding: 2rem 1.5rem;
  }

  .effect-grid,
  .act-grid,
  .sfx-grid,
  .related-grid {
    grid-template-columns: 1fr !important;
  }
}