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

html,
body {

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: black;

  font-family: Arial, sans-serif;
}

/* =======================================================
   FULLSCREEN TV
======================================================= */

.video-container {

  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: black;
}

/* =======================================================
   VIDEO
======================================================= */

video {

  position: absolute;

  top: 50%;
  left: 50%;

  width: 100vw;
  height: 100vh;

  object-fit: cover;

  transform:
    translate(-50%, -50%)
    scale(1);

  opacity: 0;

  transition:
    opacity 1.5s ease,
    transform 12s ease,
    filter 2s ease;

  will-change:
    transform,
    opacity,
    filter;

  filter:
    brightness(1)
    contrast(1)
    saturate(1.05);
}

/* =======================================================
   ACTIVE VIDEO
======================================================= */

video.active {

  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1.03);

  filter:
    brightness(1.02)
    contrast(1.04)
    saturate(1.08);
}

/* =======================================================
   DARK CINEMATIC OVERLAY
======================================================= */

.overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.08),
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.14)
    );

  pointer-events: none;

  z-index: 2;
}

/* =======================================================
   WARM RESTAURANT LIGHT
======================================================= */

.warm-light {

  position: absolute;

  top: -30%;

  left: -10%;

  width: 120%;

  height: 60%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,170,60,0.16),
      transparent 70%
    );

  animation:
    lightMove 14s ease-in-out infinite;

  z-index: 3;

  pointer-events: none;
}

@keyframes lightMove {

  0% {

    transform:
      translateX(-5%)
      translateY(0);
  }

  50% {

    transform:
      translateX(5%)
      translateY(2%);
  }

  100% {

    transform:
      translateX(-5%)
      translateY(0);
  }
}

/* =======================================================
   FLOATING PARTICLES
======================================================= */

.particles {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 4;
}

.particles::before,
.particles::after {

  content: "";

  position: absolute;

  width: 200%;
  height: 200%;

  background-image:
    radial-gradient(
      rgba(255,140,0,0.12) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

  animation:
    particlesMove 40s linear infinite;
}

.particles::after {

  opacity: 0.4;

  animation-duration: 65s;
}

@keyframes particlesMove {

  from {

    transform:
      translate(0,0);
  }

  to {

    transform:
      translate(-220px,-220px);
  }
}

/* =======================================================
   VIGNETTE
======================================================= */

.vignette {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle,
      transparent 55%,
      rgba(0,0,0,0.32)
    );

  pointer-events: none;

  z-index: 5;
}

/* =======================================================
   TV SAFE
======================================================= */

@media screen and (min-width: 1920px) {

  video {

    object-fit: cover;
  }
}