/* TimeTales · SCP:RP · Unterseiten akten, fraktionen, geschichte
 * Akten als ruhige senkrechte Folge (kein Pin). Startzustände setzt nur scp-akten.js.
 */

/* ----------------------------------------------------------------- Akten */
.akten { padding-block: var(--section-y, var(--s-10)); }
.akten__track { display: grid; gap: clamp(var(--s-9), 14vh, var(--s-11)); }
.akte {
  position: relative;
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.akte + .akte { padding-top: clamp(var(--s-9), 14vh, var(--s-11)); border-top: 1px solid var(--line-strong); }
.akte__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: clip;
  background: var(--ink-1);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;
}
.akte__plate { position: absolute; inset: 0; }
.akte__plate picture, .akte__plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.akte--096 .akte__plate { transform-origin: 57% 8%; }

.akte__name {
  margin: 0;
  font-family: var(--font-display-narrow);
  font-stretch: 66%;
  font-weight: 860;
  font-size: clamp(3.6rem, 2rem + 6.4vw, 8rem);
  line-height: .88;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--text);
}
.akte__key {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-stretch: 100%;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--accent);
}
.akte__desc { margin: var(--s-5) 0 0; max-width: 44ch; font-size: var(--step-0); line-height: 1.6; color: var(--text-2); }
.akte__hold { margin-top: var(--s-6); min-height: 5.5rem; }
.akte__live {
  min-height: 1.5em;
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--text-3);
}
.hold { min-width: 17.5rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Sichtkontakt: der Balken liegt nur mit JavaScript über dem Gesicht. */
.akte__censor { display: none; }
.has-censor .akte__censor {
  display: block;
  position: absolute;
  left: 50.5%;
  top: 0;
  width: 13.5%;
  height: 16.5%;
  background: var(--sc-hatch), #050505;
  outline: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
}
.has-censor.is-seen .akte__censor { display: none; }
.akte__pulse {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 57% 9%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 34%);
}
.is-seen .akte__plate { transform: scale(1.16); transition: transform .5s steps(3, end); }
.is-glitch .akte__plate picture { animation: scp-jolt .46s steps(1, end) 1; }
.is-glitch .akte__pulse { animation: scp-pulse .6s ease-out 1; }
@keyframes scp-jolt {
  0% { transform: translate3d(-3%, 0, 0) skewX(-5deg); opacity: .7; }
  22% { transform: translate3d(2.4%, .6%, 0); opacity: 1; }
  44% { transform: translate3d(-1.2%, -.4%, 0) skewX(3deg); opacity: .8; }
  66% { transform: translate3d(.8%, 0, 0); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes scp-pulse { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }

/* Eindämmungstor: Lamellen fügt scp-akten.js ein und öffnet sie einmal, sobald die Akte ins Bild kommt. */
.akte__shutter { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); pointer-events: none; }
.akte__shutter i {
  display: block;
  margin-bottom: -1px;
  background: linear-gradient(to bottom, #1a1a1a, #101010 70%, #0a0a0a);
  border-top: 1px solid rgb(255 255 255 / .09);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transform: scaleY(1);
  transform-origin: 50% 0;
  transition: transform .3s steps(4, end);
  transition-delay: calc(var(--i) * 45ms);
}
.akte.is-open .akte__shutter i { transform: scaleY(0); }

@media (min-width: 900px) {
  .akte { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr); gap: var(--s-8); }
  .akte:nth-child(even) { grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.55fr); }
  .akte:nth-child(even) .akte__figure { order: 2; }
}

/* ------------------------------------------------------------ Fraktionen */
.sc-head__mark {
  position: absolute;
  right: -6rem;
  top: 50%;
  width: min(60vw, 34rem);
  margin-top: -14rem;
  opacity: .16;
  pointer-events: none;
}
.sc-head__mark img { display: block; width: 100%; height: auto; }
.reg { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--text); }
.reg__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: clamp(var(--s-5), 3.2vw, var(--s-7)) 0;
  border-bottom: 1px solid var(--line-strong);
}
.reg__name {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display-narrow);
  font-stretch: 68%;
  font-weight: 850;
  font-size: clamp(2.2rem, 1.2rem + 5vw, 5.5rem);
  line-height: .95;
  text-transform: uppercase;
  color: var(--text);
  hyphens: manual;
}
/* Gesperrtes Feld: sichtbar schraffiert, damit es als Schwärzung gelesen wird. */
.reg__bar {
  height: 1.5rem;
  background: var(--sc-hatch), var(--ink-2);
  border-left: 4px solid var(--accent);
}
.reg__state {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
}
@media (min-width: 900px) {
  .reg__row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto; gap: var(--s-7); }
  .reg__name { grid-column: auto; }
  .reg__bar { height: 2.25rem; }
}

/* ------------------------------------------------------------ Geschichte */
.note { position: relative; align-items: end; }
.note__media { background: var(--ink-0); overflow: clip; }
.note__plate { position: absolute; inset: 0 0 0 auto; width: min(100%, 2560px); }
.note__plate img { object-position: 50% 40%; }
.note__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(7 7 7 / .96) 0%, rgb(7 7 7 / .8) 34%, rgb(7 7 7 / .35) 70%, rgb(7 7 7 / .2) 100%),
    linear-gradient(to top, rgb(7 7 7 / 1) 0%, rgb(7 7 7 / 0) 45%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .2) 2px 3px);
}
.note__body { position: relative; align-self: end; padding-block: var(--s-8) clamp(var(--s-7), 8vh, var(--s-9)); }
.note__chip { margin: 0 0 var(--s-4); animation: sc-cut-in .3s steps(3, end) .05s backwards; }
html[data-world="scp"] .note__title {
  margin: 0;
  font-size: clamp(3.4rem, 1.5rem + 9.5vw, 11rem);
  line-height: .88;
  animation: sc-cut-in .35s steps(4, end) .1s backwards;
}
.note__title span { display: block; }
.note__text { margin: var(--s-5) 0 0; max-width: 46ch; color: var(--text); animation: sc-cut-in .3s steps(3, end) .2s backwards; }
.note__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; }
@media (max-width: 699px) {
  .note__cta .tt-btn { flex: 1 1 100%; }
  .note__shade {
    background:
      linear-gradient(to top, rgb(7 7 7 / 1) 0%, rgb(7 7 7 / .92) 45%, rgb(7 7 7 / .35) 80%),
      repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .2) 2px 3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .akte__plate, .akte__shutter i { transition: none !important; }
  .is-glitch .akte__plate picture, .is-glitch .akte__pulse,
  .note__chip, .note__title, .note__text, .note__cta { animation: none !important; }
}
html[data-fx="off"] :is(.note__chip, .note__title, .note__text, .note__cta) { animation: none !important; }

/* Abnahme: Auf sehr hohen Fenstern würde das 2048 px breite Bild über das 1,25-Fache gestreckt.
   Die Platte endet deshalb bei 1440 px (2560 px Breite bei 16:9) und läuft unten in den Grund aus. */
@media (min-height: 1441px) {
  .note__plate { bottom: auto; height: 1440px; }
  .note__plate::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, var(--ink-0), transparent); }
}
/* Abnahme: Über 2560 px Fensterbreite endet die Platte links im Bild; die Kante läuft weich aus. */
@media (min-width: 2561px) {
  .note__plate::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 28%; background: linear-gradient(to right, var(--ink-0), transparent); }
}