/* The passage under examination, and the four anomaly motions
   ------------------------------------------------------------ */
.doc{
  position:relative;
  border:1px solid var(--film-edge);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--film),var(--ink-2));
  padding:34px 38px 30px;
  overflow:hidden;
  cursor:crosshair;
  touch-action:none;
}
.doc h2{
  font-family:var(--hud);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:0 0 26px;
}
.stmt{
  font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.5vw,29px);
  line-height:1.95;
  color:var(--dim);
  margin:0 0 30px;
  transition:color .3s;
  position:relative;z-index:1;
}
.stmt:last-of-type{margin-bottom:6px}
.src{font-family:var(--hud);font-size:9.5px;letter-spacing:.1em;color:#2e454d;display:block;margin-top:-18px;margin-bottom:30px}

.t{cursor:pointer;border-radius:3px}
.t .w{display:inline-block;white-space:nowrap}
.t .l{display:inline-block;will-change:transform,opacity}
.t.solved{
  background:color-mix(in srgb,var(--cc) 13%,transparent);
  box-shadow:inset 0 -1.5px 0 var(--cc);
}
.t.wrong{animation:nope .34s ease}
@keyframes nope{
  0%,100%{background:transparent}
  40%{background:rgba(224,87,79,.22)}
}
.t.cleared{color:#2b4149}
.t.cleared,.t.solved{cursor:default}

/* --- anomaly motions: amplitude ramps in over .8s, out over .5s --- */
.t{--amp:0;transition:--amp .5s ease-out}
.t.anom{--amp:1;transition:--amp .8s ease-in}

.t.anom[data-cat=emotion] .l{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  9%{transform:scale(calc(1 + .05*var(--amp)))}
  18%{transform:scale(1)}
  27%{transform:scale(calc(1 + .032*var(--amp)))}
  40%{transform:scale(1)}
}
.t.anom[data-cat=claim] .l{animation:wobble 1.5s ease-in-out infinite}
@keyframes wobble{
  0%,100%{transform:translateX(calc(-1.1px*var(--amp)))}
  50%{transform:translateX(calc(1.1px*var(--amp)))}
}
.t.anom[data-cat=fallacy] .l{animation:fracture 2.1s ease-in-out infinite}
@keyframes fracture{
  0%,100%{transform:skewX(0deg) translateY(0)}
  35%{transform:skewX(calc(3deg*var(--amp))) translateY(calc(.7px*var(--amp)))}
  70%{transform:skewX(calc(-1.5deg*var(--amp))) translateY(calc(-.4px*var(--amp)))}
}
.t.anom[data-cat=source] .l{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{
  0%,100%{opacity:1}
  50%{opacity:calc(1 - .45*var(--amp))}
}
@media (prefers-reduced-motion:reduce){
  .t.anom[data-cat=emotion] .l{animation-duration:4.5s}
  .t.anom[data-cat=claim] .l{animation-duration:4s}
  .t.anom[data-cat=fallacy] .l{animation-duration:5s}
  .t.anom[data-cat=source] .l{animation-duration:5.5s}
}

@media (max-width:840px){
  .doc{padding:24px 20px}
  .stmt{line-height:1.9}
}