/* ============================================================
   N.P.P. CINEMA — GLASS FUTURE V1
   VISUAL-ONLY HOMEPAGE MATERIAL SYSTEM
   Keeps existing layout / data / behavior intact.
   ============================================================ */

:root{
  --nppgf-black:#030404;
  --nppgf-charcoal:#080a0b;
  --nppgf-cream:#f1eadc;
  --nppgf-lime:#d8ff32;

  --nppgf-glass:rgba(12,15,16,.46);
  --nppgf-glass-strong:rgba(8,10,11,.64);
  --nppgf-glass-soft:rgba(255,255,255,.045);

  --nppgf-border:rgba(255,255,255,.105);
  --nppgf-border-bright:rgba(255,255,255,.18);
  --nppgf-lime-edge:rgba(216,255,50,.22);

  --nppgf-shadow:
    0 22px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);

  --nppgf-radius:22px;
}

html{
  scroll-behavior:smooth;
}

body.nppgf-active{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 14%, rgba(216,255,50,.055), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(255,255,255,.03), transparent 30%),
    linear-gradient(180deg,#060708 0%,#030404 58%,#020303 100%);
}

/* ============================================================
   AMBIENT LAYERS
   ============================================================ */

.nppgf-ambient{
  position:fixed;
  inset:0;
  z-index:-30;
  pointer-events:none;
  overflow:hidden;
}

.nppgf-ambient::before{
  content:"";
  position:absolute;
  inset:-18%;
  opacity:.13;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 1.3px),
    radial-gradient(circle,rgba(216,255,50,.45) 0 1px,transparent 1.2px);
  background-size:96px 96px,156px 156px;
  background-position:0 0,48px 33px;
  animation:nppgfDrift 44s linear infinite;
}

.nppgf-ambient::after{
  content:"";
  position:absolute;
  inset:-14%;
  background:
    radial-gradient(ellipse at 46% 18%,rgba(255,255,255,.05),transparent 30%),
    radial-gradient(ellipse at 23% 68%,rgba(216,255,50,.045),transparent 32%);
  filter:blur(40px);
  animation:nppgfGlow 14s ease-in-out infinite alternate;
}

@keyframes nppgfDrift{
  from{transform:translate3d(0,0,0) scale(1.04)}
  to{transform:translate3d(-3%,2.5%,0) scale(1.1)}
}

@keyframes nppgfGlow{
  from{transform:translate3d(-2%,0,0)}
  to{transform:translate3d(3%,2%,0)}
}

.nppgf-grain{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  opacity:.02;
  mix-blend-mode:screen;
  background-image:
    repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.38) 0 1px,transparent 1px 4px);
  background-size:8px 8px;
}

.nppgf-cursor{
  position:fixed;
  width:560px;
  height:560px;
  left:0;
  top:0;
  z-index:-20;
  pointer-events:none;
  border-radius:50%;
  filter:blur(26px);
  opacity:.72;
  background:
    radial-gradient(circle,rgba(216,255,50,.10),rgba(216,255,50,0) 68%);
  transform:translate3d(var(--nppgf-x,-900px),var(--nppgf-y,-900px),0);
}

/* ============================================================
   TOP BAR — FLOATING SMOKED GLASS
   ============================================================ */

body.nppgf-active .topbar{
  background:
    linear-gradient(180deg,rgba(8,10,11,.72),rgba(8,10,11,.42)) !important;
  border-bottom:1px solid var(--nppgf-border);
  box-shadow:
    0 18px 60px rgba(0,0,0,.24),
    inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(26px) saturate(135%);
  -webkit-backdrop-filter:blur(26px) saturate(135%);
}

body.nppgf-active .topbar.scrolled{
  background:rgba(6,8,9,.82) !important;
  border-bottom-color:rgba(255,255,255,.13);
}

body.nppgf-active .brand{
  position:relative;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.28));
}

body.nppgf-active .brand::after{
  content:"";
  position:absolute;
  left:0;
  right:38%;
  bottom:-7px;
  height:1px;
  background:linear-gradient(90deg,var(--nppgf-lime),transparent);
  opacity:.66;
}

body.nppgf-active .nav-item{
  position:relative;
  border:1px solid transparent;
  border-radius:999px;
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

body.nppgf-active .nav-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.075);
}

body.nppgf-active .nav-item.active{
  color:#0a0b0b !important;
  background:
    linear-gradient(180deg,#e2ff67,#d2ff25) !important;
  box-shadow:
    0 8px 22px rgba(216,255,50,.14),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* ============================================================
   HERO — SAME STRUCTURE, NEW MATERIAL LANGUAGE
   ============================================================ */

body.nppgf-active .hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(88vh,940px);
  border-bottom:1px solid rgba(255,255,255,.055);
}

body.nppgf-active .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(3,4,4,.92) 0%,
      rgba(3,4,4,.70) 28%,
      rgba(3,4,4,.20) 58%,
      rgba(3,4,4,.08) 78%
    ),
    linear-gradient(
      180deg,
      rgba(3,4,4,.03) 30%,
      rgba(3,4,4,.28) 65%,
      #030404 100%
    );
}

body.nppgf-active .hero::after{
  content:"";
  position:absolute;
  width:min(58vw,820px);
  height:min(58vw,820px);
  right:-20%;
  top:4%;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(216,255,50,.11),
      rgba(216,255,50,.025) 36%,
      transparent 70%
    );
  filter:blur(30px);
}

body.nppgf-active .hero-media{
  transform:
    scale(1.045)
    translate3d(var(--nppgf-hero-x,0),var(--nppgf-hero-y,0),0);
  filter:
    brightness(.78)
    contrast(1.06)
    saturate(.91);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

/* glass slab around existing hero copy */
body.nppgf-active .hero-copy{
  position:relative;
  z-index:5;
  width:min(700px,58vw);
  padding:
    clamp(24px,3vw,42px)
    clamp(24px,3.4vw,48px);
  border:1px solid var(--nppgf-border);
  border-radius:clamp(24px,3vw,40px);
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018) 26%,rgba(7,9,10,.44) 80%),
    rgba(8,10,11,.42);
  box-shadow:
    0 34px 100px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(216,255,50,.02);
  backdrop-filter:blur(30px) saturate(125%);
  -webkit-backdrop-filter:blur(30px) saturate(125%);
  overflow:hidden;
}

body.nppgf-active .hero-copy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.13),transparent 22%,transparent 72%,rgba(216,255,50,.055));
  opacity:.65;
}

body.nppgf-active .hero-copy::after{
  content:"";
  position:absolute;
  left:6%;
  right:44%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.52),rgba(216,255,50,.2),transparent);
}

body.nppgf-active .hero-copy > *{
  position:relative;
  z-index:1;
}

body.nppgf-active .hero-copy .kicker{
  color:var(--nppgf-lime);
  letter-spacing:.2em;
  text-shadow:0 0 28px rgba(216,255,50,.18);
}

body.nppgf-active .hero-copy h1{
  color:var(--nppgf-cream);
  text-shadow:0 18px 70px rgba(0,0,0,.52);
}

body.nppgf-active .hero-copy p{
  color:rgba(241,234,220,.74);
}

body.nppgf-active .hero-meta{
  color:rgba(241,234,220,.74);
}

body.nppgf-active .hero-brand-statement{
  position:relative;
  z-index:5;
  opacity:.82;
}

/* ============================================================
   CONTROLS — GLASS / CHROME-LIKE EDGES
   ============================================================ */

body.nppgf-active .glass-btn,
body.nppgf-active .account-btn,
body.nppgf-active .icon-btn,
body.nppgf-active .membership-entry{
  border-color:rgba(255,255,255,.13) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),
    rgba(10,12,13,.40) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

body.nppgf-active .glass-btn:hover,
body.nppgf-active .account-btn:hover,
body.nppgf-active .icon-btn:hover,
body.nppgf-active .membership-entry:hover{
  transform:translateY(-2px);
  border-color:rgba(216,255,50,.28) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.31),
    0 0 0 1px rgba(216,255,50,.06),
    inset 0 1px 0 rgba(255,255,255,.11);
}

body.nppgf-active .lime-btn{
  position:relative;
  overflow:hidden;
  box-shadow:
    0 16px 40px rgba(216,255,50,.13),
    inset 0 1px 0 rgba(255,255,255,.42);
}

body.nppgf-active .lime-btn::after{
  content:"";
  position:absolute;
  inset:-65%;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-115%) rotate(8deg);
  transition:transform .72s ease;
}

body.nppgf-active .lime-btn:hover::after{
  transform:translateX(115%) rotate(8deg);
}

/* ============================================================
   MAIN / SECTION HEADERS
   ============================================================ */

body.nppgf-active .cinema-main{
  position:relative;
  z-index:4;
  background:
    linear-gradient(180deg,rgba(3,4,4,.92),rgba(3,4,4,.98));
}

body.nppgf-active .rail-section{
  position:relative;
  padding-block:clamp(34px,4.5vw,68px);
}

body.nppgf-active .rail-section::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:min(60%,720px);
  height:1px;
  background:
    linear-gradient(90deg,rgba(216,255,50,.32),rgba(255,255,255,.07),transparent);
  opacity:.55;
}

body.nppgf-active .section-heading{
  position:relative;
  z-index:2;
}

body.nppgf-active .section-heading h2{
  color:var(--nppgf-cream);
  letter-spacing:-.045em;
  text-shadow:0 16px 55px rgba(0,0,0,.4);
}

/* ============================================================
   TITLE CARDS — TRANSLUCENT FLOATING PANES
   ============================================================ */

body.nppgf-active .rail{
  perspective:1400px;
  overflow:visible;
}

body.nppgf-active .title-card{
  --nppgf-card-rx:0deg;
  --nppgf-card-ry:0deg;

  position:relative;
  isolation:isolate;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.09);
  border-radius:clamp(16px,1.8vw,24px);

  background:
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.012)),
    rgba(8,10,11,.42);

  box-shadow:
    0 22px 58px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055);

  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);

  transform:
    perspective(1100px)
    rotateX(var(--nppgf-card-rx))
    rotateY(var(--nppgf-card-ry))
    translateZ(0);

  transition:
    transform .18s ease-out,
    border-color .28s ease,
    box-shadow .3s ease;
}

body.nppgf-active .title-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.62;
  background:
    linear-gradient(132deg,rgba(255,255,255,.12),transparent 23%,transparent 73%,rgba(216,255,50,.07));
}

body.nppgf-active .title-card::after{
  content:"";
  position:absolute;
  left:5%;
  right:50%;
  top:0;
  z-index:7;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.42),rgba(216,255,50,.16),transparent);
}

body.nppgf-active .title-card:hover{
  border-color:rgba(216,255,50,.18);
  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(216,255,50,.045),
    inset 0 1px 0 rgba(255,255,255,.09);
}

body.nppgf-active .title-card img{
  transition:
    transform .48s cubic-bezier(.2,.8,.2,1),
    filter .4s ease;
}

body.nppgf-active .title-card:hover img{
  transform:scale(1.045);
  filter:brightness(1.02) contrast(1.05) saturate(1.02);
}

body.nppgf-active .card-shade{
  background:
    linear-gradient(
      180deg,
      transparent 18%,
      rgba(3,4,4,.12) 46%,
      rgba(3,4,4,.91) 100%
    ) !important;
}

body.nppgf-active .type-pill{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(8,10,11,.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 10px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* ============================================================
   SEARCH / MODALS — SMOKED GLASS
   ============================================================ */

body.nppgf-active .search-panel{
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    rgba(8,10,11,.58);
  backdrop-filter:blur(28px) saturate(120%);
  -webkit-backdrop-filter:blur(28px) saturate(120%);
  box-shadow:var(--nppgf-shadow);
}

body.nppgf-active .modal-card{
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.016)),
    rgba(7,9,10,.78);
  backdrop-filter:blur(30px) saturate(124%);
  -webkit-backdrop-filter:blur(30px) saturate(124%);
  box-shadow:
    0 44px 120px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.075);
}

/* ============================================================
   FOOTER
   ============================================================ */

body.nppgf-active .cinema-footer{
  position:relative;
  border-top:1px solid rgba(255,255,255,.065);
  background:
    linear-gradient(180deg,rgba(6,8,9,.84),rgba(2,3,3,.97));
}

body.nppgf-active .cinema-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-90px;
  height:90px;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(3,4,4,.78));
}

/* ============================================================
   SCROLL REVEALS — SUBTLE ONLY
   ============================================================ */

.nppgf-reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  filter:blur(3px);
  transition:
    opacity .72s cubic-bezier(.2,.75,.2,1),
    transform .72s cubic-bezier(.2,.75,.2,1),
    filter .72s ease;
}

.nppgf-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){

  .nppgf-cursor{
    display:none;
  }

  body.nppgf-active .hero{
    min-height:min(84vh,780px);
  }

  body.nppgf-active .hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(3,4,4,.10) 14%,
        rgba(3,4,4,.32) 46%,
        rgba(3,4,4,.90) 78%,
        #030404 100%
      );
  }

  body.nppgf-active .hero-media{
    transform:scale(1.03);
  }

  body.nppgf-active .hero-copy{
    width:100%;
    padding:22px 20px;
    border-radius:24px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.014)),
      rgba(7,9,10,.50);
    backdrop-filter:blur(24px) saturate(122%);
    -webkit-backdrop-filter:blur(24px) saturate(122%);
  }

  body.nppgf-active .title-card{
    transform:none !important;
  }
}

/* ============================================================
   ACCESSIBILITY / REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .nppgf-ambient::before,
  .nppgf-ambient::after{
    animation:none !important;
  }

  .nppgf-reveal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }

  body.nppgf-active .hero-media,
  body.nppgf-active .title-card{
    transform:none !important;
    transition:none !important;
  }

  .nppgf-cursor{
    display:none !important;
  }
}

/* NPP_NAV_EXPANDED_START */

body.nppgf-active .desktop-nav{
  display:flex;
  align-items:center;
  gap:clamp(4px,.55vw,10px);
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:min(72vw,1120px);
  padding:4px;
  scrollbar-width:none;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

body.nppgf-active .desktop-nav::-webkit-scrollbar{
  display:none;
}

body.nppgf-active .desktop-nav .nav-item{
  flex:0 0 auto;
  white-space:nowrap;
  padding:
    clamp(8px,.7vw,11px)
    clamp(10px,.9vw,15px);
  font-size:
    clamp(10px,.72vw,13px);
  line-height:1;
}

body.nppgf-active
.desktop-nav
.nav-item[data-npp-nav="streams-clips"]{
  border-color:rgba(216,255,50,.16);
}

@media(max-width:1180px){

  body.nppgf-active .desktop-nav{
    max-width:68vw;
  }

}

@media(max-width:900px){

  body.nppgf-active .desktop-nav{
    max-width:64vw;
  }

}

/* NPP_NAV_EXPANDED_END */

/* NPP_GLASS_REFINEMENT_START */

/* =========================================================
   DEEPER CINEMATIC BASE
   ========================================================= */

body.nppgf-active{
  background:
    radial-gradient(
      circle at 15% 16%,
      rgba(216,255,50,.038),
      transparent 25%
    ),
    radial-gradient(
      circle at 82% 28%,
      rgba(255,255,255,.022),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #040506 0%,
      #020303 62%,
      #010202 100%
    );
}

/* =========================================================
   HERO — MORE IMAGE, LESS GLASS
   ========================================================= */

body.nppgf-active .hero-copy{
  width:min(560px,46vw);

  padding:
    clamp(22px,2.4vw,34px)
    clamp(22px,2.8vw,38px);

  border:
    1px solid rgba(255,255,255,.105);

  border-radius:
    clamp(22px,2.5vw,32px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012) 30%,
      rgba(5,7,8,.25) 78%
    ),
    rgba(7,9,10,.25);

  box-shadow:
    0 34px 95px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.075);

  backdrop-filter:
    blur(22px)
    saturate(118%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(118%);
}

body.nppgf-active .hero-copy::before{
  opacity:.42;
}

body.nppgf-active .hero-copy::after{
  right:55%;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.42),
      rgba(216,255,50,.14),
      transparent
    );
}

body.nppgf-active .hero-copy h1{
  font-size:
    clamp(
      3.3rem,
      5.2vw,
      6.6rem
    ) !important;

  line-height:.88 !important;
  letter-spacing:-.052em !important;
}

body.nppgf-active .hero-copy p{
  max-width:50ch;
  line-height:1.55;
}

body.nppgf-active .hero-media{
  filter:
    brightness(.82)
    contrast(1.10)
    saturate(.96);
}

/* =========================================================
   SECTION SCALE / SPACING
   ========================================================= */

body.nppgf-active .rail-section{
  padding-block:
    clamp(
      26px,
      3.6vw,
      52px
    );
}

body.nppgf-active
.section-heading h2{
  font-size:
    clamp(
      1.65rem,
      2.5vw,
      2.85rem
    );

  letter-spacing:-.038em;
}

/* =========================================================
   CARDS — MORE ARTWORK, LIGHTER GLASS
   ========================================================= */

body.nppgf-active
.rail .title-card{
  flex:
    0 0
    clamp(
      300px,
      24vw,
      390px
    );

  min-width:
    clamp(
      300px,
      24vw,
      390px
    );

  border-color:
    rgba(255,255,255,.075);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    ),
    rgba(6,8,9,.20);

  backdrop-filter:
    blur(10px)
    saturate(112%);

  -webkit-backdrop-filter:
    blur(10px)
    saturate(112%);
}

body.nppgf-active
.title-card::before{
  opacity:.35;
}

body.nppgf-active
.title-card:hover{
  border-color:
    rgba(216,255,50,.20);

  box-shadow:
    0 36px 96px
    rgba(0,0,0,.52),

    0 0 32px
    rgba(216,255,50,.035),

    inset 0 1px 0
    rgba(255,255,255,.07);
}

/* =========================================================
   MODAL ENVIRONMENT
   ========================================================= */

body.nppgf-active .modal{
  background:
    rgba(1,2,2,.74);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

body.nppgf-active
.modal .modal-card{
  border-color:
    rgba(255,255,255,.105);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    ),
    rgba(5,7,8,.72);

  box-shadow:
    0 45px 140px
    rgba(0,0,0,.72),

    inset 0 1px 0
    rgba(255,255,255,.07);
}

body.nppgf-active
.modal.open .modal-card,

body.nppgf-active
.modal[aria-hidden="false"]
.modal-card{
  animation:
    nppGlassModalIn
    .34s
    cubic-bezier(.2,.8,.2,1);
}

@keyframes nppGlassModalIn{

  from{
    opacity:0;
    transform:
      translateY(14px)
      scale(.985);
  }

  to{
    opacity:1;
    transform:none;
  }

}

/* =========================================================
   DETAILS MODAL — ARTWORK SHOULD DOMINATE
   ========================================================= */

body.nppgf-active
#detailModal .modal-card{
  width:
    min(
      92vw,
      980px
    );

  max-width:
    980px;

  max-height:
    90vh;

  overflow:auto;
}

body.nppgf-active
#detailModal .detail-backdrop{
  min-height:
    clamp(
      340px,
      50vh,
      560px
    );

  background-size:
    cover !important;

  background-position:
    center !important;
}

body.nppgf-active
#detailModal .detail-gradient{
  background:
    linear-gradient(
      180deg,
      rgba(3,4,4,.04) 16%,
      rgba(3,4,4,.20) 48%,
      rgba(3,4,4,.88) 88%,
      rgba(3,4,4,.98) 100%
    );
}

body.nppgf-active
#detailModal .detail-body{
  padding:
    clamp(
      24px,
      3vw,
      38px
    );
}

body.nppgf-active
#detailModal #detailTitle{
  font-size:
    clamp(
      2.2rem,
      4.8vw,
      5.3rem
    );

  line-height:.9;
  letter-spacing:-.05em;
}

body.nppgf-active
#detailModal #watchNowBtn{
  box-shadow:
    0 15px 42px
    rgba(216,255,50,.16),

    inset 0 1px 0
    rgba(255,255,255,.42);
}

/* =========================================================
   PLAYER — MAKE THE SCREEN THE MAIN EVENT
   ========================================================= */

body.nppgf-active
#playerModal .player-card{
  width:
    min(
      94vw,
      1240px
    );

  max-width:
    1240px;
}

body.nppgf-active
#playerModal .player-head{
  padding:
    18px
    clamp(
      18px,
      2.4vw,
      30px
    );
}

body.nppgf-active
#playerModal .player-stage{
  width:100%;

  height:auto !important;

  min-height:0 !important;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#000;
}

body.nppgf-active
#playerModal .player-stage iframe{
  display:block;

  width:100% !important;
  height:100% !important;

  border:0;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  body.nppgf-active .hero-copy{
    width:100%;

    padding:
      20px
      18px;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.052),
        rgba(255,255,255,.008)
      ),
      rgba(6,8,9,.28);
  }

  body.nppgf-active .hero-copy h1{
    font-size:
      clamp(
        3rem,
        14vw,
        5.5rem
      ) !important;
  }

  body.nppgf-active
  .rail .title-card{
    flex:
      0 0
      min(
        78vw,
        350px
      );

    min-width:
      min(
        78vw,
        350px
      );
  }

  body.nppgf-active
  #detailModal .modal-card,

  body.nppgf-active
  #playerModal .player-card{
    width:
      calc(
        100vw - 20px
      );
  }

  body.nppgf-active
  #detailModal .detail-backdrop{
    min-height:
      320px;
  }

}

/* NPP_GLASS_REFINEMENT_END */

/* NPP_REACTIONS_STYLE_START */

body.nppgf-active
.detail-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

body.nppgf-active
.npp-reactions{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

body.nppgf-active
.npp-reaction-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:44px;

  padding:
    0
    15px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:
    999px;

  color:
    rgba(241,234,220,.78);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    ),
    rgba(7,9,10,.34);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.055);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transition:
    transform .2s ease,
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

body.nppgf-active
.npp-reaction-btn:not(:disabled):hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(216,255,50,.22);
}

body.nppgf-active
.npp-reaction-btn:disabled{
  opacity:.52;
  cursor:default;
}

body.nppgf-active
.npp-reaction-label{
  font-weight:700;
}

body.nppgf-active
.npp-reaction-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:24px;
  height:24px;

  padding:
    0
    7px;

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    800;

  background:
    rgba(255,255,255,.07);

  color:
    rgba(241,234,220,.72);
}

/* LIKE ACTIVE */

body.nppgf-active
.npp-reaction-like.is-active{
  color:#090a0a;

  border-color:
    rgba(216,255,50,.72);

  background:
    linear-gradient(
      180deg,
      #e0ff62,
      #d3ff29
    );

  box-shadow:
    0 12px 30px
    rgba(216,255,50,.14),

    inset 0 1px 0
    rgba(255,255,255,.45);
}

body.nppgf-active
.npp-reaction-like.is-active
.npp-reaction-count{
  color:#090a0a;

  background:
    rgba(0,0,0,.10);
}

/* DISLIKE ACTIVE */

body.nppgf-active
.npp-reaction-dislike.is-active{
  color:
    var(--nppgf-cream);

  border-color:
    rgba(241,234,220,.32);

  background:
    linear-gradient(
      145deg,
      rgba(241,234,220,.14),
      rgba(241,234,220,.045)
    ),
    rgba(7,9,10,.56);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.25),

    inset 0 1px 0
    rgba(255,255,255,.10);
}

@media(max-width:760px){

  body.nppgf-active
  .npp-reactions{
    width:100%;
  }

  body.nppgf-active
  .npp-reaction-btn{
    flex:1 1 0;
  }

}

/* NPP_REACTIONS_STYLE_END */

/* NPP_STORY_TAGLINE_SHIFT_START */

body.nppgf-active .npp-story-tagline-shift{
  position:relative;
  left:clamp(36px,4vw,72px);
}

@media(max-width:760px){
  body.nppgf-active .npp-story-tagline-shift{
    left:18px;
  }
}

/* NPP_STORY_TAGLINE_SHIFT_END */



/* NPP_STORY_TAGLINE_LOCK_START */

/*
  Lock the hero story statement in its corrected position.
  This affects ONLY:
  “Everybody Got A Story. Now Watch Them.”
  It does NOT alter the main cinematic hero card layout.
*/

body.nppgf-active .hero-brand-statement{
  position: relative;
  z-index: 2;
  margin-left: clamp(120px, 13vw, 220px) !important;
  max-width: clamp(260px, 26vw, 420px);
}

body.nppgf-active .hero-brand-statement .eyebrow,
body.nppgf-active .hero-brand-statement h3,
body.nppgf-active .hero-brand-statement p{
  text-align: left;
}

@media (max-width: 1100px){
  body.nppgf-active .hero-brand-statement{
    margin-left: clamp(40px, 8vw, 90px) !important;
    max-width: min(78vw, 420px);
  }
}

@media (max-width: 720px){
  body.nppgf-active .hero-brand-statement{
    margin-left: 0 !important;
    max-width: 100%;
  }
}

/* NPP_STORY_TAGLINE_LOCK_END */

/* NPP_SAFE_APP_BOOT_START */

/*
  IMPORTANT:
  #nppCinemaIntro is intentionally NOT targeted.

  Only the underlying Cinema application is hidden
  while its first live Supabase render settles.
*/

body.npp-app-booting #topbar,
body.npp-app-booting #hero,
body.npp-app-booting .cinema-main,
body.npp-app-booting footer,
body.npp-app-booting #backendBadge{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/*
  Once booting finishes, reveal only the completed
  application beneath the cinematic opening.
*/

body.nppgf-active #topbar,
body.nppgf-active #hero,
body.nppgf-active .cinema-main,
body.nppgf-active footer{
  transition:
    opacity .20s ease;
}

/* NPP_SAFE_APP_BOOT_END */


/* NPP_REAL_AD_SKIP_STYLE_START */

body.nppgf-active
.player-stage{
  position:relative;
}

body.nppgf-active
.npp-ad-skip-button{
  position:absolute;
  right:18px;
  bottom:72px;
  z-index:30;

  min-width:118px;
  min-height:44px;

  padding:10px 16px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .30
    );

  border-radius:8px;

  background:
    rgba(
      8,
      10,
      10,
      .86
    );

  color:#fff;

  font:inherit;
  font-weight:700;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  cursor:pointer;
}

body.nppgf-active
.npp-ad-skip-button:disabled{
  opacity:.78;
  cursor:default;
}

body.nppgf-active
.npp-ad-skip-button.is-ready{
  border-color:
    rgba(
      201,
      255,
      54,
      .82
    );

  color:#c9ff36;
}

body.nppgf-active
.npp-ad-skip-button[hidden]{
  display:none !important;
}

@media(max-width:720px){

  body.nppgf-active
  .npp-ad-skip-button{
    right:12px;
    bottom:62px;
    min-height:40px;
    padding:8px 13px;
  }
}

/* NPP_REAL_AD_SKIP_STYLE_END */


/* NPP_RESPONSIVE_HERO_TITLE_START */

/*
  Commercial hero typography.

  The same hero component must support everything from
  one-word titles to long film/documentary names without
  changing the approved layout.
*/

body.nppgf-active
#heroTitle{
  max-width:11ch;

  margin-top:.08em;

  font-size:
    clamp(
      3.6rem,
      6.2vw,
      7rem
    );

  line-height:.86;

  letter-spacing:-.045em;

  text-wrap:balance;

  overflow-wrap:normal;

  word-break:normal;

  hyphens:none;
}


/*
  Example:
  N.P.P. 2 Hour Ad Test
*/

body.nppgf-active
#heroTitle.is-long-title{
  max-width:13ch;

  font-size:
    clamp(
      3rem,
      4.7vw,
      5.35rem
    );

  line-height:.9;

  letter-spacing:-.04em;
}


/*
  Very long commercial titles.
*/

body.nppgf-active
#heroTitle.is-very-long-title{
  max-width:15ch;

  font-size:
    clamp(
      2.55rem,
      3.9vw,
      4.55rem
    );

  line-height:.93;

  letter-spacing:-.035em;
}


/*
  Intentional zero-programming state.
*/

body.nppgf-active
#hero.is-catalog-empty
#heroTitle{
  max-width:10ch;

  font-size:
    clamp(
      3rem,
      5vw,
      5.8rem
    );

  line-height:.9;
}


body.nppgf-active
#hero.is-catalog-empty
#heroDescription{
  max-width:42ch;
}


body.nppgf-active
#hero.is-catalog-empty
#heroPlayBtn,

body.nppgf-active
#hero.is-catalog-empty
#heroInfoBtn{
  display:none !important;
}


/*
  Do not leave hidden controls occupying layout space.
*/

body.nppgf-active
#heroPlayBtn[hidden],

body.nppgf-active
#heroInfoBtn[hidden],

body.nppgf-active
#heroMeta[hidden]{
  display:none !important;
}


@media(max-width:900px){

  body.nppgf-active
  #heroTitle{
    max-width:12ch;

    font-size:
      clamp(
        3.15rem,
        8vw,
        5.3rem
      );
  }

  body.nppgf-active
  #heroTitle.is-long-title{
    max-width:14ch;

    font-size:
      clamp(
        2.7rem,
        6.8vw,
        4.45rem
      );
  }

  body.nppgf-active
  #heroTitle.is-very-long-title{
    max-width:15ch;

    font-size:
      clamp(
        2.35rem,
        5.8vw,
        3.9rem
      );
  }
}


@media(max-width:620px){

  body.nppgf-active
  #heroTitle{
    max-width:12ch;

    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      );

    line-height:.9;
  }

  body.nppgf-active
  #heroTitle.is-long-title{
    max-width:14ch;

    font-size:
      clamp(
        2.35rem,
        10vw,
        3.5rem
      );
  }

  body.nppgf-active
  #heroTitle.is-very-long-title{
    max-width:15ch;

    font-size:
      clamp(
        2.05rem,
        8.8vw,
        3.1rem
      );
  }
}

/* NPP_RESPONSIVE_HERO_TITLE_END */