.is-loading,
.is-loading body { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--color-dark);
  opacity: 1;
  transition: opacity 0.6s ease;
}
.preloader.is-done {
  opacity: 0;
  pointer-events: none;
}

.pl__rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 800px;
  object-fit: cover;
  object-position: center;
}
@media (max-height: 800px) {
  .pl__rays { height: 100%; }
}

.pl__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 800px;
  transform: translateX(-50%);
}

.pl__layer {
  position: absolute;
  max-width: none;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.pl__text {
  z-index: 1;
  left: -24px;
  top: 285px;
  width: 1448px;
  height: auto;
  transform: translateY(307px);
  opacity: 1;
}

.pl__logo {
  z-index: 2;
  left: calc(50% - 133px);
  top: 246px;
  width: 266px;
  height: 308px;
  transform-origin: center center;
  transform: scale(1);
}

.pl__rock {
  z-index: 3;
  left: calc(50% - 383px);
  top: 337px;
  width: 1006px;
  height: 1006px;
  filter: brightness(0.55) contrast(1.3);
  transform: translateY(0);
}

.preloader.is-playing .pl__text {
  animation:
    pl-text 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards,

    pl-text-blur 2s ease 0.45s forwards;
}
.preloader.is-playing .pl__rock {
  animation: pl-rock 1.2s cubic-bezier(0.5, 0, 0.75, 0) 0.3s forwards;
}
.preloader.is-playing .pl__logo {
  animation: pl-logo 2s ease 0.45s forwards;
}

@keyframes pl-text {
  0%   { transform: translateY(307px); }
  100% { transform: translateY(0); }
}

@keyframes pl-rock {
  0%   { transform: translateY(0); }
  100% { transform: translateY(430px); }
}

@keyframes pl-text-blur {
  0%   { filter: blur(0);    opacity: 1; }
  70%  { filter: blur(0);    opacity: 1; }
  100% { filter: blur(24px); opacity: 0; }
}

@keyframes pl-logo {
  0%   { transform: scale(1);    filter: blur(0);   opacity: 1; }
  46%  { transform: scale(0.47); filter: blur(0);   opacity: 1; }
  70%  { transform: scale(0.47); filter: blur(0);   opacity: 1; }
  100% { transform: scale(0.12); filter: blur(24px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}