/* TimeTales · SCP:RP · Startseite (scp.timetales.de/)
 * Hero, Foundation-Überblick, Statusband, Abschluss.
 * Versteckte Startzustände setzt nur scp-index.js (Klasse is-armed).
 */

/* ---------------------------------------------------------------- 1 Hero */
.hero { position: relative; align-items: end; }
.hero__media { background: var(--ink-0); overflow: clip; }
/* Das Bild steht rechts und wird nie größer als seine echte Auflösung gezeigt. */
.hero__plate {
  position: absolute;
  top: 0;
  right: 0;
  width: min(72vw, 2388px);
  height: min(100%, 2210px);
  will-change: transform;
}
.hero__plate img { object-position: 28% 22%; }
/* Rotes Alarmlicht: ein Verlauf über dem Bild, nur die Deckkraft bewegt sich. */
.hero__alarm {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 8% 42%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
  opacity: .45;
  will-change: opacity;
  animation: scp-alarm 4.8s steps(12, end) infinite alternate;
}
/* Abdunklung, Bildzeilen (nur über dem Bild, nicht über der Seite) und Übergänge in die Fläche. */
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(7 7 7 / 1) 0%, rgb(7 7 7 / .86) 14%, rgb(7 7 7 / .3) 48%, rgb(7 7 7 / 0) 70%),
    linear-gradient(to top, rgb(7 7 7 / 1) 0%, rgb(7 7 7 / .72) 20%, rgb(7 7 7 / 0) 50%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .2) 2px 3px);
}
.hero__edge {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(7 7 7 / 1) 0, rgb(7 7 7 / 1) calc(100% - min(72vw, 2388px)), rgb(7 7 7 / 0) calc(100% - min(72vw, 2388px) + 22vw));
}

.hero__content {
  position: relative;
  align-self: end;
  padding-block: var(--s-7) clamp(var(--s-7), 7vh, var(--s-9));
}
.hero__chip { margin: 0 0 var(--s-4); animation: sc-cut-in .3s steps(3, end) .05s backwards; }
html[data-world="scp"] .hero__title {
  width: max-content;
  max-width: 100%;
  margin: 0 0 0 -.03em;
  font-size: clamp(5rem, min(30vw, 36svh), 24rem);
  line-height: .86;
  white-space: nowrap;
  animation: sc-cut-in .35s steps(4, end) .1s backwards;
}
.hero__motto {
  margin: var(--s-5) 0 0;
  font-family: var(--font-mono);
  font-size: clamp(.85rem, .7rem + .55vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  animation: sc-cut-in .3s steps(3, end) .18s backwards;
}
.hero__sub { max-width: 34ch; margin: var(--s-4) 0 0; color: var(--text); animation: sc-cut-in .3s steps(3, end) .24s backwards; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
  animation: sc-cut-in .3s steps(3, end) .3s backwards;
}
@keyframes scp-alarm { from { opacity: .2; } to { opacity: .75; } }

@media (max-width: 699px) {
  .hero__plate { left: 0; width: auto; height: 68%; }
  .hero__plate img { object-position: 30% 0%; }
  .hero__edge { display: none; }
  .hero__shade {
    background:
      linear-gradient(to top, rgb(7 7 7 / 1) 0%, rgb(7 7 7 / 1) 32%, rgb(7 7 7 / .55) 52%, rgb(7 7 7 / 0) 80%),
      repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .2) 2px 3px);
  }
  .hero__cta .tt-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ 2 Briefing */
.brief { position: relative; border-top: 1px solid var(--line-strong); }
.brief__grid { display: grid; gap: var(--s-8); }
.brief__title { margin: 0; hyphens: manual; }
.brief__intro { margin: var(--s-5) 0 0; max-width: 40ch; color: var(--text-2); }
.brief__entry {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(var(--s-7), 8vh, var(--s-9));
  border-top: 1px solid var(--line-strong);
}
.brief__entry:last-of-type { border-bottom: 1px solid var(--line-strong); }
.brief__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.brief__text {
  margin: 0;
  font-family: var(--font-display-narrow);
  font-stretch: 75%;
  font-weight: 560;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.7rem);
  line-height: 1.24;
  color: var(--text);
  text-wrap: pretty;
}
/* Freigegebene Stelle: rot unterlegt. So sieht sie auch ohne JavaScript aus. */
.redact {
  position: relative;
  display: inline-block;
  padding: 0 .1em;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Schwärzung: ein roter Vollbalken, der sich beim Sichten in harten Schritten zurückzieht. */
.redact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
}
.is-armed .redact::after { transform: scaleX(1); }
.is-armed .is-clear .redact::after {
  transform: scaleX(0);
  transition: transform .32s steps(5, end) calc(var(--i, 0) * 70ms);
}
.brief__legend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--text-3);
}
.brief__legend i { flex: none; width: 2.5rem; height: .9em; background: var(--accent); }

@media (min-width: 900px) {
  .brief__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
  .brief__side { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
  .brief__entry { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-6); }
  .brief__label { padding-top: .7em; }
}

/* -------------------------------------------------------------- 3 Status */
.wip { position: relative; overflow: clip; padding-top: 0; }
.wip .sc-hazard { margin-bottom: clamp(var(--s-8), 10vh, var(--s-10)); }
.wip__title {
  margin: 0;
  font-family: var(--font-display-narrow);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(3rem, 12.4vw, 15rem);
  line-height: .82;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.wip__line { display: block; width: max-content; padding-inline: var(--gutter); will-change: transform; }
.wip__title em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--accent); }
.wip__grid { display: grid; gap: var(--s-7); margin-top: clamp(var(--s-7), 8vh, var(--s-9)); }
.wip__text { margin: 0; max-width: 36ch; }
@media (min-width: 900px) {
  .wip__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: start; }
}

/* --------------------------------------------------------------- 4 Outro */
.outro {
  position: relative;
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 90% at 22% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--ink-0);
}
.outro__grid { display: grid; gap: var(--s-7); align-items: center; }
.outro__logo { width: min(60vw, 20rem); }
.outro__logo img { display: block; width: 100%; height: auto; }
html[data-world="scp"] .outro__title { margin: 0; font-size: clamp(2.3rem, 5.4vw, 5.2rem); }
.outro__text { margin: var(--s-5) 0 0; max-width: 36ch; }
.outro__cta { margin: var(--s-6) 0 0; }
@media (min-width: 900px) {
  .outro__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); }
  .outro__logo { width: min(100%, 26rem); justify-self: center; }
}

/* ------------------------------------------------------ Bewegung aus */
@media (prefers-reduced-motion: reduce) {
  .hero__alarm, .hero__chip, .hero__title, .hero__motto, .hero__sub, .hero__cta { animation: none !important; }
  .redact::after { transition: none !important; }
}
html[data-fx="off"] :is(.hero__alarm, .hero__chip, .hero__title, .hero__motto, .hero__sub, .hero__cta) { animation: none !important; }