/*
 * Nur das, was die Live-Seite zusätzlich zum Prototyp braucht.
 *
 * styles.css und selected-work-gallery.css bleiben byte-identische Spiegel der
 * geprüften Quellen und werden nicht angefasst. Alles Deployment-Eigene steht
 * hier, damit die Spiegelung nachweisbar bleibt.
 */

.skip-link {
  position: absolute;
  z-index: 60;
  top: 0;
  left: 0;
  padding: 0.75rem 1.25rem;
  font: 500 0.875rem/1 "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
  color: #101515;
  text-decoration: none;
  background: #fff;
  border: 1px solid #101515;
  border-radius: 0 0 0.5rem 0;
  transform: translateY(-120%);
  transition: transform 160ms cubic-bezier(0.22, 0.7, 0.1, 1);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #101515;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* Statuszeile zeigt während des Blob-Downloads den Fortschritt. Sobald app.js
   den Film übernommen hat, setzt es .is-ready und styles.css blendet aus. */
.status {
  font-variant-numeric: tabular-nums;
}

/*
 * Safari 26 erweitert bei einem am Viewport haftenden Element dessen solide
 * Hintergrundfarbe in die weich transparenten Browserleisten. Die beiden
 * Filmstages waren weiss und erzeugten dadurch oben und unten eine geschlossene
 * helle Flaeche, obwohl Poster und Film selbst bereits full-bleed laufen.
 *
 * Im Portrait bleibt die komplette bestehende Sticky-/Scrollgeometrie
 * unangetastet. Nur die vier Medienflaechen werden transparent, damit Safari
 * unter seiner UI den echten Poster-/Videolayer statt der Stage-Farbe sieht.
 * Poster und Filme decken ihre Stage per object-fit: cover vollstaendig ab;
 * der bestehende Scrolly-Hintergrund bleibt der Ausfall- und Fade-Untergrund.
 */
@media (orientation: portrait) {
  html.format--portrait {
    /*
     * Safaris sichtbarer Viewport wird bei offenen Leisten kleiner als der
     * grosse Viewport. Davon gehoert nur der obere Anteil vor den Film. Die
     * Hardware-Safe-Area plus die Hoehe der URL-Pille bilden diesen Anteil ab;
     * 100lvh - 100dvh deckelt ihn auf die tatsaechlich verdeckte Gesamtflaeche
     * und faellt beim Einklappen der Leisten automatisch gegen null.
     */
    --safari-top-overdraw: min(
      calc(env(safe-area-inset-top, 0px) + 3.25rem),
      max(0px, calc(100lvh - 100dvh))
    );
  }

  .format--portrait .stage,
  .format--portrait .source-video,
  .format--portrait .awards-stage,
  .format--portrait .awards-film {
    background-color: transparent;
  }

  .format--portrait .stage,
  .format--portrait .awards-stage {
    /* Nur der Medienlayer darf in Safaris verdeckten oberen Bereich ragen. */
    overflow: visible;
  }

  .format--portrait .intro-poster,
  .format--portrait .source-video,
  .format--portrait .awards-film {
    top: calc(0px - var(--safari-top-overdraw));
    bottom: auto;
    height: 100%;
  }
}