/* Scoped Styles for Video Scrub Hero Section — Pure Scoped CSS Nesting */
.nior-video-hero-track {
  position: relative;
  height: 380vh;
  background-color: var(--nior-obsidian, #0c0d0e);
  color: var(--nior-white, #ffffff);

  .nior-video-hero-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Background Media Stack */
  .nior-video-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-color: var(--nior-obsidian, #0c0d0e);

    /* Poster Image (Default & Mobile Fallback) */
    .nior-video-hero-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      will-change: transform, opacity;
      transform: translateZ(0);
      transition: opacity 0.6s ease;
      opacity: 1;
      z-index: 2;
      filter: brightness(1.08) contrast(1.03);
    }

    /* Hardware Video Scrub Element */
    video.nior-video-hero-player {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      will-change: transform, opacity;
      transform: translateZ(0);
      opacity: 0;
      z-index: 1;
      transition: opacity 0.5s ease;
      filter: brightness(1.08) contrast(1.03);
    }

    /* Video active class reveals video over poster */
    &.is-video-primed {
      video.nior-video-hero-player {
        opacity: 1;
      }
      .nior-video-hero-poster {
        opacity: 0;
      }
    }

    /* Ambient Contrast Scrim Overlays — Completely Removed for 100% Full Brightness & Clarity */
    .nior-video-scrim-dark,
    .nior-video-scrim-radial,
    .nior-video-scrim-vignette {
      display: none;
    }
  }

  /* Center Brand Hero Title Card (Visible on Initial Entry) */
  .nior-hero-center-brand {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(92vw, 840px);
    height: -moz-fit-content;
    height: fit-content;
    z-index: 7;
    pointer-events: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
    opacity: 1;

    .nior-hero-center-brand__title {
      font-family: var(--font-serif, "Playfair Display", Georgia, serif);
      font-size: clamp(2.4rem, 5.2vw, 4.6rem);
      font-weight: 500;
      letter-spacing: 0.28em;
      padding-left: 0.28em;
      color: var(--nior-white, #ffffff);
      line-height: 1.15;
      text-transform: uppercase;
      text-shadow: 0 4px 35px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9);
    }

    .nior-hero-center-brand__divider {
      width: 70px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--nior-gold, #c9a25e), transparent);
      margin: 18px 0;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95));
    }

    .nior-hero-center-brand__tagline {
      font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
      font-size: clamp(0.72rem, 1.1vw, 0.92rem);
      font-weight: 600;
      letter-spacing: 0.42em;
      padding-left: 0.42em;
      text-transform: uppercase;
      color: var(--nior-champagne, #f4ebe1);
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 3px 8px rgba(0, 0, 0, 0.95),
        0 6px 20px rgba(0, 0, 0, 0.9);
    }
  }

  /* Staged Typography Overlay */
  .nior-video-hero-content {
    position: relative;
    z-index: 6;
    width: 100%;
    pointer-events: auto;
    padding-top: clamp(40px, 8vh, 80px);
  }

  .nior-video-hero-ui-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 960px;
    will-change: transform, opacity;
  }

  /* Staged Ingress Elements */
  .nior-hero-badge {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
  }

  .nior-hero-headline {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-size: clamp(2.8rem, 6.2vw, 5.8rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--nior-white, #ffffff);
    margin-top: 16px;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    will-change: transform, opacity;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);

    span.nior-text-gold {
      color: var(--nior-gold, #c9a25e);
      font-style: italic;
    }
  }

  .nior-hero-sub {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.7;
    color: var(--nior-white, #f0f2f5);
    max-width: 640px;
    margin-bottom: 36px;
    opacity: 0;
    transform: translateY(35px);
    will-change: transform, opacity;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
  }

  .nior-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;

    @media (max-width: 576px) {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;

      .nior-btn {
        width: 100%;
      }
    }
  }

  /* Floating Metrics Badge */
  .nior-hero-floating-card {
    position: absolute;
    bottom: clamp(30px, 5vh, 60px);
    right: clamp(20px, 4vw, 48px);
    background: rgba(20, 22, 24, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--nior-border, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 7;
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    will-change: transform, opacity;

    @media (max-width: 900px) {
      display: none;
    }

    .nior-hero-floating-card__stat {
      display: flex;
      flex-direction: column;

      .nior-stat-num {
        font-family: var(--font-serif, "Playfair Display", Georgia, serif);
        font-size: 26px;
        font-weight: 600;
        color: var(--nior-gold, #c9a25e);
        line-height: 1;
      }

      .nior-stat-label {
        font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
        font-size: 9px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--nior-subtle, #6b7280);
        margin-top: 6px;
      }
    }

    .nior-hero-floating-card__divider {
      width: 1px;
      height: 36px;
      background: var(--nior-border, rgba(255, 255, 255, 0.08));
    }
  }

  /* Scroll Prompt Indicator */
  .nior-hero-scroll-prompt {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 7;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;

    span {
      font-size: 9px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--nior-subtle, #6b7280);
    }

    .nior-scroll-line {
      width: 1px;
      height: 32px;
      background: rgba(201, 162, 94, 0.2);
      position: relative;
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: var(--nior-gold, #c9a25e);
        animation: niorScrollPulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      }
    }
  }

  /* Reduced Motion / Static Mobile Mode */
  @media (max-width: 820px), (prefers-reduced-motion: reduce) {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;

    .nior-video-hero-stage {
      position: relative;
      height: auto;
      min-height: 100vh;
      min-height: 100svh;
      padding: 100px 0 60px;
    }

    .nior-video-hero-media {
      video.nior-video-hero-player {
        display: none;
      }
      .nior-video-hero-poster {
        opacity: 1;
        filter: brightness(0.7);
      }
    }

    .nior-hero-badge,
    .nior-hero-headline,
    .nior-hero-sub,
    .nior-hero-actions {
      opacity: 1;
      transform: none;
    }

    .nior-hero-center-brand {
      display: none;
    }
  }
}