/* LaunchFrame sizzle reel (sizzle.js). The host element sets the size; everything inside fills it. */
.lfs { position: relative; overflow: hidden; isolation: isolate; background: #0c0c0d; contain: layout paint; }
.lfs-gl, .lfs-2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* film grain: one 128px tile, moved on the compositor every frame and blended over the picture */
.lfs-grain { position: absolute; inset: -128px; background-size: 128px 128px; mix-blend-mode: overlay; opacity: .3; pointer-events: none; will-change: transform; }
.lfs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* controls: same chips as the home showreel (.reel-btn), tucked inside the viewfinder's top-right bracket */
.lfs-ctrls { position: absolute; z-index: 2; top: calc(var(--lfs-pad, 20px) + 14px); right: calc(var(--lfs-pad, 20px) + 14px); display: flex; gap: 8px; }
.lfs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(243, 240, 232, .17); color: #f3f0e8; background: rgba(12, 12, 13, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 12px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s, border-color .2s; }
.lfs-btn::after { content: ""; position: absolute; inset: -8px -4px; }
.lfs-btn:hover { background: rgba(12, 12, 13, .82); border-color: rgba(243, 240, 232, .35); }
.lfs-btn:focus-visible { outline: 2px solid #ff3b2f; outline-offset: 3px; }
.lfs-play { min-width: 5.8em; }
.lfs-snd[aria-pressed=true] { color: #fff; background: #ff3b2f; border-color: #ff3b2f; }
.lfs-snd[aria-busy=true] { opacity: .6; cursor: progress; }
@media (max-width: 520px) { .lfs-ctrls { gap: 6px; } .lfs-btn { padding: 7px 8px; font-size: 11px; letter-spacing: .08em; } .lfs-btn::after { inset: -8px -3px; } }
/* home hero (data-chips): the controls sit where the video's chips did; the poster fades once the canvas has a frame */
.reel .lfs-ctrls { top: clamp(10px, 1.3vw, 18px); right: clamp(10px, 1.3vw, 18px); }
.lfs-on .lfs-poster { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }

/* data-controls="skip": one Pause button, visually hidden until it has keyboard focus (top-left, on the page's content edge) */
.reel .lfs-ctrls.lfs-ctrls-skip { top: 14px; right: auto; left: max(20px, (100% - 1240px) / 2); }
.lfs-skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* backdrop mode (data-backdrop): the reel rendered small and softened, so a headline can sit on top of it */
.lfs-backdrop .lfs-gl, .lfs-backdrop .lfs-2d { filter: blur(var(--lfs-blur, 14px)) brightness(.75); transform: scale(1.08); }
.lfs-backdrop .lfs-ctrls { top: auto; bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .lfs-grain { will-change: auto; } }