/* ==========================================================================
   DropHub — заставка загрузки (буква D логотипа рисуется, в щель бьёт молния)

   Выбор владельца 2026-11-02 (вариант «D» из loader-demo). Разметку ставит
   drophub.loader.js:
     .dhl-screen — на открытии сайта (раз за визит), поверх всей страницы;
     .dhl-box    — внутри игрового поля, пока грузятся 3D и картинки.
   Контуры буквы и молнии сняты с assets/logo-drophub-v2.png геометрией
   (прямые — МНК по краю, дуги — Безье), не трассировкой пикселей.

   Цикл 2.8 с: обводка обеих половинок → заливка лаймом → удар молнии со
   вспышкой, половинки чуть разлетаются и встают → свечение → гаснет.
   ========================================================================== */

.dhl-screen {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 40%, #241A52 0%, #120E24 62%, #0B0818 100%);
  transition: opacity .3s ease;
}
.dhl-screen.is-out { opacity: 0; pointer-events: none; }

.dhl-box {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: radial-gradient(80% 70% at 50% 45%, rgba(36, 26, 82, .92), rgba(14, 10, 30, .96));
  border-radius: inherit;
  opacity: 0; transition: opacity .25s ease;
}
.dhl-box.is-on { opacity: 1; }
.dhl-box.is-out { opacity: 0; pointer-events: none; }

.dhl { display: grid; justify-items: center; gap: 14px; }
.dhl__svg { width: 150px; height: auto; overflow: visible; }
.dhl-box .dhl__svg { width: clamp(72px, 16%, 130px); }
.dhl__cap {
  font: 600 12px/1 Oswald, 'Inter', sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: #9C93C7; animation: dhl-cap 2.8s ease-in-out infinite;
}

.dhl__h {
  fill: url(#dhlLime); fill-opacity: 0; stroke: #D7FF00; stroke-width: 2.4; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dhl-draw 2.8s cubic-bezier(.6, 0, .3, 1) infinite;
}
.dhl__h2 { animation-name: dhl-draw2; }
.dhl__d { animation: dhl-glow 2.8s ease-in-out infinite; }
.dhl__bolt {
  fill: url(#dhlBolt); fill-opacity: 0; stroke: #F7A6FF; stroke-width: 1.6; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dhl-bolt 2.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(245, 53, 240, .8));
}
.dhl__flash { fill: #fff; opacity: 0; animation: dhl-flash 2.8s ease-out infinite; filter: blur(6px); }

@keyframes dhl-draw {
  0%   { stroke-dashoffset: 1; fill-opacity: 0; transform: translate(0, 0); opacity: 1; }
  32%  { stroke-dashoffset: 0; fill-opacity: 0; }
  42%  { fill-opacity: 1; transform: translate(0, 0); }
  46%  { transform: translate(-2.6px, -3px); }
  56%  { transform: translate(0, 0); }
  88%  { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
@keyframes dhl-draw2 {
  0%, 5% { stroke-dashoffset: 1; fill-opacity: 0; transform: translate(0, 0); opacity: 1; }
  35%  { stroke-dashoffset: 0; fill-opacity: 0; }
  42%  { fill-opacity: 1; transform: translate(0, 0); }
  46%  { transform: translate(2.6px, 3px); }
  56%  { transform: translate(0, 0); }
  88%  { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
@keyframes dhl-bolt {
  0%, 41% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 1; }
  46%  { stroke-dashoffset: 0; fill-opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
@keyframes dhl-flash { 0%, 43% { opacity: 0; } 46% { opacity: .95; } 60%, 100% { opacity: 0; } }
@keyframes dhl-glow {
  0%, 45% { filter: drop-shadow(0 0 0 rgba(215, 255, 0, 0)); }
  50%  { filter: drop-shadow(0 0 16px rgba(215, 255, 0, .75)); }
  70%  { filter: drop-shadow(0 0 7px rgba(215, 255, 0, .35)); }
  80%  { filter: drop-shadow(0 0 11px rgba(215, 255, 0, .5)); }
  100% { filter: drop-shadow(0 0 0 rgba(215, 255, 0, 0)); }
}
@keyframes dhl-cap { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* без анимации — сразу готовая буква с молнией */
@media (prefers-reduced-motion: reduce) {
  .dhl__h, .dhl__bolt { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .dhl__d, .dhl__flash, .dhl__cap { animation: none; }
}