/* =====================================================================
   Gringotts dragon logo with the eye lit, and the loading screen.
   The website (web/public/site/index.html and its mirrors) carries an inline copy of these rules.

   The logo is two images: the logo itself, and a small glow image of the lit head laid over it,
   plus a soft halo. The glow fades in and out with CSS alone.

   <span class="dragon-logo" data-mode="steady" style="--dl-boost: 1.4">
     <img class="dl-base" src="/images/dragon-logo-base.webp?v=5" alt="Gringotts" width="1024" height="520">
     <span class="dl-lit" aria-hidden="true"><img class="dl-glow" src="/images/dragon-logo-glow.webp?v=5" alt=""><span class="dl-halo"></span></span>
     <span class="dl-burst" aria-hidden="true"></span>
   </span>

   data-mode: breathe (slow pulse), steady (always lit), react (rests at half, wakes on hover), off.
   --dl-strength: glow strength (1.6 = 160%). --dl-speed: one breath. --dl-boost: wider, brighter halo
   for small logos so the eye still reads at 40 px. Use the -cut images on dark backgrounds.
   ===================================================================== */
.dragon-logo {
    --dl-strength: 1.6;
    --dl-speed: 5s;
    --dl-boost: 1;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    aspect-ratio: 1024 / 520;
    line-height: 0;
}
.dragon-logo .dl-base { display: block; width: 100%; height: 100%; }
.dragon-logo .dl-lit { position: absolute; inset: 0; pointer-events: none; }
/* The glow image covers the head: 210 x 155 px at (470, 50) in the 1024 x 520 logo. */
.dragon-logo .dl-glow {
    position: absolute;
    left: 45.898%; top: 9.615%;
    width: 20.508%; height: 29.808%;
    max-width: none;
    opacity: min(1, var(--dl-strength));
}
.dragon-logo .dl-halo, .dragon-logo .dl-burst {
    position: absolute;
    left: 57.13%; top: 22.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 5%, rgba(140, 215, 255, 0.8) 12%, rgba(40, 140, 255, 0.38) 32%, rgba(40, 140, 255, 0) 66%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.dragon-logo .dl-halo { width: calc(9% * var(--dl-boost)); opacity: min(1, calc(0.34 * var(--dl-strength) * var(--dl-boost))); }
.dragon-logo .dl-burst { width: 26%; opacity: 0; }

.dragon-logo[data-mode="breathe"] .dl-lit { animation: dl-breathe var(--dl-speed) ease-in-out infinite; }
.dragon-logo[data-mode="off"] .dl-lit { opacity: 0; }
.dragon-logo[data-mode="react"] .dl-lit { opacity: 0.5; transition: opacity 0.45s ease; }
.dragon-logo[data-mode="react"]:hover .dl-lit { opacity: 1; }
/* Moments: a flare for success (signed in, unlocked), a dim flicker for a failed attempt. */
.dragon-logo.dl-flare .dl-burst { animation: dl-flare 1.3s ease-out; }
.dragon-logo.dl-flare .dl-lit { animation: none; opacity: 1; }
.dragon-logo.dl-dim .dl-lit { animation: dl-dim 1s ease-in-out; }
@keyframes dl-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes dl-flare {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes dl-dim { 0% { opacity: 1; } 20% { opacity: 0.1; } 35% { opacity: 0.6; } 50% { opacity: 0.05; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .dragon-logo[data-mode="breathe"] .dl-lit, .dragon-logo.dl-flare .dl-burst, .dragon-logo.dl-dim .dl-lit { animation: none; }
    .dragon-logo[data-mode="react"] .dl-lit { transition: none; }
}

/* ---------- Loading screen ----------
   Shown over the page for three seconds: the eye glows once while the bar fills, then the screen
   fades. /js/dragon-logo.js drives it; if that script never runs, the screen still lifts after 7 s. */
.vault-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: radial-gradient(circle at 50% 45%, #17345f 0%, #0b1730 68%);
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
    animation: vl-failsafe 0.45s ease 7s forwards;
}
.vault-loader.vl-done { opacity: 0; visibility: hidden; pointer-events: none; }
.vault-loader .dragon-logo { height: clamp(100px, 22vw, 190px); width: auto; filter: drop-shadow(0 0 18px rgba(59, 111, 212, 0.45)); }
.vault-loader .vl-word {
    font: 700 clamp(0.85rem, 1.6vw, 1.05rem) / 1 "Cinzel", "Trajan Pro", Georgia, serif;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    color: #8fb4f5;
}
.vault-loader .vl-bar { width: 180px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(143, 180, 245, 0.18); }
.vault-loader .vl-bar i { display: block; width: 0; height: 100%; background: #5cb3ff; transition: width 0.1s linear; }
@keyframes vl-failsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .vault-loader .vl-bar i { transition: none; }
}