/* Pomodoro opening: cream rolling wordmark on a split red screen. */
.pg-opening {
  --pg-opening-paper: #BB0404;
  --pg-opening-ink: #F0E8DC;
  --pg-opening-travel: 1.05s;
  --pg-opening-hold: .79s;
  --pg-opening-ease: cubic-bezier(.215, .61, .355, 1);
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.pg-opening[data-completed="true"] { opacity: 0; pointer-events: none; }
html[data-pg-skip-intro="true"] .pg-opening { display: none; }

.pg-opening-panel {
  position: absolute;
  inset-inline: 0;
  block-size: calc(50% + 1px);
  background-color: var(--pg-opening-paper);
  transition: transform var(--pg-opening-travel) var(--pg-opening-hold) var(--pg-opening-ease);
}
.pg-opening-panel--upper { inset-block-start: 0; }
.pg-opening-panel--lower { inset-block-end: 0; }
.pg-opening[data-ready="true"] .pg-opening-panel--upper { transform: translateY(-100%); }
.pg-opening[data-ready="true"] .pg-opening-panel--lower { transform: translateY(100%); }

.pg-opening-art {
  position: relative;
  inline-size: min(707px, calc(100vw - 48px));
  aspect-ratio: 524.18 / 190;
  overflow: clip;
  isolation: isolate;
  color: var(--pg-opening-ink);
  transition: transform var(--pg-opening-travel) var(--pg-opening-hold) var(--pg-opening-ease);
}
.pg-opening[data-ready="true"] .pg-opening-art { transform: translateY(50vh); }
.pg-opening-row { display: grid; inline-size: 100%; block-size: 100%; }
.pg-opening-row--repeat { position: absolute; inset-inline-start: 0; inset-block-start: calc(-100% - 1px); }
.pg-opening-letter {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  animation: pg-opening-roll 1.1s infinite cubic-bezier(.8, 0, .2, 1);
  will-change: transform;
  backface-visibility: hidden;
  transition: opacity .25s .05s linear;
}
.pg-opening svg { display: block; inline-size: 100%; block-size: 100%; }
@keyframes pg-opening-roll {
  from, 45.454545% { transform: translate3d(0, calc(100% + 1px), 0); }
  to { transform: translate3d(0, 0, 0); }
}
.pg-opening[data-ready="true"] .pg-opening-row--repeat,
.pg-opening[data-ready="true"] .pg-opening-letter { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pg-opening-letter { animation: none; }
  .pg-opening-row--repeat { display: none; }
  .pg-opening-letter { transition-duration: .01s !important; }
  .pg-opening, .pg-opening-panel, .pg-opening-art { transition-duration: .1s; }
}