/* Reset */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
}

/* Fullscreen container */
.video-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh; /* modern mobile-safe viewport */
  overflow: hidden;
  background: #000;
}

/* Video always covers */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

/* Shared logo positioning */
.video-logo,
.video-logo-link {
  position: absolute;
  left: var(--lx, 50%);
  top: var(--ly, 50%);
  transform: translate(-50%, -50%) scale(var(--ls, 1));
  max-width: 20vw;
  max-height: 20vw;
  
}

/* Static logo */
.video-logo {
  pointer-events: none;
  user-select: none;
}

/* Clickable logo */
.video-logo-link {
  display: inline-block;
  cursor: pointer;
  max-width: 8vw;
  max-height: 8vh;
}

.video-logo-link img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* Optional subtle hover effect (desktop only) */
@media (hover: hover) {
  .video-logo-link:hover {
    transform: translate(-50%, -50%) scale(calc(var(--ls, 1) * 1.05));
  }
}


/* ==========================
   MOBILE ADJUSTMENT (Option B)
   ========================== */

/* Landscape (desktop, phone turned sideways) */
@media (orientation: landscape) {
  .video-logo {
    max-width: 20vw;
	max-height: 20vw;
  }
  .video-logo-link {
    max-width: 6vw;
	max-height: 6vw;
  }
}

@media (orientation: portrait) {
  .video-logo {
    max-width: 30vw;
  }
  .video-logo-link {
    max-width: 10vw;
  }
}