/* ============================================================
   SWTOR RP · Hangar: Drehbild-Sequenz auf dem Holotisch (einzige angepinnte Szene der Seite)
   Versteckte oder laufende Zustände gibt es nur unter html.sw-fx (setzt swtor-hangar.js).
   ============================================================ */

.sw-hangar {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--s-5)) var(--s-7);
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(ellipse 60% 55% at 64% 62%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--ink-0);
  border-bottom: 1px solid var(--line);
}
.sw-hangar__inner { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .sw-hangar__inner { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
}

.sw-hangar__title { margin: 0 0 var(--s-4); font-size: clamp(2rem, 1.2rem + 2vw, 2.75rem); overflow-wrap: normal; hyphens: manual; }
.sw-hangar__text, .sw-hangar__hint { margin: 0; color: var(--text-2); }
/* Der Hinweis hat immer seinen Platz, damit beim Start nichts nachrückt */
.sw-hangar__hint { margin-top: var(--s-2); min-height: 2.8em; color: var(--text-3); font-size: var(--step--1); line-height: 1.4; visibility: hidden; }
.sw-hangar.is-seq .sw-hangar__hint { visibility: visible; }
html:not(.js) .sw-hangar__hint { display: none; }

.sw-switch { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s-5); border: 1px solid var(--line-strong); }
html:not(.js) .sw-switch { display: none; }
.sw-switch__btn {
  min-height: 44px;
  padding: 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: none;
  border: 0;
  border-left: 1px solid var(--line-strong);
  cursor: pointer;
  transition: color var(--dur-1), background-color var(--dur-1);
}
.sw-switch__btn:first-child { border-left: 0; }
.sw-switch__btn:hover { color: var(--text); }
.sw-switch__btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.sw-switch__btn:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }

/* Die Liste hat mit JS eine feste Höhe (vier Zeilen): der Fraktionswechsel verschiebt nichts */
.sw-ships { margin-top: var(--s-4); }
html.js .sw-ships { min-height: 196px; }
.sw-ships__group[hidden] { display: none; }
/* Vor dem Start des Skripts ist schon nur die erste Gruppe zu sehen: nichts springt beim Laden */
html.js .sw-ships:not(.is-ready) .sw-ships__group + .sw-ships__group { display: none; }
.sw-ships__label { margin: var(--s-4) 0 var(--s-2); }
html.js .sw-ships__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.sw-ships__list { margin: 0; padding: 0; list-style: none; }
.sw-ship {
  position: relative;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--text-2);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--dur-1), background-color var(--dur-1);
}
html:not(.js) .sw-ship { cursor: default; }
.sw-ship::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.sw-ship:hover { color: var(--text); }
.sw-ship[aria-current="true"] {
  color: var(--accent);
  background: linear-gradient(to right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 80%);
}
.sw-ship[aria-current="true"]::before { transform: scaleX(1.6) scaleY(2); }
.sw-ship:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sw-hangar__view { min-width: 0; }
.sw-hangar__stage {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  aspect-ratio: 960 / 538;
  outline: none;
}
.sw-hangar.is-seq .sw-hangar__stage { cursor: grab; touch-action: pan-y; }
.sw-hangar.is-seq .sw-hangar__stage.is-drag { cursor: grabbing; }
.sw-hangar__stage:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* Lichtkegel über dem Tisch: weicher Verlauf, keine Maske */
.sw-hangar__stage::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 6%;
  bottom: 12%;
  background: radial-gradient(ellipse 50% 46% at 50% 54%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 100%);
  pointer-events: none;
}

.sw-hangar__table {
  position: absolute;
  left: 50%;
  top: 86%;
  width: 72%;
  aspect-ratio: 1;
  margin: -36% 0 0 -36%;
  transform: scaleY(.2);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 62%, transparent 86%);
}
.sw-hangar__table::before, .sw-hangar__table::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
}
.sw-hangar__table::after { inset: 26%; border-width: 1px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
/* Teilring, der sich mit dem Schiff dreht (gestrichelter Rand, nur transform) */
.sw-hangar__ring {
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  border: 6px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  will-change: transform;
}

.sw-hangar__float { position: absolute; inset: 0; }
.sw-hangar__still, .sw-hangar__still img, .sw-hangar__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sw-hangar__still img { object-fit: contain; }
.sw-hangar__canvas { opacity: 0; }
.sw-hangar__stage.is-live .sw-hangar__canvas { opacity: 1; }
.sw-hangar__stage.is-live .sw-hangar__still { visibility: hidden; }
.sw-hangar__stage.is-swap .sw-hangar__float { animation: sw-fade .3s linear both; }

.sw-hangar__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 8%, color-mix(in srgb, var(--accent) 80%, transparent) 35%, color-mix(in srgb, var(--accent) 80%, transparent) 65%, transparent 92%) top / 100% 1px no-repeat;
  opacity: 0;
  pointer-events: none;
}
html.sw-fx .sw-hangar__scan { animation: sw-scan-loop 5.5s linear infinite; }
html.sw-fx .sw-hangar.is-away .sw-hangar__scan { animation-play-state: paused; }
@keyframes sw-scan-loop {
  0% { transform: translateY(4%); opacity: 0; }
  8% { opacity: .9; }
  60% { opacity: .9; }
  70%, 100% { transform: translateY(88%); opacity: 0; }
}

.sw-hangar__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  max-width: 860px;
  min-height: 5.25rem;
  margin: var(--s-4) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
}
.sw-hangar__ship { display: grid; gap: var(--s-1); margin: 0; }
.sw-hangar__name { font-weight: var(--heading-weight, 700); }
.sw-hangar__faction { color: var(--accent); }
.sw-hangar__load { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-variant-numeric: tabular-nums; }
.sw-hangar__load[hidden] { display: none; }
.sw-hangar__bar { display: block; width: 120px; height: 2px; background: var(--line-strong); overflow: hidden; }
.sw-hangar__bar i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

@media (max-width: 899.98px) {
  .sw-hangar { min-height: 0; padding-block: calc(var(--nav-h) + var(--s-7)) var(--s-8); }
  html.js .sw-ships { min-height: 98px; }
  html.js .sw-ships__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .sw-ship { font-size: var(--step--1); }
  .sw-hangar__readout { min-height: 6.5rem; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .sw-hangar__stage { max-width: 700px; }
}