/* ============================================================
   NoirPlay V38 — Motion Studio (Public)
   ============================================================ */

:root{
  --np38-glow-soft: color-mix(in srgb,var(--red) 14%,transparent);
  --np38-glow-strong: color-mix(in srgb,var(--red) 28%,transparent);
  --np38-panel: color-mix(in srgb,var(--surface) 92%,transparent);
}

/* richer page motion */
.np38-float{
  animation:np38-float-y 5.8s ease-in-out infinite;
}
@keyframes np38-float-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* home */
.home-main{
  gap:24px!important;
}
.home-hero{
  box-shadow:
    0 36px 110px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.02) inset!important;
}
.home-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-badge{
  width:max-content;
  backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}
.home-badge b{letter-spacing:.06em}
.home-badge small{opacity:.9}
.home-hero-actions .btn{
  position:relative;
  overflow:hidden;
}
.home-hero-actions .btn::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -60%;
  width:44%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:0;
  transition:transform .52s ease, opacity .26s ease;
}
.home-hero-actions .btn:hover::after{
  opacity:1;
  transform:translateX(280%) skewX(-20deg);
}
.home-overview-card{
  border:1px solid color-mix(in srgb,var(--line) 92%,transparent)!important;
}
.home-compact-stats article{
  position:relative;
  overflow:hidden;
}
.home-compact-stats article::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 45%);
  pointer-events:none;
}
.home-compact-stats article b{
  font-size:24px!important;
}
.home-section,.home-featured-section,.home-catalog-panel{
  backdrop-filter:blur(10px);
}
.home-section-head{
  align-items:end!important;
}
.home-section-head p{
  max-width:680px;
}
.video-grid{
  gap:18px!important;
}
.video-card{
  position:relative;
}
.video-card::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:-6px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--red) 8%,transparent),transparent 70%);
  filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.video-card:hover::after{opacity:.92}
.video-card .video-thumb{
  overflow:hidden;
}
.video-card .video-thumb img,
.video-card .video-thumb video{
  transition:transform .34s cubic-bezier(.22,.61,.36,1), filter .34s ease!important;
}
.video-card:hover .video-thumb img,
.video-card:hover .video-thumb video{
  transform:scale(1.06);
  filter:saturate(1.06) contrast(1.03);
}
.video-card h3{
  transition:color .16s ease;
}
.video-card:hover h3{
  color:var(--text)!important;
}
.video-thumb .duration,
.video-thumb .video-duration,
.video-duration{
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}
.catalog-page-summary{
  margin-top:10px!important;
  text-align:center;
  color:var(--muted);
}

/* watch page */
.watch-layout{
  gap:22px!important;
}
.player-shell{
  transform:translateZ(0);
}
.player-shell::after{
  content:"";
  position:absolute;
  inset:auto 12% -34px 12%;
  height:54px;
  z-index:-1;
  background:radial-gradient(circle,var(--np38-glow-soft),transparent 72%);
  filter:blur(22px);
}
.player-topline{
  backdrop-filter:blur(16px) saturate(125%);
}
.theater-toggle,
.source-button,
.action-button{
  transition:transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease!important;
}
.theater-toggle:hover,
.source-button:hover,
.action-button:hover{
  transform:translateY(-1px);
}
.player-stage{
  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.03),transparent 32%),
    #000!important;
}
.np36-stage-ambient::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.14) 62%,rgba(0,0,0,.4));
}
.noir-custom-player .np-controls{
  backdrop-filter:blur(14px);
}
.noir-custom-player .np-control-row{
  border-radius:14px;
}
.noir-custom-player .np-progress-track{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.noir-custom-player .np-control:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.noir-custom-player .np-play{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;
}
.source-dock{
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.source-button{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}
.source-button.active{
  box-shadow:
    0 10px 26px color-mix(in srgb,var(--red) 18%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.03)!important;
}
.video-info-card,
.watch-related-panel,
.comments-card{
  box-shadow:0 18px 58px rgba(0,0,0,.12)!important;
}
.watch-title{
  text-shadow:0 1px 0 rgba(255,255,255,.02);
}
.watch-meta>span,
.watch-views{
  backdrop-filter:blur(10px);
}
.quick-actions{
  gap:9px!important;
}
.action-button.active{
  background:color-mix(in srgb,var(--surface-2) 88%,transparent)!important;
}
.watch-tags a{
  backdrop-filter:blur(9px);
}
.comment-form,
.comment{
  background:color-mix(in srgb,var(--surface-2) 74%,transparent)!important;
}
.comment{
  border-radius:12px!important;
  padding:14px!important;
}
.comment + .comment{margin-top:8px}

/* footer */
.site-footer{
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,var(--red),transparent 24%);
  opacity:.45;
}

/* mobile */
@media(max-width:760px){
  .home-main{gap:16px!important}
  .home-overview-card{box-shadow:0 16px 44px rgba(0,0,0,.18)!important}
  .video-grid{gap:14px!important}
  .player-shell::after{display:none}
  .watch-layout{gap:14px!important}
  .video-info-card,.comments-card{box-shadow:0 14px 40px rgba(0,0,0,.13)!important}
}