/* ---------- Font ---------- */
/* Lokal installiertes Hanson wird zuerst genutzt. Fuer fremde Rechner (Hosting)
   die Webfont-Dateien in /fonts ablegen — sonst greift der Fallback-Stack. */
@font-face {
  font-family: "Hanson";
  src: local("Hanson Bold"),
       local("Hanson"),
       url("fonts/Hanson-Bold.woff2") format("woff2"),
       url("fonts/Hanson-Bold.woff")  format("woff"),
       url("fonts/Hanson-Bold.ttf")   format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Basis ---------- */
:root {
  --ink: #ffffff;
  --bg: #050506;
  --accent: #b9a5d8;      /* Lichtstrahl-Violett */
  --red: #7a0f14;         /* Glow unten */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: "Hanson", "Archivo", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Alle Hintergrund-Ebenen: nie Hit-Testing, eigene GPU-Ebene, gekapselt.
   Das haelt sie vom Main-Thread fern — sonst ruckelt der Cursor. */
.bg, .streaks, .glow, .grain, .vignette {
  position: fixed;
  pointer-events: none;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------- Hintergrundbild ---------- */
/* Eigenes Bild als assets/bg.jpg ablegen — der Verlauf darunter bleibt als Fallback. */
.bg {
  inset: -6%;
  background:
    url("assets/bg.jpg"),
    radial-gradient(60% 45% at 22% 42%, rgba(185,165,216,.22), transparent 65%),
    radial-gradient(45% 30% at 38% 82%, rgba(122,15,20,.35), transparent 70%),
    linear-gradient(160deg, #0b0b0f 0%, #050506 45%, #08070a 100%);
  background-size: cover;
  background-position: center;
  animation: drift 32s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.2%, -.8%, 0); }
}

/* ---------- Lichtstreifen ---------- */
/* Kein mix-blend-mode und kein blur(): die Weichzeichnung steckt in den
   Gradient-Stops, damit nur transform animiert wird (GPU, kein Repaint). */
.streaks {
  inset: -18% -22%;
  background: repeating-linear-gradient(
    173deg,
    transparent 0px,
    transparent 116px,
    rgba(255, 255, 255, .02) 117px,
    rgba(255, 255, 255, .13) 119px,
    rgba(255, 255, 255, .02) 121px,
    transparent 123px
  );
  opacity: .6;
  animation: sweep 22s linear infinite alternate;
  will-change: transform;
}

.streaks--slow {
  inset: -24% -28%;
  opacity: .22;
  background: repeating-linear-gradient(
    169deg,
    transparent 0px,
    transparent 150px,
    rgba(255, 255, 255, .01) 152px,
    rgba(255, 255, 255, .07) 156px,
    rgba(255, 255, 255, .01) 160px,
    transparent 163px
  );
  animation-duration: 38s;
  animation-direction: alternate-reverse;
}

@keyframes sweep {
  from { transform: translate3d(-3%, -2%, 0); }
  to   { transform: translate3d(3%, 2%, 0); }
}

/* ---------- Glow / Grain / Vignette ---------- */
/* Weichheit kommt aus dem Radial-Gradient statt aus filter: blur(30px). */
.glow {
  inset: auto 0 -12% 0;
  height: 58%;
  background: radial-gradient(50% 100% at 35% 100%,
    rgba(160, 20, 26, .40) 0%,
    rgba(140, 18, 24, .22) 32%,
    rgba(90, 12, 16, .08) 58%,
    transparent 78%);
  animation: pulse 9s ease-in-out infinite;
  will-change: opacity;
}

@keyframes pulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

.grain {
  inset: -8%;
  opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='128' height='128' filter='url(%23n)'/></svg>");
  animation: grain 2s steps(5) infinite;
  will-change: transform;
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1.5%, 0); }
  50%  { transform: translate3d(1.5%, -2%, 0); }
  75%  { transform: translate3d(-1.5%, -1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.vignette {
  inset: 0;
  background: radial-gradient(75% 65% at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%);
}

/* ---------- Inhalt ---------- */
.stage {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 8vw, 140px);
}

.block { position: relative; }

/* Nur die Textzeilen selbst fangen die Maus — so bleiben die Ecken daneben
   frei anklickbar/hoverbar. */
.title {
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
}

.line {
  display: block;
  position: relative;
  pointer-events: auto;
  cursor: default;
  text-shadow: 0 0 60px rgba(255, 255, 255, .18);
  transition: text-shadow .5s ease, transform .5s var(--ease-out);
  /* "backwards" statt "forwards": nach dem Intro gilt wieder der Normalzustand,
     dadurch funktionieren die Hover-Transitions. */
  animation: reveal 1.4s var(--ease-out) backwards;
  will-change: transform, opacity;
}

.line:nth-child(1) { animation-delay: .25s; }
.line:nth-child(2) { animation-delay: .45s; }

@keyframes reveal {
  from { opacity: 0; transform: translate3d(0, .25em, 0); filter: blur(12px); }
}

/* ---------- Hover: RGB-Split auf der Schrift ---------- */
/* z-index: -1 legt die Farbkopien HINTER die weisse Schrift — sie ragen nur
   als Farbsaum heraus, statt sie zu ueberdecken. */
.line::before,
.line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s var(--ease-out);
}

.line::before { color: #4fd8ff; }
.line::after  { color: #ff2f4d; }

.line:hover {
  text-shadow:
    0 0 24px rgba(255, 255, 255, .32),
    0 0 70px rgba(185, 165, 216, .22);
  transform: translate3d(3px, 0, 0);
}

/* Kein Loop, kein Steppen: der Farbsaum gleitet einmal weich heraus und
   wieder zurueck — reine Transition. */
.line:hover::before {
  opacity: .32;
  transform: translate3d(-3px, 0, 0);
}

.line:hover::after {
  opacity: .32;
  transform: translate3d(3px, 0, 0);
}

/* ---------- Datum ---------- */
.date-wrap {
  position: relative;
  margin-top: clamp(28px, 5vh, 64px);
  padding: 0 0 clamp(20px, 3vh, 34px) clamp(20px, 3vw, 44px);
}

.date {
  display: inline-block;
  font-size: clamp(1.4rem, 3.6vw, 3rem);
  letter-spacing: .04em;
  font-weight: 700;
  cursor: default;
  /* transform statt letter-spacing: kein Reflow pro Frame */
  transition: transform .5s var(--ease-out), text-shadow .5s ease;
  animation: reveal 1.4s var(--ease-out) .8s backwards;
}

.date:hover {
  transform: translate3d(3px, 0, 0);
  text-shadow: 0 0 24px rgba(255, 255, 255, .38);
}

/* ---------- Ecken-Klammern ---------- */
.bracket {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .5);
  transition: border-color .3s ease, box-shadow .4s ease, transform .5s var(--ease-out);
  will-change: transform, opacity;
}

.bracket--tr {
  top: clamp(-70px, -6vh, -30px);
  right: clamp(-90px, -8vw, -30px);
  width: clamp(90px, 14vw, 200px);
  height: clamp(60px, 10vh, 120px);
  border-left: 0;
  border-bottom: 0;
  animation: fly-tr 1s var(--ease-out) .75s backwards;
}

.bracket--bl {
  inset: 0 auto 0 0;
  width: clamp(160px, 24vw, 330px);
  border-right: 0;
  border-top: 0;
  animation: fly-bl 1s var(--ease-out) .95s backwards;
}

/* Ecken fliegen aus ihrer jeweiligen Bildschirmseite herein */
@keyframes fly-tr {
  from { opacity: 0; transform: translate3d(90px, -60px, 0); }
}

@keyframes fly-bl {
  from { opacity: 0; transform: translate3d(-90px, 60px, 0); }
}

/* Hover auf der Ecke selbst */
.bracket:hover {
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 0 24px rgba(185, 165, 216, .35);
}

.bracket--tr:hover { transform: translate3d(10px, -10px, 0); }
.bracket--bl:hover { transform: translate3d(-10px, 10px, 0); }

/* Schrift-Hover laesst die Ecken mitleuchten */
.block:has(.line:hover) .bracket,
.block:has(.date:hover) .bracket {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 20px rgba(185, 165, 216, .25);
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg, .streaks, .glow, .grain { animation: none; }
  .line, .date, .bracket { animation-duration: .01ms; }
  .line:hover { transform: none; }
  .line:hover::before,
  .line:hover::after { opacity: 0; transform: none; }
}