@font-face {
  font-family: JulrStartupDisplay;
  src: url('assets/assets/fonts/MountainsofChristmas-Regular.ttf') format('truetype');
  font-display: swap;
}
#julr-startup-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  color: #FDE68A;
  font-family: system-ui, sans-serif;
  text-align: center;
  background:
    radial-gradient(circle at 20% 30%, #f8b22912, transparent 13%),
    radial-gradient(circle at 75% 65%, #f8b2290d, transparent 17%),
    linear-gradient(to bottom, #0a1f2e 0%, #1a2f3e 30%, #2a1f2e 60%, #3a1f1e 100%);
}
#julr-startup-loader [hidden] { display: none !important; }
.julr-startup-artwork { width: min(300px, 100%); }
.julr-startup-scene { width: 300px; max-width: 100%; height: 240px; position: relative; margin: auto; }
.julr-startup-note {
  position: absolute; font-size: 32px; color: #F8B229;
  filter: drop-shadow(0 0 8px #f8b229cc);
  animation: julr-startup-dance 2s ease-in-out infinite;
}
.julr-startup-note:nth-child(1) { top: 5%; left: 10%; }
.julr-startup-note:nth-child(2) { top: 15%; right: 10%; animation-delay: -.25s; }
.julr-startup-note:nth-child(3) { top: 50%; left: 5%; animation-delay: -.5s; }
.julr-startup-note:nth-child(4) { top: 50%; right: 5%; animation-delay: -.75s; }
.julr-startup-note:nth-child(5) { bottom: 15%; left: 15%; animation-delay: -1s; }
.julr-startup-note:nth-child(6) { bottom: 15%; right: 15%; animation-delay: -1.25s; }
.julr-startup-tree {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 0 20px #d4af3766);
}
.julr-startup-star {
  font-size: 32px; color: #F8B229; margin-bottom: -8px; z-index: 1;
  filter: drop-shadow(0 0 10px #f8b229e6);
  animation: julr-startup-twinkle 1.5s ease-in-out infinite;
}
.julr-startup-tier {
  width: 0; height: 0; margin-top: -10px;
  border-left: 25px solid transparent; border-right: 25px solid transparent;
  border-bottom: 35px solid #D4AF37;
  animation: julr-startup-shimmer 3s ease-in-out infinite;
}
.julr-startup-tier.middle { border-left-width: 35px; border-right-width: 35px; border-bottom-width: 45px; animation-delay: -.5s; }
.julr-startup-tier.bottom { border-left-width: 45px; border-right-width: 45px; border-bottom-width: 55px; animation-delay: -1s; }
.julr-startup-trunk { width: 18px; height: 25px; margin-top: -5px; border-radius: 2px; background: linear-gradient(#B8860B, #D4AF37); }
.julr-startup-wordmark {
  font: 40px JulrStartupDisplay, serif;
  margin-top: 32px;
  background: linear-gradient(to right, #F8B229, #FDE68A, #F8B229);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: julr-startup-glow 2s ease-in-out infinite alternate;
}
.julr-startup-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.julr-startup-error { max-width: 28rem; line-height: 1.6; }
#julr-startup-retry { padding: 12px 24px; border: 1px solid #F8B229; border-radius: 8px; background: transparent; color: #FDE68A; font: inherit; cursor: pointer; }
#julr-startup-retry:focus-visible { outline: 2px solid #FDE68A; outline-offset: 4px; }
@keyframes julr-startup-dance { 0%,100% { transform: translateY(0) rotate(0) scale(1); opacity: .7; } 25% { transform: translateY(-10px) rotate(8deg) scale(1.15); opacity: 1; } 75% { transform: translateY(-5px) rotate(-8deg) scale(1.1); opacity: .9; } }
@keyframes julr-startup-twinkle { 50% { opacity: .7; transform: scale(1.2) rotate(180deg); } }
@keyframes julr-startup-shimmer { 0%,100% { opacity: .9; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.3); } }
@keyframes julr-startup-glow { from { transform: scale(1); filter: drop-shadow(0 0 20px #f8b22999); } to { transform: scale(1.05); filter: drop-shadow(0 0 30px #f8b229cc); } }
@media (max-height: 380px) { .julr-startup-scene { height: 180px; } .julr-startup-wordmark { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { #julr-startup-loader * { animation: none; } }
