/* ==========================================
   1. RESET & CORE STYLES
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #050508;
  color: #ffffff;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ==========================================
   2. ENTER SCREEN
   ========================================== */
#enter-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
  will-change: opacity, visibility;
}

#enter-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-text {
  font-family: 'Space Mono', monospace;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.03); text-shadow: 0 0 25px rgba(255, 255, 255, 0.9); }
}

/* ==========================================
   3. FIXED VIDEO BACKGROUND
   ========================================== */
.media-bg-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

.bg-media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  filter: brightness(0.55) contrast(1.05);
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.bg-media.fade-out {
  opacity: 0;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(5, 5, 8, 0.8) 100%);
  z-index: -1;
}

/* ==========================================
   4. SNAP SCROLL CONTAINER
   ========================================== */
.snap-container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.snap-container::-webkit-scrollbar {
  display: none;
}

section {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
}

section:nth-child(1),
section:nth-child(3) {
  align-items: center !important;
  justify-content: center !important;
}

section#section-1,
.snap-container > section:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-left: 9vw !important;
  padding-right: 20px !important;
}