@font-face {
  font-family: 'Comic Relief';
  src: url('assets/ComicRelief-Bold.ttf') format('truetype');
  font-weight: normal;
}

html, body {
  height: 100dvh;
  margin: 0;
  font-family: 'Comic Relief', cursive;
  text-align: center;
  background: radial-gradient(circle at center, #cdeaff 0%, #6badd6 45%, #2c5d86 75%, #0f2c42 100%);
  font-size: 1.2rem;
}

.root {
  position: relative; /* anchor for absolute children */
  height: 100dvh;
  overflow: hidden;   /* clips overflow from absolute elements */
}

.reveal {
  display: none;
}

#title {
  position: absolute;
  left: 0px;
  bottom: 10%;
  width: 100%;
  animation:
    wobble 1s ease-in-out infinite,
    rainbow-scroll 0.6s linear infinite;
  background-image: repeating-linear-gradient(
    135deg,
    red 0 20px,
    orange 20px 40px,
    yellow 40px 60px,
    green 60px 80px,
    blue 80px 100px,
    indigo 100px 120px,
    violet 120px 140px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

@keyframes wobble {
  0%, 100% { transform: scale(1) rotate(-8deg); }
  25% { transform: scale(1.2) rotate(6deg); }
  50% { transform: scale(0.85) rotate(-10deg); }
  75% { transform: scale(1.15) rotate(8deg); }
  /**/
  /*
  0% { transform: scale(1) rotate(-8deg) translate(0, 0); }
  8% { transform: scale(1.25) rotate(10deg) translate(3px, -2px); }
  19% { transform: scale(0.8) rotate(-14deg) translate(-4px, 1px); }
  27% { transform: scale(1.1) rotate(3deg) translate(2px, 2px); }
  41% { transform: scale(0.9) rotate(-5deg) translate(-2px, -3px); }
  53% { transform: scale(1.3) rotate(13deg) translate(4px, 0); }
  68% { transform: scale(0.85) rotate(-11deg) translate(-3px, 2px); }
  79% { transform: scale(1.15) rotate(7deg) translate(1px, -2px); }
  91% { transform: scale(0.95) rotate(-9deg) translate(-1px, 1px); }
  100% { transform: scale(1) rotate(-8deg) translate(0, 0); }
  /**/
}

@keyframes rainbow-scroll {
  /* 198px = 140px stripe period / sin(135deg), so a pure horizontal
     shift still lands on an exact multiple of the gradient's period */
  from { background-position: 0 0; }
  to { background-position: 198px 0; }
}

#sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.60) 0deg 9deg,
    transparent 9deg 18deg
  );
  animation: spin 20s linear infinite;
  pointer-events: none;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.art {
  user-select: none;
  -webkit-user-drag: none;
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 150%;
  max-height: 100%;
  object-fit: contain;
  touch-action: none;
  transition: bottom 0.8s ease-out;
}