/* Startseite: der lebende Verlauf füllt den Bildschirm im Passepartout (I1, wie alle Seiten),
   Körnung darüber, kein Scrollen. Wortmarke Inter fett und zentriert, darunter eine dünne Zeile und
   "Projekte ansehen". Die Glaslinse sitzt auf dem "o" und folgt der Maus (js/pages/landing.js). */
.landing-page {
  padding: var(--frame-gap);
}

.landing {
  --zone-radius: var(--frame-radius);
  --wave-size: 90vmax;
  --wave-blur: 60px;
  display: grid;
  height: var(--stage-height);
  place-items: center;
  padding-inline: var(--space-s);
}

.landing__wordmark {
  font-size: var(--text-wordmark);
  letter-spacing: var(--tracking-wordmark);
  line-height: 0.9;
}

.landing__lens-letter {
  display: inline-block;
}

/* Über der Linse: Wird die Linse zum Knopf, bleibt die Schrift scharf obenauf */
.landing__foot {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: max(2.25rem, env(safe-area-inset-bottom));
  left: 0;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding-inline: var(--space-s);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  text-align: center;
}

.landing__line {
  color: var(--color-on-dark-muted);
}

/* Knopf "Projekte ansehen" in der Größe E3 (gewählt in Runde 13): beim Zeigen füllt er sich weiß
   mit Tinten-Schrift, der Pfeil rückt nach rechts */
.landing__enter {
  position: relative;
  gap: 0.55rem;
  padding: 0.8rem 1.75rem;
  font-size: 1.0625rem;
  transition:
    scale var(--duration-spring) var(--ease-spring),
    translate var(--duration-spring) var(--ease-spring),
    background-color 250ms var(--ease-in-out),
    color 250ms var(--ease-in-out);
}

.landing__enter.glass-dark:is(:hover, :focus-visible) {
  background: #fff;
  color: var(--color-ink);
  text-shadow: none;
}

.landing__arrow {
  display: inline-block;
  transition: translate 450ms var(--ease-spring);
}

.landing__enter:is(:hover, :focus-visible) .landing__arrow {
  translate: 0.35rem 0;
}

/* Atmender Ring: der Rand dehnt sich langsam nach außen und verblasst (Entwurf A1) */
.landing__enter::after {
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: inherit;
  content: '';
  animation: breathe 2.4s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes breathe {
  0% {
    opacity: 0.8;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 1.35 1.6;
  }
}

:root[data-motion='still'] .landing__enter::after {
  animation: none;
  opacity: 0;
}

.landing-page .skip-link:focus {
  color: var(--color-ink);
  background: var(--color-on-dark);
}

/* Glaslinse: Milchglas mit weichem Rand und innerem Licht, etwa so groß wie das "o", in der Bühne
   (Lage relativ zu ihr). Der Radius ist in Kreis und Pille derselbe feste Pillen-Radius: So bleibt
   die Form in jedem Bild des Übergangs ein Kreis oder eine Pille (mit 50 % entstünde beim Wachsen
   kurz eine Ellipse). */
.lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: calc(var(--text-wordmark) * 0.88);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-pill);
  background: radial-gradient(
    circle at 30% 25%,
    rgb(255 255 255 / 0.32),
    rgb(255 255 255 / 0.05) 55%
  );
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.4),
    0 30px 60px -20px rgb(0 0 0 / 0.5);
  opacity: 0;
  /* Klicks gehen immer durch die Linse hindurch */
  pointer-events: none;
  translate: -50% -50%;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  transition:
    opacity 600ms var(--ease-in-out),
    width 260ms var(--ease-out),
    height 260ms var(--ease-out),
    background-color 250ms var(--ease-in-out),
    border-color 250ms var(--ease-in-out);
}

/* A1: Auf "Projekte ansehen" wird die Linse selbst der Knopf, eine weiße Pille unter der Schrift.
   Beim Ankommen wippt sie kurz (scale, gleichzeitig mit dem Wachsen). */
.lens.is-pill {
  border-color: #fff;
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: lens-land 520ms var(--ease-out) 120ms;
}

@keyframes lens-land {
  40% {
    scale: 1.06 0.94;
  }

  70% {
    scale: 0.98 1.02;
  }
}

/* Der Knopf selbst wird durchsichtig, solange die Linse sein Hintergrund ist */
.landing__enter.glass-dark.is-lensed {
  border-color: transparent;
  background: transparent;
  color: var(--color-ink);
  text-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-motion='still'] .lens.is-pill {
  animation: none;
}

.lens.is-ready {
  opacity: 1;
}

/* Intro beim ersten Besuch: alles taucht nacheinander aus der Unschärfe auf */
:root[data-intro='play'] .landing__wordmark,
:root[data-intro='play'] .landing__line,
:root[data-intro='play'] .landing__enter {
  animation: blur-in var(--duration-intro) var(--ease-in-out) both;
}

:root[data-intro='play'] .landing__line {
  animation-delay: 250ms;
}

:root[data-intro='play'] .landing__enter {
  animation-delay: 450ms;
}

:root[data-intro='play'] .lens.is-ready {
  transition-delay: 900ms;
}

/* Schwarz-Weiß-Modus: der atmende Ring um den schwarzen Knopf wird schwarz */
:root[data-theme='mono'] .landing__enter::after {
  border-color: rgb(11 11 11 / 0.5);
}