/* ─────────────────────────────────────────────────────────────────────────
   Rotor — o desenho técnico da capa

   Vocabulário emprestado da antimetal: vetor chapado, fio de cabelo, pontos
   de raio variado, órbita tracejada, cantoneiras, rótulo mono. Monocromático,
   uma cor de acento só (o hub).

   Isto é uma ILUSTRAÇÃO, não a marca. `site/DESIGN.md` registra que redesenhar
   a hélice oficial foi recusado; por isso o rotor é deliberadamente uma figura
   livre — raios, cordas e pontos — e não uma aproximação das seis pás do
   lockup. A marca de verdade continua sendo os pixels oficiais, na barra.

   Vive dentro de uma cena `data-live-scene`, então herda `--lx`/`--ly` do
   campo vivo e o ponteiro empurra o rotor sem precisar de JS novo.
   ───────────────────────────────────────────────────────────────────────── */

.ms-mark {
  /* O rotor tem alfa de verdade, então dispensa a placa opaca que a hélice
     em vídeo exigia. Ele pousa direto sobre o leito fotográfico. */
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  inset: auto 6% 12% auto;
  left: 6%;
  width: 66%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Um scrim pequeno e redondo, só onde o desenho está: fio de cabelo sobre
   foto de hangar some sem isso. Não é véu sobre o quadro inteiro. */
.ms-mark::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--sc-canvas) 30%, transparent),
    transparent 72%
  );
}
html[data-theme="dark"] .ms-mark::before {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--sc-canvas) 62%, transparent),
    transparent 76%
  );
}

.rotor-nudge {
  position: relative;
  width: 100%;
  /* O ponteiro empurra o rotor alguns graus. O giro contínuo está numa
     camada de dentro, então os dois transforms não brigam. */
  transform: rotate(calc(var(--lx, 0) * 7deg));
  transition: transform 220ms linear;
}
.rotor {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--sc-ink);
}

.rotor circle,
.rotor line {
  vector-effect: non-scaling-stroke;
}

/* Traço: fio de cabelo constante, independente do tamanho de render. */
.rotor-orbit,
.rotor-ring,
.rotor-spoke,
.rotor-chord {
  fill: none;
  stroke: currentColor;
}
.rotor-orbit {
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.5;
}
.rotor-ring {
  stroke-width: 1;
  opacity: 0.28;
}
.rotor-spoke {
  stroke-width: 1.15;
  opacity: 0.85;
}
.rotor-chord {
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.3;
}

/* Pontos: o raio varia de propósito. Pontos iguais viram textura; pontos
   desiguais viram desenho. */
.rotor-tip {
  fill: currentColor;
}
.rotor-scatter circle {
  fill: currentColor;
  opacity: 0.55;
}
.rotor-hub {
  fill: var(--sc-accent);
}

/* Giro: o rotor num sentido, a dispersão no outro e mais devagar. A
   diferença entre as duas taxas é o que dá profundidade a um desenho chapado. */
.rotor-spin {
  transform-origin: 80px 80px;
  animation: rotor-turn 28s linear infinite;
}
.rotor-scatter {
  transform-origin: 80px 80px;
  animation: rotor-turn 74s linear infinite reverse;
}
@keyframes rotor-turn {
  to {
    transform: rotate(360deg);
  }
}

/* Cantoneiras: a moldura técnica da antimetal, quatro cantos e nada de caixa. */
.rotor-corners {
  position: absolute;
  inset: 4%;
  pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px 11px no-repeat;
  color: var(--sc-ink);
  opacity: 0.35;
}

.rotor-label {
  position: absolute;
  left: 2%;
  bottom: -0.2rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink);
  background: var(--sc-canvas);
  padding: 0.2rem 0.45rem;
}

@media (max-width: 859px) {
  .ms-mark {
    width: 62%;
    left: 5%;
    bottom: 16%;
  }
  .rotor-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotor-spin,
  .rotor-scatter {
    animation: none;
  }
  .rotor-nudge {
    transform: none;
    transition: none;
  }
}