[data-motion^="thp-"] {
  --thp-motion-indigo: #0a1120;
  --thp-motion-porcelain: #edf2f4;
  --thp-motion-violet: #7657ff;
  --thp-motion-amber: #ffb238;
  --thp-motion-mint: #52d6c8;
  --thp-motion-graphite: #28323a;
  --thp-motion-far: 78px;
  --thp-motion-far-neg: -78px;
  --thp-motion-rise: 54px;
  --thp-motion-rise-neg: -54px;
  --thp-motion-slider: 72px;
  --thp-motion-slider-over: 78px;
  --thp-motion-glass: 62px;
  --thp-motion-glass-over: 67px;
  isolation: isolate;
}

.thp-wiper-reset,
.thp-triangle-deploy,
.thp-context-depth,
.thp-observation-domino,
.thp-brief-reflow,
.thp-triage-zipper,
.thp-surface-transition,
.thp-baseline-settle,
.thp-shadowboard-fill,
.thp-window-down {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 24px));
  height: 150px;
  overflow: clip;
  contain: layout paint;
  pointer-events: none;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--thp-motion-porcelain);
  background: rgba(10,17,32,.86);
  border: 1px solid rgba(82,214,200,.28);
  box-shadow: 0 18px 46px rgba(5,10,20,.24);
}

.thp-wiper-reset *,
.thp-triangle-deploy *,
.thp-context-depth *,
.thp-observation-domino *,
.thp-brief-reflow *,
.thp-triage-zipper *,
.thp-surface-transition *,
.thp-baseline-settle *,
.thp-shadowboard-fill *,
.thp-window-down * {
  box-sizing: border-box;
  pointer-events: none;
}

.thp-wiper-reset { right: 4vw; top: 126px; }
.thp-triangle-deploy { left: 4vw; bottom: 6px; }
.thp-context-depth { right: 4vw; bottom: 6px; }
.thp-observation-domino { right: 4vw; bottom: 6px; }
.thp-brief-reflow { left: 4vw; bottom: 6px; }
.thp-triage-zipper { right: 4vw; bottom: 6px; }
.thp-surface-transition { left: 4vw; bottom: 6px; }
.thp-baseline-settle { right: 4vw; bottom: 6px; }
.thp-shadowboard-fill { right: 4vw; bottom: 6px; }
.thp-window-down { right: 4vw; bottom: 6px; }

.thp-hero-panel,
.thp-safety-head,
.thp-safety-rail,
.thp-location-copy,
.thp-observations-copy,
.thp-brief-heading,
.thp-message-line,
.thp-decision-copy,
.thp-transport-head,
.thp-transport-checks,
.thp-estimate-ledger,
.thp-faq-head,
.thp-faq-list,
.thp-contact-panel {
  position: relative;
  z-index: 2;
}

.js [data-motion="thp-wiper-reset"] .decor-child,
.js [data-motion="thp-triangle-deploy"] .decor-child,
.js [data-motion="thp-context-depth"] .decor-child,
.js [data-motion="thp-observation-domino"] .decor-child,
.js [data-motion="thp-brief-reflow"] .decor-child,
.js [data-motion="thp-triage-zipper"] .decor-child,
.js [data-motion="thp-surface-transition"] .decor-child,
.js [data-motion="thp-baseline-settle"] .decor-child,
.js [data-motion="thp-shadowboard-fill"] .decor-child,
.js [data-motion="thp-window-down"] .decor-child {
  animation-play-state: paused;
}

.js [data-motion="thp-wiper-reset"].is-motion-active .decor-child,
.js [data-motion="thp-triangle-deploy"].is-motion-active .decor-child,
.js [data-motion="thp-context-depth"].is-motion-active .decor-child,
.js [data-motion="thp-observation-domino"].is-motion-active .decor-child,
.js [data-motion="thp-brief-reflow"].is-motion-active .decor-child,
.js [data-motion="thp-triage-zipper"].is-motion-active .decor-child,
.js [data-motion="thp-surface-transition"].is-motion-active .decor-child,
.js [data-motion="thp-baseline-settle"].is-motion-active .decor-child,
.js [data-motion="thp-shadowboard-fill"].is-motion-active .decor-child,
.js [data-motion="thp-window-down"].is-motion-active .decor-child {
  animation-play-state: running;
}

/* Scene 1: two wiper arcs clear one local corner. */
.thp-wiper-reset {
  background:
    linear-gradient(135deg, rgba(237,242,244,.1), transparent 57%),
    rgba(10,17,32,.9);
}
.thp-wiper-reset .thp-wiper-frost {
  position: absolute;
  left: 7%;
  top: 8%;
  width: 70%;
  height: 65%;
  background:
    radial-gradient(circle at 30% 40%, rgba(237,242,244,.72) 0 2px, transparent 3px) 0 0 / 17px 16px,
    linear-gradient(135deg, rgba(237,242,244,.62), rgba(82,214,200,.13));
  clip-path: polygon(0 0,100% 0,88% 100%,0 78%);
  animation: thp-wiper-frost-reset 1.26s cubic-bezier(.22,.65,.28,1) .16s forwards paused;
}
.thp-wiper-reset .thp-wiper-arm {
  position: absolute;
  z-index: 4;
  left: 18%;
  bottom: 19%;
  height: 5%;
  background: linear-gradient(90deg, #9badb2, #edf2f4);
  border-radius: 7px;
  transform-origin: left center;
}
.thp-wiper-reset .arm-a {
  width: 51%;
  rotate: -12deg;
  animation: thp-wiper-arm-a-reset 1.05s cubic-bezier(.24,.62,.28,1.04) .24s forwards paused;
}
.thp-wiper-reset .arm-b {
  left: 23%;
  bottom: 12%;
  width: 42%;
  rotate: -4deg;
  animation: thp-wiper-arm-b-reset 1.14s cubic-bezier(.24,.62,.28,1.04) .34s forwards paused;
}
.thp-wiper-reset .thp-wiper-hinge {
  position: absolute;
  z-index: 5;
  left: 14%;
  bottom: 12%;
  width: 12%;
  aspect-ratio: 1;
  background: var(--thp-motion-amber);
  border: 4px solid #ffe0a6;
  border-radius: 50%;
  animation: thp-wiper-hinge-seat .68s cubic-bezier(.2,.68,.26,1.18) .08s forwards paused;
}
.thp-wiper-reset .thp-wiper-labels {
  position: absolute;
  z-index: 6;
  right: 5%;
  top: 10%;
  display: grid;
  gap: 5px;
}
.thp-wiper-reset .thp-wiper-labels > i {
  display: block;
  padding: 4px 6px;
  color: var(--thp-motion-indigo);
  background: var(--thp-motion-porcelain);
  font: 800 8px/1.1 monospace;
  letter-spacing: .2px;
  opacity: 0;
}
.thp-wiper-reset .thp-wiper-labels > i:nth-child(1) { animation: thp-wiper-label-point .42s steps(4,end) .82s forwards paused; }
.thp-wiper-reset .thp-wiper-labels > i:nth-child(2) { animation: thp-wiper-label-signs .46s steps(5,end) .96s forwards paused; }
.thp-wiper-reset .thp-wiper-labels > i:nth-child(3) { animation: thp-wiper-label-next .5s steps(6,end) 1.1s forwards paused; }

@keyframes thp-wiper-frost-reset {
  0% { opacity: .94; clip-path: polygon(0 0,100% 0,88% 100%,0 78%); filter: blur(.4px); }
  46% { opacity: .58; clip-path: polygon(0 0,100% 0,58% 35%,0 48%); filter: blur(0); }
  76% { opacity: .25; clip-path: polygon(0 0,54% 0,24% 18%,0 31%); }
  100% { opacity: .14; clip-path: polygon(0 0,22% 0,8% 9%,0 14%); filter: none; }
}
@keyframes thp-wiper-arm-a-reset {
  0% { rotate: -12deg; filter: brightness(.7); }
  58% { rotate: 64deg; filter: brightness(1.24); }
  100% { rotate: -12deg; filter: none; }
}
@keyframes thp-wiper-arm-b-reset {
  0% { rotate: -4deg; scale: .95 1; }
  61% { rotate: 48deg; scale: 1.03 1; }
  100% { rotate: -4deg; scale: 1; }
}
@keyframes thp-wiper-hinge-seat {
  0% { opacity: .18; scale: .28; rotate: -38deg; }
  72% { opacity: 1; scale: 1.12; rotate: 5deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes thp-wiper-label-point {
  0% { opacity: 0; translate: 7px -4px; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; translate: none; clip-path: inset(0); }
}
@keyframes thp-wiper-label-signs {
  0% { opacity: 0; translate: -6px 3px; scale: .76 1; }
  100% { opacity: 1; translate: none; scale: 1; }
}
@keyframes thp-wiper-label-next {
  0% { opacity: 0; filter: blur(3px); clip-path: inset(100% 0 0); }
  100% { opacity: 1; filter: none; clip-path: inset(0); }
}

/* Scene 2: rigid bars deploy into one warning triangle. */
.thp-triangle-deploy {
  background:
    linear-gradient(90deg, transparent 64%, rgba(82,214,200,.09) 65% 100%),
    rgba(10,17,32,.92);
}
.thp-triangle-deploy .thp-triangle-bar {
  position: absolute;
  z-index: 5;
  left: 14%;
  width: 42%;
  height: 7%;
  background: linear-gradient(90deg, #ff8e2b, var(--thp-motion-amber));
  border: 2px solid #ffe0a6;
  border-radius: 3px;
}
.thp-triangle-deploy .bar-a {
  left: 17%;
  bottom: 22%;
  rotate: 0deg;
  transform-origin: left center;
  animation: thp-triangle-bar-base .78s cubic-bezier(.2,.7,.25,1.12) .14s forwards paused;
}
.thp-triangle-deploy .bar-b {
  left: 19%;
  top: 49%;
  rotate: -60deg;
  transform-origin: left center;
  animation: thp-triangle-bar-left .9s cubic-bezier(.2,.7,.25,1.12) .24s forwards paused;
}
.thp-triangle-deploy .bar-c {
  left: 38%;
  top: 24%;
  rotate: 60deg;
  transform-origin: left center;
  animation: thp-triangle-bar-right 1.02s cubic-bezier(.2,.7,.25,1.12) .34s forwards paused;
}
.thp-triangle-deploy .thp-safe-plane {
  position: absolute;
  z-index: 3;
  right: 7%;
  top: 17%;
  width: 29%;
  height: 66%;
  background:
    repeating-linear-gradient(135deg, rgba(82,214,200,.24) 0 5px, transparent 5px 11px),
    rgba(237,242,244,.08);
  border: 2px solid rgba(82,214,200,.68);
  clip-path: polygon(0 12%,88% 0,100% 88%,15% 100%);
  transform-origin: left center;
  animation: thp-triangle-safe-plane .96s cubic-bezier(.18,.72,.26,1.06) .64s forwards paused;
}

@keyframes thp-triangle-bar-base {
  0% { translate: -45px 18px; rotate: -18deg; opacity: .22; }
  76% { translate: 4px -2px; rotate: 2deg; opacity: 1; }
  100% { translate: none; rotate: 0deg; opacity: 1; }
}
@keyframes thp-triangle-bar-left {
  0% { translate: -33px -27px; rotate: -116deg; filter: brightness(.55); }
  78% { translate: 3px 2px; rotate: -56deg; filter: brightness(1.18); }
  100% { translate: none; rotate: -60deg; filter: none; }
}
@keyframes thp-triangle-bar-right {
  0% { translate: 47px -25px; rotate: 119deg; scale: .78 1; }
  80% { translate: -3px 2px; rotate: 56deg; scale: 1.04 1; }
  100% { translate: none; rotate: 60deg; scale: 1; }
}
@keyframes thp-triangle-safe-plane {
  0% { opacity: .12; rotate: y 82deg; clip-path: polygon(0 48%,5% 47%,6% 53%,0 52%); }
  74% { opacity: .88; rotate: y -5deg; }
  100% { opacity: 1; rotate: y 0deg; clip-path: polygon(0 12%,88% 0,100% 88%,15% 100%); }
}

/* Scene 3: three depth contours register without a map. */
.thp-context-depth {
  background:
    radial-gradient(circle at 78% 21%, rgba(118,87,255,.18), transparent 34%),
    rgba(10,17,32,.91);
}
.thp-context-depth .thp-depth-road {
  position: absolute;
  z-index: 2;
  left: 9%;
  top: 15%;
  width: 63%;
  height: 68%;
  border: 3px solid #7e9298;
  clip-path: polygon(0 62%,18% 40%,44% 47%,63% 15%,100% 0,86% 31%,64% 42%,48% 74%,22% 68%,8% 100%);
  animation: thp-depth-road-register .88s cubic-bezier(.2,.7,.26,1.06) .12s forwards paused;
}
.thp-context-depth .thp-depth-car {
  position: absolute;
  z-index: 4;
  left: 27%;
  top: 39%;
  width: 39%;
  height: 28%;
  border: 3px solid var(--thp-motion-mint);
  clip-path: polygon(0 45%,13% 38%,27% 5%,70% 5%,84% 35%,100% 44%,93% 81%,76% 84%,69% 67%,28% 67%,20% 86%,5% 80%);
  animation: thp-depth-car-register .98s cubic-bezier(.2,.7,.26,1.06) .24s forwards paused;
}
.thp-context-depth .thp-depth-landmark {
  position: absolute;
  z-index: 3;
  right: 14%;
  top: 16%;
  width: 17%;
  height: 43%;
  border: 3px solid var(--thp-motion-amber);
  clip-path: polygon(16% 100%,16% 28%,0 28%,50% 0,100% 28%,84% 28%,84% 100%);
  animation: thp-depth-landmark-register 1.08s cubic-bezier(.2,.7,.26,1.06) .36s forwards paused;
}
.thp-context-depth .thp-depth-tags {
  position: absolute;
  z-index: 6;
  left: 7%;
  right: 7%;
  bottom: 6%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
}
.thp-context-depth .thp-depth-tags > i {
  min-width: 0;
  padding: 4px 2px;
  color: var(--thp-motion-indigo);
  background: var(--thp-motion-porcelain);
  font: 800 7px/1 monospace;
  text-align: center;
  opacity: 0;
}
.thp-context-depth .thp-depth-tags > i:nth-child(1) { animation: thp-depth-tag-point .4s steps(4,end) .72s forwards paused; }
.thp-context-depth .thp-depth-tags > i:nth-child(2) { animation: thp-depth-tag-side .44s steps(5,end) .84s forwards paused; }
.thp-context-depth .thp-depth-tags > i:nth-child(3) { animation: thp-depth-tag-landmark .48s steps(6,end) .96s forwards paused; }
.thp-context-depth .thp-depth-tags > i:nth-child(4) { animation: thp-depth-tag-access .52s steps(7,end) 1.08s forwards paused; }

@keyframes thp-depth-road-register {
  0% { translate: -31px 18px; scale: 1.14 .82; opacity: .18; filter: blur(2px); }
  76% { translate: 3px -2px; scale: .98 1.03; opacity: 1; filter: blur(0); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes thp-depth-car-register {
  0% { translate: 22px -16px; scale: .72; opacity: .16; filter: brightness(.58); }
  78% { translate: -2px 2px; scale: 1.06; opacity: 1; filter: brightness(1.2); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes thp-depth-landmark-register {
  0% { translate: 38px -29px; scale: .54 1.22; opacity: .14; }
  80% { translate: -3px 2px; scale: 1.04 .98; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes thp-depth-tag-point {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); translate: -5px 0; }
  100% { opacity: 1; clip-path: inset(0); translate: none; }
}
@keyframes thp-depth-tag-side {
  0% { opacity: 0; scale: .2 1; filter: saturate(.25); }
  100% { opacity: 1; scale: 1; filter: none; }
}
@keyframes thp-depth-tag-landmark {
  0% { opacity: 0; clip-path: circle(4% at 50% 50%); rotate: -9deg; }
  100% { opacity: 1; clip-path: circle(74% at 50% 50%); rotate: 0deg; }
}
@keyframes thp-depth-tag-access {
  0% { opacity: 0; translate: 6px 4px; filter: blur(2.5px); }
  100% { opacity: 1; translate: none; filter: blur(0); }
}


/* Scene 4: observation plates rise from their own edges. */
.thp-observation-domino {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
  align-items: center;
  padding: 11% 7% 24%;
  perspective: 720px;
  background:
    linear-gradient(0deg, rgba(118,87,255,.12), transparent 48%),
    rgba(10,17,32,.92);
}
.thp-observation-domino .thp-observation-plate {
  height: 62%;
  background: linear-gradient(155deg, rgba(118,87,255,.72), rgba(40,50,58,.92));
  border: 2px solid rgba(237,242,244,.66);
  border-bottom: 6px solid var(--thp-motion-mint);
  transform-origin: center bottom;
  backface-visibility: hidden;
}
.thp-observation-domino .plate-a { animation: thp-observation-plate-a .78s cubic-bezier(.18,.7,.24,1.1) .08s forwards paused; }
.thp-observation-domino .plate-b { animation: thp-observation-plate-b .88s cubic-bezier(.18,.7,.24,1.1) .2s forwards paused; }
.thp-observation-domino .plate-c { animation: thp-observation-plate-c .98s cubic-bezier(.18,.7,.24,1.1) .32s forwards paused; }
.thp-observation-domino .plate-d { animation: thp-observation-plate-d 1.08s cubic-bezier(.18,.7,.24,1.1) .44s forwards paused; }
.thp-observation-domino .thp-observation-rule {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  padding: 6px 8px;
  color: var(--thp-motion-indigo);
  background: var(--thp-motion-porcelain);
  border-left: 6px solid var(--thp-motion-amber);
  font: 800 8px/1.05 monospace;
  text-align: center;
  opacity: 0;
  animation: thp-observation-rule-set .56s steps(6,end) .92s forwards paused;
}

@keyframes thp-observation-plate-a {
  0% { rotate: x -84deg; opacity: .24; filter: brightness(.55); }
  74% { rotate: x 7deg; opacity: 1; filter: brightness(1.18); }
  100% { rotate: x 0deg; opacity: 1; filter: none; }
}
@keyframes thp-observation-plate-b {
  0% { rotate: x -72deg; translate: 0 5px; opacity: .2; }
  76% { rotate: x -5deg; translate: 0 -1px; opacity: 1; }
  100% { rotate: x 0deg; translate: none; opacity: 1; }
}
@keyframes thp-observation-plate-c {
  0% { rotate: x -89deg; scale: .92 1.08; opacity: .18; }
  78% { rotate: x 9deg; scale: 1.03 .98; opacity: 1; }
  100% { rotate: x 0deg; scale: 1; opacity: 1; }
}
@keyframes thp-observation-plate-d {
  0% { rotate: x -65deg; filter: saturate(.24); opacity: .22; }
  80% { rotate: x -6deg; filter: saturate(1.3); opacity: 1; }
  100% { rotate: x 0deg; filter: none; opacity: 1; }
}
@keyframes thp-observation-rule-set {
  0% { opacity: 0; clip-path: inset(0 50%); filter: blur(2px); }
  100% { opacity: 1; clip-path: inset(0); filter: none; }
}

/* Scene 5: scattered fragments reflow into a six field brief. */
.thp-brief-reflow {
  background:
    linear-gradient(90deg, rgba(82,214,200,.07) 1px, transparent 1px) 0 0 / 14px 100%,
    rgba(10,17,32,.93);
}
.thp-brief-reflow .thp-reflow-fragments {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 9%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "c a f b e d";
  gap: 3%;
  height: 30%;
}
.thp-brief-reflow .thp-reflow-fragments > i {
  align-self: center;
  height: 38%;
  background: var(--thp-motion-amber);
  border: 1px solid #ffe3aa;
  border-radius: 5px;
}
.thp-brief-reflow .frag-a { grid-area: a; width: 72%; animation: thp-reflow-fragment-a .82s cubic-bezier(.2,.7,.26,1.04) .08s forwards paused; }
.thp-brief-reflow .frag-b { grid-area: b; width: 92%; animation: thp-reflow-fragment-b .9s cubic-bezier(.2,.7,.26,1.04) .14s forwards paused; }
.thp-brief-reflow .frag-c { grid-area: c; width: 58%; animation: thp-reflow-fragment-c .98s cubic-bezier(.2,.7,.26,1.04) .2s forwards paused; }
.thp-brief-reflow .frag-d { grid-area: d; width: 81%; animation: thp-reflow-fragment-d 1.06s cubic-bezier(.2,.7,.26,1.04) .26s forwards paused; }
.thp-brief-reflow .frag-e { grid-area: e; width: 66%; animation: thp-reflow-fragment-e 1.14s cubic-bezier(.2,.7,.26,1.04) .32s forwards paused; }
.thp-brief-reflow .frag-f { grid-area: f; width: 100%; animation: thp-reflow-fragment-f 1.22s cubic-bezier(.2,.7,.26,1.04) .38s forwards paused; }
.thp-brief-reflow .thp-reflow-brief {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  height: 45%;
  padding: 7px;
  background: rgba(237,242,244,.07);
  border: 2px solid rgba(82,214,200,.56);
}
.thp-brief-reflow .thp-reflow-brief > i {
  background: linear-gradient(90deg, var(--thp-motion-violet) 0 17%, #dce7e9 18%);
  border: 1px solid rgba(237,242,244,.38);
  opacity: 0;
}
.thp-brief-reflow .thp-reflow-brief > i:nth-child(1) { animation: thp-reflow-field-point .46s steps(4,end) .76s forwards paused; }
.thp-brief-reflow .thp-reflow-brief > i:nth-child(2) { animation: thp-reflow-field-model .5s steps(5,end) .84s forwards paused; }
.thp-brief-reflow .thp-reflow-brief > i:nth-child(3) { animation: thp-reflow-field-signs .54s steps(6,end) .92s forwards paused; }
.thp-brief-reflow .thp-reflow-brief > i:nth-child(4) { animation: thp-reflow-field-position .58s steps(4,end) 1s forwards paused; }
.thp-brief-reflow .thp-reflow-brief > i:nth-child(5) { animation: thp-reflow-field-change .62s steps(5,end) 1.08s forwards paused; }
.thp-brief-reflow .thp-reflow-brief > i:nth-child(6) { animation: thp-reflow-field-contact .66s steps(6,end) 1.16s forwards paused; }

@keyframes thp-reflow-fragment-a {
  0% { translate: -19px 2px; rotate: -7deg; opacity: 1; }
  72% { translate: 31px 43px; rotate: 2deg; opacity: .62; }
  100% { translate: 34px 48px; rotate: 0deg; opacity: 0; }
}
@keyframes thp-reflow-fragment-b {
  0% { translate: 14px -4px; rotate: 9deg; opacity: 1; }
  74% { translate: -27px 47px; rotate: -3deg; opacity: .58; }
  100% { translate: -30px 52px; rotate: 0deg; opacity: 0; }
}
@keyframes thp-reflow-fragment-c {
  0% { translate: -8px 6px; scale: .72 1; opacity: .96; }
  76% { translate: 59px 44px; scale: 1.05 1; opacity: .54; }
  100% { translate: 63px 49px; scale: 1; opacity: 0; }
}
@keyframes thp-reflow-fragment-d {
  0% { translate: 23px 3px; filter: brightness(.68); opacity: 1; }
  78% { translate: -57px 46px; filter: brightness(1.2); opacity: .5; }
  100% { translate: -61px 51px; filter: none; opacity: 0; }
}
@keyframes thp-reflow-fragment-e {
  0% { translate: 6px -7px; rotate: -11deg; scale: .88; opacity: .94; }
  80% { translate: -7px 45px; rotate: 3deg; scale: 1.04; opacity: .46; }
  100% { translate: -9px 50px; rotate: 0deg; scale: 1; opacity: 0; }
}
@keyframes thp-reflow-fragment-f {
  0% { translate: -13px 5px; filter: saturate(.38); opacity: .98; }
  82% { translate: 8px 49px; filter: saturate(1.25); opacity: .42; }
  100% { translate: 10px 54px; filter: none; opacity: 0; }
}
@keyframes thp-reflow-field-point {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); translate: -4px 0; }
  100% { opacity: 1; clip-path: inset(0); translate: none; }
}
@keyframes thp-reflow-field-model {
  0% { opacity: 0; scale: .18 1; filter: brightness(.52); }
  100% { opacity: 1; scale: 1; filter: none; }
}
@keyframes thp-reflow-field-signs {
  0% { opacity: 0; clip-path: polygon(0 50%,6% 44%,6% 56%); rotate: -5deg; }
  100% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); rotate: 0deg; }
}
@keyframes thp-reflow-field-position {
  0% { opacity: 0; translate: 0 6px; filter: blur(2px); }
  100% { opacity: 1; translate: none; filter: blur(0); }
}
@keyframes thp-reflow-field-change {
  0% { opacity: 0; clip-path: inset(100% 0 0); scale: 1 .7; }
  100% { opacity: 1; clip-path: inset(0); scale: 1; }
}
@keyframes thp-reflow-field-contact {
  0% { opacity: 0; translate: 5px -3px; filter: saturate(.2) brightness(.7); }
  100% { opacity: 1; translate: none; filter: none; }
}

/* Scene 6: one vertical seam opens two equal outcomes. */
.thp-triage-zipper {
  background: rgba(10,17,32,.93);
}
.thp-triage-zipper .thp-triage-panel {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 11%;
  width: 86%;
  height: 76%;
  background:
    linear-gradient(90deg, rgba(118,87,255,.28) 0 49.5%, rgba(82,214,200,.24) 50.5% 100%);
  border: 2px solid #9cabb0;
  animation: thp-triage-panel-seat .72s cubic-bezier(.2,.72,.26,1.06) .08s forwards paused;
}
.thp-triage-zipper .thp-triage-seam {
  position: absolute;
  z-index: 5;
  left: 49.2%;
  top: 15%;
  width: 1.6%;
  height: 68%;
  background: repeating-linear-gradient(0deg, #edf2f4 0 5px, transparent 5px 10px);
  transform-origin: center top;
  animation: thp-triage-seam-open .88s steps(7,end) .32s forwards paused;
}
.thp-triage-zipper .thp-triage-slider {
  position: absolute;
  z-index: 7;
  left: 45.5%;
  top: 12%;
  width: 9%;
  aspect-ratio: 1;
  background: var(--thp-motion-amber);
  border: 3px solid #fff0c7;
  clip-path: polygon(50% 0,100% 28%,83% 100%,17% 100%,0 28%);
  animation: thp-triage-slider-down 1.02s cubic-bezier(.22,.62,.3,1) .38s forwards paused;
}
.thp-triage-zipper .thp-triage-sides {
  position: absolute;
  z-index: 4;
  inset: 0;
}
.thp-triage-zipper .thp-triage-sides > i {
  position: absolute;
  top: 35%;
  width: 32%;
  height: 30%;
  border: 2px solid rgba(237,242,244,.72);
}
.thp-triage-zipper .side-a {
  left: 13%;
  background: rgba(118,87,255,.66);
  animation: thp-triage-side-assess .72s cubic-bezier(.2,.7,.27,1.06) .74s forwards paused;
}
.thp-triage-zipper .side-b {
  right: 13%;
  background: rgba(82,214,200,.58);
  animation: thp-triage-side-carry .8s cubic-bezier(.2,.7,.27,1.06) .82s forwards paused;
}

@keyframes thp-triage-panel-seat {
  0% { opacity: .22; scale: .88 1.06; filter: brightness(.56); }
  74% { opacity: 1; scale: 1.02 .99; filter: brightness(1.12); }
  100% { opacity: 1; scale: 1; filter: none; }
}
@keyframes thp-triage-seam-open {
  0% { scale: 1 .04; opacity: .28; clip-path: inset(48% 0); }
  100% { scale: 1 1; opacity: 1; clip-path: inset(0); }
}
@keyframes thp-triage-slider-down {
  0% { translate: 0 0; rotate: -7deg; filter: brightness(.7); }
  62% { translate: 0 var(--thp-motion-slider-over); rotate: 4deg; filter: brightness(1.22); }
  100% { translate: 0 var(--thp-motion-slider); rotate: 0deg; filter: none; }
}
@keyframes thp-triage-side-assess {
  0% { opacity: 0; translate: -24px 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; translate: none; clip-path: inset(0); }
}
@keyframes thp-triage-side-carry {
  0% { opacity: 0; translate: 27px 0; clip-path: inset(0 0 0 100%); filter: saturate(.4); }
  100% { opacity: 1; translate: none; clip-path: inset(0); filter: none; }
}


/* Scene 7: only the surface texture changes below a fixed car. */
.thp-surface-transition {
  background:
    linear-gradient(0deg, rgba(118,87,255,.1), transparent 45%),
    rgba(10,17,32,.92);
}
.thp-surface-transition .thp-surface-car {
  position: absolute;
  z-index: 6;
  left: 25%;
  top: 24%;
  width: 50%;
  height: 34%;
  border: 4px solid var(--thp-motion-porcelain);
  clip-path: polygon(0 54%,12% 47%,24% 10%,68% 10%,84% 41%,100% 50%,94% 82%,80% 85%,72% 68%,27% 68%,20% 86%,5% 81%);
}
.thp-surface-transition .thp-surface-car::before,
.thp-surface-transition .thp-surface-car::after {
  content: "";
  position: absolute;
  bottom: 2%;
  width: 15%;
  aspect-ratio: 1;
  background: var(--thp-motion-indigo);
  border: 3px solid var(--thp-motion-mint);
  border-radius: 50%;
}
.thp-surface-transition .thp-surface-car::before { left: 17%; }
.thp-surface-transition .thp-surface-car::after { right: 15%; }
.thp-surface-transition .thp-surface-road,
.thp-surface-transition .thp-surface-platform {
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  bottom: 16%;
  height: 26%;
  border: 2px solid rgba(237,242,244,.54);
}
.thp-surface-transition .thp-surface-road {
  background:
    radial-gradient(circle, #6f7b82 0 2px, transparent 2.6px) 0 0 / 13px 11px,
    #333d45;
  opacity: 0;
  animation: thp-surface-road-release .94s cubic-bezier(.22,.62,.3,1) .18s forwards paused;
}
.thp-surface-transition .thp-surface-platform {
  background:
    radial-gradient(ellipse, transparent 0 3px, #9aa9ad 3.5px 5px, transparent 5.5px) 0 0 / 19px 13px,
    linear-gradient(#4d5960,#1f2930);
  clip-path: inset(0);
  animation: thp-surface-platform-register 1.08s steps(9,end) .54s forwards paused;
}
.thp-surface-transition .thp-surface-corners {
  position: absolute;
  z-index: 7;
  inset: 0;
}
.thp-surface-transition .thp-surface-corners > i {
  position: absolute;
  width: 10%;
  aspect-ratio: 1;
  border-style: solid;
  border-color: var(--thp-motion-amber);
}
.thp-surface-transition .thp-surface-corners > i:nth-child(1) {
  left: 7%;
  top: 12%;
  border-width: 3px 0 0 3px;
  animation: thp-surface-corner-car .42s steps(4,end) .92s forwards paused;
}
.thp-surface-transition .thp-surface-corners > i:nth-child(2) {
  right: 7%;
  top: 12%;
  border-width: 3px 3px 0 0;
  animation: thp-surface-corner-access .46s steps(5,end) 1.02s forwards paused;
}
.thp-surface-transition .thp-surface-corners > i:nth-child(3) {
  left: 7%;
  bottom: 7%;
  border-width: 0 0 3px 3px;
  animation: thp-surface-corner-address .5s steps(6,end) 1.12s forwards paused;
}
.thp-surface-transition .thp-surface-corners > i:nth-child(4) {
  right: 7%;
  bottom: 7%;
  border-width: 0 3px 3px 0;
  animation: thp-surface-corner-receiver .54s steps(7,end) 1.22s forwards paused;
}

@keyframes thp-surface-road-release {
  0% { opacity: 1; clip-path: inset(0); filter: saturate(.42); background-position: 0 0; }
  72% { opacity: .44; clip-path: inset(0 0 0 63%); filter: saturate(.2); background-position: 14px 0; }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); filter: none; background-position: 21px 0; }
}
@keyframes thp-surface-platform-register {
  0% { clip-path: inset(0 100% 0 0); filter: brightness(.58); background-position: -16px 0; }
  100% { clip-path: inset(0); filter: none; background-position: 0 0; }
}
@keyframes thp-surface-corner-car {
  0% { opacity: .1; clip-path: inset(0 100% 100% 0); scale: .72; }
  100% { opacity: 1; clip-path: inset(0); scale: 1; }
}
@keyframes thp-surface-corner-access {
  0% { opacity: .12; clip-path: inset(100% 0 0 100%); translate: 4px -3px; }
  100% { opacity: 1; clip-path: inset(0); translate: none; }
}
@keyframes thp-surface-corner-address {
  0% { opacity: .14; rotate: 13deg; scale: .3 .8; filter: brightness(.6); }
  100% { opacity: 1; rotate: 0deg; scale: 1; filter: none; }
}
@keyframes thp-surface-corner-receiver {
  0% { opacity: .16; clip-path: polygon(100% 100%,100% 100%,100% 100%); filter: saturate(.3); }
  100% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); filter: none; }
}

/* Scene 8: six factors settle onto one baseline. */
.thp-baseline-settle {
  padding: 10% 8% 18%;
  background:
    linear-gradient(0deg, rgba(82,214,200,.12), transparent 45%),
    rgba(10,17,32,.93);
}
.thp-baseline-settle .thp-baseline-bars {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 15%;
  bottom: 29%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5%;
  align-items: end;
}
.thp-baseline-settle .thp-baseline-bars > i {
  background: linear-gradient(180deg, var(--thp-motion-violet), #42327f);
  border: 1px solid rgba(237,242,244,.58);
  border-top: 5px solid var(--thp-motion-amber);
}
.thp-baseline-settle .thp-baseline-bars > i:nth-child(1) { height: 49%; animation: thp-baseline-factor-point .72s cubic-bezier(.2,.68,.28,1.08) .1s forwards paused; }
.thp-baseline-settle .thp-baseline-bars > i:nth-child(2) { height: 72%; animation: thp-baseline-factor-address .8s cubic-bezier(.2,.68,.28,1.08) .18s forwards paused; }
.thp-baseline-settle .thp-baseline-bars > i:nth-child(3) { height: 58%; animation: thp-baseline-factor-class .88s cubic-bezier(.2,.68,.28,1.08) .26s forwards paused; }
.thp-baseline-settle .thp-baseline-bars > i:nth-child(4) { height: 83%; animation: thp-baseline-factor-wheels .96s cubic-bezier(.2,.68,.28,1.08) .34s forwards paused; }
.thp-baseline-settle .thp-baseline-bars > i:nth-child(5) { height: 64%; animation: thp-baseline-factor-access 1.04s cubic-bezier(.2,.68,.28,1.08) .42s forwards paused; }
.thp-baseline-settle .thp-baseline-bars > i:nth-child(6) { height: 42%; animation: thp-baseline-factor-outer 1.12s cubic-bezier(.2,.68,.28,1.08) .5s forwards paused; }
.thp-baseline-settle .thp-baseline-line {
  position: absolute;
  z-index: 5;
  left: 7%;
  right: 7%;
  bottom: 27%;
  height: 4%;
  background: var(--thp-motion-mint);
  transform-origin: left center;
  animation: thp-baseline-rule-draw .58s steps(8,end) .9s forwards paused;
}
.thp-baseline-settle .thp-baseline-bracket {
  position: absolute;
  z-index: 6;
  left: 15%;
  right: 15%;
  bottom: 8%;
  height: 12%;
  border: 3px solid var(--thp-motion-porcelain);
  border-top: 0;
  clip-path: polygon(0 0,8% 0,8% 58%,92% 58%,92% 0,100% 0,100% 100%,0 100%);
  animation: thp-baseline-bracket-set .66s cubic-bezier(.2,.7,.28,1.04) 1.08s forwards paused;
}

@keyframes thp-baseline-factor-point {
  0% { translate: 0 -34px; filter: brightness(.58); opacity: .28; }
  76% { translate: 0 3px; filter: brightness(1.16); opacity: 1; }
  100% { translate: none; filter: none; opacity: 1; }
}
@keyframes thp-baseline-factor-address {
  0% { translate: 0 26px; scale: .9 1.12; opacity: .24; }
  78% { translate: 0 -3px; scale: 1.03 .98; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes thp-baseline-factor-class {
  0% { translate: 0 -47px; filter: saturate(.25); opacity: .2; }
  80% { translate: 0 4px; filter: saturate(1.24); opacity: 1; }
  100% { translate: none; filter: none; opacity: 1; }
}
@keyframes thp-baseline-factor-wheels {
  0% { translate: 0 39px; scale: 1 .78; opacity: .18; }
  82% { translate: 0 -4px; scale: 1 1.04; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes thp-baseline-factor-access {
  0% { translate: 0 -21px; rotate: -4deg; filter: brightness(.64); }
  84% { translate: 0 2px; rotate: 1deg; filter: brightness(1.14); }
  100% { translate: none; rotate: 0deg; filter: none; }
}
@keyframes thp-baseline-factor-outer {
  0% { translate: 0 17px; scale: .82 .94; opacity: .3; }
  86% { translate: 0 -2px; scale: 1.05 1.02; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes thp-baseline-rule-draw {
  0% { scale: .02 1; opacity: .18; filter: brightness(.6); }
  100% { scale: 1; opacity: 1; filter: brightness(1.18); }
}
@keyframes thp-baseline-bracket-set {
  0% { opacity: .14; clip-path: polygon(48% 54%,52% 54%,52% 58%,48% 58%); translate: 0 5px; }
  100% { opacity: 1; clip-path: polygon(0 0,8% 0,8% 58%,92% 58%,92% 0,100% 0,100% 100%,0 100%); translate: none; }
}

/* Scene 9: fixed shadow shapes receive four color fills. */
.thp-shadowboard-fill {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5%;
  align-items: center;
  padding: 12% 8% 24%;
  background:
    radial-gradient(circle, rgba(237,242,244,.12) 0 1px, transparent 1.6px) 0 0 / 13px 13px,
    #111b2c;
}
.thp-shadowboard-fill .thp-shadow-key,
.thp-shadowboard-fill .thp-shadow-glove,
.thp-shadowboard-fill .thp-shadow-lamp,
.thp-shadowboard-fill .thp-shadow-triangle {
  height: 68%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  border: 2px solid rgba(237,242,244,.66);
}
.thp-shadowboard-fill .thp-shadow-key {
  background-image: linear-gradient(var(--thp-motion-amber),var(--thp-motion-amber));
  clip-path: polygon(0 37%,33% 37%,33% 18%,49% 0,70% 0,83% 14%,83% 32%,70% 47%,56% 47%,56% 63%,100% 63%,100% 82%,72% 82%,72% 100%,48% 100%,48% 72%,33% 58%,0 58%);
  animation: thp-shadow-key-fill .68s steps(7,end) .12s forwards paused;
}
.thp-shadowboard-fill .thp-shadow-glove {
  background-image: linear-gradient(var(--thp-motion-violet),var(--thp-motion-violet));
  clip-path: polygon(18% 100%,8% 68%,12% 35%,22% 4%,35% 5%,38% 35%,43% 0,56% 1%,58% 35%,64% 7%,77% 10%,75% 42%,84% 23%,96% 29%,88% 66%,72% 100%);
  animation: thp-shadow-glove-fill .76s steps(8,end) .28s forwards paused;
}
.thp-shadowboard-fill .thp-shadow-lamp {
  background-image: linear-gradient(var(--thp-motion-mint),var(--thp-motion-mint));
  clip-path: polygon(23% 0,77% 0,91% 17%,77% 35%,68% 35%,68% 100%,32% 100%,32% 35%,23% 35%,9% 17%);
  animation: thp-shadow-lamp-fill .84s steps(9,end) .44s forwards paused;
}
.thp-shadowboard-fill .thp-shadow-triangle {
  background-image: linear-gradient(#ff8e2b,var(--thp-motion-amber));
  clip-path: polygon(50% 0,100% 91%,84% 100%,50% 40%,16% 100%,0 91%);
  animation: thp-shadow-triangle-fill .92s steps(10,end) .6s forwards paused;
}
.thp-shadowboard-fill .thp-shadow-status {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 7%;
  background: var(--thp-motion-mint);
  transform-origin: left center;
  animation: thp-shadow-status-set .54s steps(8,end) 1.02s forwards paused;
}

.thp-faq-list summary::before {
  width: 100%;
  scale: .03 1;
  transform-origin: left center;
  transition: scale .28s ease;
  pointer-events: none;
}
.thp-faq-list details[open] summary::before {
  width: 100%;
  scale: 1;
}

@keyframes thp-shadow-key-fill {
  0% { background-size: 100% 0; filter: grayscale(1) brightness(.58); opacity: .52; }
  100% { background-size: 100% 100%; filter: none; opacity: 1; }
}
@keyframes thp-shadow-glove-fill {
  0% { background-size: 0 100%; filter: saturate(.18); opacity: .48; }
  100% { background-size: 100% 100%; filter: none; opacity: 1; }
}
@keyframes thp-shadow-lamp-fill {
  0% { background-size: 100% 8%; background-position: left top; filter: brightness(.5); opacity: .44; }
  100% { background-size: 100% 100%; background-position: left bottom; filter: none; opacity: 1; }
}
@keyframes thp-shadow-triangle-fill {
  0% { background-size: 6% 6%; background-position: center; filter: saturate(.25); opacity: .4; }
  100% { background-size: 100% 100%; background-position: left bottom; filter: none; opacity: 1; }
}
@keyframes thp-shadow-status-set {
  0% { scale: .02 1; opacity: .16; filter: brightness(.52); }
  100% { scale: 1; opacity: 1; filter: brightness(1.22); }
}

/* Scene 10: one glass plane lowers inside a fixed frame. */
.thp-window-down {
  background:
    linear-gradient(125deg, rgba(237,242,244,.08), transparent 57%),
    rgba(10,17,32,.93);
}
.thp-window-down .thp-window-frame {
  position: absolute;
  z-index: 6;
  left: 12%;
  top: 8%;
  width: 76%;
  height: 76%;
  border: 7px solid #83959b;
  border-top-color: #d7e1e4;
  clip-path: polygon(0 0,91% 0,100% 100%,7% 100%);
}
.thp-window-down .thp-window-glass {
  position: absolute;
  z-index: 4;
  left: 16%;
  top: 13%;
  width: 67%;
  height: 58%;
  background:
    linear-gradient(135deg, rgba(237,242,244,.48), rgba(82,214,200,.12));
  border: 2px solid rgba(237,242,244,.65);
  clip-path: polygon(0 0,92% 0,100% 100%,7% 100%);
  animation: thp-window-glass-lower 1.08s cubic-bezier(.22,.62,.28,1) .2s forwards paused;
}
.thp-window-down .thp-window-data {
  position: absolute;
  z-index: 5;
  left: 22%;
  right: 22%;
  top: 19%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.thp-window-down .thp-window-data > i {
  padding: 5px 3px;
  color: var(--thp-motion-indigo);
  background: var(--thp-motion-porcelain);
  border-left: 4px solid var(--thp-motion-violet);
  font: 800 7px/1 monospace;
  text-align: center;
  opacity: 0;
}
.thp-window-down .thp-window-data > i:nth-child(1) { animation: thp-window-data-point .42s steps(4,end) .66s forwards paused; }
.thp-window-down .thp-window-data > i:nth-child(2) { animation: thp-window-data-model .46s steps(5,end) .76s forwards paused; }
.thp-window-down .thp-window-data > i:nth-child(3) { animation: thp-window-data-position .5s steps(6,end) .86s forwards paused; }
.thp-window-down .thp-window-data > i:nth-child(4) { animation: thp-window-data-signs .54s steps(7,end) .96s forwards paused; }
.thp-window-down .thp-window-sill {
  position: absolute;
  z-index: 7;
  left: 10%;
  right: 8%;
  bottom: 10%;
  height: 10%;
  background: linear-gradient(#a9b8bc,#47545b);
  border: 2px solid #e1e8ea;
}

@keyframes thp-window-glass-lower {
  0% { translate: 0 0; opacity: .88; filter: blur(.3px); }
  72% { translate: 0 var(--thp-motion-glass-over); opacity: .44; filter: blur(0); }
  100% { translate: 0 var(--thp-motion-glass); opacity: .28; filter: none; }
}
@keyframes thp-window-data-point {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); translate: -5px 0; }
  58% { opacity: .72; clip-path: inset(0 34% 0 0); translate: 2px 0; }
  100% { opacity: 1; clip-path: inset(0); translate: none; }
}
@keyframes thp-window-data-model {
  0% { opacity: 0; scale: .22 1; filter: brightness(.55); }
  100% { opacity: 1; scale: 1; filter: none; }
}
@keyframes thp-window-data-position {
  0% { opacity: 0; clip-path: inset(100% 0 0); translate: 0 4px; }
  100% { opacity: 1; clip-path: inset(0); translate: none; }
}
@keyframes thp-window-data-signs {
  0% { opacity: 0; filter: blur(2.4px) saturate(.3); rotate: 3deg; }
  100% { opacity: 1; filter: none; rotate: 0deg; }
}


@media (max-width: 1080px) {
  [data-motion^="thp-"] {
    --thp-motion-far: 62px;
    --thp-motion-far-neg: -62px;
    --thp-motion-rise: 43px;
    --thp-motion-rise-neg: -43px;
    --thp-motion-slider: 58px;
    --thp-motion-slider-over: 62px;
    --thp-motion-glass: 50px;
    --thp-motion-glass-over: 54px;
  }

  .thp-wiper-reset,
  .thp-triangle-deploy,
  .thp-context-depth,
  .thp-observation-domino,
  .thp-brief-reflow,
  .thp-triage-zipper,
  .thp-surface-transition,
  .thp-baseline-settle,
  .thp-shadowboard-fill,
  .thp-window-down {
    width: 240px;
    height: 130px;
  }

  .thp-wiper-reset { right: 18px; top: 112px; }
  .thp-triangle-deploy,
  .thp-brief-reflow,
  .thp-surface-transition { left: 18px; }
  .thp-context-depth,
  .thp-observation-domino,
  .thp-triage-zipper,
  .thp-baseline-settle,
  .thp-shadowboard-fill,
  .thp-window-down { right: 18px; }
}

@media (max-width: 840px) {
  [data-motion^="thp-"] {
    --thp-motion-far: 55px;
    --thp-motion-far-neg: -55px;
    --thp-motion-rise: 38px;
    --thp-motion-rise-neg: -38px;
    --thp-motion-slider: 51px;
    --thp-motion-slider-over: 55px;
    --thp-motion-glass: 44px;
    --thp-motion-glass-over: 48px;
  }

  .thp-wiper-reset,
  .thp-triangle-deploy,
  .thp-context-depth,
  .thp-observation-domino,
  .thp-brief-reflow,
  .thp-triage-zipper,
  .thp-surface-transition,
  .thp-baseline-settle,
  .thp-shadowboard-fill,
  .thp-window-down {
    position: relative;
    inset: auto;
    width: 220px;
    height: 118px;
    max-width: calc(100% - 16px);
    margin: 20px auto 0;
  }
}

@media (max-width: 560px) {
  [data-motion^="thp-"] {
    --thp-motion-far: 42px;
    --thp-motion-far-neg: -42px;
    --thp-motion-rise: 30px;
    --thp-motion-rise-neg: -30px;
    --thp-motion-slider: 41px;
    --thp-motion-slider-over: 45px;
    --thp-motion-glass: 35px;
    --thp-motion-glass-over: 39px;
  }

  .thp-wiper-reset,
  .thp-triangle-deploy,
  .thp-context-depth,
  .thp-observation-domino,
  .thp-brief-reflow,
  .thp-triage-zipper,
  .thp-surface-transition,
  .thp-baseline-settle,
  .thp-shadowboard-fill,
  .thp-window-down {
    width: 190px;
    height: 104px;
    margin-top: 16px;
  }

  .thp-wiper-reset .thp-wiper-hinge,
  .thp-surface-transition .thp-surface-car,
  .thp-window-down .thp-window-frame {
    border-width: 3px;
  }

  .thp-context-depth .thp-depth-tags,
  .thp-window-down .thp-window-data {
    gap: 4px;
  }
}

@media (max-width: 380px) {
  [data-motion^="thp-"] {
    --thp-motion-far: 34px;
    --thp-motion-far-neg: -34px;
    --thp-motion-rise: 25px;
    --thp-motion-rise-neg: -25px;
    --thp-motion-slider: 34px;
    --thp-motion-slider-over: 37px;
    --thp-motion-glass: 29px;
    --thp-motion-glass-over: 32px;
  }

  .thp-wiper-reset,
  .thp-triangle-deploy,
  .thp-context-depth,
  .thp-observation-domino,
  .thp-brief-reflow,
  .thp-triage-zipper,
  .thp-surface-transition,
  .thp-baseline-settle,
  .thp-shadowboard-fill,
  .thp-window-down {
    width: 160px;
    height: 88px;
    max-width: calc(100% - 8px);
    margin-top: 12px;
  }

  .thp-observation-domino,
  .thp-shadowboard-fill {
    gap: 2%;
    padding-inline: 5%;
  }

  .thp-depth-tags > i,
  .thp-window-data > i {
    padding-inline: 1px;
    font-size: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion^="thp-"] [aria-hidden="true"],
  [data-motion^="thp-"] [aria-hidden="true"] * {
    animation: none !important;
    transition: none !important;
  }

  [data-motion="thp-shadowboard-fill"] .thp-faq-list summary::before {
    transition: none !important;
  }

  .thp-wiper-reset .thp-wiper-frost {
    opacity: .14;
    clip-path: polygon(0 0,22% 0,8% 9%,0 14%);
    filter: none;
  }
  .thp-wiper-reset .arm-a { rotate: -12deg; }
  .thp-wiper-reset .arm-b { rotate: -4deg; }
  .thp-wiper-reset .thp-wiper-hinge { opacity: 1; scale: 1; rotate: 0deg; }
  .thp-wiper-reset .thp-wiper-labels > i {
    opacity: 1;
    translate: none;
    scale: 1;
    filter: none;
    clip-path: inset(0);
  }

  .thp-triangle-deploy .bar-a { translate: none; rotate: 0deg; opacity: 1; }
  .thp-triangle-deploy .bar-b { translate: none; rotate: -60deg; opacity: 1; filter: none; }
  .thp-triangle-deploy .bar-c { translate: none; rotate: 60deg; opacity: 1; scale: 1; }
  .thp-triangle-deploy .thp-safe-plane {
    opacity: 1;
    rotate: y 0deg;
    clip-path: polygon(0 12%,88% 0,100% 88%,15% 100%);
  }

  .thp-context-depth .thp-depth-road,
  .thp-context-depth .thp-depth-car,
  .thp-context-depth .thp-depth-landmark {
    translate: none;
    scale: 1;
    opacity: 1;
    filter: none;
  }
  .thp-context-depth .thp-depth-tags > i {
    opacity: 1;
    translate: none;
    rotate: 0deg;
    scale: 1;
    filter: none;
    clip-path: inset(0);
  }

  .thp-observation-domino .thp-observation-plate {
    rotate: x 0deg;
    translate: none;
    scale: 1;
    opacity: 1;
    filter: none;
  }
  .thp-observation-domino .thp-observation-rule {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
  }

  .thp-brief-reflow .thp-reflow-fragments > i { opacity: 0; }
  .thp-brief-reflow .thp-reflow-brief > i {
    opacity: 1;
    translate: none;
    rotate: 0deg;
    scale: 1;
    filter: none;
    clip-path: inset(0);
  }

  .thp-triage-zipper .thp-triage-panel {
    opacity: 1;
    scale: 1;
    filter: none;
  }
  .thp-triage-zipper .thp-triage-seam {
    scale: 1;
    opacity: 1;
    clip-path: inset(0);
  }
  .thp-triage-zipper .thp-triage-slider {
    translate: 0 var(--thp-motion-slider);
    rotate: 0deg;
    filter: none;
  }
  .thp-triage-zipper .thp-triage-sides > i {
    opacity: 1;
    translate: none;
    filter: none;
    clip-path: inset(0);
  }

  .thp-surface-transition .thp-surface-road {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    filter: none;
  }
  .thp-surface-transition .thp-surface-platform {
    clip-path: inset(0);
    filter: none;
    background-position: 0 0;
  }
  .thp-surface-transition .thp-surface-corners > i {
    opacity: 1;
    translate: none;
    rotate: 0deg;
    scale: 1;
    filter: none;
    clip-path: inset(0);
  }

  .thp-baseline-settle .thp-baseline-bars > i {
    translate: none;
    rotate: 0deg;
    scale: 1;
    opacity: 1;
    filter: none;
  }
  .thp-baseline-settle .thp-baseline-line {
    scale: 1;
    opacity: 1;
    filter: none;
  }
  .thp-baseline-settle .thp-baseline-bracket {
    opacity: 1;
    translate: none;
    clip-path: polygon(0 0,8% 0,8% 58%,92% 58%,92% 0,100% 0,100% 100%,0 100%);
  }

  .thp-shadowboard-fill .thp-shadow-key,
  .thp-shadowboard-fill .thp-shadow-glove,
  .thp-shadowboard-fill .thp-shadow-lamp,
  .thp-shadowboard-fill .thp-shadow-triangle {
    background-size: 100% 100%;
    background-position: left bottom;
    opacity: 1;
    filter: none;
  }
  .thp-shadowboard-fill .thp-shadow-status {
    scale: 1;
    opacity: 1;
    filter: none;
  }

  .thp-window-down .thp-window-glass {
    translate: 0 var(--thp-motion-glass);
    opacity: .28;
    filter: none;
  }
  .thp-window-down .thp-window-data > i {
    opacity: 1;
    translate: none;
    rotate: 0deg;
    scale: 1;
    filter: none;
    clip-path: inset(0);
  }
}