/* ============================================================
   FLEXYPRO — CINEMA (стили кино-прокрутки)
   Пара к /static/js/cinema.js. Используется на странице «Интерьеры»
   и в лаборатории cine_lab.html.
   ============================================================ */
.cine { position:relative; }
.cine__stage { position:sticky; top:0; height:100svh; overflow:hidden; background:#0e0c0b; }
.cine__scene { position:absolute; inset:0; opacity:0; will-change:opacity; }
.cine__media {
  position:absolute; inset:-2%; width:104%; height:104%;
  background-size:cover; background-position:center; will-change:transform;
}
.cine__media video, .cine__media .ph {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.cine__grad {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,12,11,0.55) 0%, transparent 22%, transparent 50%, rgba(14,12,11,0.85) 100%),
    linear-gradient(90deg, rgba(14,12,11,0.62) 0%, transparent 44%);
}
.cine__copy {
  position:absolute; left:clamp(24px,6vw,110px); bottom:clamp(64px,13vh,140px);
  max-width:min(640px,86vw); z-index:3; will-change:transform,opacity;
}
.cine__kicker {
  display:inline-flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:#FD6143; font-weight:600; margin-bottom:18px;
}
.cine__kicker::before { content:''; width:26px; height:1px; background:linear-gradient(90deg,#FD6143,transparent); }
.cine__h { font-size:clamp(34px,5.2vw,72px); font-weight:300; line-height:1.05; letter-spacing:-0.02em; color:#F4EFE8; margin:0; }
.cine__h b { font-weight:600; }
.cine__sub { margin:18px 0 0; font-size:clamp(15px,1.5vw,20px); line-height:1.5; color:rgba(244,239,232,0.82); max-width:46ch; }
.cine__cta { display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:14px 26px;
  background:#FD6143; color:#1a1310; font-weight:600; font-size:15px; border-radius:999px; text-decoration:none;
  transition:transform .3s, box-shadow .3s; box-shadow:0 10px 30px rgba(253,97,67,0.3); }
.cine__cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(253,97,67,0.45); }

.cine__wordmark { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:3; text-align:center; pointer-events:none; padding:0 20px; }
.cine__wordmark .w { font-size:clamp(44px,10vw,150px); font-weight:200; letter-spacing:.28em; margin-right:-.28em;
  color:transparent; -webkit-text-stroke:1px rgba(244,239,232,0.85); text-shadow:0 0 50px rgba(253,97,67,0.3); }
.cine__wordmark .w b { font-weight:200; color:#FD6143; -webkit-text-stroke:0; }
.cine__wordmark .wc { margin-top:16px; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:rgba(244,239,232,0.55); }
.cine__wordmark .wcta { pointer-events:auto; margin-top:34px; }

.cine__rail { position:fixed; right:clamp(14px,2.4vw,32px); top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:12px; }
.cine__dot { width:7px; height:7px; border-radius:50%; background:rgba(244,239,232,0.25); transition:all .4s; }
.cine__dot.on { background:#FD6143; transform:scale(1.4); box-shadow:0 0 12px rgba(253,97,67,0.6); }
.cine__scroll-hint { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(244,239,232,0.5);
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.cine__scroll-hint::after { content:''; width:1px; height:32px; background:linear-gradient(180deg,#FD6143,transparent); }

@media (max-width:768px){
  .cine__rail{ right:10px; }
  .cine__copy{ left:20px; right:20px; bottom:74px; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .cine__media{ transform:none !important; }
}