/* ══════════════════════════════════════════════════════════════
   D-Klinic — dk-preloader2.css  v3.1 «Premium»
   v3.1: splice через html.dk-splice (класс ставится в head до первого кадра)
   Тёмная: <div class="dk-preloader">
   Светлая: <div class="dk-preloader dk-preloader--light">
   Скрытие: класс .dk-loaded. Шрифты берутся со страницы сайта.
   ══════════════════════════════════════════════════════════════ */
/* ── Оверлей ────────────────────────────────────────────────── */
.dk-preloader{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 60% 52% at 50% 40%, rgba(216,164,66,0.10) 0%, rgba(0,0,0,0) 65%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #241d13 0%, #140f09 62%, #0b0906 100%);
  opacity:1; visibility:visible;
  transition:opacity .7s ease, visibility .7s ease;
}
.dk-preloader.dk-loaded{ opacity:0; visibility:hidden; }
/* лёгкая виньетка */
.dk-preloader .dk-bg{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 140% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}
/* ── Сцена ──────────────────────────────────────────────────── */
.dk-preloader .dk-stage{
  position:relative; z-index:2;
  width:340px; text-align:center;
}
/* ── Логотип ────────────────────────────────────────────────── */
.dk-preloader .dk-logo{
  position:relative; width:190px; height:190px; margin:0 auto 26px;
  animation:dkp-bloom 1.6s ease-out 1.15s forwards;
}
.dk-preloader .dk-tooth{
  width:100%; height:100%; display:block; overflow:visible;
  animation:dkp-pulse 4.4s ease-in-out 2.6s infinite;
}
.dk-preloader .dk-f{
  transform-box:fill-box; transform-origin:center;
  opacity:0;
}
/* ── Тонкое вращающееся кольцо ─────────────────────────────── */
.dk-preloader .dk-ring{
  position:absolute; inset:-27px; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(222,168,64,0.85) 55deg, transparent 130deg,
    transparent 200deg, rgba(222,168,64,0.30) 260deg, transparent 320deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  opacity:0;
  animation:dkp-ring-in 1s ease 1.35s forwards, dkp-spin 16s linear infinite;
}
@keyframes dkp-ring-in{
  to { opacity:.9; }
}
@keyframes dkp-spin{
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
/* ══ Сборка граней — издалека, с расфокусом и мягким довесом ══ */
.dk-preloader .dk-f1{ animation:dkp-f1 1.25s cubic-bezier(.17,.80,.26,1) .05s forwards; }
.dk-preloader .dk-f2{ animation:dkp-f2 1.25s cubic-bezier(.17,.80,.26,1) .20s forwards; }
.dk-preloader .dk-f3{ animation:dkp-f3 1.25s cubic-bezier(.17,.80,.26,1) .35s forwards; }
.dk-preloader .dk-f4{ animation:dkp-f4 1.25s cubic-bezier(.17,.80,.26,1) .50s forwards; }
@keyframes dkp-f1{
  0%   { transform:translate(-320px,-230px) rotate(-35deg) scale(1.18); opacity:0; filter:blur(16px); }
  28%  { opacity:1; }
  80%  { transform:translate(9px,6px) rotate(1.2deg) scale(.996); filter:blur(0); }
  100% { transform:none; opacity:1; filter:blur(0); }
}
@keyframes dkp-f2{
  0%   { transform:translate(-430px,160px) rotate(20deg) scale(1.22); opacity:0; filter:blur(16px); }
  28%  { opacity:1; }
  80%  { transform:translate(10px,-4px) rotate(-1deg) scale(.996); filter:blur(0); }
  100% { transform:none; opacity:1; filter:blur(0); }
}
@keyframes dkp-f3{
  0%   { transform:translate(90px,-380px) rotate(26deg) scale(1.15); opacity:0; filter:blur(14px); }
  28%  { opacity:1; }
  80%  { transform:translate(-3px,9px) rotate(-1deg) scale(.996); filter:blur(0); }
  100% { transform:none; opacity:1; filter:blur(0); }
}
@keyframes dkp-f4{
  0%   { transform:translate(400px,110px) rotate(-30deg) scale(1.2); opacity:0; filter:blur(16px); }
  28%  { opacity:1; }
  80%  { transform:translate(-9px,-3px) rotate(1deg) scale(.996); filter:blur(0); }
  100% { transform:none; opacity:1; filter:blur(0); }
}
/* Вспышка после сборки → тихое базовое сияние */
@keyframes dkp-bloom{
  0%   { filter:drop-shadow(0 0 0 rgba(226,168,60,0)) drop-shadow(0 0 0 rgba(200,130,20,0)); }
  45%  { filter:drop-shadow(0 0 26px rgba(226,168,60,0.55)) drop-shadow(0 0 84px rgba(200,130,20,0.34)); }
  100% { filter:drop-shadow(0 0 10px rgba(226,168,60,0.22)) drop-shadow(0 0 34px rgba(200,130,20,0.12)); }
}
/* Дыхание */
@keyframes dkp-pulse{
  0%,100% { filter:drop-shadow(0 0 0 rgba(226,168,60,0)); }
  50%     { filter:drop-shadow(0 0 13px rgba(226,168,60,0.33)) drop-shadow(0 0 44px rgba(200,130,20,0.16)); }
}
/* Свип-блик: первый раз после сборки, далее изредка */
.dk-preloader .dk-sweep{
  opacity:0;
  animation:dkp-sweep 7s linear 1.7s infinite;
}
@keyframes dkp-sweep{
  0%   { transform:translateX(0) skewX(-18deg); opacity:0; }
  2%   { opacity:.9; }
  13%  { opacity:.9; }
  16%  { transform:translateX(1900px) skewX(-18deg); opacity:0; }
  100% { transform:translateX(1900px) skewX(-18deg); opacity:0; }
}
/* ── Текстовый лок-ап (шрифты сайта) ───────────────────────── */
.dk-preloader .dk-title{
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:42px; line-height:1; letter-spacing:.01em;
  color:#f7f3ec; margin-bottom:10px;
  opacity:0; animation:dkp-rise .7s ease-out 1.25s forwards;
}
.dk-preloader .dk-title .dk-dot{ color:#DEA840; }
.dk-preloader .dk-sub{
  font-family:'Roboto',sans-serif; font-weight:500;
  font-size:11.5px; letter-spacing:.38em; text-indent:.38em;
  color:#C89547; text-transform:uppercase; margin-bottom:14px;
  opacity:0; animation:dkp-track .9s ease-out 1.45s forwards;
}
.dk-preloader .dk-tagline{
  font-family:'Dancing Script',cursive; font-weight:600;
  font-size:24px; line-height:1.2; color:#E3B65C;
  opacity:0; animation:dkp-rise .8s ease-out 1.7s forwards;
}
@keyframes dkp-rise{
  0%   { opacity:0; transform:translateY(14px); }
  100% { opacity:1; transform:none; }
}
@keyframes dkp-track{
  0%   { opacity:0; letter-spacing:.7em; text-indent:.7em; }
  100% { opacity:1; letter-spacing:.38em; text-indent:.38em; }
}
/* ── Тонкая линия загрузки ─────────────────────────────────── */
.dk-preloader .dk-progress{
  position:relative; width:140px; height:2px; margin:22px auto 0;
  background:rgba(222,168,64,0.16); border-radius:2px; overflow:hidden;
  opacity:0; animation:dkp-rise .6s ease-out 1.9s forwards;
}
.dk-preloader .dk-progress span{
  position:absolute; left:0; top:0; bottom:0; width:48px; border-radius:2px;
  background:linear-gradient(90deg, rgba(222,168,64,0) 0%, #DEA840 50%, rgba(222,168,64,0) 100%);
  animation:dkp-run 1.5s ease-in-out 1.9s infinite;
}
@keyframes dkp-run{
  0%   { transform:translateX(-52px); }
  100% { transform:translateX(144px); }
}
/* ══════════════════════════════════════════════════════════════
   СВЕТЛАЯ ВЕРСИЯ — в тон страниц сайта
   ══════════════════════════════════════════════════════════════ */
.dk-preloader--light{
  background:
    radial-gradient(ellipse 60% 52% at 50% 40%, rgba(199,148,52,0.12) 0%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #fdfcf9 0%, #f5f1e9 100%);
}
.dk-preloader--light .dk-bg{
  background:radial-gradient(ellipse 140% 120% at 50% 50%, rgba(0,0,0,0) 60%, rgba(65,63,59,0.10) 100%);
}
.dk-preloader--light .dk-logo{ animation-name:dkp-bloom-l; }
.dk-preloader--light .dk-tooth{ animation-name:dkp-pulse-l; }
@keyframes dkp-bloom-l{
  0%   { filter:drop-shadow(0 6px 0 rgba(180,125,30,0)); }
  45%  { filter:drop-shadow(0 10px 26px rgba(180,125,30,0.42)) drop-shadow(0 0 60px rgba(199,148,52,0.28)); }
  100% { filter:drop-shadow(0 8px 18px rgba(180,125,30,0.24)) drop-shadow(0 0 30px rgba(199,148,52,0.12)); }
}
@keyframes dkp-pulse-l{
  0%,100% { filter:drop-shadow(0 4px 8px rgba(180,125,30,0)); }
  50%     { filter:drop-shadow(0 8px 16px rgba(180,125,30,0.26)) drop-shadow(0 0 34px rgba(199,148,52,0.14)); }
}
.dk-preloader--light .dk-ring{
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(178,124,34,0.75) 55deg, transparent 130deg,
    transparent 200deg, rgba(178,124,34,0.26) 260deg, transparent 320deg);
}
.dk-preloader--light .dk-title{ color:#413f3b; }
.dk-preloader--light .dk-sub{ color:#a97f38; }
.dk-preloader--light .dk-tagline{ color:#b2871f; }
.dk-preloader--light .dk-progress{ background:rgba(65,63,59,0.10); }
.dk-preloader--light .dk-progress span{
  background:linear-gradient(90deg, rgba(178,124,34,0) 0%, #B27C22 50%, rgba(178,124,34,0) 100%);
}
/* ── prefers-reduced-motion: сразу финальное состояние ─────── */
@media (prefers-reduced-motion: reduce){
  .dk-preloader *{ animation:none !important; }
  .dk-preloader .dk-f{ transform:none !important; opacity:1 !important; filter:none !important; }
  .dk-preloader .dk-ring{ opacity:.8 !important; }
  .dk-preloader .dk-title,
  .dk-preloader .dk-sub,
  .dk-preloader .dk-tagline{ opacity:1 !important; transform:none !important; }
  .dk-preloader .dk-progress{ display:none !important; }
}
/* ══════════════════════════════════════════════════════════════
   PAGE-TRANSITION — разлёт логотипа в шапке (наложение SVG на PNG)
   Хост:  <div class="header1-logo dk-tr-host"> <a> <img> + <svg class="dk-tr-tooth"> …4 грани… </svg> </a> </div>
   Запуск: класс .dk-tr-run на .dk-tr-host (ставит js/dk-logo-transition.js)
   Позиция SVG под зуб logo16.png (315×210) — переменные --dk-tr-* на .dk-tr-host
   ══════════════════════════════════════════════════════════════ */
.dk-tr-host{
  position:relative;
  --dk-tr-top:  6px;
  --dk-tr-left: 4px;
  --dk-tr-w:   58px;
  --dk-tr-h:   58px;
}
.dk-tr-host > a{ position:relative; display:inline-block; }
/* SVG-оверлей: невидим в покое, точно над зубом картинки */
.dk-tr-tooth{
  position:absolute; top:var(--dk-tr-top); left:var(--dk-tr-left);
  width:var(--dk-tr-w); height:var(--dk-tr-h);
  overflow:visible; pointer-events:none;
  opacity:0; z-index:3;
}
.dk-tr-tooth .dk-tr-f{
  transform-box:fill-box; transform-origin:center;
  will-change:transform,opacity,filter;
}
/* ── Летящий слой над всей страницей (создаётся скриптом dk-logo-transition.js) ──
   Полёт к центру и рост — на HTML-обёртке (реальные px экрана); распад — на полигонах. */
.dk-tr-fly{
  position:fixed; overflow:visible; pointer-events:none;
  animation:dk-tr-flight .55s cubic-bezier(.5,0,.6,1) forwards;
}
@keyframes dk-tr-flight{
  0%   { transform:translate(var(--dk-tr-sx), var(--dk-tr-sy)) scale(var(--dk-tr-s0)); }
  10%  { transform:translate(var(--dk-tr-sx), var(--dk-tr-sy)) scale(calc(var(--dk-tr-s0) * 1.08)); }
  100% { transform:translate(0,0) scale(1); }
}
.dk-tr-fly .dk-tr-tooth{ opacity:1 !important; animation:dk-tr-glow .55s ease-out forwards; }
.dk-tr-run .dk-tr-f1{ animation:dk-tr-out1 .55s cubic-bezier(.5,0,.6,1)       forwards; }
.dk-tr-run .dk-tr-f2{ animation:dk-tr-out2 .55s cubic-bezier(.5,0,.6,1) .025s forwards; }
.dk-tr-run .dk-tr-f3{ animation:dk-tr-out3 .55s cubic-bezier(.5,0,.6,1) .012s forwards; }
.dk-tr-run .dk-tr-f4{ animation:dk-tr-out4 .55s cubic-bezier(.5,0,.6,1) .038s forwards; }
/* Осколки уходят в стартовые точки СБОРКИ прелоадера (те же направления/углы, что dkp-f1..f4),
   растворяясь на подлёте — новая страница подхватывает сборку из той же позиции. Единицы SVG. */
@keyframes dk-tr-out1{
  0%   { transform:translate(0,0) rotate(0deg) scale(1); }
  100% { transform:translate(-320px,-230px) rotate(-35deg) scale(1.18); }
}
@keyframes dk-tr-out2{
  0%   { transform:translate(0,0) rotate(0deg) scale(1); }
  100% { transform:translate(-430px,160px) rotate(20deg) scale(1.22); }
}
@keyframes dk-tr-out3{
  0%   { transform:translate(0,0) rotate(0deg) scale(1); }
  100% { transform:translate(90px,-380px) rotate(26deg) scale(1.15); }
}
@keyframes dk-tr-out4{
  0%   { transform:translate(0,0) rotate(0deg) scale(1); }
  100% { transform:translate(400px,110px) rotate(-30deg) scale(1.2); }
}
/* Золотая вспышка в момент разлёта */
@keyframes dk-tr-glow{
  0%   { filter:drop-shadow(0 0 0 rgba(222,168,64,0)); }
  22%  { filter:drop-shadow(0 0 14px rgba(226,168,60,0.78)) drop-shadow(0 0 40px rgba(200,130,20,0.42)); }
  100% { filter:drop-shadow(0 0 6px rgba(226,168,60,0)); }
}
/* Вуаль перехода: тот же фон, что у светлого прелоадера следующей страницы */
.dk-tr-veil{
  position:fixed; inset:0; pointer-events:none; z-index:2147482999;
  opacity:0;
  background:
    radial-gradient(ellipse 60% 52% at 50% 40%, rgba(199,148,52,0.12) 0%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #fdfcf9 0%, #f5f1e9 100%);
  animation:dk-tr-veil-in .32s ease .06s forwards;
}
@keyframes dk-tr-veil-in{ to{ opacity:1; } }
/* ══ SPLICE: вход после перехода — грани стартуют из точек, где замерли осколки ══ */
html.dk-splice .dk-preloader .dk-f{ opacity:1; filter:none; }
html.dk-splice .dk-preloader .dk-f1{ transform:translate(-320px,-230px) rotate(-35deg) scale(1.18); animation:dkp-sf1 .9s cubic-bezier(.17,.80,.26,1) .12s forwards; }
html.dk-splice .dk-preloader .dk-f2{ transform:translate(-430px,160px) rotate(20deg) scale(1.22); animation:dkp-sf2 .9s cubic-bezier(.17,.80,.26,1) .15s forwards; }
html.dk-splice .dk-preloader .dk-f3{ transform:translate(90px,-380px) rotate(26deg) scale(1.15); animation:dkp-sf3 .9s cubic-bezier(.17,.80,.26,1) .135s forwards; }
html.dk-splice .dk-preloader .dk-f4{ transform:translate(400px,110px) rotate(-30deg) scale(1.2); animation:dkp-sf4 .9s cubic-bezier(.17,.80,.26,1) .165s forwards; }
@keyframes dkp-sf1{
  0%   { transform:translate(-320px,-230px) rotate(-35deg) scale(1.18); }
  80%  { transform:translate(9px,6px) rotate(1.2deg) scale(.996); }
  100% { transform:none; }
}
@keyframes dkp-sf2{
  0%   { transform:translate(-430px,160px) rotate(20deg) scale(1.22); }
  80%  { transform:translate(10px,-4px) rotate(-1deg) scale(.996); }
  100% { transform:none; }
}
@keyframes dkp-sf3{
  0%   { transform:translate(90px,-380px) rotate(26deg) scale(1.15); }
  80%  { transform:translate(-3px,9px) rotate(-1deg) scale(.996); }
  100% { transform:none; }
}
@keyframes dkp-sf4{
  0%   { transform:translate(400px,110px) rotate(-30deg) scale(1.2); }
  80%  { transform:translate(-9px,-3px) rotate(1deg) scale(.996); }
  100% { transform:none; }
}
/* prefers-reduced-motion: без анимации, переход мгновенный (решает JS) */
@media (prefers-reduced-motion: reduce){
  .dk-tr-fly, .dk-tr-veil{ display:none !important; }
}