/* №600.14 — три лоадери Кавушки. Підключення: <link rel="stylesheet" href="loaders/loaders.css"> + loaders.js.
   Inline SVG/CSS; картинки: wordmark-neon.png (58 КБ, №1) і loaders/cup-320.webp (22 КБ, №2). Токени — з tokens.css (--kv-*), з запасними значеннями. */
.kvl {
  --c-coal: var(--kv-coal, #191919); --c-neon: var(--kv-neon, #F2469D); --c-glow: var(--kv-glow, #FB73B1);
  --c-ember: var(--kv-ember, #F7804D); --c-flour: var(--kv-flour, #F4EFEA); --c-graphite: var(--kv-graphite, #313639);
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4vh, 36px); background: var(--c-coal); color: var(--c-flour);
  opacity: 1; transition: opacity 400ms cubic-bezier(.2, .8, .2, 1);
  overflow: hidden; padding: 0 16px;
}
.kvl.is-out { opacity: 0; pointer-events: none; }
.kvl[hidden] { display: none; }
html.kvl-lock { overflow: hidden; }
.kvl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kvl-cap { margin: 0; font: 700 clamp(15px, 2.2vw, 19px)/1 var(--kv-font-display, "Comfortaa", system-ui, sans-serif); letter-spacing: .32em; text-transform: uppercase; color: var(--c-flour); opacity: .62; padding-left: .32em; }
.kvl svg { display: block; overflow: visible; }

/* ── 1 · Неонова вивіска: та сама мова, що на першому екрані (трубка → розжарення з нерівними спалахами) ── */
.kvl-sign { position: relative; width: min(78vw, 560px); aspect-ratio: 1379 / 393; }
.kvl-sign img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kvl-sign .glass { filter: saturate(.25) brightness(.42); }
.kvl-sign .light { opacity: 0; filter: url(#kvl-neon) saturate(1.1); animation: kvl-ignite 3.6s linear infinite; }
.kvl-sign .wash { position: absolute; left: -22%; top: -70%; width: 144%; height: 240%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(242, 70, 157, .42), rgba(242, 70, 157, .13) 55%, transparent);
  animation: kvl-ignite 3.6s linear infinite; }
/* 0–32 % вмикається (спалахи), 32–62 % горить (~1 с), 62–74 % гасне з осіканням, 74–97 % темно, далі знову */
@keyframes kvl-ignite {
  0% { opacity: 0; } 3% { opacity: .85; } 5% { opacity: .05; } 9% { opacity: .9; } 11% { opacity: .15; }
  14% { opacity: .15; } 18% { opacity: 1; } 27% { opacity: .55; } 29% { opacity: 1; } 32% { opacity: 1; }
  62% { opacity: 1; } 64% { opacity: .35; } 66% { opacity: .9; } 68% { opacity: .2; } 70% { opacity: .55; } 74% { opacity: 0; }
  100% { opacity: 0; }
}

/* ── 2 · Наш стаканчик (кадр рендера seq-a): дихає, над ним жива пара, під ним м'яка тінь і рожева лінія ── */
.kvl-2 { background: radial-gradient(ellipse 70% 60% at 50% 52%, #2A1D18 0%, #1F1715 55%, var(--c-coal) 100%); }
.kvl-stage { position: relative; width: clamp(130px, 30vw, 190px); }
.kvl-stage .steam { position: absolute; left: 50%; bottom: calc(100% - 14px); width: 78%; height: auto; transform: translateX(-50%); pointer-events: none; overflow: visible; }
.kvl-stage .strand { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: kvl-rise 4.2s ease-in-out infinite; }
.kvl-stage .s2 { animation-delay: 1.4s; animation-duration: 4.6s; } .kvl-stage .s3 { animation-delay: 2.7s; animation-duration: 3.9s; }
.kvl-stage .cupimg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: kvl-breathe 3.4s ease-in-out infinite alternate; }
.kvl-stage .shadow { position: absolute; left: 50%; bottom: -14px; width: 120%; height: 26px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); animation: kvl-shadow 3.4s ease-in-out infinite alternate; }
.kvl-bar { position: relative; width: clamp(96px, 22vw, 150px); height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(244, 239, 234, .12); overflow: hidden; }
.kvl-bar i { position: absolute; inset: 0; background: var(--c-neon); box-shadow: 0 0 10px rgba(242, 70, 157, .7); transform-origin: 0 50%; animation: kvl-bar 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes kvl-breathe { from { transform: scale(1); } to { transform: scale(1.015); } }
@keyframes kvl-shadow { from { opacity: .9; transform: translateX(-50%) scaleX(1); } to { opacity: .7; transform: translateX(-50%) scaleX(.96); } }
@keyframes kvl-rise {
  0% { opacity: 0; transform: translateY(26px) scale(.85, .7); }
  25% { opacity: .75; }
  70% { opacity: .35; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.18, 1.1); }
}
@keyframes kvl-bar { 0% { transform: scaleX(0); opacity: 1; } 78% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ── 3 · Слова з біжучого рядка: Піца ♥ Сніданки ♥ Хлібчик ♥ Забаганки — по одному, серце б'ється між ними ── */
.kvl-words { display: grid; place-items: center; height: 1.3em; overflow: hidden; font: 700 clamp(44px, 12.5vw, 110px)/1.3 var(--kv-font-display, "Comfortaa", "Rubik", system-ui, sans-serif);
  letter-spacing: .02em; padding: 0 .1em; }
.kvl-words > * { grid-area: 1 / 1; white-space: nowrap; }
.kvl-words .w { color: var(--c-neon); text-shadow: 0 0 14px rgba(242, 70, 157, .55); opacity: 0; transform: translateY(105%) skewY(7deg); animation: kvl-word 4.4s cubic-bezier(.16, 1, .3, 1) infinite; }
.kvl-words .w:nth-child(2) { animation-delay: 1.1s; } .kvl-words .w:nth-child(3) { animation-delay: 2.2s; } .kvl-words .w:nth-child(4) { animation-delay: 3.3s; }
.kvl-words .h { width: .5em; height: .5em; fill: var(--c-neon); filter: drop-shadow(0 0 10px rgba(242, 70, 157, .7)); transform: scale(0); animation: kvl-heart 1.1s ease-in-out infinite; }
@keyframes kvl-word {
  0% { opacity: 0; transform: translateY(105%) skewY(7deg); }
  4% { opacity: 1; transform: translateY(0) skewY(0); }
  15% { opacity: 1; transform: translateY(0) skewY(0); }
  19% { opacity: 0; transform: translateY(-105%) skewY(-7deg); }
  100% { opacity: 0; transform: translateY(-105%) skewY(-7deg); }
}
@keyframes kvl-heart { 0%, 78% { transform: scale(0); } 86% { transform: scale(1.35); } 93% { transform: scale(.95); } 100% { transform: scale(0); } }

/* без руху: статичний стан */
@media (prefers-reduced-motion: reduce) {
  .kvl-sign .light, .kvl-sign .wash { animation: none; opacity: 1; }
  .kvl-stage .cupimg, .kvl-stage .shadow, .kvl-bar i { animation: none; }
  .kvl-stage .strand { animation: none; opacity: .4; }
  .kvl-words .w, .kvl-words .h { animation: none; }
  .kvl-words .w:first-child { opacity: 1; transform: none; }
  .kvl { transition-duration: 120ms; }
}