/* ==========================================================
   LOADER — paharul se umple cu progresul real al încărcării
   ========================================================== */

html.is-loading, html.is-loading body { overflow: hidden; }

.loader { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
html.is-loading .loader { pointer-events: auto; }
.loader[hidden] { display: none; }

.loader__panel { position: absolute; inset: 0; will-change: transform; }
.loader__panel--back { background: linear-gradient(160deg, #ff7a2e, var(--spritz-deep) 60%, var(--red)); }
.loader__panel--front {
  display: grid; place-items: center;
  background:
    radial-gradient(50% 40% at 50% 45%, rgba(255, 90, 31, .22), transparent 70%),
    #170d11;
  color: var(--cream);
}
.loader__panel--front::after { /* granulație fină */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.loader__stage { position: relative; display: grid; justify-items: center; gap: 4px; }
.loader__glass { width: clamp(150px, 28vw, 230px); height: auto; overflow: visible; animation: loader-float 3.2s ease-in-out infinite; }
@keyframes loader-float { 50% { transform: translateY(-8px) rotate(-1.5deg); } }

.loader__outline { fill: none; stroke: var(--cream); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.loader__shine { fill: none; stroke: rgba(253, 240, 231, .35); stroke-width: 5; stroke-linecap: round; }

/* --p = progresul (0..1), setat din js/loader.js. Unitățile sunt unități SVG. */
.loader { --p: 0; }
.loader__liquid { transform: translateY(calc((1 - var(--p)) * 138px)); transition: transform 120ms linear; }
.loader__wave { fill: url(#loader-liquid); animation: loader-wave 1.6s linear infinite; }
.loader__wave--back { fill: #ff9a4a; opacity: .55; animation: loader-wave-back 2.4s linear infinite; }
@keyframes loader-wave { to { transform: translateX(-100px); } }
@keyframes loader-wave-back { from { transform: translate(-100px, -4px); } to { transform: translate(0, -4px); } }

.loader__bubbles circle { fill: rgba(255, 241, 219, .75); animation: loader-bubble 2.2s ease-in infinite; transform-box: fill-box; }
.loader__bubbles circle:nth-child(2) { animation-delay: -.6s; animation-duration: 1.8s; }
.loader__bubbles circle:nth-child(3) { animation-delay: -1.2s; animation-duration: 2.6s; }
.loader__bubbles circle:nth-child(4) { animation-delay: -.3s; animation-duration: 1.6s; }
.loader__bubbles circle:nth-child(5) { animation-delay: -1.6s; animation-duration: 2s; }
.loader__bubbles circle:nth-child(6) { animation-delay: -.9s; animation-duration: 2.4s; }
@keyframes loader-bubble {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-110px) scale(1.1); opacity: 0; }
}

.loader__slice { transform-box: fill-box; transform-origin: center; animation: loader-slice 2.6s ease-in-out infinite; }
@keyframes loader-slice { 50% { transform: rotate(14deg) translateY(-2px); } }

.loader__count {
  margin: 0;
  font-family: var(--font-bubble); font-size: clamp(64px, 13vw, 140px); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--spritz-deep), 0 8px 0 #7a1a0c, 0 18px 30px rgba(0, 0, 0, .45);
}
.loader__pct { font-size: .45em; margin-left: 4px; color: var(--spritz); text-shadow: none; }

/* Fără GSAP: ieșire simplă din CSS */
.loader.is-done-css .loader__panel { transform: translateY(-100%); transition: transform 800ms cubic-bezier(.76, 0, .24, 1); }
.loader.is-done-css .loader__panel--back { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .loader__glass, .loader__wave, .loader__bubbles circle, .loader__slice { animation: none; }
}