style.scss

:root {
  --cursorAnimationOn: cursor 700ms step-end 0ms infinite;
  --cursorAnimationOff: none;
  --cursorAnimation: var(--cursorAnimationOff);

  --typingAnimationOn: typing 3000ms steps(24, end) 1400ms 1 forwards;
  --typingAnimationOff: none;
  --typingAnimation: var(--typingAnimationOff);

  --imageDisplay: none;
  --imageHeight: 4rem;
  --imageWidth: var(--imageHeight);

  --headerHeight: 6rem;
  --headerWidth: 19rem;
  --headerLeft: calc(
    50% - (var(--headerWidth) / 2)
  );
  --headerTop: calc(
    50%
    - (var(--imageHeight) / 2)
    - var(--headerHeight)
    - 1rem
  );
  --headerTransform: none;
  --headerTransition: none;
  --headerOpacity: 1;

  --activityHeight: 3rem;
  --activityWidth: 7rem;
  --activityLeft: calc(
    50% - (var(--activityWidth) / 2)
  );
  --activityTop: calc(
    50%
    + (var(--imageHeight) / 2)
    + 1rem
  );
  --activityTransform: none;

  --playButtonBackground: orangered;
  --playButtonBorder: 2px solid #1d2b53;
  --playButtonBorderRadius: 4px;
  --playButtonBoxShadow: 0 0 4px #c2c3c7;
  --playButtonDisplay: none;
  --playButtonHeight: 48px;
  --playButtonWidth: 108px;

  --pauseButtonAnimation: none;
  --pauseButtonDisplay: none;
  --pauseButtonHeight: 2rem;
  --pauseButtonWidth: var(--pauseButtonHeight);
  --pauseButtonPauseIconDisplay: flex;
  --pauseButtonPlayIconDisplay: none;
  --pauseButtonTransform: translate(
    var(--pauseX),
    var(--pauseY)
  );

  --canvasDisplay: none;
  --canvasFilter: none;
  --canvasOpacity: 0;

  --loadingDisplay: none;
  --loadingWidth: 256px;
  --loadingHeight: var(--playButtonHeight);
  --loadingResizeDuration: 128ms;
  --loadingTransitionDuration: 64ms;
  --loadingTransform: scaleX(1);

  --nameDisplay: none;

  --alternateNameAnimation: none;
  --alternateNameAnimation:
    var(--cursorAnimation),
    var(--typingAnimation);
  --alternateNameDisplay: none;
  --alternateNameWidth: 100%;

  --descriptionDisplay: none;
  --descriptionFontSize: 1rem;
  --descriptionOpacity: 1;
  --descriptionTransform: unset;
  --descriptionTransition: none;

  --progressBarDisplay: none;
  --progressBarLeft: calc(
    var(--pauseButtonWidth)
    + 2rem
  );
  --progressBarRight: 1rem;
  --progressBarWidth: calc(
    100vw
    - var(--progressBarLeft)
    - var(--progressBarRight)
  );

  --pauseMenuDisplay: none;
}

@media (min-height: 20rem) {
  :root {
    --imageHeight: 8rem;
  }
}

@media (min-height: 24rem) {
  :root {
    --imageHeight: 12rem;
  }
}

@media (min-height: 24rem) {
  :root {
    --imageHeight: 16rem;
  }
}

@media (min-width: 32rem) {
  :root {
    --descriptionFontSize: 1.4rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --cursorAnimation: var(--cursorAnimationOn);
    --typingAnimation: var(--typingAnimationOn);
    --alternateNameWidth: 0%;
    --descriptionTransition: all 128ms ease-in-out;
    --loadingTransform: scaleX(0.55);
    --pauseButtonAnimation: movePause 256ms ease-in-out 1 forwards;
    --pauseButtonTransform: none;
  }
}

body[data-mode="menu"] {
  --imageDisplay: flex;
  --playButtonDisplay: flex;
  --nameDisplay: flex;
  --alternateNameDisplay: flex;
  --descriptionDisplay: grid;
}

body[data-mode="load"] {
  --activityWidth: 16rem;

  --imageDisplay: flex;
  --nameDisplay: flex;
  --alternateNameDisplay: flex;
  --loadingDisplay: flex;
  --descriptionDisplay: grid;
  --descriptionOpacity: 0;
  --descriptionTransform: scaleY(0);
}

body[data-mode="play"],
body[data-mode="pause"] {
  --headerTransform: translateY(var(--headerOffset));
  --headerTransition: transform 256ms, opacity 256ms;

  --nameDisplay: flex;
  --alternateNameDisplay: flex;
  --canvasDisplay: flex;

  --activityHeight: var(--pauseButtonHeight);
  --activityWidth: var(--pauseButtonWidth);
  --activityTransform: translate(-128px, -128px);

  --pauseButtonDisplay: flex;
  --progressBarDisplay: flex;
}

body[data-mode="play"] {
  --headerOpacity: 0;
  --canvasOpacity: 1;
  --pauseButtonPauseIconDisplay: flex;
  --pauseButtonPlayIconDisplay: none;
}

body[data-mode="pause"] {
  --canvasFilter: blur(4px) brightness(0.5) grayscale(0.5);
  --canvasOpacity: 0.5;
  --pauseButtonPauseIconDisplay: none;
  --pauseButtonPlayIconDisplay: flex;
  --pauseMenuDisplay: flex;
}

html {
  box-sizing: border-box;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-color: black;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  width: 100vw;
}

header {
  height: var(--headerHeight);
  left: var(--headerLeft);
  top: var(--headerTop);
  width: var(--headerWidth);
  transform: var(--headerTransform);
  transition: var(--headerTransition);
  opacity: var(--headerOpacity);

  display: grid;
  grid-auto-columns: min-content;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

[itemprop="headline name"] {
  display: none;
}

[aria-label="wargames"] {
  justify-self: center;
  width: 256px;
}

@keyframes typing {
  from { width: 1%; }
  to { width: 100%; }
}

@keyframes cursor {
  from, to { border-color: transparent }
  50% { border-color: gainsboro; }
}

[itemprop="alternativeHeadline alternateName"] {
  animation: var(--alternateNameAnimation);
  border-right: 0.6em solid gainsboro;
  color: gainsboro;
  display: var(--alternateNameDisplay);
  font-family: monospace;
  font-size: 1.4rem;
  height: min-content;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: var(--alternateNameWidth);
  white-space: nowrap;
}

[itemprop="image"] {
  display: var(--imageDisplay);
  height: var(--imageHeight);
  left: 50%;
  overflow: hidden;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  width: var(--imageWidth);
}

[aria-label="play"] {
  height: var(--activityHeight);
  left: var(--activityLeft);
  top: var(--activityTop);
  width: var(--activityWidth);

  background-color: var(--playButtonBackground);
  border: var(--playButtonBorder);
  border-radius: var(--playButtonBorderRadius);
  box-shadow: var(--playButtonBoxShadow);
  display: var(--playButtonDisplay);

  align-items: center;
  cursor: pointer;
  justify-content: center;
  position: absolute;
  transform-origin: center;
  z-index: 2;
}

[aria-label="play"] svg:nth-child(1) {
  display: block;
  width: 26px;
  height: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[aria-label="play"] svg:nth-child(1) path:nth-child(1) {
  stroke: #1d2b53;
  fill: white;
  stroke-width: 10;
}

[aria-label="play"] svg:nth-child(1) path:nth-child(2) {
  fill: white;
  // stroke: #008751;
  // stroke-width: 2;
}

[aria-label="play"] svg:nth-child(2) {
  display: block;
  width: 64px;
  height: 32px;
}

[itemprop="description"] {
  color: white;
  display: none;
  grid-auto-rows: min-content;
  font-family: Menlo, monospace;
  font-size: var(--descriptionFontSize);
  grid-area: description;
  line-height: 1.4em;
  opacity: var(--descriptionOpacity);
  row-gap: 2rem;
  padding-bottom: 2rem;
  transform: var(--descriptionTransform);
  transform-origin: top;
  transition: var(--descriptionTransition);
}

[itemprop="description"] p {
  margin: 0;
  text-shadow:
    1px 1px orangered,
    -1px 1px darkgreen,
    -1px -1px darkcyan
}

[itemprop="description"] p:nth-child(1) {
}

[itemprop="description"] p:nth-child(2) {
}

@keyframes resize {
  from {
    background-color: var(--playButtonBackground);
    transform: var(--loadingTransform);
  }

  to {
    background-color: transparent;
    transform: scaleX(1);
  }
}

[aria-label="loading"] {
  height: var(--activityHeight);
  left: calc(
    50% - (var(--activityWidth) / 2)
  );
  top: var(--activityTop);
  width: var(--activityWidth);

  animation-duration: var(--loadingResizeDuration);
  background-color: var(--playButtonBackground);
  border: var(--playButtonBorder);
  box-shadow: var(--playButtonBoxShadow);
  display: var(--loadingDisplay);
  transform: var(--loadingTransform);

  animation-name: resize;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  justify-self: center;
  position: absolute;
  transform-origin: center;
}

[aria-label="loading"] path {
  transition-property: stroke-dashoffset;
  transition-duration: var(--loadingTransitionDuration);
  transition-timing-function: ease-in-out;

  stroke: indianred;
  stroke-width: 32;
  stroke-dasharray: 256;
  stroke-dashoffset: 256;
}

canvas {
  display: var(--canvasDisplay);
  filter: var(--canvasFilter);
  opacity: var(--canvasOpacity);
  transition: opacity 64ms ease-in-out;
  z-index: 1;
}

[itemprop="applicationCategory"],
[itemprop="creator"],
[itemprop="operatingSystem"] {
  display: none;
}

@keyframes movePause {
  0% {
    transform:
      scale(
        var(--pauseScaleX),
        var(--pauseScaleY)
      )
      translate(0, 0);
  }

  10% {
    transform:
      scale(1, 1)
      translate(0, 0);
  }

  100% {
    transform:
      scale(1, 1)
      translate(
        var(--pauseX),
        var(--pauseY)
      );
  }
}

[aria-label="pause"] {
  animation: var(--pauseButtonAnimation);
  display: var(--pauseButtonDisplay);
  height: var(--activityHeight);
  left: calc(
    50% - (var(--activityWidth) / 2)
  );
  top: var(--activityTop);
  width: var(--activityWidth);
  transform: var(--pauseButtonTransform);

  cursor: pointer;
  border: 1px solid gainsboro;
  border-radius: 2px;
  padding: 0;
  background: transparent;
  position: absolute;
  z-index: 2;
}

[aria-label="pause"] svg {
  flex: 1;
  stroke-width: 4px;
}

[aria-label="pause"] svg:nth-child(1) {
  display: var(--pauseButtonPauseIconDisplay);
  stroke: white;
  stroke-width: 4px;
}

[aria-label="pause"] svg:nth-child(2) {
  display: var(--pauseButtonPlayIconDisplay);
  fill: white;
  stroke: white;
  stroke-linejoin: round;
  stroke-width: 5px;
}

[aria-label="progress"] {
  display: var(--progressBarDisplay);
  right: var(--progressBarRight);
  left: var(--progressBarLeft);
  width: var(--progressBarWidth);

  height: 8px;
  position: absolute;
  bottom: 1.6rem;
  overflow: hidden;
  z-index: 2;
}

@keyframes progressBackgroundAppear {
  to { stroke-dashoffset: 0; }
}

@keyframes progressForegroundAppear {
  to { opacity: 1; }
}

[aria-label="progress"] path:nth-child(1) {
  animation: progressBackgroundAppear 1024ms linear 4096ms 1 forwards;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 16;
  stroke-dasharray: 1024;
  stroke-dashoffset: 1024;
}

[aria-label="progress"] path:nth-child(2) {
  animation: progressForegroundAppear 128ms linear 8192ms 1 forwards;
  opacity: 0;
  stroke: red;
  stroke-width: 16;
  stroke-dasharray: 1024;
  stroke-dashoffset: 1024;
  transition: stroke-dashoffset 64ms ease-in-out;
}

aside {
  display: var(--pauseMenuDisplay);

  align-items: center;
  bottom: 0;
  color: white;
  flex-direction: column;
  font-family: Futura, sans-serif;
  font-size: 2rem;
  justify-content: center;
  left: 0;
  position: absolute;
  row-gap: 1rem;
  right: 0;
  top: 0;
  z-index: 1;
}

aside h2 {
  font-size: 1.5rem;
  margin: 0;
}

aside section {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 2rem;
  overflow: hidden;
  width: 16rem;
}

input[type="radio"] {
  cursor: pointer;
  opacity: 0.0001;
  height: 100%;
  width: 100%;
}

input[type="radio"][id*="stop"],
label[for*="-stop"] {
  grid-area: 1/1;
}

input[type="radio"][id*="slow"],
label[for*="-slow"] {
  grid-area: 1/2;
}

input[type="radio"][id*="fast"],
label[for*="-fast"] {
  grid-area: 1/3;
}

input[type="radio"] + label {
  align-self: center;
  cursor: pointer;
  justify-self: center;
  font-size: 1rem;
  height: calc(100% - 0.5rem);
  width: calc(100% - 0.25rem);
  text-align: center;
}

input[type="radio"]:checked + label {
  background-color: white;
  color: black;
}

input[type="radio"]:not(:checked) + label {
  background-color: black;
  color: white;
}