:root {
      --background-colour: #000;
      --accent-colour: #ff5500;
      --helper-colour: #b07ceb;
      --helper-high-colour: color: rgb(201, 167, 240);
      --muted-colour: #442795;
      --shadow-colour: rgba(0, 0, 0, .05);
      --animation-delay: 1.27s;
}

::-webkit-scrollbar { width: 10px }
::-webkit-scrollbar-track { background: var(--accent-colour) }
::-webkit-scrollbar-thumb { background: var(--shadow-colour) }
::-webkit-scrollbar-thumb:hover { background: var(--accent-colour) } 

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

@font-face {
  font-family: "NerdFont";
  src: url(../media/DepartureMonoNerdFont-Regular-subset.woff2) format("woff2");
  unicode-range: U+21-5F,U+61-7D;
}

body {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      margin: .5rem;
      overflow: hidden;

      font-family: "NerdFont", "Open Sans", Arial, sans-serif;
      font-size: 1rem;
      background: var(--background-colour);
      color: var(--accent-colour);
      text-shadow: 1px 1px 0px var(--shadow-colour);
}

#frame {
      position: absolute;
      inset: 0;
      pointer-events: none;

      background: radial-gradient(ellipse farthest-corner at left top, white 0%, var(--accent-colour) 12%, var(--muted-colour) 44%);
      border-radius: 8px;
}

#frame-inner {
      position: absolute;      
      inset: 4px;

      background: var(--background-colour);
      border-radius: 4px;
      transition: inset calc(var(--animation-delay) / 2) ease-out 0s;
}

.loading #frame-inner {
      inset: 16px;
}

#logo {
      display: block;
}

img {
      max-width: 90%;
      height: auto;
}

html {
      font-size: 14pt;
}

hr {
      margin: .5em 0;
      color: var(--muted-colour);
      transition: color var(--animation-delay) linear 0s;
}

.loading hr {
      color: transparent;
}

em {
      font-style: normal;
}

big {
      font-size: 2rem;
}

button {
      cursor: pointer;
      height: 2.5em;

      font: inherit;
      font-size: 1em;      
      background: url('../media/cybernoid2025button.png') center center no-repeat;
      background: image-set(
            url('../media/cybernoid2025button.webp') type("image/webp"),
            url('../media/cybernoid2025button.png') type("image/jpeg"),
      ) center center no-repeat;
      background-position: 0 50%;
      text-shadow: 2px 2px 0 rgba(0,0,0, .5);
      color: #fff;
      border: 0;
      backdrop-filter: blur(0px);
      transition: all calc(var(--animation-delay) / 2) linear 0s;
}

button:nth-child(2n) {
      background-position: 100% 50%;
}

button:nth-child(2n+1) {
      background-position: 66% 50%;
}
button:before,
button:after {
      content: "";
      display: inline-block;
      vertical-align: middle;      
      width: 10px;
      height: 100%;
      border: 2px dotted transparent;
      transition: all calc(var(--animation-delay) / 5) linear 0s;
}

button::before {
      border-width: 0 0 0 2px;
      border-radius: 1em 0 0 1em;
}

button::after {
      border-width: 0 2px 0 0;
      border-radius: 0 1em 1em 0;
}

button:hover {
      color: var(--helper-colour);
      background-position: 50% 70%;
      transition: all calc(var(--animation-delay) / 2) linear 0s;
}

button:hover:before,
button:hover:after {
      border-color: var(--helper-colour);
}

#controls {
      display: none;
}

#content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;

      margin: 0 auto;
      text-align: center;
      opacity: 0;

      color: inherit;
      width: 100%;
      height: 100%;      
}

.loaded #content {
      animation: onstart 1s ease-out forwards 0s;
}

#content-inner {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1em;
      overflow: hidden;
      overflow-y: auto;
}

#type-container {
      display: block;

      margin: 0 auto;
      padding: 0;
      width: clamp(15em, 80vw, 560px);
      min-height: 12em;
      text-align: left;
      line-height: 1.8em;
      letter-spacing: 0;
      color: inherit;

      transition: color var(--animation-delay) linear 0s,
            letter-spacing calc(var(--animation-delay) * 2) linear 0s,
            height var(--animation-delay) linear 0s;
}

#type-container em {
      color: var(--helper-colour);
      background: radial-gradient(circle at center, #fff, #cad 65%, var(--accent-colour) 100%);
      background-clip: border-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

/* #type-container em span:first-letter {
      color: var(--helper-high-colour);
} */

.loading #type-container {
      color: transparent;
      text-shadow: none;
      letter-spacing: .3em;
}

.loading #type-container em {
      color: inherit;
}

#logo {
      display: flex;
      margin: 0 auto;
      z-index: -1;
}

/* end slice positioning */
.loading #logo .slice {
     object-position: 0 -400px !important;
}

#logo .slice {
      content: url("../media/cybernoid2025a-nq8.gif");
      content: image-set(
            url("../media/cybernoid2025a.webp") type("image/webp"),
            url("../media/cybernoid2025a.png") type("image/jpeg"),
            url("../media/cybernoid2025a-nq8.gif") type("image/gif"),
      );
      height: 144px;
}

.loaded #logo .slice {
      opacity: 1;
      flex: 0 0 auto;
      object-fit: cover;
      margin-top: 0;
      margin-right: 0;
      transition: all var(--animation-delay) cubic-bezier(.73,.29,.51,1) 0s;
      transform: scale(1);
}

/* initial slice positioning */
#logo .slice.start {
      opacity: 0;
      margin-top: -60vh;
      margin-right: 3vw;
      width: 0;
}

.cursor {
      display: inline-block;
      vertical-align: baseline;
      width: 8px;
      height: 1.2em;
      background-color: #fff;
      margin-left: 4px;
      animation: blink .5s infinite;
}

.theme-winter {
      --accent-colour: #00cbff;
      --helper-colour: #08c;

      #logo {
            filter: hue-rotate(185deg);
      }
}

/* le blinking cursor */
@keyframes blink {
      0%, 100% { opacity: 0; }
      35%, 65% { opacity: .25 }
      50% { opacity: 1; }
}

@keyframes onstart {

      0% {
            transform: scale(0.8) translateY(-1em);
            opacity: 0;
      }

      24% {
            opacity: .1;
      }

      42% {
            opacity: .3;
      }

      100% {
            transform: scale(1) translateY(0);
            opacity: 1;
      }
}

@media screen and (max-width: 720px) {

      body {
            margin: 0;
      }

      #frame {
            border-radius: 0;
      }

      #logo {
            flex-flow: row wrap;
            margin: 8px;
      }

}