:root{
  --bg:#050606;
  --surface:#0b0d0d;
  --surface-2:#111414;
  --surface-3:#171a1a;
  --text:#f2efe7;
  --muted:#929995;
  --line:rgba(255,255,255,.10);
  --lime:#c9ff36;
  --cream:#f2efe7;
  --danger:#ff6d6d;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;

  background:
    radial-gradient(
      circle at 80% 8%,
      rgba(201,255,54,.045),
      transparent 28%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

[hidden]{
  display:none!important;
}


/* ============================================================
   HEADER
   ============================================================ */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:1000;

  height:72px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;

  gap:40px;

  padding:0 4vw;

  background:
    linear-gradient(
      180deg,
      rgba(4,5,5,.98),
      rgba(4,5,5,.84)
    );

  border-bottom:
    1px solid rgba(255,255,255,.055);

  backdrop-filter:
    blur(24px)
    saturate(125%);
}

.brand{
  display:flex;
  align-items:baseline;
  gap:8px;

  color:var(--cream);

  text-decoration:none;
}

.brand span{
  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:25px;
  font-weight:800;
  letter-spacing:-.05em;
}

.brand b{
  color:var(--lime);

  font-size:9px;
  font-weight:900;
  letter-spacing:.23em;
}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:3px;
}

.nav-item{
  border:0;
  border-radius:999px;

  padding:9px 13px;

  background:transparent;
  color:#969d99;

  font-size:12px;
  font-weight:700;
}

.nav-item:hover,
.nav-item.active{
  background:
    rgba(255,255,255,.07);

  color:#fff;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.icon-btn{
  position:relative;

  width:40px;
  height:40px;

  border:0;
  border-radius:50%;

  background:transparent;
}

.icon-btn:hover{
  background:
    rgba(255,255,255,.07);
}

.search-icon{
  position:absolute;

  width:13px;
  height:13px;

  top:11px;
  left:11px;

  border:2px solid #eee;
  border-radius:50%;
}

.search-icon::after{
  content:"";

  position:absolute;

  width:7px;
  height:2px;

  right:-6px;
  bottom:-4px;

  background:#eee;

  transform:rotate(45deg);
}

.search-icon.large{
  position:relative;

  display:block;

  top:auto;
  left:auto;

  width:18px;
  height:18px;
}

.account-btn{
  min-height:40px;

  padding:0 15px;

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

  border-radius:999px;

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

  color:#fff;

  font-size:11px;
  font-weight:800;
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;

  min-height:
    min(850px,94vh);

  display:flex;
  align-items:flex-end;

  padding:
    150px
    5vw
    105px;

  overflow:hidden;

  background:#070808;
}

.hero-media{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 72% 32%,
      rgba(201,255,54,.14),
      transparent 26%
    ),
    linear-gradient(
      115deg,
      #050606 10%,
      #111515 100%
    );

  background-size:cover;
  background-position:center;

  transform:scale(1.01);
}

.hero-media::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      0deg,
      var(--bg) 0%,
      transparent 32%
    );
}

.hero-copy{
  position:relative;

  z-index:3;

  width:min(690px,60vw);
}

.kicker{
  margin-bottom:14px;

  color:var(--lime);

  font-size:9px;
  font-weight:900;
  letter-spacing:.20em;
}

.hero h1{
  margin:0;

  max-width:800px;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(58px,8.5vw,120px);

  line-height:.88;

  letter-spacing:-.065em;
}

.hero-copy > p{
  max-width:590px;

  margin:25px 0 15px;

  color:#c0c5c1;

  font-size:15px;
  line-height:1.65;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  color:#929995;

  font-size:10px;
  font-weight:700;
}

.hero-meta span + span::before{
  content:"•";
  margin-right:7px;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:10px;

  margin-top:26px;
}

.lime-btn,
.glass-btn,
.ghost-btn{
  min-height:42px;

  border-radius:999px;

  padding:0 17px;

  font-weight:850;
}

.lime-btn{
  border:0;

  background:var(--lime);
  color:#070808;
}

.lime-btn:hover{
  filter:brightness(1.05);
}

.glass-btn,
.ghost-btn{
  border:
    1px solid rgba(255,255,255,.15);

  background:
    rgba(13,15,15,.60);

  color:#fff;

  backdrop-filter:blur(12px);
}

.large{
  min-height:48px;
  padding:0 21px;
}

.hero-brand-statement{
  position:absolute;

  right:4vw;
  bottom:110px;

  z-index:3;

  width:250px;

  text-align:right;
}

.hero-brand-statement span{
  display:block;

  margin-bottom:8px;

  color:var(--lime);

  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}

.hero-brand-statement strong{
  display:block;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:24px;
  line-height:1.04;
}

.hero-brand-statement em{
  display:block;

  color:var(--lime);

  font-style:normal;
}


/* ============================================================
   SEARCH
   ============================================================ */

.cinema-main{
  position:relative;
  z-index:5;

  padding-bottom:90px;
}

.search-panel{
  padding:
    36px
    4vw
    10px;
}

.search-label{
  margin-bottom:10px;

  color:var(--lime);

  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}

.search-wrap{
  display:flex;
  align-items:center;
  gap:18px;

  padding-bottom:14px;

  border-bottom:
    1px solid rgba(255,255,255,.16);
}

.search-wrap input{
  flex:1;

  border:0;
  outline:0;

  background:transparent;

  color:#fff;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(28px,4vw,52px);
}

.search-wrap input::placeholder{
  color:#4a504d;
}

.search-wrap button{
  border:0;
  background:transparent;

  color:#979e9a;

  font-size:11px;
  font-weight:750;
}


/* ============================================================
   RAILS
   ============================================================ */

.rail-section{
  padding:
    8px
    4vw
    36px;

  scroll-margin-top:95px;
}

.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:15px;
}

.section-heading h2{
  margin:0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(22px,2.2vw,31px);

  font-weight:700;
  letter-spacing:-.03em;
}

.section-heading > span{
  display:none;
}

.rail{
  display:grid;

  grid-auto-flow:column;
  grid-auto-columns:
    minmax(240px,21vw);

  gap:12px;

  overflow-x:auto;

  padding:
    5px
    3px
    20px;

  scrollbar-width:none;
}

.rail::-webkit-scrollbar{
  display:none;
}


/* ============================================================
   TITLE CARDS
   ============================================================ */

.title-card{
  position:relative;

  min-width:0;

  aspect-ratio:16/10;

  overflow:hidden;

  border-radius:12px;

  background:#121414;

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

  box-shadow:
    0 12px 34px rgba(0,0,0,.22);

  cursor:pointer;

  transform:translateY(0);

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

.title-card:hover{
  transform:translateY(-6px);

  border-color:
    rgba(201,255,54,.27);

  box-shadow:
    0 23px 50px rgba(0,0,0,.48);
}

.title-card img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

.card-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 38%,
      rgba(0,0,0,.90) 100%
    );
}

.type-pill{
  position:absolute;

  top:10px;
  left:10px;

  padding:5px 7px;

  border-radius:999px;

  background:
    rgba(5,6,6,.78);

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

  color:#e9ebe8;

  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;

  backdrop-filter:blur(8px);
}

.card-copy{
  position:absolute;

  left:13px;
  right:13px;
  bottom:13px;

  z-index:3;
}

.card-copy b{
  display:block;

  overflow:hidden;

  color:#fff;

  font-size:13px;
  font-weight:800;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.card-copy small{
  display:block;

  margin-top:4px;

  color:#999f9b;

  font-size:9px;
}

.progress-track{
  position:absolute;

  left:13px;
  right:13px;
  bottom:5px;

  z-index:5;

  height:2px;

  overflow:hidden;

  border-radius:10px;

  background:
    rgba(255,255,255,.20);
}

.progress-bar{
  height:100%;

  background:var(--lime);
}

.empty-card{
  min-height:150px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

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

  border-radius:12px;

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

  color:#686f6b;

  font-size:11px;
}


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

.cinema-footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;

  padding:
    65px
    4vw
    38px;

  border-top:
    1px solid rgba(255,255,255,.065);

  background:#030404;
}

.cinema-footer b{
  display:block;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:22px;
}

.cinema-footer > div > span{
  display:block;

  margin-top:6px;

  color:var(--lime);

  font-size:9px;
  font-weight:800;
}

.footer-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-actions button,
.footer-actions a{
  border:0;

  background:none;

  color:#747b77;

  font-size:10px;

  text-decoration:none;
}

.footer-actions button:hover,
.footer-actions a:hover{
  color:#fff;
}


/* ============================================================
   MODALS
   ============================================================ */

.modal{
  position:fixed;

  inset:0;

  z-index:3000;

  display:none;
  align-items:center;
  justify-content:center;

  padding:28px;

  background:
    rgba(0,0,0,.84);

  backdrop-filter:
    blur(18px);
}

.modal.open{
  display:flex;
}

.modal-card{
  position:relative;

  width:min(850px,100%);

  max-height:
    calc(100vh - 50px);

  overflow:auto;

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

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #111414,
      #080a0a
    );

  color:#fff;

  box-shadow:
    0 50px 150px rgba(0,0,0,.72);
}

.modal-close{
  position:absolute;

  top:16px;
  right:16px;

  z-index:10;

  width:39px;
  height:39px;

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

  border-radius:50%;

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

  color:#fff;

  font-size:24px;
}

.detail-backdrop{
  position:relative;

  min-height:390px;

  background:
    #111
    center /
    cover
    no-repeat;
}

.detail-gradient{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      0deg,
      #0c0e0e 0%,
      transparent 65%
    );
}

.play-orb{
  position:absolute;

  left:30px;
  bottom:25px;

  width:54px;
  height:54px;

  border:0;
  border-radius:50%;

  background:var(--lime);
  color:#070808;

  font-size:17px;
}

.detail-body{
  padding:
    8px
    30px
    32px;
}

.detail-body h2,
.submission-head h2,
.auth-card h2{
  margin:
    5px
    0
    11px;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(30px,4vw,48px);
}

.detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-bottom:16px;

  color:#919895;

  font-size:10px;
}

.detail-description,
#detailDescription,
.auth-copy,
.submission-head p,
.rights-note{
  color:#a6ada9;
  line-height:1.65;
}

.detail-actions{
  display:flex;
  gap:9px;

  margin-top:22px;
}

.rights-note{
  margin-top:20px;

  font-size:9px;
}


/* ============================================================
   PLAYER
   ============================================================ */

.player-card{
  width:min(1180px,100%);
}

.player-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:
    22px
    72px
    18px
    24px;
}

.player-head h2{
  margin:3px 0 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;
}

.player-status{
  color:#7f8783;

  font-size:9px;
  font-weight:700;
}

.player-stage{
  position:relative;

  aspect-ratio:16/9;

  background:#000;
}

.player-stage iframe{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  border:0;
}


/* ============================================================
   FORMS
   ============================================================ */

.auth-card{
  width:min(520px,100%);

  padding:32px;
}

.submission-card{
  width:min(820px,100%);

  padding:32px;
}

.submission-head{
  padding-right:45px;
}

form{
  display:grid;
  gap:14px;
}

label{
  display:grid;
  gap:7px;

  color:#a7aeaa;

  font-size:10px;
  font-weight:700;
}

input,
textarea,
select{
  width:100%;

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

  border-radius:10px;

  outline:0;

  padding:12px 13px;

  background:#0b0d0d;

  color:#fff;
}

input:focus,
textarea:focus,
select:focus{
  border-color:
    rgba(201,255,54,.45);
}

textarea{
  resize:vertical;
}

.form-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
}

.check{
  display:flex;
  grid-template-columns:none;
  align-items:flex-start;
  gap:9px;

  font-weight:500;
}

.check input{
  width:auto;
}

.form-status{
  min-height:16px;

  margin:0;

  color:#a7aeaa;

  font-size:10px;
}


/* ============================================================
   TOAST
   ============================================================ */

.toast{
  position:fixed;

  left:50%;
  bottom:28px;

  z-index:5000;

  max-width:
    calc(100vw - 30px);

  padding:11px 15px;

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

  border-radius:999px;

  background:
    rgba(10,12,12,.94);

  color:#fff;

  font-size:11px;

  opacity:0;

  pointer-events:none;

  transform:
    translate(-50%,12px);

  transition:
    opacity .18s,
    transform .18s;
}

.toast.show{
  opacity:1;

  transform:
    translate(-50%,0);
}


/* ============================================================
   BACKEND BADGE
   ============================================================ */

.backend-badge{
  position:fixed;

  left:10px;
  bottom:10px;

  z-index:40;

  padding:5px 7px;

  border-radius:999px;

  background:#201111;
  color:#a46e6e;

  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;

  opacity:.25;
}

.backend-badge.live{
  background:#101611;
  color:#6a856e;
}


/* ============================================================
   MEMBERSHIP / STRIPE
   ============================================================ */

.npp-membership-btn{
  display:none!important;
}

.npp-membership-overlay{
  position:fixed;

  inset:0;

  z-index:4500;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(201,255,54,.08),
      transparent 30%
    ),
    rgba(2,3,3,.95);

  backdrop-filter:blur(22px);
}

.npp-membership-overlay[hidden]{
  display:none!important;
}

.npp-membership-card{
  position:relative;

  width:min(850px,100%);

  padding:34px;

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

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #111414,
      #080a0a
    );

  color:#fff;

  box-shadow:
    0 50px 150px rgba(0,0,0,.72);
}

.npp-membership-close{
  position:absolute;

  top:17px;
  right:17px;

  width:39px;
  height:39px;

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

  border-radius:50%;

  background:#151818;
  color:#fff;

  font-size:23px;
}

.npp-plan-eyebrow,
.npp-plan-label{
  color:var(--lime);

  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}

.npp-membership-card h2{
  margin:
    8px
    0
    8px;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(32px,4vw,48px);
}

.npp-plan-intro{
  margin:
    0
    0
    25px;

  color:#9aa19d;
}

.npp-plan-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

.npp-plan{
  padding:24px;

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

  border-radius:16px;

  background:#090b0b;
}

.npp-plan-premium{
  border-color:
    rgba(201,255,54,.35);
}

.npp-plan strong{
  display:block;

  margin:12px 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:34px;
}

.npp-plan strong small{
  color:#818985;

  font-family:Inter,sans-serif;

  font-size:11px;
}

.npp-plan p{
  min-height:44px;

  color:#9ca39f;

  font-size:11px;
  line-height:1.55;
}

.npp-plan button{
  width:100%;

  min-height:42px;

  border:0;
  border-radius:999px;

  background:var(--lime);
  color:#080909;

  font-weight:900;
}

.npp-billing-status{
  min-height:18px;

  margin:
    15px
    0
    0;

  color:#a3aaa6;

  font-size:10px;
}


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

@media(max-width:880px){

  .topbar{
    height:64px;

    grid-template-columns:
      auto
      1fr
      auto;

    gap:15px;

    padding:
      0
      15px;
  }

  .desktop-nav{
    display:none;
  }

  .top-actions{
    justify-self:end;
  }

  .brand span{
    font-size:21px;
  }

  .brand b{
    font-size:7px;
  }

  .account-btn{
    max-width:95px;

    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;
  }


  .hero{
    min-height:78vh;

    padding:
      110px
      20px
      72px;
  }

  .hero-copy{
    width:100%;
  }

  .hero h1{
    font-size:
      clamp(48px,15vw,78px);
  }

  .hero-copy > p{
    max-width:90%;
  }

  .hero-brand-statement{
    display:none;
  }


  .rail-section{
    padding:
      7px
      18px
      30px;
  }

  .rail{
    grid-auto-columns:
      minmax(230px,76vw);
  }


  .cinema-footer{
    align-items:flex-start;

    flex-direction:column;
  }


  .form-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:560px){

  .account-btn{
    width:40px;

    padding:0;

    overflow:hidden;

    color:transparent;
  }

  .account-btn::after{
    content:"●";

    color:var(--lime);

    font-size:12px;
  }

  .hero{
    min-height:74vh;
  }

  .hero h1{
    font-size:
      clamp(44px,16vw,64px);
  }

  .hero-actions{
    width:100%;
  }

  .hero-actions button{
    flex:1;
  }

  .detail-backdrop{
    min-height:260px;
  }

  .modal{
    padding:12px;
  }

  .modal-card{
    max-height:
      calc(100vh - 24px);

    border-radius:17px;
  }

  .detail-body,
  .auth-card,
  .submission-card{
    padding:22px;
  }

  .npp-plan-grid{
    grid-template-columns:1fr;
  }

}

/* ============================================================
   N.P.P. CINEMA — PUBLIC / PRIVATE BOUNDARY
   Operational state is never shown to viewers.
   ============================================================ */

.backend-badge{
  display:none!important;
}


/* ============================================================
   N.P.P. CINEMA — MEMBERSHIP ENTRY
   ============================================================ */

.membership-entry{
  min-height:40px;

  padding:0 16px;

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

  border-radius:999px;

  background:
    rgba(201,255,54,.08);

  color:var(--lime);

  font-size:11px;
  font-weight:850;

  cursor:pointer;
}

.membership-entry:hover{
  background:
    rgba(201,255,54,.14);

  border-color:
    rgba(201,255,54,.48);
}

@media(max-width:560px){

  .membership-entry{
    min-height:38px;

    padding:0 12px;

    font-size:9px;
  }

}

/* ============================================================
   N.P.P. CINEMA — CUSTOMER ACCOUNT
   ============================================================ */

.npp-account-overlay{
  position:fixed;

  inset:0;

  z-index:4600;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  background:
    rgba(2,3,3,.95);

  backdrop-filter:
    blur(22px);
}

.npp-account-overlay[hidden]{
  display:none!important;
}

.npp-account-card{
  position:relative;

  width:min(560px,100%);

  padding:32px;

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

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #111414,
      #080a0a
    );

  box-shadow:
    0 50px 150px
    rgba(0,0,0,.72);
}

.npp-account-close{
  position:absolute;

  top:16px;
  right:16px;

  width:39px;
  height:39px;

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

  border-radius:50%;

  background:#151818;

  color:#fff;

  font-size:23px;
}

.npp-account-eyebrow{
  color:var(--lime);

  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}

.npp-account-card h2{
  margin:
    8px
    0
    8px;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:42px;
}

.npp-account-email{
  color:#949b97;

  font-size:11px;
}

.npp-account-plan{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;

  margin-top:26px;
}

.npp-account-plan > div{
  padding:18px;

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

  border-radius:13px;

  background:#090b0b;
}

.npp-account-plan span{
  display:block;

  margin-bottom:7px;

  color:#757d79;

  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.npp-account-plan strong{
  color:#fff;

  font-size:17px;
}

.npp-plan-renewal{
  min-height:17px;

  margin-top:12px;

  color:#8d9591;

  font-size:10px;
}

.npp-account-actions{
  display:grid;

  grid-template-columns:1fr auto;

  gap:9px;

  margin-top:22px;
}

.npp-account-upgrade,
.npp-account-signout{
  min-height:43px;

  border-radius:999px;

  font-weight:850;
}

.npp-account-upgrade{
  border:0;

  background:var(--lime);
  color:#080909;
}

.npp-account-signout{
  padding:0 17px;

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

  background:transparent;

  color:#fff;
}

@media(max-width:560px){

  .npp-account-plan{
    grid-template-columns:1fr;
  }

  .npp-account-actions{
    grid-template-columns:1fr;
  }

}





/* NPP_CINEMA_INTRO_START */

body.npp-cinema-intro-active {
  overflow: hidden !important;
}

#nppCinemaIntro {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #020202 !important;
  color: #f7f1e7 !important;

  overflow: hidden !important;
  z-index: 2147483646 !important;

  opacity: 1;
  visibility: visible;

  font-family: inherit;
  text-align: center;

  transition:
    opacity .75s ease,
    visibility .75s ease;
}

#nppCinemaIntro.is-leaving {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#nppCinemaIntro .npp-cinema-intro__grain {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .08;

  background-image:
    repeating-radial-gradient(
      circle,
      rgba(255,255,255,.16) 0 1px,
      transparent 1px 4px
    );

  background-size: 5px 5px;
  animation: nppCinemaNoise .3s steps(2) infinite;
}

#nppCinemaIntro .npp-cinema-intro__glow {
  position: absolute;
  left: 50%;
  top: 50%;

  width: min(900px, 120vw);
  height: min(900px, 120vw);

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.09),
      rgba(255,255,255,.025) 35%,
      transparent 70%
    );

  filter: blur(22px);
  pointer-events: none;
}

#nppCinemaIntro .npp-cinema-intro__stage {
  position: relative;
  width: min(1000px, 90vw);
  height: min(520px, 70dvh);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
}

#nppCinemaIntro .npp-cinema-intro__mark,
#nppCinemaIntro .npp-cinema-intro__story,
#nppCinemaIntro .npp-cinema-intro__watch,
#nppCinemaIntro .npp-cinema-intro__brand {
  position: absolute !important;
  left: 0;
  right: 0;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px) scale(.985);
}

#nppCinemaIntro .npp-cinema-intro__mark {
  animation: nppIntroMark 5.8s ease forwards;
}

#nppCinemaIntro .npp-cinema-intro__story {
  font-size: clamp(19px, 5vw, 46px);
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.35;

  animation: nppIntroStory 5.8s ease forwards;
}

#nppCinemaIntro .npp-cinema-intro__watch {
  font-size: clamp(26px, 7vw, 64px);
  font-weight: 800;
  letter-spacing: .09em;

  animation: nppIntroWatch 5.8s ease forwards;
}

#nppCinemaIntro .npp-cinema-intro__brand {
  animation: nppIntroBrand 5.8s ease forwards;
}

#nppCinemaIntro .npp-cinema-intro__npp {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 18vw, 150px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.03em;
}

#nppCinemaIntro .npp-cinema-intro__path {
  margin-top: 22px;

  font-size: clamp(9px, 2.5vw, 14px);
  font-weight: 700;

  letter-spacing: .42em;
  color: rgba(255,255,255,.62);
}

#nppCinemaIntro .npp-cinema-intro__brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 13vw, 94px);
  font-weight: 700;
  line-height: 1;
}

#nppCinemaIntro .npp-cinema-intro__brand-name span {
  font-family: inherit;
  color: #c7ff1f;
}

#nppCinemaIntro .npp-cinema-intro__brand-line {
  width: 0;
  height: 1px;

  margin: 22px auto 26px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c7ff1f,
      transparent
    );

  animation: nppIntroLine 1s 4.45s ease forwards;
}

#nppCinemaIntro .npp-cinema-intro__enter {
  appearance: none !important;

  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.055) !important;
  color: #fff !important;

  min-height: 48px;
  padding: 0 27px !important;

  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;

  letter-spacing: .16em;
  text-transform: uppercase;

  cursor: pointer;
  backdrop-filter: blur(18px);
}

#nppCinemaIntro .npp-cinema-intro__skip {
  position: absolute !important;

  top: max(18px, env(safe-area-inset-top)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;

  z-index: 10;

  appearance: none !important;
  border: 0 !important;
  background: transparent !important;

  color: rgba(255,255,255,.55) !important;

  font: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;

  letter-spacing: .14em;
  text-transform: uppercase;

  padding: 12px !important;
}

@keyframes nppIntroMark {
  0%,5% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(12px) scale(.985);
  }

  12%,29% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  35%,100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-8px) scale(1.01);
  }
}

@keyframes nppIntroStory {
  0%,30% {
    opacity: 0;
    filter: blur(10px);
  }

  39%,51% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  58%,100% {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes nppIntroWatch {
  0%,52% {
    opacity: 0;
    filter: blur(10px);
  }

  61%,71% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  78%,100% {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes nppIntroBrand {
  0%,71% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(12px) scale(.985);
  }

  82%,100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes nppIntroLine {
  to {
    width: min(300px, 65vw);
  }
}

@keyframes nppCinemaNoise {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(1%,-1%); }
  50%  { transform: translate(-1%,1%); }
  75%  { transform: translate(1%,1%); }
  100% { transform: translate(-1%,-1%); }
}

@media (max-width: 640px) {

  #nppCinemaIntro .npp-cinema-intro__stage {
    width: 88vw;
    height: 58dvh;
  }

  #nppCinemaIntro .npp-cinema-intro__story {
    max-width: 90vw;
  }

  #nppCinemaIntro .npp-cinema-intro__brand-name {
    white-space: nowrap;
  }
}

/* NPP_CINEMA_INTRO_END */





/* NPP_CINEMA_INTRO_FINAL_FIX_START */

/* Lock the document itself while intro is active */
html {
  background:#000 !important;
}

body.npp-cinema-intro-active {
  overflow:hidden !important;
  background:#000 !important;
}

/* Completely hide the streaming app until intro exits */
body.npp-cinema-intro-active > *:not(#nppCinemaIntro) {
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* True Safari-safe full screen takeover */
#nppCinemaIntro {
  position:fixed !important;

  top:-3px !important;
  right:-3px !important;
  bottom:-3px !important;
  left:-3px !important;

  width:auto !important;
  height:auto !important;
  min-width:calc(100% + 6px) !important;
  min-height:calc(100% + 6px) !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;

  background:#000 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;

  z-index:2147483647 !important;

  isolation:isolate !important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

/* Keep all intro content inside a predictable frame */
#nppCinemaIntro .npp-cinema-intro__stage {
  position:relative !important;

  width:min(900px, 92vw) !important;
  max-width:92vw !important;

  height:520px !important;
  max-height:72vh !important;

  margin:0 auto !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:visible !important;

  transform:none !important;
}

/*
CRITICAL FIX:
Do not use left:50% + translateX.
The animation keyframes replace transform,
which was pushing the wordmark off screen.
*/
#nppCinemaIntro .npp-cinema-intro__mark,
#nppCinemaIntro .npp-cinema-intro__story,
#nppCinemaIntro .npp-cinema-intro__watch,
#nppCinemaIntro .npp-cinema-intro__brand {
  position:absolute !important;

  left:0 !important;
  right:0 !important;

  width:100% !important;
  max-width:100% !important;

  margin:0 auto !important;

  box-sizing:border-box !important;

  text-align:center !important;
}

/* Final brand group */
#nppCinemaIntro .npp-cinema-intro__brand {
  padding:0 14px !important;
}

/* MOBILE-SAFE WORDMARK */
#nppCinemaIntro .npp-cinema-intro__brand-name {
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;

  gap:.18em !important;

  width:100% !important;
  max-width:100% !important;

  margin:0 auto !important;

  font-size:clamp(28px, 9vw, 76px) !important;
  line-height:.96 !important;

  letter-spacing:-.035em !important;

  white-space:nowrap !important;

  transform:none !important;
}

#nppCinemaIntro .npp-cinema-intro__brand-name span {
  display:inline !important;
  flex:0 0 auto !important;
}

/* Intro NPP mark */
#nppCinemaIntro .npp-cinema-intro__npp {
  max-width:100% !important;

  font-size:clamp(52px, 16vw, 130px) !important;
  line-height:.9 !important;

  white-space:nowrap !important;
}

/* Story text */
#nppCinemaIntro .npp-cinema-intro__story {
  padding:0 18px !important;

  font-size:clamp(17px, 5vw, 38px) !important;
  line-height:1.35 !important;

  letter-spacing:.11em !important;
}

/* Watch text */
#nppCinemaIntro .npp-cinema-intro__watch {
  padding:0 18px !important;

  font-size:clamp(23px, 7vw, 52px) !important;

  letter-spacing:.075em !important;
}

/* Decorative line */
#nppCinemaIntro .npp-cinema-intro__brand-line {
  width:min(260px, 60vw) !important;
  max-width:60vw !important;

  margin:24px auto 28px !important;
}

/* Enter button */
#nppCinemaIntro .npp-cinema-intro__enter {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:min(360px, 76vw) !important;
  min-width:0 !important;

  margin:0 auto !important;
}

/* Skip button stays in visible Safari area */
#nppCinemaIntro .npp-cinema-intro__skip {
  position:fixed !important;

  top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
  right:calc(env(safe-area-inset-right, 0px) + 18px) !important;

  z-index:2147483647 !important;
}

/* Ensure final scene sits visually centered */
@media (max-width:640px) {

  #nppCinemaIntro {
    align-items:center !important;
  }

  #nppCinemaIntro .npp-cinema-intro__stage {
    width:92vw !important;
    max-width:92vw !important;

    height:420px !important;
    max-height:62vh !important;

    transform:translateY(-1vh) !important;
  }

  #nppCinemaIntro .npp-cinema-intro__brand-name {
    font-size:clamp(27px, 8.8vw, 42px) !important;
  }

  #nppCinemaIntro .npp-cinema-intro__brand-line {
    width:56vw !important;
  }

  #nppCinemaIntro .npp-cinema-intro__enter {
    width:72vw !important;
    max-width:330px !important;
  }
}

/* NPP_CINEMA_INTRO_FINAL_FIX_END */




/* NPP_CINEMA_INTRO_TOUCH_FIX_START */

#nppCinemaIntro {
  pointer-events:auto !important;
}

#nppCinemaIntro .npp-cinema-intro__grain,
#nppCinemaIntro .npp-cinema-intro__glow,
#nppCinemaIntro .npp-cinema-intro__mark,
#nppCinemaIntro .npp-cinema-intro__story,
#nppCinemaIntro .npp-cinema-intro__watch {
  pointer-events:none !important;
}

#nppCinemaIntro .npp-cinema-intro__stage,
#nppCinemaIntro .npp-cinema-intro__brand {
  pointer-events:auto !important;
}

#nppCinemaIntro #nppCinemaEnter,
#nppCinemaIntro #nppCinemaSkip {
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  cursor:pointer !important;
}

#nppCinemaIntro #nppCinemaEnter {
  position:relative !important;
  z-index:50 !important;
}

#nppCinemaIntro #nppCinemaSkip {
  z-index:100 !important;
}

/* NPP_CINEMA_INTRO_TOUCH_FIX_END */


/* NPP_CINEMA_SCROLL_LOCK_START */

html.npp-cinema-intro-running,
html.npp-cinema-intro-running body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.npp-cinema-intro-active {
  touch-action: none !important;
}

body.npp-cinema-intro-active #nppCinemaIntro {
  touch-action: none !important;
  pointer-events: auto !important;
}

body.npp-cinema-intro-active
#nppCinemaIntro
#nppCinemaEnter,

body.npp-cinema-intro-active
#nppCinemaIntro
#nppCinemaSkip {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 2147483647 !important;
}

body.npp-cinema-intro-active
#nppCinemaIntro
#nppCinemaSkip {
  position: fixed !important;
}

/* NPP_CINEMA_SCROLL_LOCK_END */


/* NPP MOBILE INPUT FIX */
html{
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
}

input,
textarea,
select{
  font-size:16px !important;
}

button{
  touch-action:manipulation;
}

.modal[aria-hidden="false"]{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:
    max(12px, env(safe-area-inset-top))
    16px
    max(16px, env(safe-area-inset-bottom));
}

.modal-card,
.auth-card{
  width:min(92vw, 720px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  margin:auto;
}

.auth-card input,
.auth-card textarea,
.auth-card select,
.auth-card button{
  font-size:16px !important;
}

.auth-card form{
  padding-bottom:max(16px, env(safe-area-inset-bottom));
}

@supports (-webkit-touch-callout:none){
  input,
  textarea,
  select,
  .auth-card input,
  .auth-card textarea,
  .auth-card select{
    font-size:16px !important;
  }
}