/* universal styling */

.app {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: block;
}

body, html {
  margin: 0;
  overflow: hidden;
  background-color: black;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:root {
  --wii-menu-width: min(100vw, 177.7778vh);
  --wii-menu-height: min(56.25vw, 100vh);
}

@supports (width: 1dvw) {
  :root {
    --wii-menu-width: min(100dvw, 177.7778dvh);
    --wii-menu-height: min(56.25dvw, 100dvh);
  }
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  transition: var(--menu-transition-boot, 900ms);
  cursor: url(../images/cursor.png), auto;
}

.black {
  background-color: black;
  width: 100vw;
  height: 100vh;
  z-index: 999999999;
  top: 100vh;
  opacity: 0;
  transition: opacity var(--menu-transition-panel, 300ms);
  position: absolute;
}

.black.animate {
  opacity: 1;
}

.boot-sequence {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--menu-surface, #f5f7f8);
  animation: boot-fade 1.6s ease-out forwards;
}

.boot-sequence[hidden] { display: none; }
.boot-logo { width: min(22vw, 240px); opacity: 0; animation: boot-logo-in 1.15s ease-out .2s forwards; }
.boot-sequence video { display: none; width: 100%; height: 100%; object-fit: contain; background: #000; }
.boot-sequence.has-video { background: #000; animation: none; }
.boot-sequence.has-video .boot-logo { display: none; }
.boot-sequence.has-video video { display: block; }
#skip-boot { position: absolute; right: 24px; bottom: 24px; display: none; padding: 10px 18px; border: 1px solid var(--menu-boot-border, #9bbbc4); border-radius: 999px; background: #fff; color: var(--menu-boot-accent, #28536e); font: inherit; }
.boot-sequence.has-video #skip-boot { display: block; }

@keyframes boot-logo-in { to { opacity: 1; } }
@keyframes boot-fade { 0%, 78% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .boot-sequence, .boot-logo { animation-duration: .01ms; animation-delay: 0ms; }
}