.star-crawl-card {
  position: relative;
  min-height: 640px;
  margin-top: 30px;
  overflow: hidden;
  box-sizing: border-box;
  color: #ffc500;
  background: #000;
  border: 12px solid;
  border-color: #393939 #080808 #050505 #303030;
  border-radius: 8px;
  outline: 3px solid #590d0d;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(0, 0, 0, 0.85),
    0 8px 0 #080808,
    0 11px 0 #3f0909;
  container-type: inline-size;
  isolation: isolate;
}

.ntsc-filter-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ntsc-picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: #000;
  filter: none;
  clip-path: inset(50% 0);
  transform: translateZ(0);
}

.star-crawl-card.is-on .ntsc-picture {
  visibility: visible;
  opacity: 1;
  filter: url("#ntsc-vhs-signal");
  animation: tvPictureSettle 260ms ease-out both;
}

.star-crawl-card canvas {
  position: absolute;
  inset: -1%;
  width: 102%;
  height: 102%;
  z-index: 0;
  scale: 1.01;
}

.star-crawl-card::before,
.star-crawl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.star-crawl-card::before {
  background:
    linear-gradient(to bottom, #000 0%, transparent 14%, transparent 77%, rgba(0, 0, 0, 0.42) 100%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.09) 1px 4px);
}

.star-crawl-card::after {
  inset: -2%;
  background:
    linear-gradient(90deg, rgba(255, 0, 30, 0.045), transparent 34%, rgba(0, 180, 255, 0.045)),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.72) 100%);
  animation: ntscPhaseFlicker 3.6s steps(2, end) infinite;
}

.star-crawl-stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 14.65em;
  height: 50em;
  margin-left: -7.325em;
  overflow: hidden;
  font-size: 6cqw;
  text-align: justify;
  transform: perspective(28cqw) rotateX(39deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.star-crawl-text {
  position: absolute;
  top: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #ffc500;
  text-align: center;
  transform: translateY(0) translateZ(0);
  animation: crawlAway 42s linear infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.star-crawl-card.is-on .star-crawl-text {
  animation-play-state: running;
}

.star-crawl-text li {
  margin: 0 0 0.5em;
  color: inherit;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-shadow:
    0 0 0.08em rgba(255, 197, 0, 0.55),
    0 0.045em 0 rgba(112, 72, 0, 0.55);
}

.star-crawl-text li:nth-child(2) {
  margin-bottom: 0.8em;
}

.vhs-distortion {
  position: absolute;
  right: -5%;
  bottom: -1%;
  z-index: 4;
  width: 110%;
  height: 8%;
  pointer-events: none;
  opacity: 0.28;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(255, 0, 40, 0.14), transparent 42%, rgba(0, 190, 255, 0.14));
  backdrop-filter: blur(1.1px) contrast(1.3) saturate(0.62);
  transform: translateX(var(--ntsc-head-shift, 0));
  animation: headSwitching 2.9s steps(4, end) infinite;
}

.vhs-distortion::before {
  content: "";
  position: absolute;
  top: -580%;
  left: -3%;
  width: 106%;
  height: 72%;
  opacity: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  backdrop-filter: blur(0.7px) contrast(1.18);
  animation: trackingNoise 8.2s steps(9, end) infinite;
}

@keyframes crawlAway {
  0% {
    opacity: 0;
    transform: translateY(0) translateZ(0);
  }

  6%, 94% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-18em) translateZ(0);
  }
}

@keyframes headSwitching {
  0%, 78%, 100% {
    translate: 0 0;
  }

  82% {
    translate: 5px 1px;
  }

  88% {
    translate: -3px 0;
  }

  94% {
    translate: 2px -1px;
  }
}

@keyframes trackingNoise {
  0%, 16% {
    opacity: 0;
    transform: translateY(0) skewX(0);
  }

  18% {
    opacity: 0.24;
  }

  40% {
    opacity: 0.1;
    transform: translateY(760%) skewX(-1deg);
  }

  42%, 100% {
    opacity: 0;
    transform: translateY(900%) skewX(0);
  }
}

@keyframes ntscPhaseFlicker {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }

  34% {
    transform: translate(1px, 0);
    opacity: 0.8;
  }

  67% {
    transform: translate(-1px, 0);
    opacity: 0.66;
  }
}

body.accessibility-high-contrast .star-crawl-card {
  background: #000 !important;
  border-color: var(--color-white) !important;
  outline-color: var(--color-white) !important;
}

body.accessibility-high-contrast .ntsc-picture {
  filter: none;
}

body.accessibility-high-contrast .star-crawl-card::before,
body.accessibility-high-contrast .star-crawl-card::after,
body.accessibility-high-contrast .vhs-distortion {
  display: none;
}

body.accessibility-high-contrast .star-crawl-text li {
  color: var(--color-white) !important;
  text-shadow: none !important;
}

body.accessibility-reduce-motion .star-crawl-card::after,
body.accessibility-reduce-motion .vhs-distortion,
body.accessibility-reduce-motion .vhs-distortion::before {
  animation: none !important;
}

body.accessibility-reduce-motion .ntsc-picture {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #ffc500 #111;
  scrollbar-width: thin;
  touch-action: pan-y;
  filter: none;
}

body.accessibility-reduce-motion .star-crawl-stage {
  position: relative;
  inset: auto;
  display: grid;
  width: auto;
  min-height: 100%;
  height: auto;
  margin: 0;
  padding: 48px 32px;
  box-sizing: border-box;
  place-items: center;
  font-size: clamp(38px, 6cqw, 60px);
  transform: none;
}

body.accessibility-reduce-motion .star-crawl-text {
  position: static;
  width: min(720px, 100%);
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}

.ntsc-picture:focus-visible {
  outline: 3px solid #ffc500;
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  .star-crawl-card::after,
  .vhs-distortion,
  .vhs-distortion::before {
    animation: none;
  }

  .ntsc-picture {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #ffc500 #111;
    scrollbar-width: thin;
    touch-action: pan-y;
    filter: none;
  }

  .star-crawl-stage {
    position: relative;
    inset: auto;
    display: grid;
    width: auto;
    min-height: 100%;
    height: auto;
    margin: 0;
    padding: 48px 32px;
    box-sizing: border-box;
    place-items: center;
    font-size: clamp(38px, 6cqw, 60px);
    transform: none;
  }

  .star-crawl-text {
    position: static;
    width: min(720px, 100%);
    transform: none;
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 650px) {
  .star-crawl-card {
    min-height: 520px;
    border-width: 8px;
  }

  .star-crawl-stage {
    width: 13em;
    height: 50em;
    margin-left: -6.5em;
    font-size: 7.5cqw;
    transform: perspective(270px) rotateX(27deg);
  }

  .star-crawl-text {
    animation-duration: 38s;
  }

  @keyframes crawlAway {
    0% {
      opacity: 0;
      transform: translateY(0) translateZ(0);
    }

    6%, 83% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateY(-21em) translateZ(0);
    }
  }
}


.tv-startup {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3cqw, 24px);
  padding: clamp(22px, 6vw, 64px);
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 38%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(ellipse at center, #17191d 0%, #08090b 48%, #000 100%);
}

.tv-startup::before,
.tv-startup::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tv-startup::before {
  inset: 0;
  opacity: 0.15;
  background:
    repeating-radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 0.16) 0 1px,
      transparent 1px 5px
    );
  mix-blend-mode: screen;
}

.tv-startup::after {
  top: 50%;
  left: 50%;
  width: 0;
  height: 3px;
  opacity: 0;
  background: #fff;
  box-shadow:
    0 0 8px #fff,
    0 0 24px rgba(190, 220, 255, 0.92);
  transform: translate(-50%, -50%);
}

.vhs-player {
  position: relative;
  z-index: 3;
  width: min(700px, 94%);
  aspect-ratio: 1500 / 489;
  flex: 0 0 auto;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.vhs-player-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    brightness(0.9)
    contrast(1.08)
    saturate(0.88)
    drop-shadow(0 0 1px #000)
    drop-shadow(0 14px 12px rgba(0, 0, 0, 0.62));
  pointer-events: none;
  user-select: none;
  transition: opacity 90ms linear;
}

.vhs-player-open-image {
  opacity: 0;
}

.vhs-player-closed-image {
  opacity: 1;
}

.vhs-player.is-drop-ready .vhs-player-open-image,
.star-crawl-card.is-inserting-tape .vhs-player-open-image {
  opacity: 1;
}

.vhs-player.is-drop-ready .vhs-player-closed-image,
.star-crawl-card.is-inserting-tape .vhs-player-closed-image {
  opacity: 0;
}

.star-crawl-card.is-tape-seated .vhs-player-open-image {
  opacity: 0;
}

.star-crawl-card.is-tape-seated .vhs-player-closed-image {
  opacity: 1;
}

.vhs-drop-zone {
  position: absolute;
  top: 23%;
  left: 25%;
  width: 49%;
  height: 29%;
  border: 3px solid transparent;
  border-radius: 4px;
  pointer-events: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.vhs-player.is-drop-ready {
  filter: brightness(1.12);
  transform: scale(1.015);
}

.vhs-player.is-drop-ready .vhs-drop-zone {
  border-color: #ffc500;
  box-shadow:
    0 0 10px #ffc500,
    inset 0 0 18px rgba(255, 197, 0, 0.38);
}

.vhs-tape {
  --drag-x: 0px;
  --drag-y: 0px;
  --insert-x: 0px;
  --insert-y: -150px;
  --drag-tilt-x: 0deg;
  --drag-tilt-y: 0deg;
  position: relative;
  z-index: 4;
  display: block;
  width: min(350px, 72%);
  height: clamp(120px, 21cqw, 180px);
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: grab;
  touch-action: none;
  transform:
    translate3d(var(--drag-x), var(--drag-y), 0)
    rotateX(var(--drag-tilt-x))
    rotateY(var(--drag-tilt-y));
  transition:
    transform 180ms ease,
    filter 160ms ease,
    opacity 160ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.vhs-tape:not(.is-pointer-dragging):hover {
  filter: brightness(1.08);
  transform:
    translate3d(0, -5px, 18px)
    rotateX(-3deg)
    rotateY(-2deg)
    rotateZ(-1deg)
    scale(1.025);
}

.vhs-tape.is-pointer-dragging {
  z-index: 6;
  cursor: grabbing;
  filter: brightness(1.1) drop-shadow(0 12px 10px rgba(0, 0, 0, 0.45));
  transform:
    translate3d(var(--drag-x), var(--drag-y), 32px)
    rotateX(var(--drag-tilt-x))
    rotateY(var(--drag-tilt-y))
    rotateZ(-1deg)
    scale(1.025);
  transition: none;
}

.vhs-tape:focus-visible {
  outline: 4px solid #ffc500;
  outline-offset: 6px;
  border-radius: 8px;
}

.vhs-tape:disabled {
  cursor: wait;
}

.vhs-tape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.68));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.vhs-instruction {
  position: relative;
  z-index: 3;
  margin: -6px 0 0;
  color: #ffc500;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(15px, 2.6cqw, 21px);
  letter-spacing: 0.09em;
  text-align: center;
  text-shadow:
    2px 2px #000,
    0 0 10px rgba(255, 197, 0, 0.35);
}

.vhs-keyboard-instruction {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.star-crawl-card.is-inserting-tape .vhs-tape {
  animation: vhsInsertTape 720ms cubic-bezier(0.3, 0.76, 0.22, 1) forwards;
  pointer-events: none;
}

.vhs-player,
.vhs-tape,
.vhs-instruction {
  transition-property: opacity, filter, transform;
  transition-duration: 360ms;
  transition-timing-function: ease;
}

.star-crawl-card.is-inserting-tape .vhs-instruction {
  opacity: 0;
}

.star-crawl-card.is-vhs-fading .vhs-player,
.star-crawl-card.is-vhs-fading .vhs-tape,
.star-crawl-card.is-vhs-fading .vhs-instruction,
.star-crawl-card.is-turning-on .vhs-player,
.star-crawl-card.is-turning-on .vhs-instruction {
  opacity: 0;
}

.star-crawl-card.is-turning-on .vhs-tape {
  opacity: 0;
  transform:
    translate3d(var(--insert-x), var(--insert-y), -90px)
    rotateX(84deg)
    rotateY(-4deg)
    scale(0.46);
  pointer-events: none;
}

.star-crawl-card.is-turning-on .tv-startup::before {
  animation: tvStaticBurst 180ms steps(3, end) infinite;
}

.star-crawl-card.is-turning-on .tv-startup::after {
  animation: tvPowerLine 1150ms ease-in-out forwards;
}

.star-crawl-card.is-on .tv-startup {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes vhsInsertTape {
  0% {
    opacity: 1;
    transform:
      translate3d(var(--drag-x), var(--drag-y), 32px)
      rotateX(var(--drag-tilt-x))
      rotateY(var(--drag-tilt-y))
      rotateZ(-1deg)
      scale(1.025);
  }

  38% {
    opacity: 1;
    transform:
      translate3d(
        var(--insert-x),
        var(--insert-y),
        70px
      )
      rotateX(18deg)
      rotateY(-10deg)
      rotateZ(5deg)
      scale(0.78);
  }

  72% {
    opacity: 1;
    transform:
      translate3d(var(--insert-x), var(--insert-y), 16px)
      rotateX(66deg)
      rotateY(-5deg)
      rotateZ(0)
      scale(0.54);
  }

  88% {
    opacity: 1;
    transform:
      translate3d(var(--insert-x), var(--insert-y), -34px)
      rotateX(82deg)
      rotateY(-3deg)
      scale(0.49);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--insert-x), var(--insert-y), -100px)
      rotateX(88deg)
      rotateY(0)
      scale(0.43);
  }
}

@keyframes tvStaticBurst {
  0% {
    transform: translate(0, 0) scale(1.02);
    opacity: 0.12;
  }

  50% {
    transform: translate(-1.5%, 1%) scale(1.04);
    opacity: 0.35;
  }

  100% {
    transform: translate(1%, -1%) scale(1.03);
    opacity: 0.18;
  }
}

@keyframes tvPowerLine {
  0%, 15% {
    width: 0;
    height: 2px;
    opacity: 0;
  }

  24% {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 1;
  }

  48% {
    width: 88%;
    height: 3px;
    border-radius: 0;
    opacity: 1;
  }

  70% {
    width: 100%;
    height: 3px;
    opacity: 0.96;
  }

  88% {
    width: 100%;
    height: 72%;
    opacity: 0.3;
  }

  100% {
    width: 110%;
    height: 110%;
    opacity: 0;
  }
}

@keyframes tvPictureSettle {
  0% {
    opacity: 0.45;
    clip-path: inset(49.7% 0);
  }

  55% {
    opacity: 1;
    clip-path: inset(0);
  }

  72% {
    opacity: 0.82;
  }

  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}


body.accessibility-reduce-motion .vhs-player,
body.accessibility-reduce-motion .vhs-tape,
body.accessibility-reduce-motion .vhs-instruction {
  transition-duration: 0s;
}

body.accessibility-reduce-motion .star-crawl-card.is-inserting-tape .vhs-tape,
body.accessibility-reduce-motion .star-crawl-card.is-turning-on .tv-startup::before,
body.accessibility-reduce-motion .star-crawl-card.is-turning-on .tv-startup::after,
body.accessibility-reduce-motion .star-crawl-card.is-on .ntsc-picture {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .vhs-player,
  .vhs-tape,
  .vhs-instruction {
    transition-duration: 0s;
  }

  .star-crawl-card.is-inserting-tape .vhs-tape,
  .star-crawl-card.is-turning-on .tv-startup::before,
  .star-crawl-card.is-turning-on .tv-startup::after,
  .star-crawl-card.is-on .ntsc-picture {
    animation: none;
  }
}

@media (max-width: 650px) {
  .tv-startup {
    padding: 20px;
  }

  .vhs-player {
    width: 100%;
  }

  .vhs-tape {
    width: min(310px, 86%);
    height: 138px;
  }

  .vhs-instruction {
    font-size: clamp(14px, 4.5vw, 18px);
  }
}


/* Reduced motion skips the VHS sequence and restores the flat scrollable crawl. */
body.accessibility-reduce-motion .tv-startup {
  display: none;
}

body.accessibility-reduce-motion .ntsc-picture {
  visibility: visible;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
  clip-path: none;
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tv-startup {
    display: none;
  }

  .ntsc-picture {
    visibility: visible;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    clip-path: none;
    scroll-behavior: auto;
  }
}


/* Impatient helper hand */
.fake-hand {
  --hand-x: -320px;
  --hand-y: 0px;
  --hand-rotation: 0deg;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  width: clamp(150px, 27cqw, 250px);
  aspect-ratio: 433 / 577;
  opacity: 0;
  pointer-events: none;
  transform:
    translate3d(var(--hand-x), var(--hand-y), 70px)
    rotate(var(--hand-rotation));
  transform-origin: 50% 45%;
  transition: opacity 140ms ease;
  will-change: transform;
}

.fake-hand.is-active {
  opacity: 1;
}

.fake-hand-art {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.7));
  transform: none;
  transform-origin: 52% 42%;
}

.fake-hand-art::before,
.fake-hand-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #ef4444;
  -webkit-mask: center / contain no-repeat url("../icons/friends-hand-open.png");
  mask: center / contain no-repeat url("../icons/friends-hand-open.png");
}

.fake-hand-art::after {
  opacity: 0;
  -webkit-mask-image: url("../icons/friends-hand-closed.png");
  mask-image: url("../icons/friends-hand-closed.png");
}

.fake-hand.is-grabbing .fake-hand-art::before {
  opacity: 0;
}

.fake-hand.is-grabbing .fake-hand-art::after {
  opacity: 1;
}

.fake-hand-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: contain;
  opacity: 0.48;
  filter: grayscale(1) contrast(1.3) brightness(1.08);
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
}

.fake-hand-closed {
  opacity: 0;
}

.fake-hand.is-grabbing .fake-hand-open {
  opacity: 0;
}

.fake-hand.is-grabbing .fake-hand-closed {
  opacity: 0.48;
}

.star-crawl-card.is-vhs-fading .fake-hand,
.star-crawl-card.is-turning-on .fake-hand,
.star-crawl-card.is-on .fake-hand {
  opacity: 0;
}

body.accessibility-reduce-motion .fake-hand {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fake-hand {
    display: none;
  }
}

@media (max-width: 650px) {
  .fake-hand {
    width: clamp(125px, 38cqw, 190px);
  }
}


/* Freeze the page while the helper takes control of the tape. */
html.friends-takeover-lock,
html.friends-takeover-lock body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.friends-takeover-lock a[href],
body.friends-takeover-lock [role="link"] {
  pointer-events: none !important;
}

/* Measured crawl timing replaces the fixed fallback animation. */
.star-crawl-text.has-measured-crawl {
  animation: none;
}

/* Keep OS reduced motion flat on mobile too (after mobile perspective rules). */
@media (prefers-reduced-motion: reduce) {
  .star-crawl-stage {
    width: auto;
    height: auto;
    margin: 0;
    font-size: clamp(38px, 6cqw, 60px);
    transform: none;
  }
}

/* The final frame appears after the measured crawl and its fade have finished. */
.crawl-end-screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.crawl-end-screen p {
  margin: 0;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(1.2rem, 3cqw, 2.1rem);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.star-crawl-card.is-crawl-complete .crawl-end-screen {
  opacity: 1;
}

/* Keep the flat reduced-motion list centered in its scrollable frame. */
body.accessibility-reduce-motion .star-crawl-stage {
  justify-content: center;
  align-content: center;
}

body.accessibility-reduce-motion .star-crawl-text {
  margin-inline: auto;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .star-crawl-stage {
    justify-content: center;
    align-content: center;
  }

  .star-crawl-text {
    margin-inline: auto;
    text-align: center;
  }
}


/* Emergency adaptive fallback: retain the crawl, remove every expensive VHS layer. */
body.accessibility-performance-mode[data-performance-level="4"] .ntsc-picture {
  filter: none !important;
}

body.accessibility-performance-mode[data-performance-level="4"] .star-crawl-card::before,
body.accessibility-performance-mode[data-performance-level="4"] .star-crawl-card::after,
body.accessibility-performance-mode[data-performance-level="4"] .vhs-distortion,
body.accessibility-performance-mode[data-performance-level="4"] .vhs-distortion::before {
  display: none !important;
  animation: none !important;
  backdrop-filter: none !important;
}

body.accessibility-performance-mode[data-performance-level="4"] .star-crawl-card canvas {
  image-rendering: auto;
}