/* =========================================================
   نیان‌پارت — هیروهای سینمایی صفحه‌ی معرفی محصولات
   (منتقل‌شده از قالب وبلاگ؛ مستقل و بدون وابستگی)
   ========================================================= */
:root{
  --red:#8B0000; --red2:#A50000;
  --border:var(--border-color,rgba(148,163,184,.15));
  --card:var(--bg-card,rgba(30,41,59,.4));
  --bg2:var(--bg-secondary,#0f172a);
  --muted:var(--text-secondary,#94a3b8);
  --text:var(--text-primary,#fff);
}
.np-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

.blog-hero-modern .bh-inner { position:relative; z-index:2; }
.hero-cine.hero-full{ position:relative; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:90px 20px; perspective:1200px; background:#0a0f1c; }

.hero-cine.hero-full .hc-photo-wrap{ position:absolute; inset:0; z-index:0; transform-style:preserve-3d; }

.hero-cine.hero-full .hc-photo{ position:absolute; inset:-4%; background-size:cover; background-position:center;
  filter:blur(3px) saturate(1.12) contrast(1.06); transform:scale(1.08); transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform; }
.hero-cine.hero-full .hc-photo-scrim{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.15), rgba(0,0,0,.55) 70%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.35) 40%, #000 100%); }

.hero-cine.hero-full .bh-inner{ position:relative; z-index:3; transition:transform .4s cubic-bezier(.16,1,.3,1); will-change:transform; transform-style:preserve-3d; }

.hero-cine.hero-full .kicker{ color:#93c5fd; font-weight:800; font-size:14px; letter-spacing:.5px; margin-bottom:14px; text-shadow:0 2px 12px rgba(0,0,0,.6); }

.hero-cine.hero-full h1{ font-size:clamp(34px,6.5vw,68px); font-weight:900; color:#fff; margin:0 0 18px; line-height:1.15; text-shadow:0 6px 30px rgba(0,0,0,.7); }

.hero-cine.hero-full h1 .grad{ background:linear-gradient(120deg,#ff8a3d,#ff5252 60%,#ffb057); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-cine.hero-full p{ color:rgba(255,255,255,.92); font-size:clamp(15px,2.2vw,19px); max-width:620px; margin:0 auto 26px; line-height:2; text-shadow:0 2px 16px rgba(0,0,0,.7); }

.hero-cine.hero-full .searchform{ max-width:480px; }

.hero-cine.hero-full .searchform input{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:14px 16px; font-size:15px; }

.hero-cine.hero-full .searchform input::placeholder{ color:rgba(255,255,255,.7); }

.hero-cine.hero-full .searchform input:focus{ outline:none; border-color:#ff8a3d; box-shadow:0 0 0 3px rgba(255,138,61,.3); }

.hero-cine.hero-full .searchform .btn-red{ padding:14px 22px; }

.hero-cine.hero-full .hc-badges{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

.hero-cine.hero-full .hc-badge{ font-size:12px; color:#e5e7eb; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2);
  padding:8px 15px; border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:0 1px 6px rgba(0,0,0,.5); }

.hero-cine.hero-full .hc-badge b{ color:#fff; }
.hc-scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:14px; }

.hc-scroll-cue span{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:#fff; border-radius:2px; animation:hcCue 1.6s ease-in-out infinite; }
@media(max-width:768px){
  
  .hero-cine.hero-full{ min-height:88vh; padding:80px 18px; }
  
  .hero-cine.hero-full .hc-photo{ filter:blur(2px) saturate(1.1); }
}
@media(prefers-reduced-motion: reduce){
  
  .hero-cine.hero-full .hc-photo, .hero-cine.hero-full .bh-inner{ transition:none !important; }
  
  .hc-scroll-cue span{ animation:none; }
}
.hero-cine .searchform input{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

.hero-cine .searchform input::placeholder{ color:rgba(226,232,240,.6); }

.hero-cine .searchform input:focus{ outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25); }
.np-video-sec{ }
.np-comb{ position:relative; height:230vh; background:#000; }
.np-comb-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }

.np-comb-img{ position:absolute; inset:-2%; background-size:cover; background-position:center; will-change:transform,opacity; transform:scale(1); }

.np-comb-engine{ z-index:1; }

.np-comb-cyl{ z-index:2; opacity:0; background-size:contain; background-repeat:no-repeat; background-color:#000; }
.np-comb-vignette{ position:absolute; inset:0; pointer-events:none; opacity:.85; z-index:3;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.98) 100%),
    linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, #000 100%); }
.np-comb::before{ content:''; position:absolute; top:0; inset-inline:0; height:160px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,#000, transparent); }

.np-comb-center{ position:relative; z-index:5; text-align:center; color:#fff; will-change:transform,opacity; }

.np-comb-title{ font-size:clamp(28px,5vw,52px); font-weight:900; margin:0 0 10px; text-shadow:0 6px 30px rgba(0,0,0,.7); }

.np-comb-sub{ font-size:14px; color:rgba(255,255,255,.75); margin:0; }
.np-info{ position:absolute; z-index:6; width:min(260px,42vw); min-height:88px; display:flex; gap:10px; align-items:flex-start;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:14px 16px; color:#fff;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6); opacity:0; will-change:transform,opacity; }

.np-info .np-info-ic{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }

.np-info .np-info-ic svg{ display:block; }

.np-info .np-info-tx{ display:flex; flex-direction:column; gap:4px; font-size:12px; line-height:1.9; color:rgba(255,255,255,.86); }

.np-info .np-info-tx b{ font-size:14px; color:#fff; }
.np-info-tl{ top:12%;  inset-inline-start:4%;  transform:translate(calc(var(--np-t,1) * -60px), calc(var(--np-t,1) * -40px)); }

.np-info-tr{ top:12%;  inset-inline-end:4%;    transform:translate(calc(var(--np-t,1) * 60px),  calc(var(--np-t,1) * -40px)); }

.np-info-bl{ bottom:12%; inset-inline-start:4%; transform:translate(calc(var(--np-t,1) * -60px), calc(var(--np-t,1) * 40px)); }

.np-info-br{ bottom:12%; inset-inline-end:4%;   transform:translate(calc(var(--np-t,1) * 60px),  calc(var(--np-t,1) * 40px)); }
@media(max-width:768px){
  
  .np-comb{ height:200vh; }
  .np-comb-cyl{ background-size:cover; }
  
  .np-info{ width:42vw; min-height:74px; padding:9px 11px; gap:7px; border-radius:13px; }
  
  .np-info .np-info-ic{ width:24px; height:24px; }
  
  .np-info .np-info-ic svg{ width:14px; height:14px; }
  
  .np-info .np-info-tx{ font-size:10.5px; line-height:1.7; gap:2px; }
  
  .np-info .np-info-tx b{ font-size:12px; }
  .np-info-tl,.np-info-tr{ top:15%; }
  
  .np-info-bl,.np-info-br{ bottom:8%; }
  
  .np-info-tl,.np-info-bl{ inset-inline-start:3%; }
  
  .np-info-tr,.np-info-br{ inset-inline-end:3%; }
}
.np-hero-gap{ position:relative; height:70px; background:#000; z-index:1; }

.np-hero-gap::before, .np-hero-gap::after{ content:''; position:absolute; inset-inline:0; height:70px; pointer-events:none; }

.np-hero-gap::before{ top:-40px; background:linear-gradient(180deg, transparent, #000); }
.np-hero-gap::after{ bottom:-40px; background:linear-gradient(180deg, #000, transparent); }
@media(max-width:768px){
   .np-hero-gap{ height:48px; }
}
.np-vid{ position:relative; height:320vh; background:#000; }

.np-vid-sticky{ position:relative; position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }

.np-vid-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; background:#000; }
.np-vid::before{ content:''; position:absolute; top:0; inset-inline:0; height:160px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,#000, transparent); }

.np-vid-vignette{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.35;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 28%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.95) 100%),
    linear-gradient(180deg, #000 0%, transparent 18%, transparent 72%, #000 100%); }


.np-vid-center{ position:relative; z-index:5; text-align:center; color:#fff; will-change:transform,opacity; padding:0 20px; }

.np-vid-title{ font-size:clamp(26px,4.8vw,50px); font-weight:900; margin:0 0 10px; text-shadow:0 6px 30px rgba(0,0,0,.7); }

.np-vid-sub{ font-size:14px; color:rgba(255,255,255,.75); margin:0; }
.np-vid-loader{ position:absolute; z-index:7; bottom:22px; inset-inline-end:22px; display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 14px;
  color:rgba(255,255,255,.85); font-size:12px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .4s ease; }

.np-vid-loader.is-done{ opacity:0; pointer-events:none; }

.np-vid-spinner{ width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:npVidSpin .8s linear infinite; }
.np-vid-boxes{ position:absolute; z-index:6; inset-inline:0; bottom:6%; display:flex; align-items:stretch;
  justify-content:center; gap:16px; padding:0 4%; }

.np-vid-boxes .np-info.np-info-flat{ position:relative; inset:auto; flex:1 1 300px; max-width:340px;
  transform:translateY(calc(var(--np-t,1) * 34px)); }

.np-vid-boxes .np-info-flat .np-info-tx{ line-height:1.85; }
@media(max-width:900px){
  
  .np-vid-boxes{ flex-wrap:wrap; }
  
  .np-vid-boxes .np-info.np-info-flat{ flex:1 1 46%; }
}
@media(max-width:768px){
  
  .np-vid{ height:280vh; }
  
  .np-vid-loader{ inset-inline-end:14px; bottom:14px; padding:6px 11px; font-size:11px; }
  
  .np-vid-boxes{ position:absolute; bottom:3%; gap:8px; padding:0 3%; }
  
  .np-vid-boxes .np-info.np-info-flat{ flex:1 1 100%; max-width:none; min-height:auto; padding:10px 12px; }
  
  .np-vid-boxes .np-info-flat .np-info-tx{ font-size:10.5px; line-height:1.65; }
  
  .np-vid-boxes .np-info-flat .np-info-tx b{ font-size:12px; }
}
.np-jsec{ margin:30px 0; }

@keyframes hcCue{ 0%{ opacity:0; top:8px; } 40%{ opacity:1; } 100%{ opacity:0; top:20px; } }

@keyframes npVidSpin{ to{ transform:rotate(360deg); } }
/* =========================================================
   تیزر ویدیویی انتهای صفحه (پخش خودکار با اسکرول + تکرار)
   ========================================================= */
.np-teaser{ position:relative; background:#000; padding:0; }
.np-teaser-in{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.np-teaser-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.np-teaser-grad{ position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 38%, transparent 65%),
             linear-gradient(180deg, rgba(0,0,0,.45), transparent 22%); }
.np-teaser-cap{ position:absolute; inset-inline-start:0; bottom:0; z-index:3; padding:34px 40px; color:#fff; }
.np-teaser-kick{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.4px; color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red2)); padding:5px 13px; border-radius:999px; margin-bottom:12px; }
.np-teaser-cap h2{ margin:0; font-size:clamp(20px,3.2vw,38px); font-weight:900; text-shadow:0 4px 24px rgba(0,0,0,.7); }
/* دکمه‌ی صدا */
.np-teaser-sound{ position:absolute; z-index:4; inset-inline-end:22px; bottom:24px; display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; cursor:pointer; color:#fff; font-family:inherit; font-size:13px; font-weight:700;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background .25s, transform .25s; }
.np-teaser-sound:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }
.np-teaser-sound svg{ width:19px; height:19px; flex-shrink:0; }
.np-teaser-sound .ic-on{ display:none; }
.np-teaser-sound.on .ic-on{ display:block; }
.np-teaser-sound.on .ic-off{ display:none; }
.np-teaser-sound.on .np-teaser-sound-t{ display:none; }
@media(max-width:768px){
  .np-teaser-in{ aspect-ratio:4/3; }
  .np-teaser-cap{ padding:20px 20px 22px; }
  .np-teaser-sound{ inset-inline-end:14px; bottom:14px; padding:9px 13px; font-size:12px; }
}