/* ============================================================
   Bistro Fabrka — Splash Screen
   ============================================================ */

#splash {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .6s ease;
}
#splash.splash-out { opacity: 0; pointer-events: none; }

/* Background photo */
.splash-bg {
  position: absolute; inset: 0;
  background: url('assets/splash-bg.webp') center 60% / cover no-repeat;
}

/* Dark overlay for text readability */
.splash-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(14,10,9,.15) 0%, rgba(14,10,9,.72) 100%),
    linear-gradient(180deg, rgba(14,10,9,.55) 0%, rgba(14,10,9,.18) 45%, rgba(14,10,9,.72) 100%);
}

/* Steam wisps */
.splash-steam {
  position: absolute; bottom: 32%; left: 50%; transform: translateX(-50%);
  width: 160px; height: 160px; pointer-events: none;
}
.splash-steam .wisp {
  position: absolute; bottom: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,250,245,.65), rgba(255,248,240,.2) 45%, transparent 70%);
  filter: blur(14px); opacity: 0; transform: translate(-50%, 0) scale(.5);
  mix-blend-mode: screen; will-change: transform, opacity;
  animation: splash-steam-rise 5s ease-in infinite;
}
.splash-steam .w1 { left: 30%; width: 90px;  height: 90px;  animation-delay: 0s; }
.splash-steam .w2 { left: 55%; width: 120px; height: 120px; animation-delay: 1.2s; }
.splash-steam .w3 { left: 70%; width: 80px;  height: 80px;  animation-delay: 2.4s; }

/* Center content */
.splash-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-align: center;
}
.splash-logo {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; background: #1a1614;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: splash-scale-in .6s cubic-bezier(.2,.8,.2,1) both;
}
.splash-title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(36px, 9vw, 58px);
  line-height: .92; letter-spacing: -.03em;
  color: #fff; margin: 18px 0 0;
  animation: splash-fade-up .6s ease .4s both;
}
.splash-title em { font-style: normal; color: #ff6b5e; }
.splash-tag {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  margin-top: 12px;
  animation: splash-fade-up .5s ease .7s both;
}

/* Progress bar */
.splash-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,.12);
}
.splash-bar {
  height: 100%; background: #D92B2B; border-radius: 0 2px 2px 0;
  width: 0; animation: splash-fill-bar 2.5s linear forwards;
}

/* ---- Keyframes ---- */
@keyframes splash-scale-in {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splash-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splash-steam-rise {
  0%   { opacity: 0;   transform: translate(-50%, 0)     scale(.45); }
  15%  { opacity: .75; }
  55%  { opacity: .45; transform: translate(calc(-50% + 20px), -38vh) scale(1.1); }
  100% { opacity: 0;   transform: translate(calc(-50% - 10px), -72vh) scale(1.6); }
}
@keyframes splash-fill-bar {
  from { width: 0; }
  to   { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #splash { transition: none; }
  .splash-steam { display: none; }
  .splash-logo, .splash-title, .splash-tag { animation: none; opacity: 1; transform: none; }
  .splash-bar { animation: splash-fill-bar 3.5s linear forwards; }
}