/* ==================================================
   LANDING PAGE
   fullscreen media · centred logo · whole page is a link
   ================================================== */

.landing-body {
  overflow: hidden;
}

.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: var(--white);
}

.landing-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--blue);
  cursor: default;
}

.landing-link:focus-visible {
  outline-offset: -4px;
}


/* MEDIA */

.landing-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.landing-link picture {
  display: contents;
}

/* slideshow: stacked images, cross-fade */
.landing-slides {
  position: absolute;
  inset: 0;
}

.landing-slide {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.landing-slide.is-active {
  opacity: 1;
}

/* video sits above the images; the first image acts as poster and fallback */
.landing-video {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .landing-video {
    display: none;
  }
}


/* LOGO */

.landing-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: clamp(160px, 28vw, 440px);
  max-width: calc(100% - 2 * var(--gutter));
  max-height: 50svh;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
}

.landing-logo--text {
  width: auto;
  max-width: calc(100% - 2 * var(--gutter));
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 64px);
  line-height: 0.95;
  text-align: center;
  white-space: nowrap;
}


/* --------------------------------------------------
   HOVER: Logo blinkt, solange der Cursor auf der Seite ist
   (die ganze Seite ist der Link)
   -------------------------------------------------- */

.landing-logo:hover {
  animation: landing-logo-blink 0.7s steps(1, end) infinite;
}

@keyframes landing-logo-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-logo:hover {
    animation: none;
  }
}