/* ============================================================
   ChatBB Landing Page — Hero layering, header behaviour, CPL promo
   Base styles, tokens and section styles live in index.html.
   The site is light-only; colour tokens are defined once in
   index.html :root and referenced here via var().
   ============================================================ */

/* ---- Z-INDEX STACK (bottom to top) -------------------------
   0. .intelligence-network (document-level canvas grid)
   1. .hero (section)  -> inside: poster (1), video (2), scrim/vignette (3)
   2. all other sections and the footer
   10. .hero-content, .phone-stage (content layer)
   50. .nav (fixed header)
   ------------------------------------------------------------ */

/* ---- Static poster layer -----------------------------------
   Paints immediately. Hidden once video is ready and playing.
   Remains visible for: reduced-motion, mobile, Save-Data,
   JS-disabled, playback failure. */
.atmo-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../video/chatbb-hero-light-poster.webp") center / cover no-repeat;
  transition: opacity 0.6s ease-out;
}

/* Hide poster when video is playing successfully */
.atmo[data-video-ready="true"] .atmo-poster {
  opacity: 0;
  pointer-events: none;
}

/* ---- Video layer -------------------------------------------
   1080p H.264, above poster. No CSS filters or blur. */
.atmo-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Readability scrim -------------------------------------
   Lightens the headline column so text stays crisp over the video. */
.atmo-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    100deg,
    rgba(246, 244, 239, 0.75) 0%,
    rgba(246, 244, 239, 0.5) 35%,
    rgba(246, 244, 239, 0.2) 55%,
    transparent 70%
  );
  pointer-events: none;
}

/* Stacked hero (<=1080px): uniform veil for centered layout */
@media (max-width: 1080px) {
  .atmo-scrim {
    background: rgba(246, 244, 239, 0.6);
  }
}

/* ---- Vignette - topmost decorative layer ------------------- */
.atmo-vignette {
  z-index: 3;
  pointer-events: none;
}

/* ---- Intelligence Network canvas ---------------------------
   DOCUMENT-LEVEL: inserted at body start by intelligence-network.js,
   covers the entire page and sits beneath every section. */
.intelligence-network {
  z-index: 0 !important; /* the canvas carries an inline z-index */
  pointer-events: none !important;
  opacity: 0.6;
}

/* Ensure body has relative positioning for the canvas */
body {
  position: relative;
}

/* All sections and the footer sit above the document-level canvas */
section,
footer {
  position: relative;
  z-index: 2;
}

/* Hero: canvas shows through the atmosphere, content stays on top */
.hero {
  position: relative;
  z-index: 1;
}
.atmo {
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 10;
}
.hero-content,
.phone-stage {
  position: relative;
  z-index: 10;
}
.phone-container {
  position: relative;
  z-index: 10;
}
.hero-title {
  position: relative;
  z-index: 11;
}

/* Content surfaces above the canvas */
.fact-strip,
.domains,
.cpl-promo,
.trust,
.access-grid,
.cta-band {
  position: relative;
  z-index: 2;
}

/* ---- Static-only conditions --------------------------------
   Reduced motion, small mobile, Save-Data, video-off states. */

@media (prefers-reduced-motion: reduce) {
  .atmo-video { display: none; }
  .atmo-poster { opacity: 1 !important; }
  .intelligence-network { display: none; }
}

@media (max-width: 640px) {
  .atmo-video { display: none; }
  .atmo-poster { opacity: 1 !important; }
  .intelligence-network { display: none; }
}

.atmo[data-video-off="true"] .atmo-video {
  display: none;
}
.atmo[data-video-off="true"] .atmo-poster {
  opacity: 1 !important;
}

/* ============================================================
   HEADER BEHAVIOUR
   - main.js sets data-nav-hidden past 100px of scroll
   - the inline script pins the header with data-nav-force-visible
   - stays visible when the mobile menu is open or focus is inside
   - uses transform, not layout changes (no reflow)
   - respects reduced-motion
   ============================================================ */

.nav {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out, visibility 0.35s;
}

/* Hidden state - !important needed to override nav-enter animation forwards */
.nav[data-nav-hidden="true"] {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* Force visible when pinned, menu open or focused */
.nav[data-nav-force-visible="true"],
.nav:focus-within {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Reduced motion: instant state change */
@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none !important;
  }
}

/* ============================================================
   CPL SEASON PROMOTION SECTION
   Centered feature card between What You Can Ask and Sources.
   ============================================================ */

.cpl-section {
  padding: 40px 0;
}

.cpl-promo {
  position: relative;
  isolation: isolate;
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 56px;
  text-align: center;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(var(--gold-glow), 0.12);
  border-radius: 20px;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 32px rgba(34, 48, 60, 0.1);
}

@supports not (backdrop-filter: blur(1px)) {
  .cpl-promo {
    background: #FFFFFF;
  }
}

.cpl-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange); /* Trident Orange accent */
  margin-bottom: 14px;
}

.cpl-heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-1);
  margin: 0 0 12px 0;
}

.cpl-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px 0;
}

.cpl-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--accent-gradient);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  box-shadow: 0 2px 8px rgba(27, 102, 179, 0.25);
}

.cpl-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(27, 102, 179, 0.35);
}

.cpl-cta:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.cpl-cta svg {
  flex-shrink: 0;
}

/* Mobile: smaller padding and text */
@media (max-width: 640px) {
  .cpl-section {
    padding: 32px 0;
  }

  .cpl-promo {
    padding: 36px 24px;
    margin: 0 16px;
    border-radius: 16px;
  }

  .cpl-body {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .cpl-cta {
    padding: 12px 24px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpl-cta { transition: none; }
  .cpl-cta:hover { transform: none; }
}