/* =========================================================================
   Nest.IQ — Hub intro film overlay
   A polished, on-brand first-run overlay that auto-plays the launch film
   (muted, per autoplay policy) with unmute / skip / close affordances.
   Theme-aware via the shared tokens (porcelain in light, onyx in dark);
   focus-trapped, responsive, reduced-motion-safe. Scoped under .niq-intro.
   ========================================================================= */

.niq-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  /* Warm scrim — deep onyx wash that reads in both themes. */
  background: color-mix(in oklab, #0c0a07 84%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur, 0.7s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.niq-intro[data-open='true'] {
  opacity: 1;
  pointer-events: auto;
}

/* The framed "cinema" surface — a lifted porcelain/onyx card. */
.niq-intro__frame {
  position: relative;
  width: min(100%, 960px);
  max-height: calc(100dvh - clamp(2rem, 6vw, 5rem));
  display: flex;
  flex-direction: column;
  background: var(--ink-surface, #14181c);
  color: var(--on-ink, #f6f1e7);
  border: 1px solid color-mix(in oklab, var(--gold, #c9a24b) 38%, transparent);
  border-radius: var(--r-lg, 20px);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform var(--dur, 0.7s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--dur, 0.7s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.niq-intro[data-open='true'] .niq-intro__frame {
  transform: none;
  opacity: 1;
}

/* Header strip — nest mark + wordmark + close. */
.niq-intro__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(246, 241, 231, 0.14);
}
.niq-intro__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.niq-intro__mk {
  width: 26px;
  color: var(--clay, #c8552e);
  flex: none;
}
.niq-intro__mk svg {
  width: 100%;
  height: auto;
  display: block;
}
.niq-intro__wm {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--on-ink, #f6f1e7);
}
.niq-intro__wm .iq {
  font-family: var(--font-mono, monospace);
  font-size: 0.52em;
  color: var(--clay, #c8552e);
}
.niq-intro__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.55);
  margin-left: 0.35rem;
}

/* Media stage. */
.niq-intro__stage {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
.niq-intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Graceful-degradation poster (shown if the film is absent / fails). */
.niq-intro__fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(120% 120% at 78% -10%, rgba(201, 162, 75, 0.22), transparent 60%),
    radial-gradient(120% 120% at 12% 110%, rgba(14, 90, 82, 0.26), transparent 60%),
    var(--ink-surface-2, #20262c);
}
.niq-intro[data-fallback='true'] .niq-intro__fallback {
  display: flex;
}
.niq-intro[data-fallback='true'] .niq-intro__video {
  visibility: hidden;
}
.niq-intro__fallback-mk {
  width: 64px;
  color: var(--gold-soft, #e4cd96);
}
.niq-intro__fallback-mk svg {
  width: 100%;
  height: auto;
}
.niq-intro__fallback-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  color: var(--on-ink, #f6f1e7);
  max-width: 22ch;
}
.niq-intro__fallback-sub {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft, #e4cd96);
}

/* Controls bar. */
.niq-intro__controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  background: var(--ink-surface, #14181c);
  border-top: 1px solid rgba(246, 241, 231, 0.12);
}
.niq-intro__caption {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(246, 241, 231, 0.6);
  margin-right: auto;
  text-transform: none;
}

/* Buttons — quiet-luxury pill controls on the dark frame. */
.niq-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(246, 241, 231, 0.22);
  background: transparent;
  color: var(--on-ink, #f6f1e7);
  cursor: pointer;
  line-height: 1;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease,
    transform 0.22s ease;
}
.niq-intro__btn:hover {
  border-color: rgba(246, 241, 231, 0.6);
  background: rgba(246, 241, 231, 0.08);
  transform: translateY(-1px);
}
.niq-intro__btn svg {
  width: 15px;
  height: 15px;
  display: block;
}
.niq-intro__btn--primary {
  background: var(--clay, #c8552e);
  border-color: var(--clay, #c8552e);
  color: #fdf4ee;
}
.niq-intro__btn--primary:hover {
  background: var(--clay-deep, #a23e1f);
  border-color: var(--clay-deep, #a23e1f);
}
/* Icon-only close, top-right. */
.niq-intro__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(246, 241, 231, 0.22);
  background: transparent;
  color: var(--on-ink, #f6f1e7);
  cursor: pointer;
  flex: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.niq-intro__close:hover {
  border-color: rgba(246, 241, 231, 0.6);
  background: rgba(246, 241, 231, 0.08);
  transform: translateY(-1px);
}
.niq-intro__close svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Toggle the unmute label/icon based on the muted state on the root. */
.niq-intro .niq-intro__sound-on {
  display: none;
}
.niq-intro[data-muted='false'] .niq-intro__sound-on {
  display: inline;
}
.niq-intro[data-muted='false'] .niq-intro__sound-off {
  display: none;
}
.niq-intro .niq-intro__ico-muted {
  display: block;
}
.niq-intro .niq-intro__ico-unmuted {
  display: none;
}
.niq-intro[data-muted='false'] .niq-intro__ico-muted {
  display: none;
}
.niq-intro[data-muted='false'] .niq-intro__ico-unmuted {
  display: block;
}

/* Focus ring on the dark frame: warm gold for contrast. */
.niq-intro :focus-visible {
  outline: 2px solid var(--gold, #c9a24b);
  outline-offset: 3px;
  border-radius: var(--r-pill, 999px);
}

/* Lock background scroll while the overlay is open. */
html.niq-intro-lock,
html.niq-intro-lock body {
  overflow: hidden;
}

/* Responsive — stack the controls on the narrowest screens. */
@media (max-width: 460px) {
  .niq-intro__head {
    padding: 0.75rem 0.85rem;
  }
  .niq-intro__eyebrow {
    display: none;
  }
  .niq-intro__controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .niq-intro__caption {
    flex-basis: 100%;
    margin: 0 0 0.1rem;
  }
  .niq-intro__btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media print {
  .niq-intro {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .niq-intro,
  .niq-intro__frame {
    transition-duration: 0.001ms !important;
  }
}