/* The Word Racer HERE link's counter-moving color and glint, in school colors. */
.methodology-word {
  --word-dark: #241510;
  --word-mid: #4e3629;
  --word-bright: #c00404;
  --word-glint: #ed8b6880;
  display: inline-block;
  font: inherit;
  font-weight: 700;
  color: var(--word-mid);
}
.school-brown {
  --brown-crest-size: 1.8em;
  color: #4e3629;
  -webkit-text-fill-color: #4e3629;
}
.school-stanford {
  --word-dark: #080808;
  --word-mid: #8c1515;
  --word-bright: #a91b1b;
  --word-glint: #8c151560;
}
.school-stats-trigger {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  vertical-align: baseline;
  cursor: help;
}
.school-stats-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.technology-word {
  --word-dark: #08090b;
  --word-mid: #303238;
  --word-bright: #73777e;
  --word-glint: #e0e5ed80;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  vertical-align: baseline;
  cursor: crosshair;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .methodology-word:where(:not(.school-brown)) {
    background-image:
      linear-gradient(178deg, #ffffff12 0%, transparent 40%, #00000012 60%, #00000058 100%),
      linear-gradient(90deg, transparent 0% 10.5%, var(--word-glint) 16.667%, transparent 22.8% 43.9%, var(--word-glint) 50%, transparent 56.1% 77.2%, var(--word-glint) 83.333%, transparent 89.5% 100%),
      linear-gradient(90deg, var(--word-dark) 0%, var(--word-mid) 14%, var(--word-bright) 25%, var(--word-mid) 36%, var(--word-dark) 50%, var(--word-mid) 64%, var(--word-bright) 75%, var(--word-mid) 86%, var(--word-dark) 100%);
    background-size: 100% 100%, 300% 100%, 200% 100%;
    background-position: 50% 50%, 100% 50%, 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: methodology-current 6s linear infinite;
  }
  .school-brown {
    background-color: #4e3629;
    background-image: url('/writing/law-firm-school-tracker/schools/brown-shield.svg');
    background-size: var(--brown-crest-size) var(--brown-crest-size);
    background-position: calc(0% - var(--brown-crest-size) / 2) center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* The same path at 1.3 times its original speed: 6s / 1.3. */
    animation: methodology-brown-crest 4.615384615s ease-in-out infinite alternate;
    -webkit-text-stroke: 0.2px #4e3629;
  }
}
.technology-word:hover { filter: contrast(1.15); }
.technology-word:focus-visible { outline: 2px solid #565a60; outline-offset: 3px; }
.technology-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 120;
  pointer-events: none;
  image-rendering: pixelated;
}
@keyframes methodology-current {
  from { background-position: 50% 50%, 100% 50%, 0% 50%; }
  to { background-position: 50% 50%, 0% 50%, 100% 50%; }
}
@keyframes methodology-brown-crest {
  from { background-position: calc(0% - var(--brown-crest-size) / 2) center; }
  to { background-position: calc(100% + var(--brown-crest-size) / 2) center; }
}
@media (prefers-reduced-motion: reduce) {
  .methodology-word { animation: none; }
  .school-brown { background-position: center; }
}
@media (forced-colors: active) {
  .methodology-word {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    animation: none;
  }
  .school-brown { -webkit-text-stroke-width: 0; }
}