/* ============================================================
   OLYMPIA — SAFE.CSS
   This file loads LAST and guarantees all content is visible.
   It provides instant fallbacks for all animation classes,
   then re-applies smooth animations only after a short delay.
   No content should ever be permanently hidden by opacity:0.
   ============================================================ */

/* ── 1. IMMEDIATE FALLBACK: all animated elements visible ── */
/* These fire instantly — no scroll needed */
.fade-up,
.fade-left,
.fade-right,
.fade-scale,
.section-header,
.stagger-children,
.stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── 2. RE-ENABLE SMOOTH ANIMATIONS after 0.1s ─────────── */
/* Gives JS enough time to fire IntersectionObserver.
   Elements that are NOT yet .visible get a gentle fade-in
   after a small delay, guaranteed. */
@keyframes safeReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes safeRevealLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes safeRevealRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Remove animation overrides on .visible (JS-triggered) */
.fade-up.visible    { animation: none !important; opacity: 1 !important; transform: none !important; }
.fade-left.visible  { animation: none !important; opacity: 1 !important; transform: none !important; }
.fade-right.visible { animation: none !important; opacity: 1 !important; transform: none !important; }
.section-header.visible { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── 3. SERVICE CARDS — always visible ─────────────────── */
.svc-photo-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  display: flex !important;
}

.svc-photo-card img {
  opacity: 1 !important;
  filter: brightness(0.82) saturate(0.9) !important;
}

/* Stagger grid: cards visible immediately, then animate nicely */
.stagger-children .svc-photo-card {
  opacity: 1 !important;
  transform: none !important;
}

/* When JS adds .visible — run the pretty stagger animation */
.stagger-children.visible .svc-photo-card:nth-child(1)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.03s both; }
.stagger-children.visible .svc-photo-card:nth-child(2)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
.stagger-children.visible .svc-photo-card:nth-child(3)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.13s both; }
.stagger-children.visible .svc-photo-card:nth-child(4)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
.stagger-children.visible .svc-photo-card:nth-child(5)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.23s both; }
.stagger-children.visible .svc-photo-card:nth-child(6)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.stagger-children.visible .svc-photo-card:nth-child(7)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.33s both; }
.stagger-children.visible .svc-photo-card:nth-child(8)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
.stagger-children.visible .svc-photo-card:nth-child(9)  { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.43s both; }
.stagger-children.visible .svc-photo-card:nth-child(10) { animation: cardIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.48s both; }

/* ── 4. SERVICE DETAIL SECTIONS (services.html) ─────────── */
.service-section,
.service-detail,
.service-section .service-img,
.service-section .service-content,
.service-section img {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── 5. HERO ELEMENTS — always visible ──────────────────── */
.hero-label,
.hero-title,
.hero-subtitle,
.hero-desc,
.hero-cta-group,
.hero-content,
.page-hero-content,
.page-hero-content h1,
.page-hero-content p,
.page-hero-content .section-label {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── 6. GOLD LINE — always visible ──────────────────────── */
.gold-line {
  width: 52px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 7. GALLERY ITEMS — always visible ──────────────────── */
.gallery-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── 8. SECTION HEADERS — always visible ────────────────── */
.section-header h2,
.section-header h3,
.section-header p,
.section-header span {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 9. TRUST / REVIEW / WHY CARDS ─────────────────────── */
.trust-card,
.review-card,
.why-point,
.expert-mini-card,
.scope-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── 10. STATS ───────────────────────────────────────────── */
.stat-item,
.stat-number,
.stat-label {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 11. BUTTONS — never hidden ─────────────────────────── */
.btn,
.btn-gold,
.btn-outline-gold,
.btn-outline,
.nav-cta,
.form-submit,
.btn-submit {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 12. CONTACT FORM ────────────────────────────────────── */
#estimateForm,
#estimateForm *,
.contact-form-wrap,
.contact-info-wrap,
.contact-info-card {
  opacity: 1 !important;
  visibility: visible !important;
}