@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo.woff2) format('woff2');
}

:root {
  --blue: #00208f;
  --ink: #ffffff;
  --p: 70vmax;   /* Abstand des Betrachters */
  --d: 70vmax;   /* Tiefe des Raums: Öffnung = p / (p + d) = 50 % */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--blue);
  color: var(--ink);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* Eröffnung: kleine Wortmarke */
.mark {
  position: fixed; inset: 0; z-index: 3;
  display: grid; place-content: center; text-align: center;
  font-size: 13px; font-weight: 500; line-height: 1.5;
  color: var(--ink);
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  pointer-events: none;
  animation: mark 2.1s ease both;
}
@keyframes mark {
  0%   { opacity: 0; }
  25%, 62% { opacity: 1; }
  100% { opacity: 0; }
}

/* Raum aus vier Schriftwänden */
.scene {
  position: fixed; inset: 0; overflow: hidden;
  perspective: var(--p);
  perspective-origin: 50% 50%;
}
.room {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: arrive 2.6s cubic-bezier(.16, 1, .3, 1) 1.5s both;
}
@keyframes arrive {
  from { transform: translateZ(calc(var(--d) * .985)); visibility: hidden; }
  1%   { visibility: visible; }
  to   { transform: translateZ(0); visibility: visible; }
}

.wall { position: absolute; overflow: hidden; }
.top, .bottom { left: 0; width: 100vw; height: var(--d); }
.left, .right { top: 0; height: 100vh; width: var(--d); }
.top    { top: 0;    transform-origin: 50% 0;    transform: rotateX(-90deg); }
.bottom { bottom: 0; transform-origin: 50% 100%; transform: rotateX(90deg); }
.left   { left: 0;   transform-origin: 0 50%;    transform: rotateY(90deg); }
.right  { right: 0;  transform-origin: 100% 50%; transform: rotateY(-90deg); }

.track { position: absolute; display: flex; white-space: nowrap; }
.top .track, .bottom .track { left: 0; right: 0; flex-direction: column; }
.left .track, .right .track { top: 0; bottom: 0; flex-direction: row; }
.left .track span, .right .track span { writing-mode: vertical-rl; }

.top .track    { top: 0;    animation: to-top 48s linear infinite; }
.bottom .track { bottom: 0; animation: to-bottom 48s linear infinite; }
.left .track   { left: 0;   animation: to-left 48s linear infinite; }
.right .track  { right: 0;  animation: to-right 48s linear infinite; }

@keyframes to-top    { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes to-bottom { from { transform: translateY(50%); }  to { transform: translateY(0); } }
@keyframes to-left   { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes to-right  { from { transform: translateX(50%); }  to { transform: translateX(0); } }

.track span {
  display: block; overflow: hidden;
  font-size: calc(var(--d) * .135);
  line-height: 1.02;
  text-transform: uppercase;
  text-align: center;
}
.v1 { font-weight: 800; font-stretch: 125%; letter-spacing: -.02em; }
.v2 { font-weight: 900; font-stretch: 62%;  letter-spacing: .01em; }
.v3 { font-weight: 300; font-stretch: 125%; letter-spacing: .02em; }
.v4 { font-weight: 800; font-stretch: 90%;  letter-spacing: .08em; }

/* Kontakt in der Öffnung */
.contact {
  position: fixed; inset: 0; z-index: 2;
  display: grid; place-content: center; text-align: center;
  font-size: clamp(13px, 1.15vmin + 4px, 16px);
  line-height: 1.55;
  color: var(--ink);
  animation: show 1.2s ease 3.4s both;
}
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
.contact h1 {
  font-size: 1em; font-weight: 500;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  margin-bottom: 1.6em;
}
.contact a {
  display: inline-block; color: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px;
  margin-bottom: 1.1em; font-size: 1.15em;
}
.contact .mail { font-weight: 600; font-size: 1.15em; margin-bottom: 1.1em; }
.contact address { font-style: normal; }
.contact a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .mark { display: none; }
  .room, .track, .contact { animation: none; }
  .top .track, .left .track { transform: none; }
}