/* Licht und Lorbeer — Coming-Soon
   Farben aus dem Key-Visual gegriffen. */

:root {
  --sage:   #8b988f;  /* Wandton, füllt Ränder jenseits des Fotos */
  --ink:    #12312f;  /* Dunkles Petrol der Serifen-Zeile */
  --yellow: #f0ef00;  /* Akzent des „cooking soon“-Labels */
  --paper:  #e8ede8;

  --bar-inset: clamp(1.25rem, 3.5vw, 2.75rem);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--sage);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- Bühne: das Foto als Vollbild-Hintergrund ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.stage__blur,
.stage__backdrop,
.stage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Das Foto verlinkt aufs Instagram-Profil. Der Link muss die Fläche selbst
   aufspannen: sein Kind ist absolut positioniert, ein Auto-Layout ergäbe
   also einen 0×0-Kasten, den kein Klick trifft. */
.stage__link {
  position: absolute;
  inset: 0;
  display: block;
}

.stage__link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -6px;
}

/* Im Querformat deckt das Foto die Fläche selbst — Kulisse überflüssig. */
.stage__backdrop {
  display: none;
  object-fit: cover;
  object-position: 47% center;
  filter: blur(48px) brightness(0.94);
  transform: scale(1.2); /* zieht die weiche Kante über den Bildrand hinaus */
}

.stage__photo {
  object-fit: cover;
  /* Der Schriftblock sitzt leicht rechts der Mitte — beim Beschnitt
     halten wir ihn im Bild, statt stur mittig zu zentrieren. */
  object-position: 52% center;
}

/* Winziges JPEG, hochskaliert und weichgezeichnet: füllt die Fläche,
   bis das große Bild dekodiert ist — kein Aufblitzen von Grau. */
.stage__blur {
  filter: blur(24px);
  transform: scale(1.06);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 52% center;
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQABLAEsAAD/2wBDAAkJCQkJCRAJCRAWEBAQFh4WFhYWHiYeHh4eHiYuJiYmJiYmLi4uLi4uLi43Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3/9sAQwELDAwSERIfEREfSzMqM0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tL/8AAEQgAFgAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A5S2tvMYcV2mn6cip5jjgDJ/CubsH+YA10E8M8t1D8xeMrlIuwkU9T65zjmk2TY6vRJLDUo/MtclenzLgkdjz2rr4rWJOAo/KsPw/bCG1BkEfmvjeY8YHoM4GcV0wqIpvltuB/9k=");
}

.stage__photo {
  opacity: 0;
  transition: opacity 900ms ease;
  will-change: opacity;
}

.is-loaded .stage__photo { opacity: 1; }

/* Sehr langsames Heranfahren — belebt das Standbild, ohne aufzufallen. */
@media (min-width: 801px) {
  .is-loaded .stage__photo {
    animation: drift 44s ease-in-out 900ms infinite alternate;
  }
}

@keyframes drift {
  from { transform: scale(1);    }
  to   { transform: scale(1.05); }
}

/* Hochformat: Das Bild ist 3:2, ein Telefon ist ~1:2. Formatfüllend bliebe
   nur ein schmales Fenster übrig — der Schriftzug stieße beidseitig an die
   Kante. Deshalb läuft das Foto hier als Band in ruhiger Größe, und die
   unscharfe Fassung derselben Aufnahme füllt den Rest: farblich identisch,
   also ohne sichtbare Naht zu einem Flächenton. */
@media (orientation: portrait) {
  .stage__backdrop { display: block; }

  .stage__photo {
    inset: 50% 0 auto 0;
    height: 64svh;
    transform: translateY(-50%);
    object-position: 47% center;
  }

  .stage__blur { background-position: 47% center; }
}

/* ---------- Inhaltsebene ---------- */

.page {
  position: relative;
  z-index: 1;
  height: 100%;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* Diese Ebene liegt über der Bühne und würde sonst jeden Klick aufs
     verlinkte Foto abfangen. Sie lässt durch, die Leiste nimmt wieder an. */
  pointer-events: none;
}

.bar { pointer-events: auto; }

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: var(--bar-inset);
  padding-top: calc(var(--bar-inset) * 3);

  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);

  /* Die Leiste läuft quer durch den Licht-Verlauf des Fotos: links tiefer
     Schatten, rechts fast weiß. Kein einzelner Textton trägt über beides —
     deshalb ein weicher Sockel, der unten abdunkelt. Der Bildrand ist dort
     leere Wand, es geht kein Motiv verloren. */
  background: linear-gradient(to top,
    rgba(8, 24, 23, 0.62) 0%,
    rgba(8, 24, 23, 0.34) 45%,
    rgba(8, 24, 23, 0) 100%);

  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 700ms ease 600ms, transform 700ms ease 600ms;
}

.is-loaded .bar {
  opacity: 1;
  transform: none;
}

.bar__note {
  margin: 0;
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

.bar__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-left: auto;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  color: var(--paper);
  text-decoration: none;
  padding-bottom: 0.25em;

  /* Unterstrich als Verlauf: wächst beim Hover von links nach rechts. */
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 320ms ease, color 320ms ease;
}

.link:hover,
.link:focus-visible {
  background-size: 100% 2px;
}

.link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
  border-radius: 2px;
}

.link__icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  flex: none;
}

.link__icon .dot {
  fill: currentColor;
  stroke: none;
}

/* ---------- Hilfsklassen ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .stage__photo,
  .bar {
    transition-duration: 1ms;
    animation: none;
  }
  .bar { transform: none; }
}