.studio-opening {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 1;
  pointer-events: none;
  background: #ef5933;
  transform: translateY(-101%);
}
.studio-opening[hidden] { display: none; }
.studio-front .mast .brand { position: relative; z-index: 2; }
.brand-seat, .opening-mark { display: block; }
.opening-mark {
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: top left;
}
.opening-proof { fill: #f6f4ec; opacity: 0; }
.opening-ink { fill: #24221f; }
@media screen and (prefers-reduced-motion: no-preference) {
  .mast.printing {
    --press-time: 1200ms;
    --release: cubic-bezier(.68,0,.21,1);
  }
  .printing .opening-proof { animation: proof-impression 480ms cubic-bezier(.16,.79,.19,1) backwards; }
  .printing .opening-ink { animation: ink-impression 480ms cubic-bezier(.18,.74,.17,1) backwards; }
  .printing .studio-opening { animation: pull-sheet var(--press-time) var(--release) both; }
  /* The mark is back in its normal paint layer before the sheet clears the header. */
  .printing .opening-mark { animation: seat-monogram 1100ms var(--release) backwards; pointer-events: none; }
  @keyframes proof-impression {
    from { transform: translate(-5px,-2px); opacity: 1; }
    70% { opacity: 1; }
    to { transform: none; opacity: 0; }
  }
  @keyframes ink-impression {
    from { transform: translate(9px,4px); clip-path: inset(-20% 95% -20% -20%); }
    to { transform: none; clip-path: inset(-20%); }
  }
  @keyframes pull-sheet {
    0%, 40% { transform: none; }
    100% { transform: translateY(-101%); }
  }
  @keyframes seat-monogram {
    0%, 44% { transform: translate(var(--start-x),var(--start-y)) scale(var(--start-scale)); }
    100% { transform: none; }
  }
}