/* Based on Uiverse.io by Ashon-G */

/* ========================================
Theme Variables - Light Mode
======================================== */

:root {
  --splash-background: #f8fafc;
  --splash-glow: rgba(59, 169, 255, 0.12);
  --device-light: #d8dada;
  --device-medium: #c8c9c9;
  --device-dark: #8c8c8c;
  --keyboard-background: #c8c9c9;
  --keyboard-key: #111827;
  --screen-loading-background: #f8fafc;
  --screen-loading-color: #18181b;
  --screen-gradient-start: #3ba9ff;
  --screen-gradient-end: #c82aff;
}

/* ========================================
Theme Variables - Dark Mode
======================================== */

.dark {
  --splash-background: #05070c;
  --splash-glow: rgba(0, 207, 255, 0.12);
  --device-light: #c7c9c9;
  --device-medium: #b6b8b8;
  --device-dark: #676767;
  --keyboard-background: #b6b8b8;
  --keyboard-key: #050505;
  --screen-loading-background: #18181b;
  --screen-loading-color: #ffffff;
  --screen-gradient-start: #00cfff;
  --screen-gradient-end: #d946ef;
}

/* ========================================
Splash Wrapper
======================================== */

html.splash-active,
html.splash-active body {
  overflow: hidden;
}

#app-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
  circle at 50% 45%,
  var(--splash-glow),
  transparent 34%
  ),
  var(--splash-background);
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease,
    visibility 280ms ease;
}

#app-splash.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ========================================
MacBook
======================================== */

.macbook {
  position: relative;
  width: 228px;
  height: 260px;
}

/* ========================================
Display / Top
======================================== */

.macbook__topBord {
  position: absolute;
  z-index: 0;
  top: 34px;
  left: 0;
  width: 128px;
  height: 116px;
  border-radius: 6px;
  transform-origin: center;
  background: linear-gradient(
  -135deg,
  var(--device-medium) 52%,
  var(--device-dark) 56%
  );
  transform: scale(0) skewY(-30deg);
  animation: topbord 0.32s 0.35s ease-out forwards;
}

.macbook__topBord::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 6px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #000;
}

.macbook__topBord::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -7px;
  left: 8px;
  width: 168px;
  height: 12px;
  transform-origin: left bottom;
  transform: rotate(-42deg)
  skew(-4deg);
  background: linear-gradient(
  -135deg,
  var(--device-medium) 52%,
  var(--device-dark) 56%
  );
}

/* ========================================
Display
======================================== */

.macbook__display {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 12px;
  width: calc(100% - 12px);
  height: calc(100% - 18px);
  overflow: hidden;
  background: linear-gradient(
  45deg,
  var(--screen-gradient-start),
  var(--screen-gradient-end)
  );
}

.macbook__display::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: -9px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 18px);
  border-radius: 6px;
  pointer-events: none;
  background: linear-gradient(
  60deg,
  rgba(255, 255, 255, 0) 60%,
  rgba(255, 255, 255, 0.3) 60%
  );
}

/* ========================================
Loading screen
======================================== */

.macbook__load {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(
  --screen-loading-background
  );
  opacity: 1;
  animation: display 0.18s 1.22s ease forwards;
}

.macbook__load::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80px;
  height: 6px;
  box-sizing: border-box;
  border: 1px solid
  var(--screen-loading-color);
  border-radius: 3px;
}

.macbook__load::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  margin: auto;
  width: 0;
  height: 6px;
  border-radius: 3px;
  background: var(
  --screen-loading-color
  );
  animation: load 0.65s 0.6s ease-out forwards;
}

/* ========================================
Bottom / Body
======================================== */

.macbook__underBord {
  position: relative;
  left: 42px;
  bottom: -145px;
  width: 150px;
  height: 90px;
  border-radius: 6px;
  transform-origin: center;
  transform: rotate(-30deg)
  skew(30deg);
  background: linear-gradient(
  -45deg,
  var(--device-medium) 61%,
  var(--device-dark) 66%
  );
  opacity: 0;
  animation: modal 0.3s 0.08s ease-out forwards;
}

.macbook__underBord::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -8px;
  left: 8px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--device-light);
}

.macbook__underBord::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 12px;
  width: 170px;
  height: 15px;
  transform-origin: top left;
  transform: rotate(31deg)
  skew(-16deg);
  background: linear-gradient(
  -45deg,
  var(--device-medium) 61%,
  var(--device-dark) 66%
  );
}

/* ========================================
Keyboard
======================================== */

.macbook__keybord {
  position: relative;
  z-index: 3;
  top: 0;
  left: 16px;
  width: calc(100% - 16px);
  height: 45px;
  border-radius: 3px;
  background: var(--keyboard-background);
}

.macbook__keybord::before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 40px;
  height: 25px;
  border-radius: 3px;
  background: var(--keyboard-background);
}

.keybord {
  position: relative;
  top: 2px;
  left: 2px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 3px);
  height: calc(100% - 4px);
}

.keybord__touchbar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--keyboard-key);
}

/* ========================================
Keyboard first group
======================================== */

.keybord__keyBox {
  display: grid;
  grid-template-rows: 3fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr
  1fr 1fr 1fr 1fr
  1fr 1fr 1fr 1fr 1fr;
  width: 100%;
  height: 24px;
  margin: 1px 0 0;
  padding: 0 0 0 1px;
  box-sizing: border-box;
  list-style: none;
}

.keybord__key {
  position: relative;
  width: 8px;
  height: 7px;
  margin: 1px;
  background: var(--keyboard-key);
}

.keybord__keyBox .keybord__key {
  transform: translate(60px, -60px);
  opacity: 0;
  animation: key 0.18s 0.18s ease-out forwards;
}

.keybord__keyBox
.keybord__key::before,
  .keybord__keyBox
.keybord__key::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--keyboard-key);
}

.keybord__key::before {
  top: 8px;
  transform: translate(20px, -20px);
  animation: key1 0.18s 0.23s ease-out forwards;
}

.keybord__key::after {
  top: 16px;
  transform: translate(40px, -40px);
  animation: key2 0.18s 0.28s ease-out forwards;
}

.keybord__keyBox
.key--12::before {
  width: 10px;
}

.keybord__keyBox
.key--13::before {
  height: 10px;
}

/* ========================================
Key positioning
======================================== */

.key--01 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.key--02 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.key--03 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.key--04 {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}

.key--05 {
  grid-row: 1 / 2;
  grid-column: 5 / 6;
}

.key--06 {
  grid-row: 1 / 2;
  grid-column: 6 / 7;
}

.key--07 {
  grid-row: 1 / 2;
  grid-column: 7 / 8;
}

.key--08 {
  grid-row: 1 / 2;
  grid-column: 8 / 9;
}

.key--09 {
  grid-row: 1 / 2;
  grid-column: 9 / 10;
}

.key--10 {
  grid-row: 1 / 2;
  grid-column: 10 / 11;
}

.key--11 {
  grid-row: 1 / 2;
  grid-column: 11 / 12;
}

.key--12 {
  grid-row: 1 / 2;
  grid-column: 12 / 13;
}

.key--13 {
  grid-row: 1 / 2;
  grid-column: 13 / 14;
}

/* ========================================
Keyboard bottom group
======================================== */

.keybord__keyBox--under {
  display: flex;
  margin: 0;
  padding: 0 0 0 1px;
  box-sizing: border-box;
  list-style: none;
}

.keybord__keyBox--under
.keybord__key {
  transform: translate(80px, -80px);
  opacity: 0;
  animation: key3 0.2s 0.28s linear forwards;
}

.key--19 {
  width: 28px;
}

/* ========================================
Animations
======================================== */

@keyframes topbord {
  0% {
    transform: scale(0)
    skewY(-30deg);
  }

  30% {
    transform: scale(1.1)
    skewY(-30deg);
  }

  45% {
    transform: scale(0.9)
    skewY(-30deg);
  }

  60% {
    transform: scale(1.05)
    skewY(-30deg);
  }

  75% {
    transform: scale(0.95)
    skewY(-30deg);
  }

  90% {
    transform: scale(1.02)
    skewY(-30deg);
  }

  100% {
    transform: scale(1)
    skewY(-30deg);
  }
}

@keyframes display {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes load {
  0% {
    width: 0;
  }

  20% {
    width: 40px;
  }

  30% {
    width: 40px;
  }

  60% {
    width: 60px;
  }

  90% {
    width: 60px;
  }

  100% {
    width: 80px;
  }
}

@keyframes modal {
  0% {
    transform: scale(0)
    rotate(-30deg)
    skew(30deg);
    opacity: 0;
  }

  30% {
    transform: scale(1.1)
    rotate(-30deg)
    skew(30deg);
    opacity: 1;
  }

  45% {
    transform: scale(0.9)
    rotate(-30deg)
    skew(30deg);
    opacity: 1;
  }

  60% {
    transform: scale(1.05)
    rotate(-30deg)
    skew(30deg);
    opacity: 1;
  }

  75% {
    transform: scale(0.95)
    rotate(-30deg)
    skew(30deg);
    opacity: 1;
  }

  90% {
    transform: scale(1.02)
    rotate(-30deg)
    skew(30deg);
    opacity: 1;
  }

  100% {
    transform: scale(1)
    rotate(-30deg)
    skew(30deg);
    opacity: 1;
  }
}

@keyframes key {
  0% {
    transform: translate(60px, -60px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes key1 {
  0% {
    transform: translate(20px, -20px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes key2 {
  0% {
    transform: translate(40px, -40px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes key3 {
  0% {
    transform: translate(80px, -80px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* ========================================
Accessibility
======================================== */

@media (
prefers-reduced-motion: reduce
) {
  #app-splash,
  #app-splash *,
  #app-splash *::before,
  #app-splash *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}