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

.video-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* Center the video on narrow viewports so the packet stays visible */
@media (max-width: 768px) {
  .video-bg video {
    object-position: center center;
  }
}

.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 1;
}

/* ============================================================
   HERO
   Packet in the video sits ~45-75% down the frame.
   Hero content is constrained to the top ~38% of viewport
   so the ELYXR wordmark never overlaps the packet.

   Fluid scaling: 375px -> 1440px -> 2560px
============================================================ */

.hero {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(72px, 7.2vw, 104px);
  /* Prevent hero content from ever exceeding top 36% of viewport */
  max-height: 100vh;
  pointer-events: none;
}

/* Badge */
.badge {
  border-radius: var(--pill);
  padding: 5px 6px 5px 5px;
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  margin-bottom: clamp(10px, 1.4vw, 20px);
  pointer-events: all;
}

.badge-tag {
  background: rgba(255, 255, 255, 0.90);
  color: var(--obsidian);
  border-radius: var(--pill);
  padding: clamp(4px, 0.4vw, 5px) clamp(10px, 1.1vw, 16px);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: clamp(11px, 1.05vw, 15px);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
  padding-right: clamp(6px, 0.8vw, 12px);
  white-space: nowrap;
}

/* Wordmark
   375px  -> ~80px   (80 / 375 = ~21vw, but clamp floors it)
   768px  -> ~123px  (16 * 7.68)
   1024px -> ~164px
   1440px -> ~230px
   2560px -> 340px   (cap)
*/
.hero-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: normal;
  font-size: min(clamp(80px, 16vw, 340px), 22vh);
  line-height: 1;
  letter-spacing: clamp(0.12em, 0.24em, 0.24em);
  text-align: center;
  color: #ffffff;
  margin-top: min(clamp(20px, 4.2vw, 60px), 5vh);
  margin-bottom: min(clamp(8px, 1.2vw, 18px), 1.5vh);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(50px);
}

/* Tagline */
.hero-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  font-size: min(clamp(10px, 1.5vw, 30px), 2.5vh);
  letter-spacing: clamp(0.12em, 0.26em, 0.26em);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  line-height: 1.4;
  padding: 0 20px;
}

/* ============================================================
   RESPONSIVE — PHONE (max-width: 600px)
============================================================ */
@media (max-width: 600px) {
  .hero {
    padding-top: 64px;
  }

  .badge {
    margin-bottom: 8px;
    max-width: calc(100vw - 32px);
  }

  .hero-wordmark {
    font-size: clamp(52px, 16vw, 90px);
    letter-spacing: 0.10em;
    margin-top: 12px;
    margin-bottom: 6px;
  }

  .hero-sub {
    font-size: clamp(9px, 2.8vw, 13px);
    letter-spacing: 0.12em;
    padding: 0 16px;
  }

  .badge-tag {
    font-size: 9px;
    padding: 4px 8px;
  }

  .badge-text {
    font-size: 10px;
    white-space: normal;
  }
}

/* ============================================================
   RESPONSIVE — TABLET (601px - 768px)
============================================================ */
@media (min-width: 601px) and (max-width: 768px) {
  .hero {
    padding-top: 76px;
  }

  .hero-wordmark {
    font-size: clamp(80px, 14vw, 120px);
    letter-spacing: 0.14em;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .hero-sub {
    font-size: clamp(11px, 1.8vw, 15px);
    letter-spacing: 0.14em;
  }
}

/* ============================================================
   RESPONSIVE — SMALL LAPTOP (769px - 1024px)
============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-wordmark {
    font-size: clamp(100px, 13vw, 160px);
    letter-spacing: 0.16em;
    margin-top: 20px;
    margin-bottom: 8px;
  }

  .hero-sub {
    font-size: clamp(12px, 1.4vw, 16px);
    letter-spacing: 0.18em;
    line-height: 1.3;
  }
}

/* ============================================================
   RESPONSIVE — STANDARD LAPTOP (1025px - 1280px)
============================================================ */
@media (min-width: 1025px) and (max-width: 1280px) {
  .hero-wordmark {
    font-size: clamp(140px, 14vw, 200px);
    letter-spacing: 0.2em;
    margin-top: 24px;
    margin-bottom: 10px;
  }

  .hero-sub {
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.3;
  }
}