/* ====== INTRO — VIDEO BG + PARAGRAPH REVEAL ====== */

#intro {
  position: relative;
  overflow: hidden;
  background-color: #0B1026;
}

/* ── Video background ───────────────────────────── */

.intro-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

/* ── Text content ───────────────────────────────── */

.intro-body {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--site-gutter);
  padding-bottom: calc(var(--space-xl) * 2.2);
  max-width: 680px;
}

.intro-para {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2.1vw, 1.3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.38;
  color: #fff;
  margin-bottom: 1.5em;
}

.intro-para:last-child {
  margin-bottom: 0;
}

.intro-para.intro-lead {
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  line-height: 1.35;
}

/* Accent spans (yellow on dark) */
.intro-para [data-accent] {
  color: var(--color-yellow, #F5C518);
}

/* ── Reveal animation ───────────────────────────── */

.intro-para[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.intro-para[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Reduced motion ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .intro-para[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ── Mobile ─────────────────────────────────────── */

@media (max-width: 768px) {
  /* Replace video with poster image on mobile */
  .intro-video-wrap {
    display: none;
  }

  #intro {
    background-image: url('../assets/Parliament-Float-a.webp');
    background-size: cover;
    background-position: center;
  }

  /* Gradient overlay weighted to the bottom-left where the text sits,
     fading clear toward the top-right so the photographic mood is preserved. */
  #intro::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top right,
      rgba(11, 16, 38, 0.85) 0%,
      rgba(11, 16, 38, 0.6) 35%,
      rgba(11, 16, 38, 0.25) 70%,
      rgba(11, 16, 38, 0) 100%
    );
  }

  .intro-body {
    padding: var(--space-lg) var(--site-gutter);
    padding-top: 10vh;
    padding-bottom: 10vh;
  }
}