@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ewert&display=swap');

:root
{
  --drop:              240vh;
  --dur:               2s;
  --fade-dur:          0.2s;
  --fade-delay:        0s;
  --drop-rot:          90deg;
  --skyfall-time:      0.25s;
  --skyfall-rot-from:  45deg;
  --skyfall-rot-to:    60deg;
  --wiggle-speed:      2s;
}

@keyframes wiggle
{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(calc(30vw - 30%)); }
  100% { transform: translateX(0); }
}

@keyframes skyfall
{
  from { transform: translate(-50%, -100%) rotate(var(--skyfall-rot-from)); }
  to   { transform: translate(-50%, calc(100vh + 100%)) rotate(var(--skyfall-rot-to)); }
}

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

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

@keyframes pulse
{
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1);   }
}

@keyframes lightup
{
  from { color: black; }
  to   { color: white; }
}

html, body            { margin: 0; padding: 0; overflow: hidden; }
header                { margin: 5pt; }
main                  { margin: 5pt; }
.int1                 { display: inline-grid; }
.int1 > *             { grid-area: 1 / 1; }
.span-medium          { height: 150vh; }
.walker               { animation: wiggle var(--wiggle-speed) ease-in-out infinite; }
.walker:not([hidden]) { display: inline-block; }
.paused               { animation-play-state: paused; }
.broken               { color: red; }
.fade-out             { animation: fadeout 1s linear forwards; }
.fade-in              { animation: fadein  1s linear forwards; }
.lightup              { animation: lightup 1s linear forwards; }
.dimup                { animation: lightup 1s linear backwards; }
.flip-x               { transform: scaleX(-1); }
.flip-y               { transform: scaleY(-1); }
.center-text          { text-align: center; }

.pulse
{
  animation: pulse 0.6s ease-in-out infinite;
  transform-origin: center center;
}

.cave
{
  height: 5000vh;
  background: linear-gradient(to bottom, white, black);
  margin: 0;
  padding: 5pt;
}

.milestone
{
  position: absolute;
}

.bottom-label
{
  position: fixed;
  bottom:   0;
}

.lock-scroll body
{
  position: fixed;
  top: var(--lock-top, 0);
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

.trigger1
{
  transition: transform var(--dur) cubic-bezier(.42, 0, 1, 1), opacity calc(var(--dur) / 2);
  transform:  translateZ(0);
}

.int1 .result1
{
  opacity:    0;
  transition: opacity var(--fade-dur) var(--fade-delay);
}

.int1.result1-2 .trigger1
{
  transform:      translateY(var(--drop)) rotate(var(--drop-rot));
  opacity:        0;
  pointer-events: none;
}

.result1-2 .result1
{
  opacity: 1;
}

.skyfall
{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  animation: skyfall var(--skyfall-time) linear forwards;
  pointer-events: none;
  z-index: 9999;
}

.prize
{
  font-family: "Ewert", serif;
  font-size:   15pt;
}

.inner-thought
{
  font-size: 8pt;
}

@media (prefers-reduced-motion: reduce) {
  .trigger, .reveal { transition: none; }
}