/* ==========================================
   LAYOUT — container, stage shell
========================================== */

.container {
  width: 100%;
  max-width: 90.8%;
  margin-inline: auto;
  padding-inline: 2rem;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stage__video,
.stage__video--fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__video--fallback {
  background-image: linear-gradient(156.69deg, var(--color-navy) 48.5%, var(--color-blue) 99.8%);
}

.stage__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(156.69deg, var(--color-navy) 48.5%, var(--color-blue) 99.8%);
  mix-blend-mode: lighten;
  transition: opacity 0.6s ease;
}

body[data-scene]:not([data-scene="1"]) .stage__overlay,
body.capien-home.is-intro-ready .stage__overlay {
  opacity: 1;
}

.stage__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}