/* ============================================================
   Qualims — фирменный лоадер «плоскодонная колба»
   Цикл: наполнение → наклон → слив (вертикальная струя) → долив.
   Размер через --sz на .flask-load. Markup — см. низ файла.
   ============================================================ */
.flask-load { --sz: 76px; width: var(--sz); height: var(--sz); position: relative; display: inline-block; }
.flask-svg { width: 100%; height: 100%; overflow: hidden; display: block; }

.flask-rot   { transform-box: view-box; transform-origin: 50px 64px; animation: flaskCycle 4.6s ease-in-out infinite; }
.liquid-rot  { /* rigid with flask: shares one transform so clip & glass stay aligned (no spill) */ }
.liquid-rect { animation: liquidFill 4.6s ease-in-out infinite; }
.pour-counter{ transform-box: fill-box; transform-origin: 50% 0%; animation: pourCounter 4.6s ease-in-out infinite; }

.glass         { fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.glass-shine   { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; }
.liquid-fill   { fill: var(--accent); }
.liquid-surface{ fill: color-mix(in srgb, var(--accent) 70%, white); }
.pour { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: 50% 0; animation: pourStream 4.6s ease-in-out infinite; }
.drop { fill: var(--accent); opacity: 0; animation: dropFall 4.6s ease-in-out infinite; }
.drop2 { animation-delay: -4.32s; }

@keyframes flaskCycle   { 0%,24%{transform:rotate(0)} 38%,58%{transform:rotate(-38deg)} 74%,100%{transform:rotate(0)} }
@keyframes pourCounter  { 0%,24%{transform:rotate(0)} 38%,58%{transform:rotate(38deg)}  74%,100%{transform:rotate(0)} }
@keyframes liquidFill {
  0%{transform:translateY(34px)} 24%{transform:translateY(8px)} 38%{transform:translateY(8px)}
  58%{transform:translateY(46px)} 74%{transform:translateY(46px)} 100%{transform:translateY(34px)}
}
@keyframes pourStream {
  0%,42%{opacity:0;transform:scaleY(.15)} 47%,54%{opacity:1;transform:scaleY(1)} 59%,100%{opacity:0;transform:scaleY(.15)}
}
@keyframes dropFall {
  0%,44%{opacity:0;transform:translateY(0)} 50%{opacity:1;transform:translateY(13px)}
  57%{opacity:1;transform:translateY(33px)} 60%,100%{opacity:0;transform:translateY(39px)}
}
@media (prefers-reduced-motion: reduce) {
  .flask-rot,.liquid-rot,.liquid-rect,.pour,.drop,.pour-counter { animation: none; }
  .liquid-rect { transform: translateY(18px); }
}

/* ── Full-page / panel overlay ──────────────────────── */
.flask-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px); z-index: 20; }
.flask-overlay .msg { font-size: var(--text-sm); color: var(--ink-3); font-weight: 500; }

/* ── Inline (button / row) ──────────────────────────── */
.flask-inline { --sz: 18px; vertical-align: -4px; }

/*  MARKUP (copy as-is; scale via style="--sz:NNpx"):
<span class="flask-load" style="--sz:72px" role="status" aria-label="Загрузка">
  <svg class="flask-svg" viewBox="-34 -10 150 156">
    <defs><clipPath id="flaskIn"><path d="M44,16 L44,46 C44,50 24,60 21,86 C19,100 27,108 36,108 L64,108 C73,108 81,100 79,86 C76,60 56,50 56,46 L56,16 Z"/></clipPath></defs>
    <g class="flask-rot">
      <g clip-path="url(#flaskIn)"><g class="liquid-rot"><g class="liquid-rect">
        <rect class="liquid-fill" x="-5" y="0" width="110" height="150"/>
        <rect class="liquid-surface" x="-5" y="-3" width="110" height="6"/>
      </g></g></g>
      <path class="glass" d="M44,16 L44,46 C44,50 24,60 21,86 C19,100 27,108 36,108 L64,108 C73,108 81,100 79,86 C76,60 56,50 56,46 L56,16"/>
      <line class="glass" x1="40" y1="16" x2="60" y2="16"/>
      <path class="glass-shine" d="M48,22 C40,40 30,58 28,84"/>
      <g transform="translate(41,16)"><g class="pour-counter">
        <rect class="pour" x="-1.8" y="-1" width="3.6" height="30" rx="1.8"/>
        <circle class="drop" cx="0" cy="33" r="2.4"/>
        <circle class="drop drop2" cx="0.8" cy="33" r="1.8"/>
      </g></g>
    </g>
  </svg>
</span>
   NOTE: clipPath id must be unique per instance on a page (flaskIn, flaskIn2, …).
*/

/* Полноэкранный лоадер перехода между страницами (window.QLoader nav). */
.flask-nav-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: flask-nav-in .15s ease both;
}
@keyframes flask-nav-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flask-nav-overlay { animation: none; } }