/* Прелоадер: красный экран, одна розовая звезда за процентами и шутки,
   пока грузится контент. Только CSS и инлайн-SVG. */
.preloader {
  --cream: #f8e4c2; --ink: #020101; --pink: #fa7ab3; --blue: #1ac3fd;
  position: fixed; inset: 0; z-index: 10000; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(18px, 3.4vw, 48px);
  background: #ef3124;
  color: var(--cream); font-family: Styrene, Inter, Arial, sans-serif;
}
.preloader[hidden] { display: none; }

.preloader-top { display: flex; justify-content: flex-end; align-items: baseline; position: relative; z-index: 2; }
.preloader-brand { font: 700 clamp(18px, 1.7vw, 24px)/1 Styrene, sans-serif; letter-spacing: -.03em; color: var(--ink); }
.preloader-year { font: 700 clamp(20px, 2vw, 30px)/1 Nauryz, sans-serif; color: var(--ink); }

.preloader-center { position: relative; z-index: 2; margin: auto; width: min(560px, 100%); display: grid; justify-items: center; text-align: center; gap: clamp(10px, 1.8vh, 18px); }
.preloader-title { margin: 0; font: 700 clamp(40px, 5.6vw, 80px)/.85 Nauryz, sans-serif; letter-spacing: -.03em; color: var(--cream); }
.preloader-title em { font-style: normal; color: var(--ink); text-shadow: none; }

.preloader-burst { position: relative; width: min(46vmin, 360px); aspect-ratio: 1; display: grid; place-items: center; margin-block: clamp(-10px, -1vh, 0px); transform: scale(calc(.86 + var(--load-progress, 0) * .14)); transition: transform .4s cubic-bezier(.2, 1.5, .4, 1); }
.preloader-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.burst-back { fill: var(--pink); animation: preloader-spin 40s linear infinite; }
.preloader-number { position: relative; margin: 0; display: flex; align-items: baseline; color: var(--ink); font: clamp(76px, 12vmin, 128px)/1 Agse, Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.preloader-unit { font: 700 .22em Styrene, sans-serif; margin-left: .2em; }

.preloader-track { width: min(340px, 80%); height: 10px; padding: 2px; border-radius: 99px; background: #02010133; overflow: hidden; }
.preloader-track span { display: block; height: 100%; border-radius: inherit; background: var(--cream); transform: scaleX(var(--load-progress, 0)); transform-origin: left; transition: transform .25s ease-out; }
.preloader-joke { margin: 0; min-height: 1.3em; font: 700 clamp(15px, 1.4vw, 19px)/1.3 Styrene, sans-serif; color: var(--ink); }
.preloader-joke.is-swapping { animation: preloader-joke .45s cubic-bezier(.2, 1.2, .4, 1); }
.preloader-status { margin: 0; min-height: 1.4em; font-size: 12px; line-height: 1.4; color: #02010199; }
.preloader-retry { margin-top: 6px; padding: 14px 26px; border: 0; border-radius: 99px; background: var(--ink); color: var(--cream); font: 700 15px Styrene, sans-serif; cursor: pointer; }
.preloader-retry:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.preloader.has-error .preloader-burst svg { animation-play-state: paused; }


@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-joke { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Уход: вспышка-звезда разлетается навстречу, затем шторка уезжает вверх. */
.preloader.is-leaving .preloader-burst { animation: preloader-burst-out .7s cubic-bezier(.6, 0, .8, .2) both; }
@keyframes preloader-burst-out { 40% { transform: scale(1.08); } to { transform: scale(2.6) rotate(40deg); opacity: 0; } }

@media (max-width: 600px) {
  .preloader-burst { width: min(60vw, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .preloader *, .preloader *::before { animation: none !important; transition: none !important; }
}