:root {
  --fg: #fff;
  --display: "MuseoModerno", system-ui, sans-serif;
  --mono: "Rubik Mono One", ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

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

html, body { height: 100%; }

body {
  overflow: hidden;
  color: var(--fg);
  font-family: var(--display);
  /* Fallback bis bzw. falls WebGL nicht läuft */
  background: linear-gradient(135deg, #2f9bff 0%, #c63ff0 35%, #ff4fc8 60%, #ffa31a 85%, #b5f20a 100%);
  -webkit-font-smoothing: antialiased;
}

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  clip-path: circle(150% at 50% 55%);
  transition: clip-path 1.8s var(--out);
}

a { color: inherit; text-decoration: none; }

/* ---------- Kopf & Fuss ---------- */

.top, .bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: var(--pad);
}

.top { top: 0; justify-content: space-between; }

.logo svg { width: clamp(32px, 4vw, 44px); height: auto; display: block; fill: none; stroke: #fff; stroke-width: 1.8; }

.contact {
  font-weight: 900;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .01em;
}

.logo, .contact, .pill, .nav button { transition: transform .3s var(--ease), opacity .3s; }
.logo:hover, .contact:hover { transform: scale(1.08); }

.tag {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 14px);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.bottom { bottom: 0; gap: clamp(16px, 5vw, 64px); }

.counter {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  min-width: 2ch;
}

.pill {
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 28px);
  text-transform: uppercase;
  padding: .45em 1.3em;
  border: 3px solid #fff;
  border-radius: 999px;
}
.pill:hover { background: #fff; color: #c63ff0; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav button {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: #fff;
}
.nav button:hover { transform: scale(1.2); }
.nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; }

:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 6px; }

/* ---------- Slides ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  /* Bildgrösse und -position; die Headlines richten sich danach aus */
  --vis-h: min(64vh, 52vw);
  --vis-cy: 50vh;
  --fs: min(9.5vw, 14vh, 180px);
}

.slide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}
.slide.is-active, .slide.is-leaving { visibility: visible; }

/* Headline in zwei Ebenen: gefüllt hinter dem Bild, Outline darüber.
   Wo der Text das Bild kreuzt, bleibt so nur die Kontur sichtbar. */
.headline {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-weight: 900;
  font-size: var(--fs);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.headline--outline {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: max(1.5px, calc(var(--fs) * .018)) #fff;
}

.line {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: center;
  gap: .28em;
}
/* Zeile 1 läuft in die Oberkante des Bildes, Zeile 2 in den Sockel */
.line-a { top: calc(var(--vis-cy) - var(--vis-h) * .46 - var(--fs) * .25); }
.line-b { top: calc(var(--vis-cy) + var(--vis-h) * .3); }

.w { display: block; flex-shrink: 0; }
.w > span { display: inline-block; white-space: nowrap; }

/* Buchstaben werden per JS in .ch-Spans zerlegt.
   --i = Position, --dx/--dy/--r/--s/--rd = zufälliger Startpunkt je Buchstabe.
   Phase 1: Die Outline fliegt heran und rastet ein.
   Phase 2: Die gefüllte Ebene läuft von unten nach oben voll. */
.ch {
  display: inline-block;
  white-space: pre;
  --t: .9s;
  --d: calc(var(--i) * 32ms + var(--rd) * 1ms);
}

.headline--outline .ch {
  opacity: 0;
  translate: var(--dx) var(--dy);
  rotate: var(--r);
  scale: var(--s);
  filter: blur(6px);
  transition:
    translate var(--t) var(--out) var(--d),
    rotate var(--t) var(--spring) var(--d),
    scale var(--t) var(--spring) var(--d),
    opacity .35s ease var(--d),
    filter .7s ease var(--d);
}
.slide.is-active .headline--outline .ch { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; filter: blur(0); }

.headline:not(.headline--outline) .ch {
  clip-path: inset(140% -20% -40% -20%);
  transition: clip-path .6s var(--out) calc(var(--d) + var(--t) * .7);
}
.slide.is-active .headline:not(.headline--outline) .ch { clip-path: inset(-20% -20% -40% -20%); }

/* Raus: Füllung läuft ab, Outline zerstreut sich */
.slide.is-leaving .headline:not(.headline--outline) .ch {
  transition: clip-path .3s var(--ease) calc(var(--i) * 10ms);
}
.slide.is-leaving .headline--outline .ch {
  opacity: 0;
  translate: calc(var(--dx) * -.6) calc(var(--dy) * -.6);
  rotate: calc(var(--r) * -1);
  scale: .3;
  filter: blur(6px);
  transition: all .5s var(--ease) calc(.15s + var(--i) * 10ms);
}

.visual {
  position: absolute;
  left: 50%;
  top: var(--vis-cy);
  height: var(--vis-h);
  width: auto;
  z-index: 2;
  translate: -50% -50%;
  opacity: 0;
  scale: .85;
  filter: drop-shadow(0 30px 40px rgb(40 0 90 / .35));
  transition: opacity .8s var(--ease), scale 1.1s var(--ease);
  will-change: transform;
}
.slide.is-active .visual { opacity: 1; scale: 1; transition-delay: .25s; }
.slide.is-leaving .visual { opacity: 0; scale: 1.1; transition-duration: .6s; }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(-1.2%) rotate(-1deg); }
  50% { transform: translateY(1.2%) rotate(1deg); }
}

.lead {
  position: absolute;
  left: var(--pad);
  top: var(--vis-cy);
  z-index: 4;
  /* links neben dem Bild, ohne es zu berühren */
  max-width: min(26ch, calc(50vw - var(--vis-h) * .375 - var(--pad) - 24px));
  font-family: var(--mono);
  font-size: clamp(11px, 1.15vw, 16px);
  line-height: 1.5;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 calc(-50% + 20px);
  transition: opacity .7s, translate .7s var(--ease);
}
.slide.is-active .lead { opacity: 1; translate: 0 -50%; transition-delay: .35s; }

/* ---------- Intro beim Laden ----------
   .intro = Ausgangszustand (wird per JS entfernt, sobald die Schriften da sind),
   .booting = längere, gestaffelte Timings nur für den ersten Auftritt. */

html.intro body { background: #14001f; }
.intro #bg { clip-path: circle(0% at 50% 55%); }

.intro .logo { scale: 0; rotate: -200deg; }
.intro .tag { opacity: 0; letter-spacing: .6em; }
.intro .contact { opacity: 0; translate: 0 -160%; }

.intro .slide.is-active .headline--outline .ch { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--r); scale: var(--s); filter: blur(6px); }
.intro .slide.is-active .headline:not(.headline--outline) .ch { clip-path: inset(140% -20% -40% -20%); }
.intro .slide.is-active .visual {
  opacity: 0;
  scale: .55;
  top: calc(var(--vis-cy) + 20vh);
  filter: blur(18px) drop-shadow(0 30px 40px rgb(40 0 90 / .35));
}
.intro .slide.is-active .lead { opacity: 0; clip-path: inset(0 0 100% 0); }

.intro .counter { opacity: 0; translate: 0 70%; }
.intro .pill { opacity: 0; clip-path: inset(0 50% 0 50% round 999px); }
.intro .nav > * { opacity: 0; scale: 0; }

.booting .logo { transition: scale 1s var(--spring) .35s, rotate 1s var(--out) .35s; }
.booting .tag { transition: opacity 1.2s ease .55s, letter-spacing 1.4s var(--out) .55s; }
.booting .contact { transition: opacity .8s ease .45s, translate .9s var(--spring) .45s; }

.booting .slide.is-active .ch { --t: 1.3s; --d: calc(.6s + var(--i) * 55ms + var(--rd) * 1ms); }
.booting .slide.is-active .visual {
  transition: opacity .9s ease 1s, scale 1.5s var(--spring) 1s, top 1.5s var(--out) 1s, filter 1.3s ease 1s;
}
.booting .slide.is-active .lead {
  clip-path: inset(0 0 0 0);
  transition: opacity .8s ease 1.6s, clip-path 1.1s var(--out) 1.6s, translate 1.1s var(--out) 1.6s;
}

.booting .counter { transition: opacity .7s ease 1.85s, translate .9s var(--spring) 1.85s; }
.booting .pill { clip-path: inset(0 0 0 0 round 999px); transition: opacity .4s ease 1.95s, clip-path 1s var(--out) 1.95s; }
.booting .nav > * { transition: opacity .5s ease, scale .7s var(--spring); }
.booting .nav > :nth-child(1) { transition-delay: 2.05s; }
.booting .nav > :nth-child(2) { transition-delay: 2.15s; }
.booting .nav > :nth-child(3) { transition-delay: 2.25s; }

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  .stage {
    --vis-h: min(52vh, 112vw);
    --vis-cy: 44vh;
    --fs: 13vw;
  }
  .lead {
    top: auto;
    bottom: calc(var(--pad) + 76px);
    max-width: 30ch;
    translate: 0 20px;
  }
  .slide.is-active .lead { translate: 0 0; }
  .counter { -webkit-text-stroke-width: 1.5px; }
  .nav svg { width: 22px; height: 22px; }
}

@media (max-width: 560px) {
  .tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}