/* Seattle Dog Bite Lawyer — editorial motion layer
   Lightweight CSS/SVG/IntersectionObserver treatments inspired by high-end
   scroll animation systems, without an animation framework dependency. */

:root {
  --motion-ease: cubic-bezier(.2,.72,.24,1);
  --motion-ease-soft: cubic-bezier(.22,.68,.3,1);
  --motion-duration: 760ms;
  --motion-stagger: 90ms;
  --motion-gold: #b88b22;
  --motion-plum: #6a5b7d;
}

html.motion-capable .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-capable .motion-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- Homepage hero ---------- */
.home-law-hero.motion-home-hero {
  isolation: isolate;
}

.motion-home-kicker {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 560ms var(--motion-ease), transform 560ms var(--motion-ease);
}

.motion-home-hero.is-inview .motion-home-kicker {
  opacity: 1;
  transform: translateY(0);
}

.motion-hero-title {
  overflow: visible;
}

.motion-hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: .05em;
  margin-bottom: -.05em;
}

.motion-hero-line > span {
  display: inline-block;
  transform: translateY(112%);
  opacity: .35;
  transition: transform 840ms var(--motion-ease), opacity 620ms var(--motion-ease);
  transition-delay: calc(90ms + (var(--motion-line, 0) * 105ms));
}

.motion-home-hero.is-inview .motion-hero-line > span,
.motion-article-hero.is-inview .motion-hero-line > span {
  transform: translateY(0);
  opacity: 1;
}

.motion-home-hero .editorial-pullquote,
.motion-draw-rule,
.editorial-callout.motion-editorial-callout {
  position: relative;
  border-left-color: transparent !important;
}

.motion-home-hero .editorial-pullquote::before,
.motion-draw-rule::before,
.editorial-callout.motion-editorial-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f2c94c;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 900ms var(--motion-ease) 180ms;
  pointer-events: none;
}

.motion-home-hero.is-inview .editorial-pullquote::before,
.motion-draw-rule.is-inview::before,
.editorial-callout.motion-editorial-callout.is-inview::before {
  transform: scaleY(1);
}

/* ---------- Legal chapter index ---------- */
.motion-law-index {
  --law-index-progress: 0;
  position: relative;
}

.motion-law-index > div {
  position: relative;
  border-top-color: transparent !important;
}

.motion-law-index > div::before,
.motion-law-index > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  pointer-events: none;
}

.motion-law-index > div::before {
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.motion-law-index > div::after {
  right: auto;
  width: calc(var(--law-index-progress) * 100%);
  background: linear-gradient(90deg, var(--motion-plum), var(--motion-gold));
  transition: width 1050ms var(--motion-ease);
}

.motion-law-index.is-inview {
  --law-index-progress: 1;
}

html.motion-capable .motion-law-index a {
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms var(--motion-ease), transform 560ms var(--motion-ease), color 220ms ease;
  transition-delay: calc(120ms + (var(--motion-i, 0) * 55ms));
}

html.motion-capable .motion-law-index.is-inview a {
  opacity: 1;
  transform: translateY(0);
}

.motion-law-index a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--motion-ease);
}

.motion-law-index a:hover::after,
.motion-law-index a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Topic cards / statistics ---------- */
.motion-topic-card {
  position: relative;
}

.motion-topic-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: min(72px, 30%);
  height: 1px;
  background: var(--motion-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms var(--motion-ease) 160ms;
}

.motion-topic-card.is-inview::after {
  transform: scaleX(1);
}

.motion-stat {
  overflow: hidden;
}

.motion-stat-value {
  display: inline-block;
  transform: translateY(110%);
  opacity: .2;
  transition: transform 760ms var(--motion-ease), opacity 620ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-stat.is-inview .motion-stat-value {
  transform: translateY(0);
  opacity: 1;
}

/* ---------- Oversized editorial bridge ---------- */
.motion-watermark {
  height: clamp(92px, 12vw, 168px);
  overflow: hidden;
  display: flex;
  align-items: center;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}

.motion-watermark__text {
  white-space: nowrap;
  font-size: clamp(76px, 12.5vw, 190px);
  line-height: .8;
  font-weight: 600;
  letter-spacing: -.055em;
  color: var(--ink);
  opacity: .045;
  transform: translate3d(var(--motion-watermark-x, -28px),0,0);
  will-change: transform;
}

html[data-theme="dark"] .motion-watermark__text {
  opacity: .06;
}

/* ---------- Photography / parallax ---------- */
.motion-photo-mask {
  position: relative;
  overflow: hidden !important;
}

.motion-photo-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--paper);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 900ms var(--motion-ease);
}

.motion-photo-mask.motion-dark-mask::after {
  background: #332c3e;
}

.motion-photo-mask.is-inview::after {
  transform: scaleY(0);
}

.motion-parallax-image {
  transform: translate3d(0, var(--motion-parallax-y, 0px), 0) scale(1.045);
  transform-origin: center;
  will-change: transform;
}

/* ---------- Situation grid ---------- */
.motion-situation-grid > a {
  position: relative;
  overflow: hidden;
  transform-origin: center;
  transition:
    transform 280ms var(--motion-ease),
    background-color 280ms ease,
    border-color 280ms ease;
}

.motion-situation-grid > a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--motion-plum) 0%, transparent);
  transition: border-color 260ms ease;
}

.motion-situation-grid > a:hover,
.motion-situation-grid > a:focus-visible {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--plum-tint) 62%, var(--surface));
}

.motion-situation-grid > a:hover::before,
.motion-situation-grid > a:focus-visible::before {
  border-color: color-mix(in srgb, var(--motion-plum) 34%, transparent);
}

.motion-situation-grid > a .motion-card-arrow {
  display: inline-block;
  transition: transform 260ms var(--motion-ease);
}

.motion-situation-grid > a:hover .motion-card-arrow,
.motion-situation-grid > a:focus-visible .motion-card-arrow {
  transform: translateX(5px);
}

.motion-card-number {
  position: absolute;
  right: 18px;
  top: 14px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  opacity: .7;
}

/* ---------- About page ---------- */
.about-v2-hero.motion-about-hero .about-v2-photo,
.about-recognition.motion-recognition .about-recognition-photo,
.about-team-photo.motion-team-photo {
  position: relative;
  overflow: hidden;
}

.about-v2-hero.motion-about-hero .about-v2-photo::after,
.about-recognition.motion-recognition .about-recognition-photo::after,
.about-team-photo.motion-team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 820ms var(--motion-ease) var(--motion-delay, 0ms);
  pointer-events: none;
}

.about-v2-hero.motion-about-hero .about-v2-photo.is-inview::after,
.about-recognition.motion-recognition .about-recognition-photo.is-inview::after,
.about-team-photo.motion-team-photo.is-inview::after {
  transform: scaleY(0);
}

.about-team-photo.motion-team-photo img,
.about-v2-photo.motion-parallax-host img,
.about-recognition-photo.motion-parallax-host img {
  transform: translate3d(0, var(--motion-parallax-y, 0px), 0) scale(1.035);
  transition: filter 450ms ease;
  will-change: transform;
}

.about-team-grid article:hover .about-team-photo img {
  filter: saturate(1.04) contrast(1.02);
}

.about-proof-strip.motion-proof-strip > * {
  position: relative;
}

.about-proof-strip.motion-proof-strip > *::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 36px;
  height: 1px;
  background: var(--motion-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms var(--motion-ease) var(--motion-delay, 0ms);
}

.about-proof-strip.motion-proof-strip > *.is-inview::before {
  transform: scaleX(1);
}

/* ---------- Article pages ---------- */
.motion-reading-progress {
  position: fixed;
  left: 0;
  top: var(--glass-header-height, 0px);
  width: 100%;
  height: 2px;
  z-index: 95;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(var(--motion-read-progress, 0));
  background: linear-gradient(90deg, var(--motion-plum), var(--motion-gold));
}

.motion-article-hero {
  isolation: isolate;
}

html.motion-capable .motion-article-hero .article-photo-hero__title {
  opacity: 0;
  transform: translateY(22px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 720ms var(--motion-ease) 90ms, transform 820ms var(--motion-ease) 90ms, clip-path 900ms var(--motion-ease) 90ms;
}

html.motion-capable .motion-article-hero.is-inview .article-photo-hero__title {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}

.motion-article-hero .article-photo-hero__image {
  transform: translate3d(0, var(--motion-parallax-y, 0px), 0) scale(1.045);
  will-change: transform;
}

html.motion-capable .motion-article-hero .article-photo-hero__title,
  html.motion-capable .motion-article-hero .article-photo-hero__kicker,
html.motion-capable .motion-article-hero .article-photo-hero__content > p,
html.motion-capable .motion-article-hero .article-photo-hero__content > div:not(.article-photo-hero__kicker) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 650ms var(--motion-ease), transform 650ms var(--motion-ease);
  transition-delay: 360ms;
}

html.motion-capable .motion-article-hero.is-inview .article-photo-hero__kicker,
html.motion-capable .motion-article-hero.is-inview .article-photo-hero__content > p,
html.motion-capable .motion-article-hero.is-inview .article-photo-hero__content > div:not(.article-photo-hero__kicker) {
  opacity: 1;
  transform: translateY(0);
}

.post-body .motion-section-title {
  position: relative;
}

.post-body .motion-section-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 10px;
  background: var(--motion-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms var(--motion-ease) 120ms;
}

.post-body .motion-section-title.is-inview::after {
  transform: scaleX(1);
}

/* A tiny legal-annotation ornament used sparingly between major blocks. */
.motion-annotation {
  height: 34px;
  width: min(260px, 44vw);
  margin: 18px 0 22px;
  overflow: visible;
}

.motion-annotation path {
  fill: none;
  stroke: color-mix(in srgb, var(--motion-plum) 62%, var(--motion-gold));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  transition: stroke-dashoffset 1050ms var(--motion-ease);
}

.motion-annotation.is-inview path {
  stroke-dashoffset: 0;
}

/* ---------- Hover restraint / accessibility ---------- */
@media (hover: none) {
  .motion-situation-grid > a:hover { transform: none; }
}

@media (max-width: 820px) {
  .motion-watermark {
    height: clamp(72px, 22vw, 112px);
  }
  .motion-watermark__text {
    font-size: clamp(62px, 22vw, 112px);
    opacity: .055;
  }
  .motion-reading-progress {
    top: 0;
  }
  .motion-card-number {
    top: 12px;
    right: 14px;
  }
  .motion-parallax-image,
  .motion-article-hero .article-photo-hero__image,
  .about-team-photo.motion-team-photo img,
  .about-v2-photo.motion-parallax-host img,
  .about-recognition-photo.motion-parallax-host img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-capable .motion-reveal,
  .motion-home-kicker,
  .motion-hero-line > span,
  html.motion-capable .motion-law-index a,
  .motion-stat-value,
  .motion-photo-mask::after,
  .about-v2-photo::after,
  .about-recognition-photo::after,
  .about-team-photo.motion-team-photo::after,
  .motion-topic-card::after,
  .motion-annotation path,
  .post-body .motion-section-title::after,
  .editorial-callout.motion-editorial-callout::before,
  html.motion-capable .motion-article-hero .article-photo-hero__title,
  html.motion-capable .motion-article-hero .article-photo-hero__kicker,
  html.motion-capable .motion-article-hero .article-photo-hero__content > p,
  html.motion-capable .motion-article-hero .article-photo-hero__content > div:not(.article-photo-hero__kicker) {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-law-index > div::after {
    width: 100% !important;
    transition: none !important;
  }

  .motion-watermark__text,
  .motion-parallax-image,
  .motion-article-hero .article-photo-hero__image,
  .about-team-photo.motion-team-photo img,
  .about-v2-photo.motion-parallax-host img,
  .about-recognition-photo.motion-parallax-host img {
    transform: none !important;
  }

  .motion-reading-progress {
    display: none !important;
  }
}