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

/* ========== Loading overlay ========== */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.stage {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Landscape: constrain content to center 1920×1080 (16:9); edges outside are black */
.content-frame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 177.78vh); /* 16:9 scaled by viewport height */
  height: 100vh;
  overflow: hidden;
}

@media (orientation: portrait) {
  .content-frame {
    width: 100vw;
    left: 0;
    transform: none;
    height: 100vh;
    height: 100dvh; /* fits visible area on mobile (avoids address-bar overflow) */
  }
}

/* ========== Red background (always visible behind video) ========== */
.red-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.red-bg-layer .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* landscape: cover without stretching */
  object-position: center;
}

/* Portrait: stretch to fill when aspect ratio is more vertical than horizontal */
@media (orientation: portrait) {
  .red-bg-layer .bg-image {
    object-fit: fill;
  }
}

/* ========== Phase 1: Video ========== */
.video-phase {
  z-index: 1;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s ease-out;
}

.video-phase.fade-out {
  opacity: 0;
  pointer-events: none;
}

.video-container {
  position: relative;
  height: 100vh;
  width: 177.78vh; /* 16:9 - width scales with viewport height */
}

.video-container video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait: use dvh so video fits visible area (no bottom cut-off); fill height, crop sides */
@media (orientation: portrait) {
  .video-container {
    height: 100vh;
    height: 100dvh;
    width: 177.78vh;
    width: 177.78dvh; /* 16:9 with dvh height */
    transform: scale(1.02); /* slight overlap to hide sub-pixel gaps at top/bottom */
  }
}

/* ========== Top overlay (0-bg.png: always top layer, landscape only) ========== */
.top-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url('0-bg.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center top;
}

/* Hide 0-bg overlay when viewport is more vertical than horizontal (portrait) */
@media (orientation: portrait) {
  .top-overlay {
    display: none;
  }
}

/* ========== Center frame (1920×1080 / 16:9) ========== */
.center-frame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 160vh;
  height: 100vh;
  max-width: 100vw;
  z-index: 3;
  pointer-events: none;
}

.center-frame .discord-link {
  pointer-events: auto;
}

/* ========== Discord link (bottom right of center frame) ========== */
.discord-link {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  display: block;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transition: opacity 1s ease-in, transform 0.3s ease;
  transform-origin: bottom right;
}

.discord-link:hover {
  transform: scale(1.25);
}

.discord-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.post-video-phase.visible ~ .center-frame .discord-link {
  opacity: 1;
}

/* ========== Phase 2: Crypts over 5-BG ========== */
.post-video-phase {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in;
  overflow: hidden; /* clip text-image overflow in portrait when sized by height */
}

.post-video-phase.visible {
  opacity: 1;
  pointer-events: auto;
}

.post-video-phase .text-image {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  height: 90vh;
  min-height: 400px;
  width: auto;
  min-width: 400px;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transition: opacity 1s ease-in;
}

/* Portrait: size by height so text scales up (width was constraining it) - 25% smaller */
@media (orientation: portrait) {
  .post-video-phase .text-image {
    height: 63.75vh; /* 85vh * 0.75 */
    min-height: 300px; /* 400px * 0.75 */
    max-width: none;
  }
}

.post-video-phase.visible .text-image {
  opacity: 1;
  transition-delay: 0.2s;
}

.crypts-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 100%;
  height: 90vh;
  transform: translateY(-15vh);
}

.crypt {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  transform-origin: center center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.crypt-left,
.crypt-right {
  height: 50%;
}

.crypt-mid {
  height: 70%;
}

.crypt:hover {
  transform: scale(1.05);
}

.crypt img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.crypt-dark {
  position: relative;
  transition: opacity 0.3s ease;
}

.crypt-light {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.crypt:hover .crypt-dark {
  opacity: 0;
}

.crypt:hover .crypt-light {
  opacity: 1;
}

.post-video-phase .crypt {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.post-video-phase.visible .crypt {
  opacity: 1;
}

.post-video-phase.visible .crypt-left {
  transition-delay: 0.3s;
}

.post-video-phase.visible .crypt-mid {
  transition-delay: 0.5s;
}

.post-video-phase.visible .crypt-right {
  transition-delay: 0.7s;
}