/* ═══════════════════════════════════════════════════════════
   SettlementRadar Page Animations CSS — Task #1007204
   Phase 18: Premium motion design for quiz, tools, guides,
   auth, about, search, how-to-file, legal, and global elements.
   GPU-only: opacity + transform only. No layout-affecting props.
   Respects prefers-reduced-motion. Brand accent: #2563eb.
   ═══════════════════════════════════════════════════════════ */

/* ─── Keyframes ─────────────────────────────────────────────── */

@keyframes pgaFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pgaSlideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pgaSlideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pgaScaleBounce {
  0%   { transform: scale(0.65); }
  60%  { transform: scale(1.2); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes pgaShake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-7px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(2px); }
}

@keyframes pgaCounterPulse {
  0%   { transform: scale(1); color: inherit; }
  40%  { transform: scale(1.07); color: #2563eb; }
  100% { transform: scale(1); color: inherit; }
}

@keyframes pgaStepNumIn {
  0%   { opacity: 0; transform: scale(0.5); }
  65%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── Page entrance: main content fade-up on load ──────────── */

.pga-page-enter {
  animation: pgaFadeUp 0.38s ease both;
}

/* ─── Universal scroll-reveal base state ───────────────────── */
/* Elements start hidden; JS IntersectionObserver adds pga-visible */

.pga-reveal,
.pga-grid-item,
.pga-footer-col,
.pga-policy-sec {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  will-change: opacity, transform;
}

/* Visible state — added by JS observer */
.pga-reveal.pga-visible,
.pga-grid-item.pga-visible,
.pga-footer-col.pga-visible,
.pga-policy-sec.pga-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Auth page: social proof stats ────────────────────────── */

.aup-sp-stat,
.aup-preview-stat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.aup-sp-stat.pga-visible,
.aup-preview-stat.pga-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Tools hub: section label reveal ──────────────────────── */

.tools-section-label,
.guides-section-label {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  will-change: opacity, transform;
}

.tools-section-label.pga-visible,
.guides-section-label.pga-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── About page: step/problem/feature items ───────────────── */

.ab-step,
.ab-problem-point,
.ab-feature,
.ab-milestone {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.ab-step.pga-visible,
.ab-problem-point.pga-visible,
.ab-feature.pga-visible,
.ab-milestone.pga-visible {
  opacity: 1;
  transform: translateY(0);
}

/* About page section-level reveal */
.ab-impact,
.ab-how,
.ab-problem,
.ab-social,
.ab-trust,
.ab-money-section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.34s ease, transform 0.34s ease;
  will-change: opacity, transform;
}

.ab-impact.pga-visible,
.ab-how.pga-visible,
.ab-problem.pga-visible,
.ab-social.pga-visible,
.ab-trust.pga-visible,
.ab-money-section.pga-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Tool card & guide card hover: icon bounce ────────────── */
/* Bounce itself is done inline via JS animation prop.
   These ensure icon is positioned for transform origin. */

.tool-card-emoji,
.guide-card-emoji {
  display: inline-block;
  transform-origin: center bottom;
  will-change: transform;
}

/* Tool card & guide card: lift on hover (non-touch) */
@media (hover: hover) {
  .tool-card,
  .guide-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
  }
  .tool-card:hover,
  .guide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(37,99,235,0.12);
  }
}

/* Guide card: arrow slides right on hover */
@media (hover: hover) {
  .guide-card .guide-card-arrow,
  .guide-card [class*="arrow"] {
    transition: transform 0.18s ease;
    display: inline-block;
  }
  .guide-card:hover .guide-card-arrow,
  .guide-card:hover [class*="arrow"] {
    transform: translateX(4px);
  }
}

/* ─── CTA pulse/glow (submit buttons, File Now, Get Estimate) ─ */

.fms-cta-pulse,
.aup-submit-btn,
.hc-submit-btn,
[class*="file-now-btn"],
[class*="get-estimate-btn"] {
  animation: pgaCtaPulse 3s ease-in-out infinite;
}

@keyframes pgaCtaPulse {
  0%,  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  45%        { box-shadow: 0 0 0 7px rgba(37,99,235,0.18); }
}

/* ─── Mega-menu dropdown: smooth slide-down + fade ─────────── */
/* These classes are added by nav.js; we smooth the transition */

.sp-mega-dropdown,
[class*="mega-menu"],
[class*="dropdown-panel"] {
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: top center;
}

/* ─── Scroll-to-top button: fade-in on scroll ─────────────── */

#scrollToTop,
.scroll-to-top,
[class*="back-to-top"] {
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.2s ease;
  pointer-events: none;
}

#scrollToTop.visible,
.scroll-to-top.visible,
[class*="back-to-top"].visible {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) {
  #scrollToTop:hover,
  .scroll-to-top:hover,
  [class*="back-to-top"]:hover {
    transform: scale(1.08);
  }
}

/* ─── Search input: expand/glow on focus ──────────────────── */

.search-input,
#searchInput,
[id*="searchBox"],
[class*="search-field"] input {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.search-input:focus,
#searchInput:focus,
[id*="searchBox"]:focus,
[class*="search-field"] input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  border-color: #2563eb;
  outline: none;
}

/* ─── Auth input: focus glow ──────────────────────────────── */

.aup-input,
.aup-form input[type="email"],
.aup-form input[type="password"],
.aup-form input[type="text"] {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.aup-input:focus,
.aup-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  outline: none;
}

/* ─── Policy sections (privacy/terms) ────────────────────── */

.pga-policy-sec {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.pga-policy-sec.pga-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Reduced-motion: override all pga- animations ──────── */

@media (prefers-reduced-motion: reduce) {
  .pga-page-enter,
  .pga-reveal,
  .pga-grid-item,
  .pga-footer-col,
  .pga-policy-sec,
  .aup-sp-stat,
  .aup-preview-stat,
  .tools-section-label,
  .guides-section-label,
  .ab-step,
  .ab-problem-point,
  .ab-feature,
  .ab-milestone,
  .ab-impact, .ab-how, .ab-problem, .ab-social, .ab-trust, .ab-money-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fms-cta-pulse,
  .aup-submit-btn,
  .hc-submit-btn,
  [class*="file-now-btn"],
  [class*="get-estimate-btn"] {
    animation: none !important;
    box-shadow: none !important;
  }

  .tool-card,
  .guide-card {
    transition: none !important;
  }
}