/* =====================================================================
   LAUNCH FILMS — poster cards + the dialog player (assets/film.js)
   The films are dark-mastered, so the frame stays dark in both themes.
   ===================================================================== */
.lf-card{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#07080B;
  border:1px solid var(--border-strong);box-shadow:0 30px 80px -40px rgba(0,0,0,.7);color:#F8FAFC;isolation:isolate;text-align:left}
html.light .lf-card{box-shadow:0 30px 70px -38px rgba(15,23,42,.45)}
.lf-card img,.lf-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .6s}
.lf-card video{opacity:0}
.lf-card.lf-live video{opacity:1}
.lf-card:hover img,.lf-card:hover video{transform:scale(1.025)}
.lf-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,11,0) 50%,rgba(7,8,11,.72) 82%,rgba(7,8,11,.94) 100%)}
.lf-play{position:absolute;z-index:2;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(248,250,252,.94);color:#07080B;
  box-shadow:0 0 0 10px rgba(38,185,232,.16),0 18px 40px -12px rgba(0,0,0,.6);transition:transform .35s var(--ease),box-shadow .35s}
.lf-play svg{width:30px;height:30px;margin-left:4px}
.lf-card:hover .lf-play,.lf-card:focus-visible .lf-play{transform:scale(1.08);box-shadow:0 0 0 16px rgba(38,185,232,.2),0 18px 40px -12px rgba(0,0,0,.6)}
.lf-card:focus-visible{outline:2px solid var(--c-deck);outline-offset:4px}
.lf-meta{position:absolute;z-index:2;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,250,252,.78)}
.lf-meta b{color:#F8FAFC;font-weight:500}
.lf-meta .lf-dur{border:1px solid rgba(248,250,252,.28);border-radius:999px;padding:5px 10px;background:rgba(7,8,11,.45);backdrop-filter:blur(6px)}
@media(max-width:560px){.lf-play{width:64px;height:64px;margin:-32px 0 0 -32px}.lf-play svg{width:24px;height:24px}
  .lf-meta{left:14px;right:14px;bottom:12px;font-size:12px}.lf-meta .lf-hide-sm{display:none}}

/* home: the film section */
.lf-sec .lf-card{margin-top:40px}
.lf-note{margin-top:18px;max-width:92ch;font-size:14px;line-height:1.6;color:var(--fg-muted)}
.lf-note b{color:var(--fg)}
.lf-note a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}

/* platform + demo: copy beside a smaller card */
.lf-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.lf-band .lf-note{margin-top:14px}
@media(max-width:900px){.lf-band{grid-template-columns:1fr}}

/* the hero button's play glyph */
.btn .lf-ic{width:14px;height:14px;flex:0 0 auto}

/* ---------- dialog player ---------- */
/* margin:auto restores the native centring that the site's global reset removes; the width cap keeps 16:9 inside short viewports */
.lf-dlg{margin:auto;padding:0;border:0;background:transparent;width:min(1180px,calc(100vw - 32px),calc((100svh - 150px) * 16 / 9));max-width:none;max-height:none;overflow:visible;color:#F8FAFC}
.lf-dlg::backdrop{background:rgba(3,4,6,.86);backdrop-filter:blur(8px)}
.lf-dlg[open]{animation:lf-in .45s var(--ease)}
@keyframes lf-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.lf-frame{position:relative;aspect-ratio:16/9;margin:0 auto;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.lf-frame video{display:block;width:100%;height:100%;background:#000}
.lf-x{position:absolute;right:0;top:-48px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(248,250,252,.3);background:rgba(7,8,11,.6);
  color:#F8FAFC;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lf-x:hover{background:rgba(248,250,252,.12)}
.lf-x:focus-visible,.lf-end button:focus-visible,.lf-end a:focus-visible{outline:2px solid var(--c-deck);outline-offset:3px}
.lf-cap{margin-top:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,250,252,.62);text-align:center}
/* end card: the film closes on fueldeck.ai · Book a demo, so give it a real button */
.lf-end{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 60%,rgba(18,52,66,.97),rgba(7,8,11,.98) 62%);animation:lf-fade .5s var(--ease)}
.lf-end[hidden],.lf-end [hidden]{display:none}
@keyframes lf-fade{from{opacity:0}}
.lf-end p{font-family:var(--font-display);font-size:clamp(20px,3vw,34px);font-weight:600;letter-spacing:-.8px;color:#F8FAFC;max-width:22ch;line-height:1.1}
.lf-end div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lf-end .btn{background:#F8FAFC;color:#07080B}
.lf-end .btn-ghost{background:transparent;color:#F8FAFC;border:1px solid rgba(248,250,252,.35)}
.lf-end .btn-ghost:hover{background:rgba(248,250,252,.1)}
@media(max-width:560px){.lf-x{top:-46px}.lf-end{gap:14px}.lf-end .btn{font-size:13px;padding:10px 16px}}
/* the cinematic cursor sits below the dialog's top layer, so hand back the system cursor while it is open */
html.lf-open #cn-cur,html.lf-open #cn-curo{display:none}
html.lf-open,html.lf-open *{cursor:auto!important}
html.lf-open .lf-dlg button,html.lf-open .lf-dlg a{cursor:pointer!important}
html.lf-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .lf-card img,.lf-card video,.lf-play{transition:none}
  .lf-card:hover img{transform:none}
  .lf-dlg[open],.lf-end{animation:none}
}