/* ============================================================
   NoriPlay v43 — Ultimate Visual Overhaul
   Final public design / motion layer
   ============================================================ */
:root{
  --np43-radius-xl:26px;
  --np43-radius-lg:20px;
  --np43-radius-md:14px;
  --np43-ease:cubic-bezier(.22,.61,.36,1);
  --np43-shadow:0 22px 70px rgba(0,0,0,.14);
  --np43-shadow-hover:0 30px 90px rgba(0,0,0,.22);
  --np43-glass:color-mix(in srgb,var(--surface) 88%,transparent);
  --np43-soft-red:color-mix(in srgb,var(--red) 12%,transparent);
  --np43-edge:color-mix(in srgb,var(--line) 86%,transparent);
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
body::before{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--red) 7%,transparent),transparent 25%),
    radial-gradient(circle at 88% 32%,color-mix(in srgb,var(--red) 4%,transparent),transparent 22%);
}
::selection{background:color-mix(in srgb,var(--red) 40%,transparent);color:#fff}

/* page transition + top progress */
.np43-page-curtain{position:fixed;inset:0;z-index:9998;pointer-events:none;background:var(--bg);opacity:0;transition:opacity .22s ease}
body.np43-leaving .np43-page-curtain{opacity:.58}
.np43-scroll-progress{position:fixed;z-index:9999;left:0;top:0;width:100%;height:2px;pointer-events:none;background:transparent}
.np43-scroll-progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--red-2));box-shadow:0 0 12px color-mix(in srgb,var(--red) 42%,transparent);transition:width .08s linear}

/* header */
.site-header{
  transition:min-height .25s var(--np43-ease),background .25s ease,box-shadow .25s ease,border-color .25s ease!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  background:color-mix(in srgb,var(--bg) 78%,transparent)!important;
}
.site-header.np43-scrolled{box-shadow:0 14px 44px rgba(0,0,0,.14)!important;border-bottom-color:color-mix(in srgb,var(--line) 90%,transparent)!important;background:color-mix(in srgb,var(--bg) 91%,transparent)!important}
.header-row{transition:min-height .25s var(--np43-ease)!important}
.site-header.np43-scrolled .header-row{min-height:58px!important}
.header-logo img{transition:transform .28s var(--np43-ease),filter .28s ease!important}
.header-logo:hover img{transform:scale(1.035);filter:drop-shadow(0 9px 18px rgba(0,0,0,.16))}
.search{position:relative;overflow:hidden;border-radius:999px!important;transition:box-shadow .18s ease,border-color .18s ease,background .18s ease!important}
.search:focus-within{border-color:color-mix(in srgb,var(--red) 38%,var(--line))!important;box-shadow:0 0 0 4px var(--np43-soft-red),0 12px 30px rgba(0,0,0,.08)!important;background:var(--surface)!important}
.search input{transition:padding .18s ease!important}
.search button{transition:transform .15s ease,background .18s ease!important}
.search button:hover{transform:scale(1.06);background:color-mix(in srgb,var(--red) 12%,transparent)!important}
.menu-toggle,.theme-toggle,.account-trigger{transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.menu-toggle:hover,.theme-toggle:hover,.account-trigger:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08)}

/* general surfaces */
.panel,.search-page-hero,.category-panel,.account-card,.home-featured-section,.home-catalog-panel,.video-info-card,.comments-card,.watch-related-panel{
  border-color:var(--np43-edge)!important;
}
.eyebrow{letter-spacing:.15em!important;font-weight:900!important}
.btn,.action-button,.source-button,.catalog-pagination button,.theme-toggle,.menu-toggle{position:relative;overflow:hidden}
.np43-ripple{position:absolute!important;border-radius:50%;pointer-events:none!important;background:rgba(255,255,255,.24)!important;transform:scale(0);animation:np43-ripple .48s ease-out forwards;z-index:20!important}
@keyframes np43-ripple{to{transform:scale(1);opacity:0}}

/* hero */
.home-hero{
  min-height:330px!important;border-radius:30px!important;
  box-shadow:0 34px 110px rgba(0,0,0,.26)!important;
  transition:transform .35s var(--np43-ease),box-shadow .35s ease!important;
}
.home-hero:hover{box-shadow:0 42px 125px rgba(0,0,0,.30)!important}
.home-hero-copy{padding:52px 38px!important}
.home-hero h1{max-width:850px!important;font-size:clamp(42px,5.5vw,74px)!important;letter-spacing:-.07em!important;line-height:.95!important}
.home-hero p{font-size:13px!important;max-width:680px!important}
.home-hero-actions{gap:10px!important}
.home-hero-actions .btn{min-height:48px!important;border-radius:13px!important;transition:transform .18s var(--np43-ease),box-shadow .2s ease,filter .2s ease!important}
.home-hero-actions .btn:hover{transform:translateY(-2px)!important;filter:brightness(1.03)}
.home-primary-action{box-shadow:0 15px 34px color-mix(in srgb,var(--red) 25%,transparent)!important}
.home-overview-card{transform:translateZ(0);transition:transform .3s var(--np43-ease),box-shadow .3s ease!important}
.home-overview-card:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(0,0,0,.23)!important}
.home-compact-stats article{transition:transform .18s ease,border-color .18s ease!important}
.home-compact-stats article:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--red) 22%,var(--line))!important}

/* sections / cards */
.home-featured-section,.home-catalog-panel{border-radius:22px!important;box-shadow:0 16px 48px rgba(0,0,0,.075)!important}
.home-section-head h2,.section-title,.search-page-hero h1{letter-spacing:-.045em!important;text-wrap:balance}
.video-grid{gap:20px 16px!important}
.video-card{transition:transform .22s var(--np43-ease),filter .22s ease!important;will-change:transform}
.video-card:hover{transform:translateY(-4px)}
.video-thumb{border-radius:15px!important;overflow:hidden!important;box-shadow:0 10px 28px rgba(0,0,0,.12);transition:box-shadow .28s ease,border-color .28s ease!important}
.video-card:hover .video-thumb{box-shadow:var(--np43-shadow-hover)!important}
.video-thumb img{transition:transform .5s var(--np43-ease),filter .35s ease!important}
.video-card:hover .video-thumb img{transform:scale(1.055)!important;filter:saturate(1.08) contrast(1.025)}
.video-card .play{backdrop-filter:blur(9px);transition:transform .22s var(--np43-ease),box-shadow .22s ease,background .22s ease!important}
.video-card:hover .play{box-shadow:0 16px 34px rgba(0,0,0,.38),0 0 0 7px color-mix(in srgb,var(--red) 9%,transparent)!important}
.video-card h3{transition:color .18s ease!important}
.video-card:hover h3{color:var(--text)!important}

/* search + categories */
.search-page-hero{position:relative;overflow:hidden;border-radius:26px!important;box-shadow:var(--np43-shadow)!important;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 82%,var(--surface)))!important}
.search-page-hero::after{content:"";position:absolute;width:300px;height:300px;right:-130px;top:-160px;border-radius:50%;background:var(--np43-soft-red);filter:blur(38px);pointer-events:none}
.search-page-form{position:relative;z-index:2}
.search-page-form input{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important}
.search-page-form input:focus{box-shadow:0 0 0 4px var(--np43-soft-red)!important}
.category-option,.category-card,.chip{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease!important}
.category-option:hover,.category-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.08)}

/* player */
.player-shell{border-radius:24px!important;box-shadow:0 38px 115px rgba(0,0,0,.44)!important;transition:box-shadow .3s ease,transform .3s var(--np43-ease)!important}
.player-topline{min-height:48px!important;background:linear-gradient(180deg,rgba(27,28,33,.98),rgba(10,11,14,.98))!important}
.player-stage{isolation:isolate}
.player-stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0,.24)}
.np36-watermark{border-radius:10px!important}
.noir-custom-player .np-center-play{transition:transform .22s var(--np43-ease),background .22s ease,box-shadow .22s ease!important}
.noir-custom-player .np-center-play:hover{transform:translate(-50%,-50%) scale(1.07)!important}
.noir-custom-player .np-controls{padding-inline:19px!important}
.noir-custom-player .np-progress-track{transition:height .14s ease!important}
.noir-custom-player .np-progress-wrap:hover .np-progress-track{height:7px!important}
.source-dock{padding:13px 14px!important}
.source-button{transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.source-button:hover{transform:translateY(-2px)!important}
.source-button.active{box-shadow:0 12px 28px color-mix(in srgb,var(--red) 16%,transparent)!important}
.video-info-card{border-radius:22px!important;padding:22px!important}
.watch-title{font-size:clamp(25px,2.7vw,39px)!important}
.quick-actions{display:flex;flex-wrap:wrap;gap:9px!important}
.action-button{border-radius:12px!important;transition:transform .15s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important}
.action-button:hover{transform:translateY(-2px)!important;box-shadow:0 10px 26px rgba(0,0,0,.10)}
.watch-related-panel{border-radius:22px!important}
.comments-card{border-radius:22px!important}
.comment{border-radius:13px!important;transition:transform .16s ease,background .16s ease!important}
.comment:hover{transform:translateX(2px)}

/* ads: professional but restrained */
.ad-slot{border-radius:16px!important;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease!important}
.ad-slot:hover{border-color:color-mix(in srgb,var(--line) 68%,var(--red))!important;box-shadow:0 15px 36px rgba(0,0,0,.08)}

/* pagination */
.catalog-pagination{backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,.10)!important}
.catalog-pagination button{transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.catalog-pagination button:hover:not(:disabled){transform:translateY(-2px)!important}

/* dynamic reveal */
.np43-reveal{opacity:0;transform:translateY(18px) scale(.992);filter:blur(3px);transition:opacity .58s var(--np43-ease),transform .58s var(--np43-ease),filter .58s ease;transition-delay:var(--np43-delay,0ms)}
.np43-reveal.np43-in{opacity:1;transform:none;filter:none}

/* mobile */
@media(max-width:760px){
  .site-header{background:color-mix(in srgb,var(--bg) 92%,transparent)!important}
  .header-row{gap:8px!important}
  .home-hero{border-radius:20px!important;min-height:0!important;margin-inline:0!important}
  .home-hero-copy{padding:32px 20px 22px!important}
  .home-hero h1{font-size:clamp(36px,12vw,52px)!important;letter-spacing:-.065em!important}
  .home-hero p{font-size:11px!important;line-height:1.65!important}
  .home-hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .home-hero-actions .btn{width:100%;justify-content:center}
  .home-hero-side{padding:0 14px 16px!important}
  .home-featured-section,.home-catalog-panel{border-radius:16px!important;padding:14px!important}
  .video-grid{gap:16px 10px!important}
  .video-card:hover{transform:none}
  .player-shell{border-radius:0!important;box-shadow:0 24px 65px rgba(0,0,0,.32)!important}
  .player-topline{min-height:42px!important}
  .noir-custom-player .np-controls{padding-inline:8px!important}
  .source-dock{padding:8px!important}
  .video-info-card,.comments-card{border-radius:16px!important;margin-inline:10px!important}
  .watch-title{font-size:22px!important}
  .quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}
  .action-button{width:100%;justify-content:center}
  .search-page-hero{border-radius:18px!important;padding:20px!important}
}
@media(max-width:430px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .video-card h3{font-size:10px!important}
  .video-meta{font-size:7px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .np43-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .home-hero,.video-card,.home-overview-card{transition:none!important}
}
