/* ==========================================================================
   yousic — boot animation
   Sequence:
     0.0 – 1.8s   letters write on (yousic)
     1.8 – 2.4s   shimmer sweep
     2.4 – 3.0s   word scales down + fades, ys monogram scales up + fades in
     3.0 – 3.4s   ys holds, then fades
     3.4s         overlay removed by JS
   ========================================================================== */

#bootScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(145deg, #0b0c0e 0%, #13171f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#bootScreen.boot-done {
  opacity: 0;
  pointer-events: none;
}

.boot-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 320px;
}

/* ---------- The written word ---------- */

.boot-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 4.2rem;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.12);
  animation: bootWordOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) 2.4s forwards;
  will-change: transform, opacity;
}

.boot-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  filter: blur(6px);
  animation: bootLetterIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  animation-delay: calc(0.06s + var(--i) * 0.16s);
  will-change: opacity, transform, filter;
}

@keyframes bootLetterIn {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Shimmer sweep across the word once it's written */
.boot-word::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0) 65%,
    transparent 100%
  );
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  animation: bootShimmer 0.7s ease-out 1.75s forwards;
}

@keyframes bootShimmer {
  0% {
    left: -30%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* Word collapses + fades out as the monogram takes over */
@keyframes bootWordOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  60% {
    opacity: 0.4;
    transform: scale(0.72);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    filter: blur(6px);
  }
}

/* ---------- The ys monogram ---------- */

.boot-monogram {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.55);
  filter: blur(10px) drop-shadow(0 0 30px rgba(109, 140, 255, 0.15));
  animation: bootMonogramIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 2.55s forwards,
             bootMonogramOut 0.5s ease 3.05s forwards;
  will-change: opacity, transform, filter;
}

@keyframes bootMonogramIn {
  0% {
    opacity: 0;
    transform: scale(0.55);
    filter: blur(10px) drop-shadow(0 0 30px rgba(109, 140, 255, 0.15));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 0 30px rgba(109, 140, 255, 0.25));
  }
}

@keyframes bootMonogramOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 0 30px rgba(109, 140, 255, 0.25));
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(4px) drop-shadow(0 0 30px rgba(109, 140, 255, 0.0));
  }
}

/* Fallback: if favicon.png is missing, show a text "ys" instead.
   The img tag gets hidden, and this ::before on the stage shows. */
.boot-stage.monogram-missing .boot-monogram {
  display: none;
}
.boot-stage.monogram-missing::before {
  content: 'ys';
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 7rem;
  line-height: 1;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.55);
  filter: blur(10px);
  animation: bootMonogramIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 2.55s forwards,
             bootMonogramOut 0.5s ease 3.05s forwards;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .boot-letter,
  .boot-word,
  .boot-word::after,
  .boot-monogram,
  .boot-stage.monogram-missing::before {
    animation: none !important;
  }
  .boot-letter { opacity: 1; filter: none; transform: none; }
  .boot-word { opacity: 1; transform: none; filter: none; }
  .boot-monogram { opacity: 1; transform: none; filter: none; }
  #bootScreen { display: none; }
}