/* Full-screen slideshow styles */

:root {
  --transition-duration: 1000ms; /* fade duration */
  --display-interval: 6000ms;    /* time each slide is visible */
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Each slide covers the whole viewport and stacks on top of each other */
.slide {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: opacity;
  opacity: 0;
  transition: opacity var(--transition-duration) ease-in-out;
  z-index: 0;
}

/* Visible slide */
.slide.active {
  opacity: 1;
  z-index: 1;
}

/* Optional: add a subtle overlay if you want captions or better contrast */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* change to rgba(0,0,0,0.25) for darker overlay */
  pointer-events: none;
}

/* Make sure nothing scrolls */
body, html {
  overflow: hidden;
}