/* =====================================================================
   Minoo Brow Bar — Cinematic splash overlay
   2-second branded intro with a brush hand drawing the "M",
   trailing sparkles, and a shimmer reveal of the wordmark.
   ===================================================================== */
:root {
  --mbb-splash-bg-1:    #0a0810;
  --mbb-splash-bg-2:    #1a0e14;
  --mbb-splash-accent:  #e0a3ad;
  --mbb-splash-accent-2:#c46a76;
  --mbb-splash-gold:    #c9b58a;
}

#mbb-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(224, 163, 173, 0.20), transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(201, 181, 138, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), transparent 70%),
    linear-gradient(180deg, var(--mbb-splash-bg-1), var(--mbb-splash-bg-2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  opacity: 1;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
#mbb-splash.mbb-splash-out {
  opacity: 0;
  pointer-events: none;
}

/* Soft animated glow behind the logo */
#mbb-splash::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 163, 173, 0.28), transparent 65%);
  filter: blur(40px);
  animation: mbbGlowPulse 2.2s ease-in-out infinite;
}

#mbb-splash .mbb-stage {
  position: relative;
  width: 260px;
  height: 260px;
  display: grid;
  place-items: center;
  z-index: 2;
}

/* The SVG canvas where the M gets drawn */
#mbb-splash svg.mbb-art {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The M's stroke uses dash animation to "draw" itself */
#mbb-splash .mbb-letter {
  fill: none;
  stroke: url(#mbbStrokeGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: mbbDrawM 1.4s cubic-bezier(0.55, 0, 0.35, 1) 0.2s forwards;
  filter: drop-shadow(0 0 12px rgba(224, 163, 173, 0.55));
}

/* A subtle decorative arc beneath the M */
#mbb-splash .mbb-underline {
  fill: none;
  stroke: var(--mbb-splash-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0.7;
  animation: mbbDrawLine 0.7s ease-out 1.2s forwards;
}

/* The brush tip that traces the M */
#mbb-splash .mbb-brush {
  position: absolute;
  width: 56px; height: 56px;
  top: 50%; left: 50%;
  margin-top: -28px;
  margin-left: -28px;
  font-size: 38px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform-origin: 25% 75%;
  animation: mbbBrushPath 1.4s cubic-bezier(0.55, 0, 0.35, 1) 0.2s forwards;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* Sparkles emit from the brush tip */
#mbb-splash .mbb-sparkle {
  position: absolute;
  width: 8px; height: 8px;
  top: 50%; left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,0));
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--mbb-splash-accent));
}

#mbb-splash .mbb-sparkle.s1 { animation: mbbSparkle 1.2s 0.6s ease-out forwards; --tx: -90px; --ty: -120px; }
#mbb-splash .mbb-sparkle.s2 { animation: mbbSparkle 1.1s 0.7s ease-out forwards; --tx:  70px; --ty: -100px; }
#mbb-splash .mbb-sparkle.s3 { animation: mbbSparkle 1.0s 0.85s ease-out forwards; --tx:  100px; --ty:  40px; }
#mbb-splash .mbb-sparkle.s4 { animation: mbbSparkle 1.2s 1.0s ease-out forwards; --tx: -110px; --ty:  60px; }
#mbb-splash .mbb-sparkle.s5 { animation: mbbSparkle 0.9s 1.15s ease-out forwards; --tx:    0; --ty: -130px; }
#mbb-splash .mbb-sparkle.s6 { animation: mbbSparkle 1.0s 1.25s ease-out forwards; --tx:  130px; --ty:  -10px; }
#mbb-splash .mbb-sparkle.s7 { animation: mbbSparkle 1.3s 1.35s ease-out forwards; --tx: -130px; --ty:   0; }
#mbb-splash .mbb-sparkle.s8 { animation: mbbSparkle 1.1s 1.45s ease-out forwards; --tx:   60px; --ty:  120px; }

/* Wordmark — reveals with a shimmer wipe */
#mbb-splash .mbb-name {
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  margin: 1.4rem 0 0.2rem;
  background: linear-gradient(110deg, #fff 35%, var(--mbb-splash-accent) 50%, #fff 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: mbbNameIn 0.65s 1.35s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             mbbShimmer 2s 1.7s linear infinite;
  z-index: 2;
}
#mbb-splash .mbb-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--mbb-splash-accent);
  opacity: 0;
  animation: mbbNameIn 0.55s 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 2;
}

/* Bottom hairline progress bar */
#mbb-splash .mbb-progress {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 1.5px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
#mbb-splash .mbb-progress::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--mbb-splash-accent), var(--mbb-splash-gold), transparent);
  transform: translateX(-100%);
  animation: mbbProgress 2s 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------- Keyframes ---------- */
@keyframes mbbDrawM {
  to { stroke-dashoffset: 0; }
}
@keyframes mbbDrawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes mbbBrushPath {
  /* The brush follows the M's strokes: left up, down, up, down (4 segments) */
  0%   { opacity: 0; transform: translate(-65px, 30px) rotate(-12deg); }
  10%  { opacity: 1; }
  25%  { transform: translate(-65px, -45px) rotate(-8deg); }
  50%  { transform: translate(-15px,  30px) rotate(5deg); }
  75%  { transform: translate( 35px, -45px) rotate(-8deg); }
  95%  { opacity: 1; transform: translate( 65px,  30px) rotate(12deg); }
  100% { opacity: 0; transform: translate( 80px,  35px) rotate(20deg); }
}
@keyframes mbbSparkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  20% { opacity: 1; transform: scale(1.2); }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.3);
  }
}
@keyframes mbbNameIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mbbShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes mbbGlowPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50%      { transform: scale(1.05); opacity: 0.9; }
}
@keyframes mbbProgress {
  to { transform: translateX(0); }
}

@media (max-width: 480px) {
  #mbb-splash .mbb-stage { width: 200px; height: 200px; }
  #mbb-splash .mbb-name  { font-size: 1.8rem; }
  #mbb-splash::before    { width: 220px; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  #mbb-splash .mbb-letter,
  #mbb-splash .mbb-underline,
  #mbb-splash .mbb-brush,
  #mbb-splash .mbb-sparkle,
  #mbb-splash .mbb-name,
  #mbb-splash .mbb-tag,
  #mbb-splash .mbb-progress::after,
  #mbb-splash::before {
    animation: none !important;
  }
  #mbb-splash .mbb-letter,
  #mbb-splash .mbb-underline { stroke-dashoffset: 0; }
  #mbb-splash .mbb-name,
  #mbb-splash .mbb-tag { opacity: 1; }
}