/* =========================================================
   الواجهة السينمائية — نادي الكويت
   خلفية فيديو تتقدم مع تمرير الصفحة + فصول نصية
   ========================================================= */

:root {
  --cin-navy: #07152b;
  --cin-panel: #0c1d36;
  --cin-white: #f4f6f8;
  --cin-muted: #bcc8d6;
  --cin-red: #e92435;
  --cin-line: rgba(232, 239, 247, .19);
}

/* ---------- المسرح ---------- */
.cinema {
  position: relative;
  background: var(--cin-navy);
  /* ارتفاع التمرير: كل 100vh = فصل */
  height: 320vh;
}

.cinema-stage {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: var(--cin-navy);
}

.cinema-stage .poster,
.cinema-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.cinema-stage video { opacity: 0; transition: opacity .8s ease; }
.cinema-stage video.is-ready { opacity: 1; }

.cinema-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to left, rgba(7,21,43,.90) 0%, rgba(7,21,43,.55) 38%, rgba(7,21,43,.10) 72%, transparent 100%),
    linear-gradient(to top, rgba(7,21,43,.92) 0%, rgba(7,21,43,0) 40%);
}

/* ---------- الفصول ---------- */
.cinema-chapters { position: relative; z-index: 3; height: 100%; }

.chapter {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, transform .6s ease;
  transform: translateY(24px);
  pointer-events: none;
}
.chapter.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.chapter .wrap { width: 100%; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--cin-white); letter-spacing: .5px;
  border-inline-start: 3px solid var(--cin-red);
  padding-inline-start: 12px; margin-bottom: 20px;
}

.chapter h2 {
  color: var(--cin-white);
  font-size: clamp(38px, 7vw, 92px);
  line-height: 1.08; margin: 0 0 18px; font-weight: 800;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.chapter h2 span { color: var(--cin-red); display: block; }

.chapter p {
  color: var(--cin-muted); font-size: clamp(16px, 2vw, 19px);
  max-width: 520px; line-height: 1.9; margin: 0 0 28px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.cin-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cin-red); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
  padding: 14px 28px; border-radius: 2px;
  transition: transform .2s ease, background .2s ease;
}
.cin-btn:hover { background: #ff3444; color: #fff; transform: translateY(-2px); }
.cin-btn.ghost { background: transparent; border: 1px solid var(--cin-line); color: var(--cin-white); }
.cin-btn.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* الاسم اللاتيني الضخم */
.wordmark {
  position: absolute; inset-inline-start: 4%; bottom: 9%;
  z-index: 3; direction: ltr;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(46px, 9vw, 130px); line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244,246,248,.20);
  pointer-events: none; user-select: none;
}
.wordmark span { -webkit-text-stroke: 1.5px rgba(233,36,53,.42); }

/* مؤشر الفصول */
.chapter-dots {
  position: absolute; inset-inline-end: 26px; top: 50%;
  transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
}
.chapter-dots span {
  width: 3px; height: 26px; background: rgba(244,246,248,.22);
  transition: background .3s ease;
}
.chapter-dots span.on { background: var(--cin-red); }

/* تلميح التمرير */
.scroll-hint {
  position: absolute; inset-inline-end: 0; inset-inline-start: 0; bottom: 26px;
  z-index: 4; text-align: center; color: var(--cin-muted); font-size: 12.5px;
  font-family: var(--font-head); transition: opacity .4s ease;
}
.scroll-hint::after {
  content: ""; display: block; width: 1px; height: 30px; margin: 8px auto 0;
  background: linear-gradient(to bottom, var(--cin-red), transparent);
  animation: hintDrop 1.8s ease-in-out infinite;
}
@keyframes hintDrop { 0%,100% { opacity: .25; transform: scaleY(.6) } 50% { opacity: 1; transform: scaleY(1) } }
.cinema.scrolled .scroll-hint { opacity: 0; }

/* ---------- الشريط المتحرك ---------- */
.ticker {
  background: var(--cin-navy); border-block: 1px solid var(--cin-line);
  overflow: hidden; padding: 15px 0;
}
.ticker-track {
  display: flex; gap: 42px; width: max-content;
  animation: tickerMove 34s linear infinite;
}
.ticker-group { display: flex; gap: 42px; align-items: center; white-space: nowrap; }
.ticker span {
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  color: var(--cin-white); letter-spacing: .4px;
}
.ticker .star { color: var(--cin-red); }
@keyframes tickerMove { from { transform: translateX(0) } to { transform: translateX(50%) } }
.ticker:hover .ticker-track { animation-play-state: paused; }

@media (max-width: 860px) {
  .cinema { height: 300vh; }
  .chapter h2 { font-size: clamp(32px, 9vw, 48px); }
  .wordmark { bottom: 15%; font-size: clamp(38px, 13vw, 64px); }
  .chapter-dots { inset-inline-end: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema { height: auto; }
  .cinema-stage { position: relative; height: 88vh; }
  .chapter { position: relative; opacity: 1; visibility: visible; transform: none; }
  .chapter + .chapter { display: none; }
  .ticker-track { animation: none; }
}

/* ---------- رأس شفاف فوق الواجهة السينمائية ---------- */
body.has-cinema .topbar { background: transparent; position: absolute; top: 0; width: 100%; z-index: 70; border-bottom: 1px solid rgba(255,255,255,.1); }
body.has-cinema .site-header {
  position: absolute; top: 40px; width: 100%; z-index: 65;
  background: transparent; border-bottom: 1px solid rgba(255,255,255,.12);
  border-image: none; transition: background .35s ease, top .35s ease, box-shadow .35s ease;
}
body.has-cinema .site-header .brand-text strong { color: #fff; }
body.has-cinema .site-header .brand-text span { color: var(--cin-muted); }
body.has-cinema .nav a { color: #fff; }
body.has-cinema .nav a:hover { background: rgba(255,255,255,.12); }
body.has-cinema .nav a.active { color: #fff; box-shadow: inset 0 -3px 0 var(--cin-red); }

/* بعد تجاوز الواجهة: رأس صلب ثابت */
body.has-cinema.past-hero .site-header {
  position: fixed; top: 0; background: rgba(7,21,43,.96);
  backdrop-filter: blur(10px); box-shadow: 0 6px 30px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
body.has-cinema.past-hero .topbar { display: none; }

@media (max-width: 980px) {
  body.has-cinema .nav { background: rgba(7,21,43,.98); border-bottom: 2px solid var(--cin-red); }
  body.has-cinema .nav a { color: #fff; }
}