/* Sitewide scroll animations (non-homepage).
   Tokens aligned with homepage-animations.css:
   - fade/slide: 700ms cubic-bezier(0.22, 1, 0.36, 1), translate3d(0, 40px, 0)
   - stagger step: 180ms (firm-text, news-text, pa-text rhythm)
   - banner swipe: 1100ms clip-path (+ optional reveal delay)
   Requires html.js from head primer + site-animations.js */

:root {
  --site-anim-duration: 700ms;
  --site-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --site-anim-fade: opacity var(--site-anim-duration) var(--site-anim-ease),
                    transform var(--site-anim-duration) var(--site-anim-ease);
  --site-anim-stagger-step: 180ms;
  --site-anim-banner-duration: 1100ms;
  --site-anim-banner-delay: 350ms;
}

/* Start hidden before JS tags data-anim (no transition on first paint) */
html.js .singlepa--sidebar ul > li,
html.js .contact--container .row > [class*="col-"],
html.js .contact__info > *,
html.js .contact--right > .contact__content,
html.js .contact--right > .contact__form,
html.js .contact--right > .contact__map,
html.js .singlattorney__top > [class*="col-"],
html.js .singlattorney__right > *,
html.js .attorney-sidebar > .singleattorney--sidebar--column,
html.js .singleattorney__content,
html.js .singlattorney--container .sociallinks.hidden-sm.hidden-xs > a,
html.js .singleattorney__content .awards,
html.js .practice-areas__list > *,
html.js .site-breadcrumb {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
}

html.js [data-anim="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
  will-change: opacity, transform;
}

html.js [data-anim="fade-up"].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: var(--site-anim-fade);
}

html.js [data-anim="card"] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
  will-change: opacity, transform;
}

html.js [data-anim="card"].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: var(--site-anim-fade);
}

/* Stagger direct children when parent is revealed */
html.js [data-anim="fade-up-stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
  will-change: opacity, transform;
}

html.js [data-anim="fade-up-stagger"].is-revealed > *:nth-child(1) { transition: var(--site-anim-fade); transition-delay: 0ms; opacity: 1; transform: translate3d(0, 0, 0); }
html.js [data-anim="fade-up-stagger"].is-revealed > *:nth-child(2) { transition: var(--site-anim-fade); transition-delay: var(--site-anim-stagger-step); opacity: 1; transform: translate3d(0, 0, 0); }
html.js [data-anim="fade-up-stagger"].is-revealed > *:nth-child(3) { transition: var(--site-anim-fade); transition-delay: calc(var(--site-anim-stagger-step) * 2); opacity: 1; transform: translate3d(0, 0, 0); }
html.js [data-anim="fade-up-stagger"].is-revealed > *:nth-child(4) { transition: var(--site-anim-fade); transition-delay: calc(var(--site-anim-stagger-step) * 3); opacity: 1; transform: translate3d(0, 0, 0); }
html.js [data-anim="fade-up-stagger"].is-revealed > *:nth-child(n+5) { transition: var(--site-anim-fade); transition-delay: calc(var(--site-anim-stagger-step) * 4); opacity: 1; transform: translate3d(0, 0, 0); }

html.js [data-anim="fade-up-stagger"] > a.btn-black,
html.js [data-anim="fade-up-stagger"] > a.feature_button {
  display: inline-block !important;
  transform: translate3d(0, 40px, 0) !important;
  transition: none !important;
}

html.js [data-anim="fade-up-stagger"].is-revealed > a.btn-black,
html.js [data-anim="fade-up-stagger"].is-revealed > a.feature_button {
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
  transition: var(--site-anim-fade) !important;
}

/* Commercial / inner hero banners — matches homepage video clip-path swipe */
html.js [data-anim="banner"] {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: none;
  will-change: clip-path;
}

html.js [data-anim="banner"].is-revealed {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition: clip-path var(--site-anim-banner-duration) var(--site-anim-ease),
              -webkit-clip-path var(--site-anim-banner-duration) var(--site-anim-ease);
  transition-delay: var(--site-anim-banner-delay);
}

/* Hero text blocks — same stagger rhythm as homepage firm-text / news-text */
html.js [data-anim="hero-text"] h1,
html.js [data-anim="hero-text"] h2,
html.js [data-anim="hero-text"] h3,
html.js [data-anim="hero-text"] h5,
html.js [data-anim="hero-text"] p {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
  will-change: opacity, transform;
}

html.js [data-anim="hero-text"].is-revealed h1,
html.js [data-anim="hero-text"].is-revealed h2 { transition: var(--site-anim-fade); transition-delay: 0ms; opacity: 1; transform: translate3d(0, 0, 0); }
html.js [data-anim="hero-text"].is-revealed h3,
html.js [data-anim="hero-text"].is-revealed h5 { transition: var(--site-anim-fade); transition-delay: var(--site-anim-stagger-step); opacity: 1; transform: translate3d(0, 0, 0); }
html.js [data-anim="hero-text"].is-revealed p  { transition: var(--site-anim-fade); transition-delay: calc(var(--site-anim-stagger-step) * 2); opacity: 1; transform: translate3d(0, 0, 0); }

/* Global contact section — intro children + form */
html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__heading,
html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__divider,
html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__snippet {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
  will-change: opacity, transform;
}

html.js .global-contact-section[data-anim="contact-section"].is-revealed .global-contact-section__heading { transition: var(--site-anim-fade); transition-delay: 0ms; opacity: 1; transform: translate3d(0, 0, 0); }
html.js .global-contact-section[data-anim="contact-section"].is-revealed .global-contact-section__divider { transition: var(--site-anim-fade); transition-delay: var(--site-anim-stagger-step); opacity: 1; transform: translate3d(0, 0, 0); }
html.js .global-contact-section[data-anim="contact-section"].is-revealed .global-contact-section__snippet  { transition: var(--site-anim-fade); transition-delay: calc(var(--site-anim-stagger-step) * 2); opacity: 1; transform: translate3d(0, 0, 0); }

html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__form {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: none;
  will-change: opacity, transform;
}

html.js .global-contact-section[data-anim="contact-section"].is-revealed .global-contact-section__form {
  transition: var(--site-anim-fade);
  transition-delay: calc(var(--site-anim-stagger-step) * 3);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js [data-anim="fade-up"] > a.btn-black,
html.js [data-anim="fade-up"] > a.feature_button {
  display: inline-block !important;
  transform: translate3d(0, 40px, 0) !important;
  transition: none !important;
}

html.js [data-anim="fade-up"].is-revealed > a.btn-black,
html.js [data-anim="fade-up"].is-revealed > a.feature_button {
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
  transition: var(--site-anim-fade) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js .singlepa--sidebar ul > li,
  html.js .contact--container .row > [class*="col-"],
  html.js .contact__info > *,
  html.js .contact--right > .contact__content,
  html.js .contact--right > .contact__form,
  html.js .contact--right > .contact__map,
  html.js .singlattorney__top > [class*="col-"],
  html.js .singlattorney__right > *,
  html.js .attorney-sidebar > .singleattorney--sidebar--column,
  html.js .singleattorney__content,
  html.js .singlattorney--container .sociallinks.hidden-sm.hidden-xs > a,
  html.js .singleattorney__content .awards,
  html.js .practice-areas__list > *,
  html.js .site-breadcrumb,
  html.js [data-anim="fade-up"],
  html.js [data-anim="card"],
  html.js [data-anim="fade-up-stagger"] > *,
  html.js [data-anim="banner"],
  html.js [data-anim="hero-text"] h1,
  html.js [data-anim="hero-text"] h2,
  html.js [data-anim="hero-text"] h3,
  html.js [data-anim="hero-text"] h5,
  html.js [data-anim="hero-text"] p,
  html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__heading,
  html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__divider,
  html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__snippet,
  html.js .global-contact-section[data-anim="contact-section"] .global-contact-section__form {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: none !important;
  }
}