/* =========================================================================
   DEEP CLEAN DAILY — MOTION
   Additive animation rules only. Nothing here changes layout, color, or
   spacing from styles.css — it only adds transitions/keyframes on top of
   classes that already exist in the markup.

   !important is used deliberately throughout: WordPress auto-enqueues its
   own default/global stylesheets (block-library, classic-themes.css, etc.)
   and load order between those and a theme's own CSS isn't guaranteed, so
   these rules need to win regardless of what else has been loaded. Every
   animated rule still has a prefers-reduced-motion fallback that overrides
   it back to a static state with equal force.
   ========================================================================= */

:root {
  /* Two easing curves used throughout this file instead of plain "ease",
     for a more deliberate, less mechanical feel:
     --ease-smooth is a good general-purpose curve for things toggling
     in and out (menus, panels, filtering, collapsing controls).
     --ease-soft decelerates harder at the end, which reads as "settling
     into place" — used for content arriving (scroll-reveal, new cards). */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   Scroll-reveal (paired with main.js sections 10 & 11)
   Also reused for the animated category-filter show/hide below, so both
   share one consistent motion language instead of introducing a second
   timing/easing pair for what is visually the same kind of transition.
   --------------------------------------------------------------------- */
.dcd-reveal {
  opacity: 0 !important;
  transform: translateY(18px) scale(0.98) !important;
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft) !important;
  will-change: opacity, transform;
}
.dcd-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
/* Category filtering (home.php) reuses the same element/transition to fade
   a card out before main.js sets the hidden attribute, and to fade newly
   shown cards back in — see the filter-chip handler in main.js. */
.dcd-reveal.is-filter-hidden {
  opacity: 0 !important;
  transform: scale(0.95) !important;
}

/* ---------------------------------------------------------------------
   Reading progress bar — smooth fill instead of jumping between values
   --------------------------------------------------------------------- */
#progressBar {
  transition: width 0.12s linear !important;
}

/* ---------------------------------------------------------------------
   FAQ accordion — smooth open, CSS-only (no JS needed)

   Closed <details> children are hidden by the browser's own default
   stylesheet (effectively "display: none"), which leaves nothing to
   animate. Forcing display: block here and doing the hiding ourselves
   with max-height/opacity is what makes the transition possible at all.
   --------------------------------------------------------------------- */
.faq-item .faq-answer {
  display: block !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height 0.4s var(--ease-smooth), opacity 0.3s var(--ease-smooth), padding 0.4s var(--ease-smooth) !important;
}
.faq-item[open] .faq-answer {
  max-height: 600px !important;
  opacity: 1 !important;
  padding-bottom: 18px !important;
}
.faq-item summary {
  cursor: pointer;
  transition: color 0.2s var(--ease-smooth) !important;
}

/* ---------------------------------------------------------------------
   Cards & links — gentle lift on hover
   --------------------------------------------------------------------- */
.card,
.category-card,
.guide-card,
.team-card,
.contact-card,
.hero-card {
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth) !important;
}
.card:hover,
.category-card:hover,
.guide-card:hover,
.team-card:hover,
.contact-card:hover,
.hero-card:hover {
  transform: translateY(-4px) !important;
}

/* ---------------------------------------------------------------------
   Buttons and chips — small, consistent press/hover feedback
   --------------------------------------------------------------------- */
.btn {
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth) !important;
}
.btn:hover {
  transform: translateY(-2px) !important;
}
.btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.filter-chip {
  transition: background-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), transform 0.15s var(--ease-smooth) !important;
}
.filter-chip:active {
  transform: scale(0.96) !important;
}

.chip,
.badge {
  transition: transform 0.25s var(--ease-smooth) !important;
}

/* ---------------------------------------------------------------------
   Checklist items — quick check-off feedback
   --------------------------------------------------------------------- */
.check span {
  transition: color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth) !important;
}
.check.is-checked span {
  opacity: 0.6 !important;
  text-decoration: line-through !important;
}

/* ---------------------------------------------------------------------
   "Was this helpful?" — a small pop on the chosen answer, then the
   Yes/No buttons collapse away smoothly instead of vanishing instantly.
   --------------------------------------------------------------------- */
@keyframes dcd-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.helpful-btn {
  transition: background-color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth) !important;
}
.helpful-btn.is-picked {
  animation: dcd-pop 0.3s var(--ease-smooth) !important;
}
.helpful-actions {
  overflow: hidden !important;
  max-height: 60px !important;
  opacity: 1 !important;
  transition: max-height 0.4s var(--ease-smooth), opacity 0.25s var(--ease-smooth), margin 0.4s var(--ease-smooth) !important;
}
.helpful.is-done .helpful-actions {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-left: 0 !important;
}

/* ---------------------------------------------------------------------
   Copy-link button — checkmark confirmation pop
   --------------------------------------------------------------------- */
.share-btn {
  transition: transform 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth) !important;
}
.share-btn.is-copied {
  animation: dcd-pop 0.3s var(--ease-smooth) !important;
}

/* ---------------------------------------------------------------------
   Newsletter status message — fade in instead of appearing abruptly
   --------------------------------------------------------------------- */
.form-message {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth) !important;
}
.form-message.is-shown {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ---------------------------------------------------------------------
   Mobile nav / search panel
   main.js now measures the real content height and transitions to that
   exact pixel value (see smoothToggleHeight()), instead of relying on a
   single oversized max-height for every screen size — a fixed max-height
   noticeably far above the actual content makes the visible "opening"
   finish partway through the transition and then appear to pause, since
   the box has nothing left to reveal for the remainder of the animation.
   --------------------------------------------------------------------- */
.mobile-nav,
.search-panel {
  transition: max-height 0.35s var(--ease-smooth), opacity 0.25s var(--ease-smooth) !important;
}

/* ---------------------------------------------------------------------
   Comment form ↔ success panel — cross-fade instead of an instant swap
   (see the data-dcd-static submit handler and data-dcd-again in main.js)
   --------------------------------------------------------------------- */
.dcd-form,
.dcd-form-head,
.dcd-done {
  transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth) !important;
}
.dcd-form.is-fade-hidden,
.dcd-form-head.is-fade-hidden,
.dcd-done.is-fade-hidden {
  opacity: 0 !important;
  transform: translateY(6px) !important;
}

/* ---------------------------------------------------------------------
   Load more button — subtle pulse while an AJAX request is in flight
   --------------------------------------------------------------------- */
@keyframes dcd-load-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.load-more-btn.is-loading {
  animation: dcd-load-pulse 1s ease-in-out infinite !important;
  cursor: default !important;
}

/* ---------------------------------------------------------------------
   Respect reduced-motion preferences: turn every animation above into an
   instant, static state rather than disorienting anyone who's opted out.
   These need the same !important weight to reliably cancel the rules above.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dcd-reveal,
  .card,
  .category-card,
  .guide-card,
  .team-card,
  .contact-card,
  .hero-card,
  .btn,
  .filter-chip,
  .chip,
  .badge,
  .check span,
  .helpful-btn,
  .helpful-actions,
  .share-btn,
  .form-message,
  .mobile-nav,
  .search-panel,
  .faq-item .faq-answer,
  .faq-item summary,
  .dcd-form,
  .dcd-form-head,
  .dcd-done,
  .load-more-btn,
  #progressBar {
    transition: none !important;
    animation: none !important;
  }
  .dcd-reveal,
  .dcd-form,
  .dcd-form-head,
  .dcd-done {
    opacity: 1 !important;
    transform: none !important;
  }
  .faq-item[open] .faq-answer {
    max-height: none !important;
  }
  .helpful.is-done .helpful-actions {
    max-height: 0 !important;
    opacity: 0 !important;
  }
}