/* ---------- Background cinematics (js/cine.js) ----------
   .cine is an absolutely placed layer. Its poster is its background, the clip fades in on top. */
.cine { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: center / cover no-repeat var(--bg-2); }
.cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.cine__video.is-live { opacity: 1; }
.cine ~ .wrap, .cine ~ .event-panel__copy, .cine ~ .steps { position: relative; z-index: 2; }

.cine__pause {
  position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
  color: var(--cream); background: rgba(29, 38, 42, .55); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 205, .22); opacity: .6; transition: opacity .2s, background .2s;
}
.cine__pause:hover, .cine__pause:focus-visible { opacity: 1; background: rgba(29, 38, 42, .8); }
.cine__pause svg { width: 14px; height: 14px; fill: currentColor; }
.cine__pause.is-paused svg { display: none; }
.cine__pause.is-paused::before { content: ''; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
@media (max-width: 700px) { .cine__pause { display: none; } }

/* Closing band: the sunset pull-back, tinted into the mustard so the heading and button keep their contrast */
.cta-band--cine .cine { background-color: var(--mustard); mix-blend-mode: soft-light; }
.cta-band--cine .wrap { position: relative; z-index: 2; }
.cta-band--cine .checker { z-index: 1; }

/* Events: the panel is always dark when it carries footage, in both themes */
.event-panel--cine {
  --invert-bg: #1d262a; --invert-text: #fff3cd; --invert-muted: rgba(255, 243, 205, .78);
  isolation: isolate;
}
.event-panel--cine .cine::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(29, 38, 42, .94) 0%, rgba(29, 38, 42, .82) 42%, rgba(29, 38, 42, .55) 100%),
    linear-gradient(0deg, rgba(29, 38, 42, .55), transparent 40%);
}
:root[data-theme="dark"] .event-panel--cine .eyebrow,
:root[data-theme="dark"] .event-panel--cine .title em { color: var(--mustard); }
.event-panel--cine .event-panel__track { z-index: 1; }
@media (max-width: 700px) { .event-panel--cine .cine::after { background: rgba(29, 38, 42, .86); } }

/* Pricing: a thin letterbox of the march, faded into the page at both edges */
.cine-strip { position: relative; height: clamp(110px, 14vw, 200px); overflow: hidden; margin-top: clamp(8px, 2vw, 24px); }
.cine-strip::before, .cine-strip::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; height: 38%; pointer-events: none; }
.cine-strip::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.cine-strip::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }
.cine-strip .cine__pause { z-index: 2; }

/* Stats: a dark top-down backdrop behind the heading. The header keeps the dark palette in both themes. */
.page-head--cine {
  --bg: #1d262a; --text: #fff3cd; --muted: rgba(255, 243, 205, .72); --faint: rgba(255, 243, 205, .5);
  --line: rgba(255, 243, 205, .14); --accent-text: #fbc02d;
  color: var(--text); background: var(--bg);
}
.page-head--cine .cine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(29, 38, 42, .35) 45%, rgba(29, 38, 42, .55) 100%); }
.page-head--cine .page-head__stripe { z-index: 1; }
.page-head--cine .wrap { position: relative; z-index: 2; }

/* Sign-in side panel: the calm-before portrait under a dark fade, text in cream */
.auth__art--photo { background: var(--char) center / cover no-repeat; color: var(--cream); }
.auth__art--photo::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(29, 38, 42, .92) 0%, rgba(29, 38, 42, .55) 38%, rgba(29, 38, 42, .05) 70%); }
.auth__art--photo .auth__track { display: none; }

/* Home: the staged siege as a full-width band that opens the benchmark section, faded into the page at top and bottom */
.shot-band { position: relative; margin: 24px 0 0; min-height: clamp(400px, 40vw, 580px); display: flex; align-items: center; isolation: isolate; }
.shot-band .cine { z-index: -1; background-color: transparent; filter: brightness(.74) saturate(1.08) contrast(1.05); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); }
.shot-band > .wrap { width: 100%; position: relative; z-index: 1; }
.shot-band__copy { max-width: 860px; padding-block: 48px; color: var(--cream); text-shadow: 0 1px 2px rgba(10, 16, 18, .75), 0 4px 28px rgba(10, 16, 18, .7); }
.shot-band h3 { font-family: var(--f-display); font-stretch: 125%; font-style: italic; font-weight: 900; font-size: clamp(30px, 3.7vw, 52px); line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 14px; }
.shot-band h3 span { display: block; }
.shot-band h3 em { font-style: inherit; color: var(--mustard); text-transform: uppercase; letter-spacing: .01em; }
.shot-band p { font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; color: var(--cream); max-width: 46ch; }
.shot-band figcaption { margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; color: rgba(255, 243, 205, .85); max-width: 46ch; }
.shot-band .cine__pause { z-index: 3; right: var(--gutter); bottom: 46px; }
.shot__tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: rgba(29, 38, 42, .6); box-shadow: inset 0 0 0 1px rgba(255, 243, 205, .22); }
.shot__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 10px var(--mustard); animation: shotpulse 1.8s ease-in-out infinite; }
@keyframes shotpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .shot__tag i { animation: none; } }
.shot-band + .duel { margin-top: 0; }
@media (max-width: 700px) { .shot-band { min-height: 460px; } .shot-band figcaption { display: none; } }