/* ─── Shutter Transition ───────────────────────────────────────────────────── */

/* Fade in the new page on load */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: fadeIn 0s ease forwards;
}

/* ── Shutter overlay ── */
#shutter {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
  transform: translateZ(0);
}

#shutter.active {
  visibility: visible;
  pointer-events: all;
}

#shutter span {
  display: block;
  flex: 1;
  background: #1a1a1a; /* ← your brand color */
  transform: scaleX(0);
  transform-origin: left center;
}

#shutter.in span {
  animation: sIn 0.45s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

#shutter span:nth-child(1) { animation-delay:   0ms; }
#shutter span:nth-child(2) { animation-delay:  50ms; }
#shutter span:nth-child(3) { animation-delay: 100ms; }
#shutter span:nth-child(4) { animation-delay: 150ms; }
#shutter span:nth-child(5) { animation-delay: 200ms; }

@keyframes sIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  #shutter { display: none !important; }
}