/* Дракон школы — живой логотип. Сквозь него всегда можно нажать */
#dragon {
  position: fixed; left: 0; top: 0; z-index: 40;
  pointer-events: none; will-change: transform;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28));
}
#dragon .dragon-body { transition: transform .35s ease; transform-origin: 50% 55%; }
/* Объёмный дракон летает так же, как рисованный: его холст просто едет
   вместе с контейнером */
#dragon.model { filter: none; }
#dragon.model .dragon-body, #dragon.model canvas { width: 100%; height: 100%; display: block; }
#dragon svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Цвета дракона в двух темах: в светлой — темнее, чтобы не терялся на бумаге */
/* Цвета: золото на тёмном, тёмная бронза на светлом. Свечи приглушённые —
   изумруд и гранат, а не ярко-зелёный и красный: так это украшение, а не
   сигнал «покупай» */
:root, [data-theme="dark"] {
  --dragon-hi: #f2dca4; --dragon-body: #c99a4e; --dragon-deep: #8c6528; --dragon-shine: #fff1c9;
  --dragon-edge: #5a4118; --dragon-horn: #4a3514; --dragon-eye: #16181f;
  --dragon-wing-hi: #e6c98c; --dragon-wing: #9c7433; --dragon-wing-back-hi: #7a5a2a; --dragon-wing-back: #3f2d12; --dragon-wick: #3a2c14;
  --candle-up: #2f8f6a; --candle-down: #a8402f;
}
[data-theme="light"] {
  --dragon-hi: #d9b067; --dragon-body: #a8742c; --dragon-deep: #6b4a18; --dragon-shine: #f6dea6;
  --dragon-edge: #4a3310; --dragon-horn: #35240b;
  --dragon-wing-hi: #c99a52; --dragon-wing: #7d5720; --dragon-wing-back-hi: #9a7438; --dragon-wing-back: #5c4219;
  --candle-up: #1d6e56; --candle-down: #8f3520;
}

/* Крылья машут; в полёте чаще, в зависании — лениво */
.dg-wing { transform-box: view-box; transform-origin: 76px 50px; animation: dg-flap 1.8s ease-in-out infinite; }
.dg-wing-back { transform-origin: 70px 52px; }
.dg-wing-back { animation-delay: -.12s; }
#dragon.flying .dg-wing { animation-duration: .5s; }
@keyframes dg-flap { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(-12deg) scaleY(.78); } }

/* Вспышка на ответ — и единственное, что остаётся при «уменьшении движения» */
#dragon.glow-ok { animation: dg-glow-ok 1.2s ease-out; }
#dragon.glow-bad { animation: dg-glow-bad 1.2s ease-out; }
@keyframes dg-glow-ok { 30% { filter: drop-shadow(0 0 14px rgba(95, 174, 134, .95)); } }
@keyframes dg-glow-bad { 30% { filter: drop-shadow(0 0 14px rgba(208, 96, 60, .95)); } }

/* Зелёный свет вверх и красный огонь вниз из пасти */
#dragon-fx { position: fixed; inset: 0; pointer-events: none; z-index: 41; overflow: hidden; }
.dragon-beam {
  position: fixed; width: 14px; margin-left: -7px; border-radius: 10px;
  transform-origin: 50% 100%; opacity: 0;
}
.dragon-beam.up {
  height: 180px; margin-top: -180px;
  background: linear-gradient(to top, rgba(120, 230, 170, .95), rgba(120, 230, 170, 0));
  box-shadow: 0 0 22px rgba(95, 174, 134, .8);
  animation: dg-beam-up 1.1s ease-out forwards;
}
.dragon-beam.down {
  height: 150px; transform-origin: 50% 0%;
  background: linear-gradient(to bottom, rgba(255, 170, 90, .95), rgba(208, 70, 40, .85) 45%, rgba(208, 70, 40, 0));
  box-shadow: 0 0 22px rgba(208, 80, 40, .75);
  animation: dg-beam-down 1.1s ease-out forwards;
}
@keyframes dg-beam-up { 0% { opacity: 0; transform: scaleY(.1); } 25% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.15); } }
@keyframes dg-beam-down { 0% { opacity: 0; transform: scaleY(.1); } 25% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.1) scaleX(1.6); } }

.dragon-spark {
  position: fixed; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  opacity: 0; animation: dg-spark 1.1s ease-out forwards;
}
.dragon-spark.up { background: #9ff0c4; box-shadow: 0 0 8px #5fae86; }
.dragon-spark.down { background: #ffb36b; box-shadow: 0 0 8px #d0603c; }
@keyframes dg-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
  .dg-wing { animation: none; }
}

/* Знак в шапке — тот же дракон, неподвижный */
.brand-dragon { width: 46px; height: auto; display: inline-block; vertical-align: middle; margin: -6px 0; }
.brand-dragon .dg-wing { animation: none; }

/* ── Заставка при открытии кабинета ─────────────────────────────────────
   Дракон по центру, под ним — настоящий шаг загрузки. Тёмная в обеих
   темах, как и полосы кабинета: это рамка, а не рабочая область */
#splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #11141b; color: #eef1f6;
  transition: opacity .45s ease, visibility .45s;
}
#splash.out { opacity: 0; visibility: hidden; }
.splash-glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 178, 106, .16), rgba(216, 178, 106, 0) 65%);
  top: 50%; left: 50%; transform: translate(-50%, -62%);
}
.splash-art { width: min(260px, 64vw); position: relative; }
.splash-art img, .splash-art svg { width: 100%; height: auto; display: block; }
.splash-art .dg-wing { animation-duration: 2.6s; }
.splash-art .dg-candles rect { animation: dg-candle 2.6s ease-in-out infinite; }
.splash-art .dg-candles rect:nth-of-type(2) { animation-delay: .3s; }
.splash-art .dg-candles rect:nth-of-type(3) { animation-delay: .6s; }
.splash-art .dg-candles rect:nth-of-type(4) { animation-delay: .9s; }
@keyframes dg-candle { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.splash-name {
  margin: 14px 0 0; font: 700 22px/1 'Unbounded', 'Manrope', -apple-system, sans-serif; letter-spacing: -.02em;
}
#splash-text { margin: 10px 0 0; color: #a3acbf; font: 500 15px/1.4 'Manrope', -apple-system, sans-serif; min-height: 1.4em; }
#splash-text.in { animation: splash-in .35s ease-out; }
@keyframes splash-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.splash-dots { display: flex; gap: 6px; margin-top: 14px; }
.splash-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d8b26a; opacity: .3; animation: splash-dot 1.2s ease-in-out infinite; }
.splash-dots i:nth-child(2) { animation-delay: .2s; }
.splash-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes splash-dot { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .splash-art .dg-wing, .splash-art .dg-candles rect, .splash-dots i, #splash-text.in { animation: none; }
}

/* ── Объёмный дракон ─────────────────────────────────────────────────────
   Пока модель грузится, в сцене стоит рисованный дракон: место не пустует
   и страница не прыгает, когда 3D наконец встанет */
.dragon-stage {
  position: relative; width: 100%; max-width: 920px; margin: 28px auto 0;
  aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 45%, #1a2030, #0d1016);
  display: grid; place-items: center;
}
.dragon-stage > img { width: 46%; opacity: .55; transition: opacity .5s ease; }
.dragon-stage.ready > img { opacity: 0; }
.dragon-stage canvas { position: absolute; inset: 0; }

#dragon3d {
  position: fixed; right: 12px; bottom: 12px; z-index: 40;
  width: 300px; height: 170px; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
#dragon3d.ready { opacity: 1; }
@media (max-width: 700px) { #dragon3d { width: 200px; height: 120px; bottom: 76px; } }