/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: black;
}

/* Container */
.media-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Shared media */
.bg-media,
.fallback-gif,
.placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder (visible first) */
.placeholder {
  filter: blur(20px);
  transform: scale(1.1); /* prevents blur edges */
  transition: opacity 0.8s ease;
  z-index: 1;
}

/* Video initially hidden */
.bg-media {
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
}

/* When loaded */
.media-container.loaded .bg-media {
  opacity: 1;
}

.media-container.loaded .placeholder {
  opacity: 0;
}

/* Fallback GIF */
.fallback-gif {
  display: none;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .bg-media {
    display: none;
  }

  .placeholder {
    opacity: 0;
  }

  .fallback-gif {
    display: block;
  }
}