/* ── Splash / Logo Intro ── */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent, #56211d);
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash.splash--fade {
  opacity: 0;
  pointer-events: none;
}

.splash__logo {
  width: min(260px, 55vw);
  height: auto;
}

/* The drawing animation — stroke-dashoffset from full length to 0, then fade in the fill */
.splash__logo path {
  fill: #fef7e6;
  fill-opacity: 0;
  stroke: #fef7e6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12000;
  stroke-dashoffset: 12000;
  animation: 
    draw-logo 4.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    fill-in 0.8s 1.8s ease forwards;
}

@keyframes draw-logo {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-in {
  from { fill-opacity: 0; stroke-opacity: 1; }
  to   { fill-opacity: 1; stroke-opacity: 0; }
}

/* Prevent body scroll while splash is active */
body.splash-active {
  overflow: hidden;
}