/* ===========================================================================
   cinema-page.css — dark, cinematic theme for cinema.html (Cinema Production).
   Built on Deep Tech Blue with gold glow, per the chosen mood. Loads after
   base.css (reuses its tokens, nav, footer, buttons) and overrides them dark.
   =========================================================================== */

:root {
  --cin-bg:    #05172b;            /* theatre-deep navy base */
  --cin-panel: #0a2742;            /* raised dark panel */
  --cin-panel2:#0d2f50;            /* alt section */
  --cin-line:  rgba(255, 255, 255, 0.1);
  --cin-text2: #aebdd6;
}

/* ------------------------------- base ------------------------------- */
body.cinema {
  background: var(--cin-bg);
  color: #fff;
}
body.cinema ::selection { background: rgba(173, 142, 98, 0.4); color: #fff; }

body.cinema .eyebrow { color: var(--gold); }
body.cinema .lead { color: var(--cin-text2); }

/* Keyboard focus must stay visible on the dark theme: the global outline is
   Deep Tech Blue (#0A3C6F), which all but vanishes on navy. Use bright gold. */
body.cinema :focus-visible { outline-color: var(--gold-hover); outline-width: 3px; }

/* gold-filled button variant for the dark theme */
.btn--gold { background: var(--gold); color: #1d1408; }
.btn--gold:hover { background: var(--gold-hover); box-shadow: 0 12px 30px -10px rgba(173, 142, 98, 0.6); }

.cinema-link { color: #d9c6a3; }
.cinema-link:hover { color: #fff; }

/* ------------------------------- nav (dark) ------------------------------- */
body.cinema .nav { background: rgba(5, 23, 43, 0.72); }
body.cinema .nav.scrolled { border-bottom-color: rgba(255, 255, 255, 0.12); }
body.cinema .wordmark { color: #fff; }
body.cinema .nav-links a { color: #fff; opacity: 0.8; }
body.cinema .nav-links a:hover,
body.cinema .nav-links a[aria-current="page"] { opacity: 1; color: var(--gold-hover); }
body.cinema .nav-cta { color: var(--gold-hover); }
body.cinema .nav-cta:hover { color: #fff; }
body.cinema .nav-toggle span,
body.cinema .nav-toggle span::before,
body.cinema .nav-toggle span::after { background: #fff; }
body.cinema .mobile-menu { background: rgba(5, 23, 43, 0.96); border-bottom-color: var(--cin-line); }
body.cinema .mobile-menu a { color: #fff; }
body.cinema .mobile-menu .mobile-cta { color: var(--gold-hover); }

/* ------------------------------- hero ------------------------------- */
.cinema-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  /* fallback if the video can't paint */
  background: radial-gradient(120% 90% at 50% 0%, #0d2f50 0%, #061b33 55%, #03101f 100%);
  isolation: isolate;
}
.cinema-hero-media { position: absolute; inset: 0; z-index: -2; }
.cinema-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* scrim + letterbox vignette for readable text and a filmic frame */
.cinema-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 23, 43, 0.92) 0%, rgba(5, 23, 43, 0.55) 45%, rgba(5, 23, 43, 0.35) 100%),
    linear-gradient(0deg, rgba(3, 16, 31, 0.95) 0%, transparent 32%, transparent 70%, rgba(3, 16, 31, 0.85) 100%);
}
.cinema-hero-inner { position: relative; padding-block: clamp(60px, 12vh, 120px); padding-inline: 22px; }
.cinema-hero .display { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); max-width: 16ch; }
.cinema-hero .lead { max-width: 52ch; color: #cdd8ea; }
.cinema-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }

.cinema-scroll-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.cinema-scroll-cue svg { width: 20px; height: 20px; animation: cinCue 1.8s var(--ease) infinite; }
@keyframes cinCue { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(5px); opacity: 1; } }

/* ------------------------------- sections ------------------------------- */
.cinema-section { padding: var(--section-pad) 22px; position: relative; }
.cinema-section--alt { background: linear-gradient(180deg, #061f39, #04152789); }
.cinema-head { max-width: 760px; margin-inline: auto; }
.cinema-head .headline { color: #fff; }
.cinema-head.center { text-align: center; }

/* ------------------------------- reels (the work) ------------------------------- */
.reels { margin-top: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); }
.reel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px); }

.reel { display: flex; flex-direction: column; }
.reel-frame {
  position: relative;
  display: block; width: 100%;
  padding: 0; border: 1px solid var(--cin-line);
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden; cursor: pointer;
  background: #02060d;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.8);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.reel-frame:hover { transform: translateY(-4px); border-color: rgba(173, 142, 98, 0.5); box-shadow: 0 36px 80px -30px rgba(0, 0, 0, 0.85), 0 0 60px -30px rgba(173, 142, 98, 0.4); }
.reel-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* subtle film vignette over each frame */
.reel-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
  background: linear-gradient(0deg, rgba(2, 6, 13, 0.72) 0%, transparent 38%);
}
.reel-badge {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-family: var(--font-head); font-size: clamp(12px, 1.3vw, 14px); font-weight: 700;
  letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.reel-badge b { color: var(--gold-hover); font-weight: 700; }
.reel-play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 60px; height: 60px; transform: translate(-50%, -50%) scale(0.9);
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(173, 142, 98, 0.92); color: #1d1408;
  font-size: 20px; padding-left: 3px;
  opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.reel-frame:hover .reel-play, .reel-frame:focus-visible .reel-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.reel-meta { padding: 16px 4px 0; }
.reel-title { font-family: var(--font-head); font-size: clamp(18px, 2vw, 23px); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.reel-desc { margin-top: 7px; font-size: 15px; line-height: 1.5; color: var(--cin-text2); }

/* ------------------------------- capabilities ------------------------------- */
.cap-grid { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.cap {
  background: var(--cin-panel); border: 1px solid var(--cin-line);
  border-radius: clamp(16px, 1.8vw, 22px); padding: clamp(24px, 2.6vw, 34px);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cap:hover { transform: translateY(-3px); border-color: rgba(173, 142, 98, 0.4); }
.cap-k { display: block; font-family: var(--font-head); font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.cap-k::before { content: ""; display: block; width: 26px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.cap p { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--cin-text2); }

/* ------------------------------- closing CTA ------------------------------- */
.cinema-cta {
  position: relative; overflow: hidden;
  padding: clamp(72px, 12vw, 150px) 22px;
  text-align: center;
  background: radial-gradient(90% 130% at 50% 0%, #103a63 0%, #061d36 55%, #03101f 100%);
}
.cinema-cta::after {
  content: ""; position: absolute; left: 50%; top: -10%; transform: translateX(-50%);
  width: min(700px, 90%); height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(173, 142, 98, 0.22), transparent 70%);
  pointer-events: none;
}
.cinema-cta .headline { color: #fff; position: relative; }
.cinema-cta .lead { color: #cdd8ea; max-width: 46ch; margin-inline: auto; position: relative; }
.cinema-cta .btn { position: relative; }

/* ------------------------------- footer (dark) ------------------------------- */
body.cinema .footer { background: #03101f; color: var(--cin-text2); border-top-color: var(--cin-line); }
body.cinema .footer-cols { border-bottom-color: var(--cin-line); }
body.cinema .footer-col h4 { color: #fff; }
body.cinema .footer-col a { color: var(--cin-text2); }
body.cinema .footer-col a:hover { color: #fff; }
body.cinema .footer-bottom .wordmark { color: #fff; }
body.cinema .footer-note { color: var(--cin-text2); }
/* the light-surface gold (--gold-deep) goes muddy on the near-black footer */
body.cinema .footer-tagline { color: var(--gold-hover); }

/* ------------------------------- lightbox ------------------------------- */
.cinema-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(2, 8, 16, 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cinema-lightbox.open { display: flex; animation: lbIn 0.3s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-stage { width: min(1100px, 100%); aspect-ratio: 16 / 9; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9); border-radius: 12px; overflow: hidden; background: #000; }
.lightbox-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.lightbox-close {
  position: absolute; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; font-size: 18px; cursor: pointer; line-height: 1;
  transition: background 0.2s var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

/* ------------------------------- responsive ------------------------------- */
@media (max-width: 720px) {
  .reel-pair { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .cinema-hero { min-height: 88vh; }
  .cinema-hero-video { opacity: 0.4; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}