@import url("./title-screen-base.css");

/*
 * moup kids title-corner brand mark.
 * Randomly choose original 10s simultaneous rotation or 28s staggered
 * rotation on each title construction. All characters remain literal "world".
 * Reuse the original X rotation for worl/w/o/rl and Z rotation for d.
 */
.title-brand-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.title-brand-logo__worl,
.title-brand-logo__part {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(15px, 1.65vw, 20px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.title-brand-logo__part--rl > span { display: inline-block; }
.title-brand-logo__tight-l { margin-left: -.18em; }

/* Exact original (pre-PR #1969) motion, with the original group boundaries. */
.title-brand-logo--simultaneous .title-brand-logo__worl {
  animation: title-brand-flip-main 10s ease-in-out infinite;
}
.title-brand-logo--simultaneous .title-brand-logo__part--d {
  animation: title-brand-rotate-d 10s ease-in-out infinite;
}
@keyframes title-brand-flip-main {
  0%, 20% { transform: rotateX(0deg); }
  50%, 70% { transform: rotateX(180deg); }
  100% { transform: rotateX(360deg); }
}
@keyframes title-brand-rotate-d {
  0%, 20% { transform: rotateZ(0deg); }
  50%, 70% { transform: rotateZ(180deg); }
  100% { transform: rotateZ(360deg); }
}

/* Same 180-degree movements as above, applied to individual pieces in order. */
.title-brand-logo--sequential .title-brand-logo__part--w { animation: title-brand-seq-w 28s infinite; }
.title-brand-logo--sequential .title-brand-logo__part--o { animation: title-brand-seq-o 28s infinite; }
.title-brand-logo--sequential .title-brand-logo__part--rl { animation: title-brand-seq-rl 28s infinite; }
.title-brand-logo--sequential .title-brand-logo__part--d { animation: title-brand-seq-d 28s infinite; }
@keyframes title-brand-seq-w {
  0%, 7.142857% { transform: rotateX(0deg); animation-timing-function: ease-in-out; }
  17.857143%, 89.285714% { transform: rotateX(180deg); animation-timing-function: ease-in-out; }
  100% { transform: rotateX(360deg); }
}
@keyframes title-brand-seq-o {
  0%, 17.857143% { transform: rotateX(0deg); animation-timing-function: ease-in-out; }
  28.571429%, 78.571429% { transform: rotateX(180deg); animation-timing-function: ease-in-out; }
  89.285714%, 100% { transform: rotateX(360deg); }
}
@keyframes title-brand-seq-rl {
  0%, 28.571429% { transform: rotateX(0deg); animation-timing-function: ease-in-out; }
  39.285714%, 67.857143% { transform: rotateX(180deg); animation-timing-function: ease-in-out; }
  78.571429%, 100% { transform: rotateX(360deg); }
}
@keyframes title-brand-seq-d {
  0%, 39.285714% { transform: rotateZ(0deg); animation-timing-function: ease-in-out; }
  50%, 57.142857% { transform: rotateZ(180deg); animation-timing-function: ease-in-out; }
  67.857143%, 100% { transform: rotateZ(360deg); }
}


@media (max-width: 600px) {
  .title-brand-logo__worl, .title-brand-logo__part { font-size: 15px; }
  .title-brand-logo__tight-l { margin-left: -.16em; }
}
@media (prefers-reduced-motion: reduce) {
  .title-brand-logo__worl, .title-brand-logo__part {
    animation: none !important;
    transform: none !important;
  }
}