/* Boot logo intro — paints before the JS bundle; see public/boot-intro.js */

#lammah-boot-intro {
  --ink: #000000;
  --accent: #c12525;
  --bg: #f5f2e7;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--bg);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

#lammah-boot-intro.dark {
  --ink: #ffffff;
  --bg: #0b0b0c;
}

#lammah-boot-intro.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.boot-intro-skip #lammah-boot-intro {
  display: none !important;
}

/* Avoid flash of app under the splash before the first paint */
html.boot-intro-pending #root {
  visibility: hidden;
}

#lammah-boot-intro .stage {
  width: min(62vw, 460px, 52vh);
}

@media (max-width: 640px) {
  #lammah-boot-intro .stage {
    width: min(76vw, 52vh);
  }
}

#lammah-boot-intro svg {
  width: 100%;
  height: auto;
  display: block;
}

#lammah-boot-intro .ink {
  fill: var(--ink);
}

#lammah-boot-intro .accent {
  fill: var(--accent);
}

#lammah-boot-intro .drop {
  transform-box: view-box;
  animation: lammah-boot-drop 0.64s cubic-bezier(0.5, 0.05, 0.6, 1) 0.12s both;
}

@keyframes lammah-boot-drop {
  0% {
    transform: translateY(-1300px);
  }
  58% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(-90px);
  }
  86% {
    transform: translateY(0);
  }
  94% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}

#lammah-boot-intro .slide {
  transform-box: view-box;
  animation: lammah-boot-slide 0.84s 1s both;
}

@keyframes lammah-boot-slide {
  0% {
    transform: translateX(1400px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.55);
  }
  46% {
    transform: translateX(469px);
    animation-timing-function: cubic-bezier(0.12, 0.7, 0.3, 1);
  }
  88% {
    transform: translateX(-22px);
  }
  100% {
    transform: translateX(0);
  }
}

#lammah-boot-intro .pos {
  transform-box: view-box;
  animation: lammah-boot-pos 0.68s cubic-bezier(0.16, 0.85, 0.3, 1) 1.386s both;
}

@keyframes lammah-boot-pos {
  0% {
    transform: translate(570px, -124.5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

#lammah-boot-intro .spin {
  transform-box: view-box;
  transform-origin: 282px 1358.5px;
  animation: lammah-boot-spin 0.68s cubic-bezier(0.16, 0.85, 0.3, 1) 1.386s both;
}

@keyframes lammah-boot-spin {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#lammah-boot-intro .ballx {
  transform-box: view-box;
  animation: lammah-boot-ballx 2.45s linear 0s both;
}

@keyframes lammah-boot-ballx {
  0% {
    transform: translateX(218px);
  }
  56.6% {
    transform: translateX(218px);
  }
  88.2% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

#lammah-boot-intro .bally {
  transform-box: view-box;
  animation: lammah-boot-bally 2.45s linear 0s both;
}

@keyframes lammah-boot-bally {
  0% {
    transform: translateY(-826.5px);
  }
  4.9% {
    transform: translateY(-826.5px);
    animation-timing-function: cubic-bezier(0.5, 0.05, 0.6, 1);
  }
  20% {
    transform: translateY(473.5px);
  }
  23.7% {
    transform: translateY(383.5px);
  }
  27.4% {
    transform: translateY(473.5px);
  }
  29.5% {
    transform: translateY(448.5px);
  }
  31% {
    transform: translateY(473.5px);
  }
  56.6% {
    transform: translateY(473.5px);
    animation-timing-function: cubic-bezier(0.12, 0.62, 0.38, 1);
  }
  74.9% {
    transform: translateY(-520px);
    animation-timing-function: cubic-bezier(0.62, 0, 0.88, 0.42);
  }
  88.2% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

#lammah-boot-intro .tail {
  transform-box: view-box;
  transform-origin: 412px 1068px;
  transform: scaleX(0);
  animation: lammah-boot-tail 0.34s cubic-bezier(0.22, 1, 0.36, 1) 2.16s forwards;
}

@keyframes lammah-boot-tail {
  to {
    transform: scaleX(1);
  }
}

#lammah-boot-intro .pop {
  transform-box: view-box;
  transform-origin: 458px 1060px;
  animation: lammah-boot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.16s both;
}

@keyframes lammah-boot-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

#lammah-boot-intro .ring {
  transform-box: view-box;
  transform-origin: 458px 1060px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 11;
  opacity: 0;
  animation: lammah-boot-ring 0.92s cubic-bezier(0.16, 1, 0.3, 1) 2.16s forwards;
}

@keyframes lammah-boot-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

#lammah-boot-intro #lammah-boot-mark {
  transform-origin: 50% 50%;
  animation: lammah-boot-settle 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.16s both;
}

@keyframes lammah-boot-settle {
  0% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #lammah-boot-intro .drop,
  #lammah-boot-intro .slide,
  #lammah-boot-intro .pos,
  #lammah-boot-intro .spin,
  #lammah-boot-intro .ballx,
  #lammah-boot-intro .bally,
  #lammah-boot-intro .pop,
  #lammah-boot-intro #lammah-boot-mark {
    animation: none;
    transform: none;
  }

  #lammah-boot-intro .tail {
    animation: none;
    transform: scaleX(1);
  }

  #lammah-boot-intro .ring {
    display: none;
  }
}