/* Layout and continuous wordmark for the Pomodoro opening scene. */
.pg-hero {
  display: grid;
  grid-column: fullbleed;
  align-items: end;
  justify-items: center;
}
.pg-hero > * { grid-area: 1 / 1; }

.pg-brand-ribbon {
  --pg-brand-height: 273.33px;
  --pg-brand-space: 37.78px;
  --pg-brand-speed: 200;
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #bb0404;
  transform: translateY(100%);
  transition: transform 1s cubic-bezier(.215,.61,.355,1);
}
.pg-brand-ribbon[data-ready="true"] { transform: translateY(0); }
.pg-brand-loop {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: pg-brand-travel var(--pg-brand-duration,12s) linear infinite;
}
.pg-brand-copy { flex: none; }
.pg-brand-shape {
  height: var(--pg-brand-height);
  width: auto;
  margin-right: var(--pg-brand-space);
}
@keyframes pg-brand-travel {
  to { transform: translate3d(calc(-1 * var(--pg-brand-cycle,0px)),0,0); }
}
@media (min-width:1025px) and (max-width:1600px) {
  .pg-brand-ribbon { --pg-brand-height:17.083vw; --pg-brand-space:2.361vw; }
}
@media (min-width:501px) and (max-width:1024px) {
  .pg-brand-ribbon { --pg-brand-height:24.023vw; --pg-brand-space:3.320vw; --pg-brand-speed:150; }
}
@media (max-width:500px) {
  .pg-brand-ribbon { --pg-brand-height:21.867vw; --pg-brand-space:3.200vw; --pg-brand-speed:100; }
}
@media (max-width:600px) and (orientation:portrait) {
  /* The hero extends behind the hidden 112 px navigation. Let it reach the
     viewport edge instead of cutting the tomato at the main content's top. */
  #pg-content-shell:has(.pg-hero-track) { overflow:visible; }
}
@media (prefers-reduced-motion:reduce) {
  .pg-brand-ribbon { transition:none; }
  .pg-brand-loop { animation:none; }
}