/* Pure-CSS preloader: no JS dependency (GrapeJS strips <script> tags on export
   anyway, so a timed CSS animation is the only reliable option here). Fixed
   choreography: logo fades in big, loading bar fills, whole thing dismisses. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--color-bg);
  animation: preloader-dismiss 0.6s ease 2.4s forwards;
}

.preloader-logo {
  width: min(60vw, 320px);
  height: auto;
  opacity: 0;
  animation: preloader-logo-in 0.7s ease 0.2s forwards;
}

.loading-bar {
  width: min(50vw, 220px);
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  opacity: 0;
  animation: preloader-bar-in 0.3s ease 1s forwards;
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--color-brand);
  border-radius: inherit;
  animation: preloader-bar-fill 1s linear 1.1s forwards;
}

@keyframes preloader-logo-in { to { opacity: 1; } }
@keyframes preloader-bar-in { to { opacity: 1; } }
@keyframes preloader-bar-fill { to { width: 100%; } }
@keyframes preloader-dismiss { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .preloader { animation-duration: 0.3s; animation-delay: 0.2s; }
  .preloader-logo { opacity: 1; animation: none; }
  .loading-bar, .loading-bar-fill { animation: none; }
}