/* Seattle Bike Lawyers — lightweight motion layer
   CSS + IntersectionObserver/WAAPI only. No third-party animation runtime. */

:root{
  --motion-ease:cubic-bezier(.22,.8,.25,1);
  --motion-slow:cubic-bezier(.16,1,.3,1);
  --motion-gold:#e0c86f;
}

/* Progressive enhancement: JS adds .motion-managed only to elements it controls. */
.motion-managed{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity .72s var(--motion-ease),
    transform .82s var(--motion-slow),
    border-color .4s ease,
    background-color .4s ease;
}
.motion-managed.motion-pending{opacity:0;transform:translate3d(0,22px,0)}
.motion-managed.motion-pending.motion-from-left{transform:translate3d(-24px,0,0)}
.motion-managed.motion-pending.motion-from-right{transform:translate3d(24px,0,0)}
.motion-managed.is-inview{opacity:1;transform:translate3d(0,0,0)}

.motion-delay-1{transition-delay:.07s}
.motion-delay-2{transition-delay:.14s}
.motion-delay-3{transition-delay:.21s}
.motion-delay-4{transition-delay:.28s}
.motion-delay-5{transition-delay:.35s}

/* Heading line masks — used sparingly on hero/page titles. */
.motion-line-wrap{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.motion-line{display:block;transform:translate3d(0,108%,0);opacity:.01;transition:transform .88s var(--motion-slow),opacity .32s ease}
.is-inview .motion-line{transform:translate3d(0,0,0);opacity:1}
.motion-line-wrap:nth-child(2) .motion-line{transition-delay:.09s}
.motion-line-wrap:nth-child(3) .motion-line{transition-delay:.18s}

/* Rules draw rather than fade. */
.motion-draw-rule{transform:scaleX(.02);transform-origin:left center;opacity:.45;transition:transform 1.05s var(--motion-slow),opacity .5s ease}
.motion-draw-rule.is-inview{transform:scaleX(1);opacity:1}

/* Image masks + restrained parallax. */
.motion-image-mask{position:relative;overflow:hidden;isolation:isolate}
.motion-image-mask::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--color-bg);
  transform:scaleX(1);transform-origin:right center;
  transition:transform 1.05s var(--motion-slow);
}
.motion-image-mask.motion-mask-left::after{transform-origin:left center}
.motion-image-mask.is-inview::after{transform:scaleX(0)}
.team-profile.is-inview .team-photo.motion-image-mask::after{transform:scaleX(0)}
.motion-parallax-img{will-change:transform;transform:translate3d(0,var(--motion-parallax,0px),0) scale(1.045)}

/* Homepage hero. */
#top.split.motion-hero .split-type{position:relative}
#top.split.motion-hero .hero-eyebrow{letter-spacing:.18em}
#top.split.motion-hero .portrait::before{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 58%,color-mix(in srgb,var(--color-accent) 12%,transparent));
  transform:translateX(-10%);opacity:0;transition:transform 1.25s var(--motion-slow),opacity .8s ease;
}
#top.split.motion-hero.is-inview .portrait::before{transform:translateX(0);opacity:1}
#top.split.motion-hero .portrait img{transition:filter .7s ease}

/* Homepage four-step route. */
#how.motion-process{position:relative}
.process-route{position:relative;--route-progress:0}
.process-route::before,.process-route::after{
  content:"";position:absolute;left:5px;top:9px;bottom:9px;width:1px;pointer-events:none
}
.process-route::before{background:color-mix(in srgb,var(--color-divider) 78%,transparent)}
.process-route::after{
  background:linear-gradient(180deg,var(--color-accent),var(--motion-gold));
  transform:scaleY(var(--route-progress));transform-origin:top center;will-change:transform
}
.process-step{position:relative;transition:transform .48s var(--motion-ease)}
.process-step .step-number{position:relative;z-index:2;padding-left:16px;transition:color .35s ease,transform .45s var(--motion-ease)}
.process-step .step-number::before{
  content:"";position:absolute;left:1px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--color-bg);border:1px solid var(--color-divider);
  box-shadow:0 0 0 4px var(--color-bg);
  transform:scale(.78);transition:transform .35s ease,border-color .35s ease,background .35s ease
}
.process-step.is-active{transform:translate3d(5px,0,0)}
.process-step.is-active .step-number{color:var(--motion-gold)!important}
.process-step.is-active .step-number::before{transform:scale(1);border-color:var(--motion-gold);background:var(--motion-gold)}
.process-step .step-copy{transition:transform .48s var(--motion-ease),opacity .35s ease}
.process-step:not(.is-active) .step-copy{opacity:.82}
.process-step.is-active .step-copy{transform:translate3d(2px,0,0);opacity:1}

/* Quiet oversized transition typography. */
.motion-wordband{
  --word-shift:0px;position:relative;height:clamp(90px,13vw,170px);overflow:hidden;
  border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);
  display:flex;align-items:center;pointer-events:none;user-select:none
}
.motion-wordband span{
  display:block;white-space:nowrap;transform:translate3d(var(--word-shift),0,0);
  font:600 clamp(66px,12vw,160px)/.78 var(--font-heading);letter-spacing:-.075em;text-transform:uppercase;
  color:color-mix(in srgb,var(--t-strong) 6%,transparent);will-change:transform
}
:root[data-theme="light"] .motion-wordband span{color:color-mix(in srgb,var(--t-strong) 5%,transparent)}
.motion-wordband-inline{height:clamp(72px,9vw,112px);margin:0 0 44px;border-radius:0}
.motion-wordband-inline span{font-size:clamp(52px,7.5vw,92px);color:color-mix(in srgb,var(--t-strong) 5%,transparent)}

/* Long-form section rhythm. */
.longform .content-section.motion-section{position:relative}
.longform .content-section.motion-section>.section-kicker,
.longform .content-section.motion-section>h2{transition:transform .62s var(--motion-slow),opacity .55s ease}
.longform .content-section.motion-section.motion-pending>.section-kicker,
.longform .content-section.motion-section.motion-pending>h2{transform:translate3d(0,14px,0);opacity:0}
.longform .content-section.motion-section.is-inview>.section-kicker,
.longform .content-section.motion-section.is-inview>h2{transform:none;opacity:1}
.longform .content-section.motion-section.is-inview>h2{transition-delay:.07s}
.longform .callout{position:relative;overflow:hidden}
.longform .callout::before{
  content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--motion-gold);
  transform:scaleY(0);transform-origin:top center;transition:transform .9s var(--motion-slow)
}
.longform .callout.is-inview::before{transform:scaleY(1)}

/* Small route/lane interstitial. */
.motion-lane-rule{height:20px;margin:2px 0 42px;position:relative;overflow:hidden;opacity:.82}
.motion-lane-rule::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--color-divider)
}
.motion-lane-rule::after{
  content:"";position:absolute;left:-36px;top:calc(50% - 1px);width:76px;height:3px;
  background:linear-gradient(90deg,transparent,var(--motion-gold),var(--color-accent),transparent);
  transform:translate3d(var(--lane-x,0px),0,0);will-change:transform
}
.motion-lane-dashes{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 58px,color-mix(in srgb,var(--t-strong) 18%,transparent) 58px 72px,transparent 72px 112px);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

/* Collision pattern cards: compact animated line diagrams. */
.collision-card{overflow:hidden;position:relative;transition:transform .35s var(--motion-ease),border-color .35s ease,background-color .35s ease}
.collision-card:hover{transform:translate3d(0,-2px,0);border-color:color-mix(in srgb,var(--color-accent) 48%,var(--color-divider))}
.collision-viz{height:98px;margin:-4px -4px 8px;color:var(--t-dim)}
.collision-viz svg{width:100%;height:100%;display:block;overflow:visible}
.collision-viz .road{stroke:color-mix(in srgb,var(--t-strong) 16%,transparent);stroke-width:1;fill:none}
.collision-viz .road-dash{stroke:color-mix(in srgb,var(--t-strong) 15%,transparent);stroke-width:1;stroke-dasharray:6 7;fill:none}
.collision-viz .bike-path{stroke:var(--color-accent);stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round;pathLength:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s var(--motion-slow)}
.collision-viz .car-path{stroke:var(--motion-gold);stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round;pathLength:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s .14s var(--motion-slow)}
.collision-viz .vehicle{fill:none;stroke:var(--motion-gold);stroke-width:1.25;opacity:.9}
.collision-viz .bike-mark{fill:none;stroke:var(--color-accent);stroke-width:1.2;opacity:.9}
.collision-viz .conflict{fill:var(--motion-gold);transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .38s .84s var(--motion-ease),opacity .3s .84s ease}
.collision-card.is-inview .bike-path,.collision-card.is-inview .car-path{stroke-dashoffset:0}
.collision-card.is-inview .conflict{transform:scale(1);opacity:1;animation:motion-pulse 1.6s 1.05s 1}
@keyframes motion-pulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}45%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--motion-gold) 72%,transparent))}}

/* E-bike class visual. */
.ebike-class-card{position:relative}
.ebike-class-viz{margin:6px 0 9px;padding-top:4px}
.ebike-speed-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font:600 9px/1 var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim)}
.ebike-speed-meta strong{color:var(--t-accent-text);font-weight:600}
.ebike-speed-track{position:relative;height:3px;background:color-mix(in srgb,var(--t-strong) 10%,transparent);overflow:hidden}
.ebike-speed-track::before{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--speed-pct);background:linear-gradient(90deg,var(--color-accent),var(--motion-gold));
  transform:scaleX(0);transform-origin:left center;transition:transform 1.05s var(--motion-slow)
}
.ebike-class-card.is-inview .ebike-speed-track::before{transform:scaleX(1)}
.ebike-speed-scale{display:flex;justify-content:space-between;margin-top:5px;font:9px/1 ui-monospace,Menlo,monospace;color:var(--t-dim)}

/* 2026 definition shift: content is already stated in prose; this is visual reinforcement. */
.classification-shift{
  margin:24px 0 26px;padding:18px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-surface) 42%,var(--color-bg));overflow:hidden
}
.classification-shift-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:16px}
.classification-era{font:600 10px/1.25 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim)}
.classification-era:last-child{text-align:right;color:var(--t-accent-text)}
.classification-arrow{width:64px;height:1px;background:var(--color-divider);position:relative;overflow:hidden}
.classification-arrow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--color-accent),var(--motion-gold));transform:translateX(-102%);transition:transform 1s .2s var(--motion-slow)}
.classification-shift.is-inview .classification-arrow::after{transform:translateX(0)}
.classification-tests{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.classification-test{padding:14px;border:1px solid color-mix(in srgb,var(--color-divider) 76%,transparent);border-radius:var(--radius-md);font:12.5px/1.5 var(--font-body);color:var(--t-muted);opacity:0;transform:translateY(9px);transition:opacity .5s .45s ease,transform .6s .45s var(--motion-ease)}
.classification-test:nth-child(2){transition-delay:.58s}
.classification-test b{display:block;margin-bottom:5px;color:var(--motion-gold);font:600 9px/1 var(--font-heading);letter-spacing:.13em;text-transform:uppercase}
.classification-shift.is-inview .classification-test{opacity:1;transform:none}

/* Evidence console: intentionally generic, no fabricated case values. */
.evidence-console{margin:22px 0 26px;padding:4px 18px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--color-accent) 7%,var(--color-bg)),var(--color-bg));overflow:hidden}
.evidence-row{display:grid;grid-template-columns:minmax(110px,.8fr) 1.4fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--color-divider) 70%,transparent);font:11px/1.2 ui-monospace,Menlo,monospace;color:var(--t-dim)}
.evidence-row:last-child{border-bottom:0}
.evidence-row>span:first-child{color:var(--t-strong);text-transform:uppercase;letter-spacing:.06em}
.evidence-scan{height:2px;background:color-mix(in srgb,var(--t-strong) 9%,transparent);overflow:hidden}
.evidence-scan::after{content:"";display:block;width:74%;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--motion-gold));transform:translateX(-104%);transition:transform 1.05s var(--motion-slow)}
.evidence-row:nth-child(2) .evidence-scan::after{width:58%;transition-delay:.10s}.evidence-row:nth-child(3) .evidence-scan::after{width:86%;transition-delay:.18s}.evidence-row:nth-child(4) .evidence-scan::after{width:66%;transition-delay:.26s}
.evidence-console.is-inview .evidence-scan::after{transform:translateX(0)}
.evidence-status{color:var(--t-accent-text);text-transform:uppercase;letter-spacing:.08em}

/* Active long-form table of contents. */
.practice-toc a{position:relative;padding-left:0;transition:padding-left .28s var(--motion-ease),color .25s ease,border-color .25s ease}
.practice-toc a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--motion-gold);transition:width .28s var(--motion-ease)}
.practice-toc a.is-current{padding-left:15px;color:var(--t-strong)}
.practice-toc a.is-current::before{width:9px}

/* Team/value pages inherit the same restrained system. */
.team-profile.motion-managed .team-photo img,.about-hero-photo.motion-managed img{will-change:transform;transition:transform 1.05s var(--motion-slow)}
.team-profile.motion-managed.is-inview .team-photo img,.about-hero-photo.motion-managed.is-inview img{transform:scale(1.015)}
.value-card.motion-managed{transition-delay:var(--motion-card-delay,0ms)}

/* Buttons receive a tiny directional cue, not a scaling effect. */
.btn{transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s var(--motion-ease)}
.btn:hover{transform:translate3d(0,-1px,0)}
.btn:active{transform:translate3d(0,0,0)}

@media(max-width:900px){
  .motion-wordband{height:96px}
  .motion-wordband span{font-size:82px}
  .classification-tests{grid-template-columns:1fr}
  .collision-viz{height:88px}
  .process-route::before,.process-route::after{left:5px}
}
@media(max-width:560px){
  .motion-wordband{height:78px}.motion-wordband span{font-size:64px}
  .evidence-row{grid-template-columns:1fr auto;gap:8px}.evidence-scan{grid-column:1/-1;grid-row:2}
  .classification-shift-head{grid-template-columns:1fr}.classification-era:last-child{text-align:left}.classification-arrow{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .motion-managed,.motion-managed.motion-pending,.motion-line,.motion-draw-rule,
  .motion-image-mask::after,.process-step,.process-step .step-number,.process-step .step-copy,
  .collision-viz .bike-path,.collision-viz .car-path,.collision-viz .conflict,
  .ebike-speed-track::before,.classification-arrow::after,.classification-test,
  .evidence-scan::after,.practice-toc a,.practice-toc a::before,.btn{
    animation:none!important;transition:none!important;transform:none!important;opacity:1!important
  }
  .motion-wordband span,.motion-parallax-img{transform:none!important}
  .motion-image-mask::after{display:none!important}
  .process-route::after{transform:scaleY(1)!important}
}