/* Custom hero video player (assets/js/player.js). Three skins: cinematic, classified, chapters. */
.np { position: relative; outline: none; user-select: none; -webkit-user-select: none; }
.np video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.np__shade { position: absolute; inset: 0; pointer-events: none; transition: opacity .35s; opacity: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.78) 100%); }
.np--idle .np__shade, .np--paused .np__shade, .np--active .np__shade, .np--ended .np__shade { opacity: 1; }
.np--idle .np__shade, .np--ended .np__shade { pointer-events: auto; background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.8)); }
.np button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.np svg { width: 100%; height: 100%; display: block; }

/* big start button */
.np__big { position: absolute; left: 50%; top: 76%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--text, #f6f1e7);
  opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
.np--idle .np__big { opacity: 1; pointer-events: auto; }
.np__bigicon { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; padding: 26px 24px 26px 30px; color: #1a1408;
  background: var(--gold-grad-btn, linear-gradient(135deg,#fff1a8,#ffc21a)); box-shadow: 0 0 0 10px rgba(255,204,51,.12), 0 0 60px rgba(255,204,51,.45); transition: transform .25s, box-shadow .25s; }
.np__big:hover .np__bigicon { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(255,204,51,.16), 0 0 80px rgba(255,204,51,.6); }
.np__bigtext { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(10,9,7,.72); border: 1px solid rgba(240,200,100,.28); white-space: nowrap; }
.np__bigtext b { display: block; font: 600 17px/1.2 var(--font-display, sans-serif); letter-spacing: .01em; }
.np__bigtext small { display: block; font: 500 13px/1.2 var(--font-body, sans-serif); letter-spacing: .1em; color: var(--gold-2, #f6d77e); }
.np__bigtext small::before { content: '·'; margin-right: 10px; color: rgba(246,241,231,.4); }

/* control bar */
.np__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 14px 20px 16px; color: var(--text, #f6f1e7);
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.np--paused .np__bar, .np--active .np__bar { opacity: 1; transform: none; }
.np--idle .np__bar, .np--ended .np__bar { opacity: 0; pointer-events: none; }
.np__btn { width: 22px; height: 22px; flex: none; opacity: .92; transition: opacity .2s, color .2s; }
.np__btn:hover { opacity: 1; color: var(--gold-2, #f6d77e); }
.np__time { font: 500 13px/1 var(--font-body, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.np__sep { opacity: .5; }
.np__track { position: relative; flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.np__rail { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; transition: height .2s; }
.np__track:hover .np__rail, .np--drag .np__rail { height: 5px; }
.np__buf { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.18); }
.np__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold-grad, linear-gradient(90deg,#ffe08a,#e0aa2e)); box-shadow: 0 0 12px rgba(255,204,51,.55); }
.np__knob { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--gold-1, #fff4cc);
  box-shadow: 0 0 0 4px rgba(255,204,51,.25), 0 0 14px rgba(255,204,51,.7); transform: scale(0); transition: transform .2s; }
.np__track:hover .np__knob, .np--drag .np__knob { transform: scale(1); }
.np__tip { position: absolute; bottom: 26px; transform: translateX(-50%); padding: 5px 9px; border-radius: 6px; background: rgba(10,9,7,.92); border: 1px solid var(--line, rgba(212,175,55,.22));
  font: 500 12px/1 var(--font-body, sans-serif); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.np__track:hover .np__tip { opacity: 1; }
.np__tick { position: absolute; top: 50%; width: 3px; height: 9px; margin: -4.5px 0 0 -1.5px; border-radius: 2px; background: rgba(10,9,7,.85); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* end screen */
.np__end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.np--ended .np__end { opacity: 1; pointer-events: auto; }
.np__replay { display: flex; align-items: center; gap: 10px; width: auto; height: auto; color: var(--text, #f6f1e7); font: 500 15px/1 var(--font-body, sans-serif); }
.np__replay svg { width: 22px; height: 22px; }

/* ---------- skin 1: cinematic (minimal, gold line) ---------- */
.np--cinematic .np__bar { padding: 18px 26px 20px; }
.np--cinematic .np__rail { height: 2px; }

/* ---------- skin 2: classified (found-footage tape) ---------- */
.np--classified .np__tag, .np--classified .np__tc { position: absolute; top: 18px; display: flex; align-items: center; gap: 10px; color: var(--text, #f6f1e7);
  font: 600 12px/1 var(--font-body, sans-serif); letter-spacing: .18em; text-shadow: 0 1px 8px rgba(0,0,0,.8); transition: opacity .3s; }
.np--classified .np__tag { left: 22px; } .np--classified .np__tc { right: 22px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.np__rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red, #ff5a5a); box-shadow: 0 0 10px var(--red, #ff5a5a); animation: np-blink 1.2s steps(2) infinite; }
@keyframes np-blink { 50% { opacity: 0; } }
.np--classified:not(.np--active):not(.np--paused):not(.np--idle) .np__tag, .np--classified:not(.np--active):not(.np--paused):not(.np--idle) .np__tc { opacity: .35; }
.np--classified .np__big { gap: 14px; }
.np--classified .np__bigicon { width: auto; height: auto; padding: 14px 26px; border-radius: 4px; background: rgba(10,9,7,.6); color: var(--gold-2, #f6d77e);
  border: 2px solid var(--gold-3, #d4af37); box-shadow: 0 0 30px rgba(212,175,55,.25); }
.np--classified .np__bigicon svg { width: 34px; height: 34px; }
.np--classified .np__bigtext { border-radius: 4px; }
.np--classified .np__bigtext b { font: 700 13px/1.2 var(--font-body, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
.np--classified .np__rail { position: absolute; opacity: 0; }
.np__segs { display: flex; gap: 3px; width: 100%; height: 10px; }
.np__segs b { flex: 1; border-radius: 1px; background: rgba(255,255,255,.14); transition: background .2s; }
.np__segs b.on { background: var(--gold-3, #d4af37); box-shadow: 0 0 8px rgba(255,204,51,.45); }
.np--classified .np__knob { display: none; }

/* ---------- skin 3: chapters (frosted bar with chapter marks) ---------- */
.np--chapters .np__bar { left: 18px; right: 18px; bottom: 16px; padding: 10px 18px; border-radius: 999px; background: rgba(14,13,11,.55);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(240,200,100,.22); }
.np__chap { font: 600 12px/1 var(--font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2, #f6d77e); white-space: nowrap; min-width: 118px; text-align: right; }

@media (max-width: 640px) {
  .np__bigicon { width: 64px; height: 64px; padding: 19px 17px 19px 22px; }
  .np__bigtext b { font-size: 16px; }
  .np__bar { gap: 10px; padding: 10px 12px 12px; }
  .np__chap { display: none; }
  .np--chapters .np__bar { left: 10px; right: 10px; bottom: 10px; }
  .np--classified .np__tag { font-size: 10px; left: 12px; top: 12px; } .np--classified .np__tc { font-size: 10px; right: 12px; top: 12px; }
}

/* ---------- minimal: play/pause bottom-left + slider, nothing else ---------- */
.np--minimal .np__shade { background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.5) 100%) !important; }
.np--minimal.np--idle .np__shade { pointer-events: auto; }
.np--minimal .np__bar { left: 0; right: 0; bottom: 0; height: 56px; padding: 0 18px; gap: 14px; align-items: center;
  opacity: 1; transform: none; pointer-events: auto; transition: opacity .35s; }
.np--minimal:not(.np--idle):not(.np--paused):not(.np--active) .np__bar { opacity: 0; }
.np--minimal .np__play { position: relative; flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  color: #16110a; opacity: 1; background: var(--gold-grad-btn, linear-gradient(135deg,#fff1a8,#ffc21a)); box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 10px rgba(255,204,51,.28);
  transition: transform .2s; }
.np--minimal .np__play:hover { color: #16110a; transform: scale(1.07); }
.np--minimal .np__play svg { width: 10px; height: 10px; }
.np--minimal.np--idle .np__play svg, .np--minimal.np--paused .np__play svg { transform: translateX(0.75px); }  /* optical centre of the triangle */
.np--minimal .np__track { height: 32px; }
.np--minimal .np__rail { height: 3px; background: rgba(255,255,255,.3); }
.np--minimal .np__track:hover .np__rail, .np--minimal.np--drag .np__rail { height: 4px; }
.np--minimal .np__knob { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
@media (max-width: 640px) { .np--minimal .np__bar { height: 48px; padding: 0 14px; gap: 12px; } .np--minimal .np__play { width: 24px; height: 24px; } .np--minimal .np__play svg { width: 9px; height: 9px; } }

/* minimal: volume + fullscreen on the right */
.np--minimal .np__btn.np__mute, .np--minimal .np__btn.np__fs { width: 17px; height: 17px; color: #f6f1e7; opacity: .9; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.np--minimal .np__btn.np__mute:hover, .np--minimal .np__btn.np__fs:hover { opacity: 1; color: var(--gold-2, #f6d77e); }
.np__vol { display: flex; align-items: center; gap: 0; flex: none; margin-left: 4px; }
.np__vtrack { position: relative; width: 0; margin-left: 0; height: 32px; display: flex; align-items: center; cursor: pointer; overflow: hidden; transition: width .25s, margin-left .25s; touch-action: none; }
.np__vol:hover .np__vtrack, .np--vdrag .np__vtrack { width: 72px; margin-left: 10px; overflow: visible; }
.np__vrail { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.np__vfill { position: absolute; inset: 0 auto 0 0; background: var(--gold-grad, linear-gradient(90deg,#ffe08a,#e0aa2e)); }
.np__vknob { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gold-1, #fff4cc); }
.np--fs { width: 100vw !important; height: 100vh !important; border-radius: 0 !important; background: #000; }
.np--fs video { object-fit: contain; }
@media (hover: none) { .np__vtrack { display: none; } }

/* fullscreen: video only, no gold frame, glow, rounded corners or focus ring */
.np:fullscreen, .np:-webkit-full-screen, .np.np--fs { border: 0 !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; background: #000 !important; }
.np:fullscreen::before, .np:fullscreen::after, .np.np--fs::before, .np.np--fs::after { display: none !important; }
.np:focus, .np:focus-visible { outline: none; }