/* ============================================================
   SWTOR RP · Startseite
   1 Hero mit Hyperraumsprung und Ankunft  2 Projekt  3 Wege  4 Teaser
   html.sw-pin (setzt swtor-index.js nur bei fx full und großem Fenster): Hero und Ankunft liegen
   übereinander und werden gemeinsam angepinnt. Ohne die Klasse stehen beide einfach untereinander.
   ============================================================ */

/* 1  HERO */
.sw-jump { position: relative; }

.sw-hero { align-items: end; justify-items: center; text-align: center; }

.sw-hero__media {
  background:
    radial-gradient(ellipse 55% 50% at 50% 44%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    var(--ink-0);
}
.sw-hero__media > * { position: absolute; inset: 0; display: block; }

/* Das Bild wird nie größer als seine Auflösung hergibt: auf sehr großen Schirmen bleibt es ein
   Fenster in der Mitte und läuft an allen Rändern in die Fläche aus. */
.sw-hero__media > .sw-hero__frame {
  bottom: auto;
  width: 100%;
  max-width: 3840px;
  height: 100%;
  max-height: 2260px;
  margin-inline: auto;
  transform-origin: 50% 44%;
}
.sw-hero__frame > * { position: absolute; inset: 0; display: block; }
.sw-hero__frame img { object-position: 50% 40%; }
.sw-hero__shade {
  inset: -1px;
  background:
    linear-gradient(to top, var(--ink-0) 0%, color-mix(in srgb, var(--ink-0) 88%, transparent) 24%, color-mix(in srgb, var(--ink-0) 45%, transparent) 52%, transparent 78%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink-0) 72%, transparent) 0%, transparent 22%);
}
@media (min-width: 3840px) {
  .sw-hero__shade {
    background:
      linear-gradient(to right, var(--ink-0) 0%, transparent 14%, transparent 86%, var(--ink-0) 100%),
      linear-gradient(to top, var(--ink-0) 0%, color-mix(in srgb, var(--ink-0) 88%, transparent) 24%, color-mix(in srgb, var(--ink-0) 45%, transparent) 52%, transparent 78%),
      linear-gradient(to bottom, color-mix(in srgb, var(--ink-0) 72%, transparent) 0%, transparent 22%);
  }
}

.sw-hero__flash {
  opacity: 0;
  background: radial-gradient(ellipse 75% 75% at 50% 44%, #eef6ff 0%, #b5d9ff 30%, #3b78c7 62%, #0b1a33 100%);
  pointer-events: none;
}

.sw-hero__content {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  padding-bottom: calc(var(--dock-space) + clamp(.5rem, 3vh, 2.5rem));
}
.sw-hero__chip { margin: 0; }
.sw-hero__title { margin: 0; line-height: 0; }
.sw-hero__title img { display: block; width: min(600px, 80vw); height: auto; }
.sw-hero__lead { max-width: 38rem; margin: 0; text-wrap: balance; }
.sw-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }

@media (max-width: 599.98px) {
  .sw-hero__cta { flex-direction: column; align-self: stretch; width: 100%; }
  .sw-hero__cta .tt-btn { width: 100%; }
}
@media (max-height: 700px) and (min-width: 760px) {
  .sw-hero__title img { width: min(420px, 60vw); }
  .sw-hero__content { gap: var(--s-4); }
}

/* Ankunft: die Projekt-Überschrift */
.sw-arrive {
  position: relative;
  display: grid;
  align-items: center;
  padding-block: var(--section-y, clamp(5rem, 12vw, 11rem)) clamp(2rem, 5vw, 4rem);
}
.sw-arrive__inner { display: grid; gap: var(--s-6); }
.sw-arrive__title { margin: 0; max-width: 18ch; }
.sw-arrive__lead { margin: 0; max-width: 36rem; }
@media (min-width: 900px) {
  .sw-arrive__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: var(--s-8); }
}

html.sw-pin .sw-jump { display: grid; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
html.sw-pin .sw-jump > * { grid-area: 1 / 1; min-height: 0; }
html.sw-pin .sw-arrive { z-index: 1; padding-block: var(--nav-h) var(--s-8); pointer-events: none; }
html.sw-pin .sw-arrive__inner { pointer-events: auto; transform-origin: 50% 50%; }
html.sw-pin .sw-anchor { scroll-margin-top: 100vh; scroll-margin-top: 100svh; }

/* 2  PROJEKT (Holo-Datapad) */
.sw-proj {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  overflow: clip;
}
/* Raster, das nach außen in die Fläche ausläuft (Verlauf darüber statt Maske) */
.sw-proj::before, .sw-proj::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sw-proj::before {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: 96px 96px;
}
.sw-proj::after { background: radial-gradient(ellipse 80% 60% at 70% 30%, transparent 0%, var(--ink-0) 76%); }

.sw-readout { position: relative; display: grid; gap: var(--s-4); padding: var(--s-6) 0; }
.sw-readout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent);
}
.sw-readout::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 44px;
  height: 7px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.sw-readout__title { margin: 0; }
.sw-readout__text { margin: 0; color: var(--text-2); font-size: var(--step-1); line-height: 1.5; max-width: 44rem; }
.sw-readout--b::before { background: linear-gradient(to left, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent); }
.sw-readout--b::after { left: auto; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%); }
@media (min-width: 900px) {
  .sw-readout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); padding-block: var(--s-7); }
  .sw-readout--a { width: 78%; }
  .sw-readout--b { width: 78%; margin-left: 22%; }
}

/* 3  Die fünf Wege: ruhende Liste, bei fx an gleitet das Band direkt mit dem Scrollen (html.sw-slide) */
.sw-paths {
  margin-block: clamp(2.5rem, 7vw, 6rem);
  overflow: hidden;
  overflow: clip;
  border-block: 1px solid var(--line);
  padding-block: clamp(1rem, 2.5vw, 2rem);
}
.sw-paths__list {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s-2);
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.sw-paths__list li {
  display: flex;
  align-items: center;
  font-family: var(--font-display-wide);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.375rem, 1rem + 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 80%, transparent);
}
.sw-paths__list li:nth-child(odd) { color: var(--text); -webkit-text-stroke: 0; }
.sw-paths__list li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 2px;
  height: .62em;
  margin-inline: clamp(.75rem, 3.2vw, 3.5rem);
  background: var(--accent);
  transform: skewX(-24deg);
}
html.sw-slide .sw-paths__list { flex-wrap: nowrap; width: max-content; will-change: transform; }
html.sw-slide .sw-paths__list li { font-size: clamp(2.25rem, 1rem + 6.2vw, 6.5rem); line-height: 1.05; }

/* 4  TEASER */
.sw-tease { padding-block: clamp(4rem, 9vw, 8rem); }
.sw-tease__title { margin: 0; }
.sw-tease__text { margin: 0; color: var(--text-2); max-width: 30rem; }

/* 4a  Fraktionen: Text links, zwei Bilder rechts */
.sw-tease--fac .sw-tease__inner { display: grid; gap: var(--s-7); align-items: center; }
.sw-tease--fac .sw-tease__copy { display: grid; gap: var(--s-5); justify-items: start; }
.sw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; }
.sw-duo__side { margin: 0; display: grid; gap: var(--s-3); }
.sw-duo__side .tt-media { width: 100%; }
.sw-duo__cap { display: grid; gap: 2px; margin: 0; padding-inline: 2px; }
.sw-duo__cap strong {
  font-family: var(--font-display-wide);
  font-stretch: 118%;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--accent);
}
.sw-duo__side--sith .sw-duo__cap { text-align: right; }
.sw-duo__side--sith .sw-duo__cap strong { color: var(--sith); }
.sw-duo__side--rep .tt-media { border-bottom: 2px solid var(--accent); }
.sw-duo__side--sith .tt-media { border-bottom: 2px solid var(--sith); }
@media (min-width: 900px) {
  .sw-tease--fac .sw-tease__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
}

/* 4b  Hangar: Schiff mittig über dem Holotisch, Text darunter in einer Zeile */
.sw-tease--hangar {
  position: relative;
  border-block: 1px solid var(--line);
  background: radial-gradient(ellipse 50% 46% at 50% 44%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%), var(--ink-1);
}
.sw-tease--hangar .sw-tease__inner { display: grid; gap: var(--s-6); }
.sw-tease__ship { position: relative; width: 100%; max-width: 760px; margin: 0 auto; aspect-ratio: 960 / 538; }
.sw-tease__ship::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6%;
  height: 14%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
}
.sw-tease__ship :is(picture, img) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sw-tease__ship img { object-fit: contain; }
.sw-tease--hangar .sw-tease__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}
.sw-tease--hangar .sw-tease__words { display: grid; gap: var(--s-3); }

@media (max-width: 599.98px) {
  .sw-tease .tt-btn { width: 100%; }
}