:root {
  --y-blue: #63b9f3;
  --y-deep: #123b79;
  --y-yellow: #ffda31;
  --y-pink: #ef4f72;
  --y-mint: #8be1c0;
  --y-lilac: #cbb9ff;
  --y-cream: #fff6dc;
  --y-paper: #fffdf7;
  --y-ink: #18213c;
}

html, body {
  background: #000 !important;
}

body {
  background-image: none !important;
}

#title,
#animatronic,
.launcher-text,
.glitch,
.vignette {
  display: none !important;
}

#selection.yume-intro {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: var(--y-blue) !important;
  color: var(--y-ink);
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  transition: background .25s ease;
}

/* Big friendly homepage-like background shapes. */
#selection.yume-intro::before {
  content: "★";
  position: absolute;
  right: -48px;
  top: 5%;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  color: var(--y-yellow);
  font-size: 230px;
  line-height: 1;
  transform: rotate(12deg);
  opacity: .95;
  text-shadow: none;
  pointer-events: none;
  animation: yumeStarFloat 4.8s ease-in-out infinite;
}

#selection.yume-intro::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: 7%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.17);
  pointer-events: none;
  animation: yumeBubble 5.5s ease-in-out infinite;
}

.yume-intro-shell {
  position: relative;
  z-index: 5;
  width: min(88vw, 940px);
  min-height: 540px;
  padding: 28px 34px 30px;
  border: 3px solid var(--y-ink);
  background: var(--y-paper);
  color: var(--y-ink);
  box-shadow: 14px 16px 0 rgba(24,33,60,.2);
  transform: rotate(.35deg) scale(.97);
  opacity: 0;
  overflow: hidden;
  animation: yumeCardIn .48s cubic-bezier(.2,.9,.2,1) forwards;
}

.yume-intro-shell::before {
  content: "";
  position: absolute;
  left: 43%;
  bottom: -35px;
  width: 250px;
  height: 54px;
  border-radius: 50%;
  background: rgba(239,79,114,.28);
  transform: rotate(-14deg);
  pointer-events: none;
}

.yume-intro-shell::after {
  content: "";
  position: absolute;
  right: -38px;
  top: 112px;
  width: 116px;
  height: 116px;
  border: 22px solid rgba(24,33,60,.055);
  border-radius: 50%;
  pointer-events: none;
}

.yume-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 15%, rgba(255,218,49,.9) 0 9px, transparent 10px),
    radial-gradient(circle at 86% 75%, rgba(139,225,192,.78) 0 12px, transparent 13px),
    radial-gradient(circle at 18% 78%, rgba(203,185,255,.72) 0 8px, transparent 9px);
  background-size: 130px 120px, 180px 170px, 155px 145px;
  opacity: .34;
  animation: yumeDots 14s linear infinite;
}

.yume-topline {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  color: var(--y-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.yume-topline span:first-child {
  display: inline-block;
  padding: 7px 10px;
  border: 2px solid var(--y-ink);
  background: var(--y-yellow);
  box-shadow: 4px 4px 0 rgba(24,33,60,.13);
  transform: rotate(-1deg);
}

.yume-topline span:last-child {
  opacity: .58;
}

.yume-centre {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  padding: 22px 16px 122px;
}

.yume-logo-wrap {
  position: relative;
  width: clamp(112px, 15vw, 164px);
  height: clamp(112px, 15vw, 164px);
  opacity: 0;
  transform: scale(.55) rotate(-9deg);
  animation: yumeLogoPop .62s cubic-bezier(.16,1.2,.28,1) .22s forwards;
}

.yume-logo-wrap::before {
  content: "★";
  position: absolute;
  left: -45px;
  top: 4px;
  color: var(--y-pink);
  font-size: 37px;
  animation: yumeMiniStar 2.2s ease-in-out .7s infinite;
}

.yume-logo-wrap::after {
  content: "★";
  position: absolute;
  right: -45px;
  bottom: 4px;
  color: var(--y-mint);
  font-size: 28px;
  animation: yumeMiniStar 2.6s ease-in-out 1.1s infinite reverse;
}

.yume-logo {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(7px 8px 0 rgba(24,33,60,.12));
}

.yume-company {
  margin-top: 20px;
  color: var(--y-ink);
  font-size: clamp(40px, 7vw, 76px);
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.065em;
  text-indent: 0;
  opacity: 0;
  transform: translateY(12px);
  animation: yumeTitleUp .38s ease-out .58s forwards;
}

.yume-company::after {
  content: "!";
  color: var(--y-pink);
}

.yume-subsystem {
  margin-top: 18px;
  max-width: 560px;
  color: var(--y-deep);
  font-size: clamp(15px, 2vw, 23px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.025em;
  text-align: center;
  opacity: 0;
  animation: yumeFade .3s ease .85s forwards;
}

.yume-boot-lines {
  width: min(100%, 640px);
  margin-top: 27px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  color: var(--y-ink);
  font-size: 10px;
  font-weight: 900;
}

.yume-boot-line {
  min-width: 0;
  padding: 8px 10px;
  border: 2px solid var(--y-ink);
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 3px 3px 0 rgba(24,33,60,.11);
}

.yume-boot-line:nth-child(1) {
  background: var(--y-mint);
  transform: rotate(-.5deg);
  animation: yumeTagIn .22s ease 1.0s forwards;
}
.yume-boot-line:nth-child(2) {
  background: var(--y-lilac);
  transform: rotate(.45deg);
  animation: yumeTagIn .22s ease 1.12s forwards;
}
.yume-boot-line:nth-child(3) {
  background: var(--y-yellow);
  transform: rotate(.3deg);
  animation: yumeTagIn .22s ease 1.24s forwards;
}
.yume-boot-line:nth-child(4) {
  background: #ffdfe6;
  transform: rotate(-.35deg);
  animation: yumeTagIn .22s ease 1.36s forwards;
}

.yume-loader-panel {
  position: absolute !important;
  z-index: 12 !important;
  left: 34px !important;
  right: 34px !important;
  bottom: 28px !important;
  width: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 74px 1fr auto !important;
  grid-template-rows: auto 14px !important;
  align-items: center !important;
  gap: 8px 14px !important;
  padding: 16px 17px !important;
  border: 2px solid var(--y-ink);
  background: var(--y-cream);
  box-shadow: 5px 5px 0 var(--y-ink);
  color: var(--y-ink) !important;
  text-align: left !important;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif !important;
  opacity: 0;
  animation: yumeFade .28s ease 1.48s forwards;
}

#selection .yume-loader-panel h1 {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0 !important;
  color: var(--y-pink) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
}

#selection .yume-loader-panel h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: var(--y-deep) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
}

#selection .yume-loader-panel hr {
  grid-column: 2 / 4;
  grid-row: 2;
  justify-self: start;
  width: 0;
  height: 9px;
  margin: 0 !important;
  border: 2px solid var(--y-ink) !important;
  background: var(--y-yellow) !important;
  box-shadow: none !important;
  transition: width .15s linear !important;
}

.yume-progress-code {
  grid-column: 3;
  grid-row: 1;
  color: var(--y-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  opacity: .48;
}

.yume-corner {
  position: absolute;
  z-index: 8;
  top: 78px;
  color: var(--y-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  opacity: .32;
}

.yume-corner.left { left: 34px; }
.yume-corner.right { right: 34px; text-align: right; }

.yume-warning {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 116px;
  transform: translateX(-50%) rotate(-.4deg);
  padding: 5px 10px;
  background: var(--y-pink);
  color: white;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  white-space: nowrap;
  opacity: 0;
  animation: yumeFade .24s ease 1.7s forwards;
}

/* Near the hand-off, gently darken the cheerful page instead of glitching it. */
#selection.yume-intro.yume-progress-90 {
  background: #4fa4df !important;
}

#selection.yume-intro.yume-progress-97 .yume-intro-shell {
  filter: brightness(.92);
}

#selection.yume-intro.yume-finishing {
  background: #000 !important;
  transition: background .32s ease;
}

#selection.yume-intro.yume-finishing .yume-intro-shell {
  animation: yumeFriendlyOut .46s ease-in forwards !important;
}

@keyframes yumeCardIn {
  from { opacity: 0; transform: rotate(.35deg) scale(.97) translateY(12px); }
  to { opacity: 1; transform: rotate(.35deg) scale(1) translateY(0); }
}

@keyframes yumeLogoPop {
  0% { opacity: 0; transform: scale(.55) rotate(-9deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes yumeTitleUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes yumeFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yumeTagIn {
  from { opacity: 0; transform: translateY(7px) rotate(0); }
  to { opacity: 1; }
}

@keyframes yumeStarFloat {
  0%,100% { transform: rotate(10deg) translateY(0); }
  50% { transform: rotate(14deg) translateY(9px); }
}

@keyframes yumeBubble {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(10px,-8px); }
}

@keyframes yumeMiniStar {
  0%,100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.14); }
}

@keyframes yumeDots {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 130px 120px, -180px 170px, 155px -145px; }
}

@keyframes yumeFriendlyOut {
  0% { opacity: 1; transform: rotate(.35deg) scale(1); }
  55% { opacity: .65; transform: rotate(.35deg) scale(.985); }
  100% { opacity: 0; transform: rotate(.35deg) scale(.96); }
}

@media (max-width: 680px) {
  .yume-intro-shell {
    width: 94vw;
    min-height: 510px;
    padding: 22px 20px 24px;
  }

  .yume-topline {
    font-size: 8px;
  }

  .yume-topline span:last-child {
    display: none;
  }

  .yume-centre {
    min-height: 330px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .yume-company {
    font-size: 48px;
  }

  .yume-boot-lines {
    grid-template-columns: 1fr;
    width: 94%;
    gap: 5px;
    font-size: 8px;
  }

  .yume-loader-panel {
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    grid-template-columns: 58px 1fr !important;
  }

  .yume-progress-code {
    display: none;
  }

  #selection .yume-loader-panel hr {
    grid-column: 2 !important;
  }

  .yume-corner,
  .yume-warning {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #selection.yume-intro *,
  #selection.yume-intro::before,
  #selection.yume-intro::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}