/* CINEMA EFFECT (Agent Chat) — optional. To undo: delete the <link> to this file and the <script src="cinema.js"> in agent-chat.html. */
.cine-veil { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(10,13,18,.9) 0%, #0a0d12 78%); }
.cine-layer { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.cine-layer .ch-head { width: 100%; margin: 0 auto; opacity: 1; transform: none; transition: none; }
.cine-layer .ch-title { color: #fff; }
.cine-layer .ch-title .blue { color: #5aa7f0; }
.cine-layer .ch-lead { color: rgba(255,255,255,.82); will-change: opacity, transform, filter; }
.cine-layer .cw { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .2em; margin: -.14em 0 -.2em; }
.cine-layer .ci { display: inline-block; will-change: transform, opacity; }
.hgal.cine-on { margin-bottom: 0; }
.hgal.cine-on .hgal-view { will-change: filter; }

/* narrow screens: the effect gets its own pinned full-screen stage */
.cine-m { position: relative; }
.cine-m-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0a0d12; }
.cine-m-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; display: block; }
@media (max-width: 720px) { .cine-layer .ch-title { font-size: clamp(24px, 7vw, 30px); } }

/* pinned gallery: the dark overlay covers only the gallery window (full width, same height and position as the photos),
   not the whole pinned screen -- the title band above and the space below stay white */
.hgal-stage > .cine-veil { top: 50%; bottom: auto; height: var(--gh); transform: translateY(-50%); }