/* Seitenwechsel: eine kurze Überblendung, die Kopfzeile bleibt ruhig. */
@view-transition { navigation: auto; }
.head { view-transition-name: studio-head; }
::view-transition-group(root) { animation-duration: .2s; }
::view-transition-old(root) { animation: page-dissolve-out .2s ease-out both; }
::view-transition-new(root) { animation: page-dissolve-in .2s ease-out both; }
::view-transition-group(studio-head),
::view-transition-old(studio-head),
::view-transition-new(studio-head) { animation: none; }
::view-transition-old(studio-head) { opacity: 0; }
::view-transition-new(studio-head) { opacity: 1; }
.page-soft-in > body > main { animation: page-arrive .18s ease-out both; }
@keyframes page-dissolve-out { to { opacity: 0; } }
@keyframes page-dissolve-in { from { opacity: 0; } }
@keyframes page-arrive { from { opacity: .86; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .page-soft-in > body > main { animation: none; }
}

/* Vier Belichtungen setzen eine Handschrift zusammen. Kein Ladestand. */
.entry-screen { display: none; }
.entry-play .entry-screen {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  color: #ecece7;
  pointer-events: none;
  animation: entry-end 1.42s step-end both;
}
.entry__shutters { position: absolute; inset: 0; display: flex; }
.entry__shutters > span {
  flex: 1;
  background: #0a0a09;
  animation: entry-open .42s cubic-bezier(.76, 0, .24, 1) .94s both;
}
.entry__shutters > span:nth-child(2) { animation-delay: .96s; }
.entry__shutters > span:nth-child(3) { animation-delay: .98s; }
.entry__shutters > span:nth-child(4) { animation-delay: 1s; }
.entry__slate {
  position: relative;
  width: min(640px, calc(100% - 56px));
  animation: entry-slate-out .22s ease-in .8s both;
}
.entry__location, .entry__formats {
  font-family: var(--mono, monospace);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .015em;
}
.entry__location { display: flex; justify-content: space-between; margin-bottom: 16px; }
.entry__location > span { color: #90908a; }
.entry__frame { position: relative; aspect-ratio: 16 / 7; }
.entry__word { position: absolute; inset: 0; }
.entry__slice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-right: .08em;
  font-family: var(--display, Helvetica, Arial, sans-serif);
  font-size: clamp(116px, 22vw, 252px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.085em;
  animation: entry-expose .42s cubic-bezier(.16, 1, .3, 1) .04s both;
  clip-path: inset(0 75% 0 0);
}
.entry__slice:nth-child(2) { clip-path: inset(0 50% 0 25%); animation-delay: .105s; }
.entry__slice:nth-child(3) { clip-path: inset(0 25% 0 50%); animation-delay: .17s; }
.entry__slice:nth-child(4) { clip-path: inset(0 0 0 75%); animation-delay: .235s; }
.entry__register {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #656560;
  stroke-width: 1;
}
.entry__register path {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 48;
  animation: entry-register .4s ease-out both;
}
.entry__formats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
.entry__formats > span { animation: entry-label .3s ease-out .12s both; }
.entry__formats > span:nth-child(2) { animation-delay: .185s; }
.entry__formats > span:nth-child(3) { animation-delay: .25s; }
.entry__formats > span:nth-child(4) { animation-delay: .315s; text-align: right; }
@keyframes entry-expose { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entry-register { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes entry-label { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes entry-slate-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes entry-open { to { transform: translateY(-102%); } }
/* Auch bei fehlendem entry.js kann keine Schicht stehen bleiben. */
@keyframes entry-end { from { visibility: visible; } to { visibility: hidden; } }
@media (max-width: 480px) {
  .entry__slate { width: calc(100% - 48px); }
  .entry__frame { aspect-ratio: 16 / 9; }
  .entry__location, .entry__formats { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce), print {
  .entry-play .entry-screen { display: none !important; }
}