/* ============================================================================
   Augello Chiropractic — animations.css
   Athletic-documentary motion system. Sharper easing, faster timings,
   tactile click feedback, staggered reveals, counter animation, drawer slide.
   Layered on top of styles.css — does not redefine palette/tokens.
   ========================================================================= */

/* ---------- 0. Motion tokens ---------------------------------------------- */
:root {
  /* sharper out-quint vs sister site's gentle out-quart */
  --ease-athletic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);

  --motion-reveal: 700ms;     /* scroll fade (was 900ms on sister) */
  --motion-hover: 240ms;      /* hover lift (was 380ms on sister) */
  --motion-click: 100ms;      /* tactile click feedback */
  --motion-stagger-step: 60ms; /* trust-strip + grid stagger interval */
}

/* ---------- 1. Base reveal: data-animate --------------------------------- */
/* JS adds .revealed when the element enters the viewport.
   Pre-JS state: hidden but accessible. The .js-anim-ready gate ensures we
   only hide elements once we know JS will reveal them, preventing FOUC if
   JS is blocked. */
body.js-anim-ready [data-animate]:not(.revealed) {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

body.js-anim-ready [data-animate].revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-reveal) var(--ease-athletic),
    transform var(--motion-reveal) var(--ease-athletic);
}

/* Variants */
body.js-anim-ready [data-animate="fade-up"]:not(.revealed) { transform: translateY(28px); }
body.js-anim-ready [data-animate="fade-down"]:not(.revealed) { transform: translateY(-20px); }
body.js-anim-ready [data-animate="fade-left"]:not(.revealed) { transform: translateX(28px); }
body.js-anim-ready [data-animate="fade-right"]:not(.revealed) { transform: translateX(-28px); }
body.js-anim-ready [data-animate="fade"]:not(.revealed) { transform: none; }
body.js-anim-ready [data-animate="zoom-in"]:not(.revealed) { transform: scale(0.96); }
body.js-anim-ready [data-animate="zoom-in"].revealed { transform: scale(1); }

/* Stagger group — children fade-up in sequence when parent reveals */
body.js-anim-ready [data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--motion-reveal) var(--ease-athletic),
    transform var(--motion-reveal) var(--ease-athletic);
}
body.js-anim-ready [data-animate="stagger"].revealed > * { opacity: 1; transform: none; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(1) { transition-delay: 0ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(2) { transition-delay: 80ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(3) { transition-delay: 160ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(4) { transition-delay: 240ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(5) { transition-delay: 320ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(6) { transition-delay: 400ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(7) { transition-delay: 480ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(8) { transition-delay: 560ms; }
body.js-anim-ready [data-animate="stagger"].revealed > *:nth-child(9) { transition-delay: 640ms; }

/* ---------- 2. Trust strip: athletic chrome stagger ---------------------- */
/* Each li slides up + fades in with a crisp 60ms offset, creating a
   left-to-right cascade as the section enters viewport. */
body.js-anim-ready .trust-strip-list li {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms var(--ease-athletic),
    transform 520ms var(--ease-athletic);
}
body.js-anim-ready .trust-strip.revealed .trust-strip-list li,
body.js-anim-ready .trust-strip-list.revealed li {
  opacity: 1;
  transform: none;
}
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(1),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(1) { transition-delay: 0ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(2),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(2) { transition-delay: 60ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(3),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(3) { transition-delay: 120ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(4),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(4) { transition-delay: 180ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(5),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(5) { transition-delay: 240ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(6),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(6) { transition-delay: 300ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(7),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(7) { transition-delay: 360ms; }
body.js-anim-ready .trust-strip.revealed .trust-strip-list li:nth-child(8),
body.js-anim-ready .trust-strip-list.revealed li:nth-child(8) { transition-delay: 420ms; }

/* Athletic uppercase tracking expand on hover — only on hover-capable devices */
@media (hover: hover) {
  .trust-strip-list strong {
    transition: letter-spacing var(--motion-hover) var(--ease-athletic), color var(--motion-hover) var(--ease-athletic);
  }
  .trust-strip-list li:hover strong {
    letter-spacing: 0.01em;
    color: var(--accent);
  }
  .eyebrow-bar {
    transition: letter-spacing var(--motion-hover) var(--ease-athletic);
  }
  a:hover > .eyebrow-bar,
  .card-link:hover .eyebrow-bar {
    letter-spacing: 0.22em;
  }
}

/* ---------- 3. Hero entrance --------------------------------------------- */
/* Hero copy fades in on page load. Eyebrow → headline → sub → actions
   stagger so the page feels composed, not jarring. */
@keyframes athletic-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes athletic-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-typeled .hero-typeled-inner > * { opacity: 0; }
body.js-loaded .hero-typeled .hero-typeled-inner > .eyebrow-bar {
  animation: athletic-fade-up 600ms var(--ease-athletic) 200ms forwards;
}
body.js-loaded .hero-typeled .hero-typeled-inner > .hero-typeled-title {
  animation: athletic-fade-up 600ms var(--ease-athletic) 300ms forwards;
}
body.js-loaded .hero-typeled .hero-typeled-inner > .hero-typeled-tagline {
  animation: athletic-fade-up 600ms var(--ease-athletic) 400ms forwards;
}
body.js-loaded .hero-typeled .hero-typeled-inner > .hero-typeled-sub {
  animation: athletic-fade-up 600ms var(--ease-athletic) 540ms forwards;
}
body.js-loaded .hero-typeled .hero-typeled-inner > .hero-typeled-actions {
  animation: athletic-fade-up 600ms var(--ease-athletic) 620ms forwards;
}

/* Inner-page hero (about, services, etc.) — hero-grid pattern */
.hero-grid > .hero-copy > * { opacity: 0; }
body.js-loaded .hero-grid > .hero-copy > .eyebrow,
body.js-loaded .hero-grid > .hero-copy > .eyebrow-bar {
  animation: athletic-fade-up 600ms var(--ease-athletic) 180ms forwards;
}
body.js-loaded .hero-grid > .hero-copy > .h1-display,
body.js-loaded .hero-grid > .hero-copy > h1 {
  animation: athletic-fade-up 600ms var(--ease-athletic) 280ms forwards;
}
body.js-loaded .hero-grid > .hero-copy > .hero-sub,
body.js-loaded .hero-grid > .hero-copy > .lede {
  animation: athletic-fade-up 600ms var(--ease-athletic) 420ms forwards;
}
body.js-loaded .hero-grid > .hero-copy > .hero-actions,
body.js-loaded .hero-grid > .hero-copy > .btn-group {
  animation: athletic-fade-up 600ms var(--ease-athletic) 560ms forwards;
}
.hero-grid > .hero-media {
  opacity: 0;
}
body.js-loaded .hero-grid > .hero-media {
  animation: athletic-fade 800ms var(--ease-athletic) 360ms forwards;
}

/* Article / blog post head */
.article-head > * { opacity: 0; }
body.js-loaded .article-head > .article-meta,
body.js-loaded .article-head > .eyebrow {
  animation: athletic-fade-up 600ms var(--ease-athletic) 180ms forwards;
}
body.js-loaded .article-head > .article-title {
  animation: athletic-fade-up 600ms var(--ease-athletic) 280ms forwards;
}
body.js-loaded .article-head > .article-dek,
body.js-loaded .article-head > .lede {
  animation: athletic-fade-up 600ms var(--ease-athletic) 420ms forwards;
}

/* ---------- 4. Cards: hover lift + brass-tint border + soft shadow ------ */
.condition-card,
article.card,
.card,
.testimonial {
  transition:
    transform var(--motion-hover) var(--ease-athletic),
    border-color var(--motion-hover) var(--ease-athletic),
    box-shadow var(--motion-hover) var(--ease-athletic),
    background-color var(--motion-hover) var(--ease-athletic);
}

@media (hover: hover) {
  .condition-card:hover,
  article.card:hover,
  .card:hover,
  .testimonial:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 10px 28px -16px rgba(92, 26, 31, 0.22),
                0 2px 6px rgba(28, 31, 36, 0.04);
  }
  /* Slightly stronger lift on actual links */
  a.card-link:hover,
  a.condition-card:hover {
    transform: translateY(-4px);
  }
  /* Card arrow nudge already in styles.css; ensure athletic ease */
  .card-foot::after {
    transition: transform var(--motion-hover) var(--ease-athletic);
  }
  a.card-link:hover .card-foot::after,
  a.condition-card:hover .card-foot::after {
    transform: translateX(6px);
  }
}

/* Tactile press on click — works on touch + click */
.condition-card:active,
article.card:active,
.card:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: var(--motion-click);
}

/* ---------- 5. Buttons: tactile click + hover shadow -------------------- */
.btn {
  transition:
    transform var(--motion-click) var(--ease-athletic),
    background-color var(--motion-hover) var(--ease-athletic),
    border-color var(--motion-hover) var(--ease-athletic),
    color var(--motion-hover) var(--ease-athletic),
    box-shadow var(--motion-hover) var(--ease-athletic);
}

@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: 0 8px 22px -10px rgba(92, 26, 31, 0.55);
    transform: translateY(-1px);
  }
  .btn-ghost:hover {
    box-shadow: 0 6px 18px -12px rgba(28, 31, 36, 0.35);
    transform: translateY(-1px);
  }
  .btn-on-dark:hover {
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
  }
}

/* Snappy click — 100ms scale to 0.97 then back */
.btn-primary:active,
.btn-ghost:active,
.btn-on-dark:active,
.btn-lg:active {
  transform: scale(0.97);
  transition-duration: var(--motion-click);
  box-shadow: none;
}

/* CTAs in section-ink and footer should still feel tactile */
.cta-block .btn:active { transform: scale(0.97); }
.site-footer a {
  transition: color var(--motion-hover) var(--ease-athletic), letter-spacing var(--motion-hover) var(--ease-athletic);
}

/* ---------- 6. FAQ: smooth open/close ------------------------------------ */
.faq-item summary {
  transition: color var(--motion-hover) var(--ease-athletic);
}
.faq-item summary:hover { color: var(--primary); }
.faq-item summary::after {
  transition: transform var(--motion-hover) var(--ease-athletic), color var(--motion-hover) var(--ease-athletic);
}
.faq-item[open] summary::after { color: var(--primary); }

/* Animate body open. <details> open/close is instant by default;
   we animate the inner block via an open-class swap from JS. */
.faq-item-body {
  transition: opacity 280ms var(--ease-athletic);
}
.faq-item[open] .faq-item-body {
  animation: faq-slide-down 320ms var(--ease-athletic);
}
@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 7. Sticky header: subtle shadow on scroll -------------------- */
.site-header {
  transition:
    border-color var(--motion-hover) var(--ease-athletic),
    background-color var(--motion-hover) var(--ease-athletic),
    box-shadow var(--motion-hover) var(--ease-athletic),
    padding var(--motion-hover) var(--ease-athletic);
}
.site-header.scrolled {
  box-shadow: 0 1px 0 rgba(168, 154, 124, 0.18), 0 8px 24px -18px rgba(28, 31, 36, 0.18);
}

/* ---------- 8. Mobile drawer: slide in from right -------- */
/* Drawer is always laid out but kept off-canvas via transform.
   When .open is added (by main.js), it slides into view.
   Background is solid var(--bg) (cream/ivory) — no grey backdrop. */
.nav-drawer {
  display: flex !important;
  pointer-events: none;
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 320ms var(--ease-athletic),
    opacity 200ms var(--ease-athletic),
    visibility 0s linear 320ms;
  visibility: hidden;
}
.nav-drawer.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    transform 320ms var(--ease-athletic),
    opacity 200ms var(--ease-athletic),
    visibility 0s linear 0s;
}

/* Hamburger → X */
.nav-toggle svg,
.nav-toggle .nav-toggle-bars {
  transition: transform 280ms var(--ease-athletic), opacity 200ms var(--ease-athletic);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars line:nth-child(1),
.nav-toggle[aria-expanded="true"] svg path:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  transform-origin: 50% 50%;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars line:nth-child(2),
.nav-toggle[aria-expanded="true"] svg path:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars line:nth-child(3),
.nav-toggle[aria-expanded="true"] svg path:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  transform-origin: 50% 50%;
}

.nav-drawer-list > li {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 320ms var(--ease-athletic), transform 320ms var(--ease-athletic);
}
.nav-drawer.open .nav-drawer-list > li { opacity: 1; transform: none; }
.nav-drawer.open .nav-drawer-list > li:nth-child(1) { transition-delay: 80ms; }
.nav-drawer.open .nav-drawer-list > li:nth-child(2) { transition-delay: 130ms; }
.nav-drawer.open .nav-drawer-list > li:nth-child(3) { transition-delay: 180ms; }
.nav-drawer.open .nav-drawer-list > li:nth-child(4) { transition-delay: 230ms; }
.nav-drawer.open .nav-drawer-list > li:nth-child(5) { transition-delay: 280ms; }
.nav-drawer.open .nav-drawer-list > li:nth-child(6) { transition-delay: 330ms; }
.nav-drawer.open .nav-drawer-list > li:nth-child(7) { transition-delay: 380ms; }

/* ---------- 9. Stat counter polish --------------------------------------- */
.stat-number[data-count] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.stat {
  transition: transform var(--motion-hover) var(--ease-athletic);
}
@media (hover: hover) {
  .stat:hover { transform: translateY(-2px); }
  .stat:hover .stat-number { color: var(--primary); transition: color var(--motion-hover) var(--ease-athletic); }
}

/* ---------- 10. Nav links + dropdowns ----------------------------------- */
.nav-links a {
  transition: color var(--motion-hover) var(--ease-athletic);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right var(--motion-hover) var(--ease-athletic);
}
@media (hover: hover) {
  .nav-links a:hover::after { right: 0; }
}
.nav-links a.current::after { right: 0; }

/* ---------- 11. Form field focus ring polish ----------------------------- */
.field input,
.field select,
.field textarea {
  transition:
    border-color var(--motion-hover) var(--ease-athletic),
    box-shadow var(--motion-hover) var(--ease-athletic),
    background-color var(--motion-hover) var(--ease-athletic);
}

/* ---------- 12. Footer link hover --------------------------------------- */
@media (hover: hover) {
  .footer-col a:hover { color: var(--bg); transform: translateX(2px); display: inline-block; }
  .footer-col a { transition: color var(--motion-hover) var(--ease-athletic), transform var(--motion-hover) var(--ease-athletic); }
}

/* ---------- 13. Reduced motion: cleanly respect ------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Disable everything that moves, but keep elements visible. */
  body.js-anim-ready [data-animate]:not(.revealed),
  body.js-anim-ready [data-animate].revealed,
  body.js-anim-ready [data-animate="stagger"] > *,
  body.js-anim-ready .trust-strip-list li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .hero-typeled .hero-typeled-inner > *,
  .hero-grid > .hero-copy > *,
  .hero-grid > .hero-media,
  .article-head > * {
    opacity: 1 !important;
    animation: none !important;
  }
  .nav-drawer,
  .nav-drawer.open,
  .nav-drawer::before,
  .nav-drawer-list > li {
    transition: opacity 0.01ms linear !important;
    transform: none !important;
  }
  .nav-drawer-list > li { opacity: 1 !important; }
  .btn:active,
  .card:active,
  .condition-card:active,
  article.card:active { transform: none !important; }
}