/* v0.6.65 film section: frame (stage below the fixed header), controls, scroll hint. The film UI itself is ff-film-ui.css (ported unchanged from the 3D version). */
.ff-film{--ffhdr:81px;--ffvh:100svh;position:relative;width:100%;height:100vh;height:var(--ffvh);min-height:420px;background:#0a1230;overflow:hidden;color:#fff}
.ff-film-stage{position:absolute;left:0;right:0;top:var(--ffhdr);bottom:0;overflow:hidden;background:#0a1230 center/cover no-repeat}
.ff-film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.ff-film-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.ff-film-oui{position:absolute;inset:0;pointer-events:none}
.ff-film-dash{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;left:0;top:0}
.ff-film.ffo #lcdwrap.on{display:block}
.ff-film-ui{position:absolute;right:max(20px,calc(50vw - 640px));bottom:28px;display:flex;gap:10px;align-items:center;z-index:9}
.ff-film-ui button{font:600 14px/1 Poppins,Arial,sans-serif;color:#fff;background:#001838b3;border:1px solid #ffffff55;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.ff-film-ui button:hover,.ff-film-ui button:focus-visible{background:#00c4e8;border-color:#00c4e8;color:#001838;outline:none}
.ff-film-skip{padding:12px 20px;display:inline-flex;gap:8px;align-items:center}
.ff-film-play{width:44px;height:44px;display:grid;place-items:center;padding:0}
.ff-film-play svg{width:18px;height:18px}.ff-film-play .i-pause{display:none}.ff-film.is-playing .ff-film-play .i-pause{display:block}.ff-film.is-playing .ff-film-play .i-play{display:none}
/* scroll / swipe hint: "Scroll to continue" above the mouse, only while paused at a stop */
.ff-film-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;color:#fff;opacity:0;pointer-events:none;transition:opacity .4s;cursor:pointer;font:600 11px/1 Poppins,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 6px #0009}
.ff-film.show-hint .ff-film-hint{opacity:.9;pointer-events:auto}
.ff-film-hint .mouse{width:22px;height:34px;border:2px solid #ffffffcc;border-radius:12px;position:relative}
.ff-film-hint .mouse:after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:#00c4e8;animation:ffwheel 1.6s ease-in-out infinite}
.ff-film-hint .chev{width:10px;height:10px;border-right:2px solid #00c4e8;border-bottom:2px solid #00c4e8;transform:rotate(45deg);margin-top:-4px;animation:ffchev 1.6s ease-in-out infinite}
.ff-film.is-touch .ff-film-hint .mouse{display:none}
@keyframes ffwheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}@keyframes ffchev{0%,100%{opacity:.3;transform:rotate(45deg) translate(-2px,-2px)}50%{opacity:1;transform:rotate(45deg) translate(2px,2px)}}
@media (max-width:800px){.ff-film-ui{right:10px;bottom:12px}.ff-film-skip{padding:9px 14px}.ff-film-play{width:36px;height:36px}.ff-film-hint{bottom:18px;left:12px;transform:none;flex-direction:row;gap:8px}.ff-film-hint .chev{margin-top:-6px}}
/* neutralise site-wide lovable.css classes that collide with the ported 3D UI class names (.pill .dash-* .kpis .avatar): back to browser defaults so the ported rules render exactly as in the 3D version */
.ff-film-oui .pill{color:inherit;letter-spacing:normal;background:none;border:0;border-radius:0;align-items:normal;gap:normal;padding:0;font-size:inherit;font-weight:inherit;display:inline}
.ff-film-oui .dash-top{background:none;border-bottom:0;align-items:normal;gap:normal;height:auto;padding:0;display:block}
.ff-film-oui .dash-search{color:inherit;background:none;border:0;border-radius:0;width:auto;margin:0;padding:0;font-size:inherit}
.ff-film-oui .dash-body{display:block;grid-template-columns:none;min-height:0}
.ff-film-oui .kpis{display:block;grid-template-columns:none;gap:normal;margin:0}
.ff-film-oui .kpis small{color:inherit;font-size:inherit;display:inline}.ff-film-oui .kpis em{color:inherit;font-size:inherit;font-style:italic}
.ff-film-oui .avatar{color:inherit;background:none;border-radius:0;place-items:normal;width:auto;height:auto;font-size:inherit;display:inline}
.ff-film.show-hint .ff-film-hint{animation:ffhint 1.6s ease-in-out infinite}@keyframes ffhint{0%,100%{opacity:.6}50%{opacity:1}}

.ff-film-skiphint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;padding:8px 14px;border-radius:999px;background:rgba(10,20,45,.78);color:#fff;font:600 13px/1.2 inherit;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .25s}.ff-film.show-skiphint .ff-film-skiphint{opacity:1}

/* PHONE (portrait, <600px): compact presentation. Desktop/tablet UI untouched. */
.ff-film.is-mini #check,.ff-film.is-mini #feed,.ff-film.is-mini #tele,.ff-film.is-mini #ops,.ff-film.is-mini #engcard,.ff-film.is-mini #engline{display:none!important}
.ff-film.is-mini #beat{left:8px!important;right:8px!important;top:8px!important;bottom:auto!important;transform:none!important;max-width:none!important;width:auto!important;text-align:left!important;padding:6px 10px 6px!important;border-radius:10px!important;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;box-shadow:0 6px 18px rgba(0,10,40,.35),inset 3px 0 0 #22d3ee!important}
.ff-film.is-mini #beat #bk{font:700 9px/1 Poppins,sans-serif!important;letter-spacing:1.2px;gap:6px;flex:none;white-space:nowrap}
.ff-film.is-mini #beat #bk .num{padding:2px 4px;border-radius:3px}
.ff-film.is-mini #beat #bt{font:600 14px/1.2 Poppins,sans-serif!important;letter-spacing:-.2px;margin:0!important;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-film.is-mini #beat #bs{flex:1 0 100%;font:400 11px/1.35 Poppins,sans-serif!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-film.is-mini #beat #dots{flex:1 0 100%;margin-top:3px!important;gap:3px!important}
.ff-film.is-mini #beat #dots i{width:4px!important;height:4px!important;margin:0!important}
.ff-film.is-mini #lcdwrap{left:auto!important;right:8px!important;bottom:auto!important;top:72px;width:30%!important;padding:3px!important;border-width:1px!important;border-radius:8px!important}
.ff-film.is-mini #mtk{position:absolute;left:8px;right:8px;bottom:58px;display:none;background:linear-gradient(180deg,rgba(10,18,48,.92),rgba(10,18,48,.84));border:1px solid rgba(34,211,238,.45);border-radius:12px;padding:6px 8px;box-shadow:0 6px 18px rgba(0,10,40,.35),inset 3px 0 0 #22d3ee;font-family:Poppins,sans-serif;color:#fff;z-index:5}
.ff-film.is-mini #mtk.on{display:block}
.ff-film.is-mini #mtk.in .mr{animation:ffmt .45s cubic-bezier(.2,.8,.2,1) both}
.ff-film.is-mini #mtk.many .mr:not(:first-of-type){animation:none}
.ff-film.is-mini #mtk .mh{font:700 8px/1 Poppins,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#49cde8;margin:1px 0 4px}
.ff-film.is-mini #mtk .mr{display:flex;align-items:center;gap:8px;min-height:30px}
.ff-film.is-mini #mtk.many .mr{min-height:20px;gap:6px}
.ff-film.is-mini #mtk .mi{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;background:color-mix(in srgb,var(--ev) 18%,#0a1230);border:1px solid color-mix(in srgb,var(--ev) 55%,transparent)}
.ff-film.is-mini #mtk.many .mi{width:17px;height:17px;font-size:10px;border-radius:5px}
.ff-film.is-mini #mtk .mt{flex:1;min-width:0;display:flex;flex-direction:column}
.ff-film.is-mini #mtk .mt b{font:600 12px/1.25 Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-film.is-mini #mtk.many .mt b{font-size:10.5px}
.ff-film.is-mini #mtk .mt i{font-style:normal}
.ff-film.is-mini #mtk .mt small{font:400 9.5px/1.3 Poppins,sans-serif;color:#b8c9da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-film.is-mini #mtk .mp{flex:none;font:600 9px/1 Poppins,sans-serif;color:var(--ev);border:1.5px solid var(--ev);background:color-mix(in srgb,var(--ev) 14%,transparent);border-radius:20px;padding:3px 7px;white-space:nowrap}
.ff-film.is-mini #mtk.many .mp{font-size:8px;padding:2px 5px}
.ff-film.is-mini #mpill{position:absolute;left:0;top:0;display:none;align-items:center;gap:5px;padding:4px 10px 4px 6px;border-radius:999px;background:rgba(10,18,48,.9);border:1.5px solid var(--acc);color:#fff;font:600 11px/1.1 Poppins,sans-serif;white-space:nowrap;box-shadow:0 0 12px color-mix(in srgb,var(--acc) 45%,transparent);z-index:6}
.ff-film.is-mini #mpill span{font-size:12px}
.ff-film.is-mini #mpill.on{display:inline-flex;animation:ffpill .4s cubic-bezier(.2,.8,.2,1)}
.ff-film.is-mini #mlead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5;display:none}
.ff-film.is-mini #mlead line{stroke:var(--acc);stroke-width:1.5;stroke-dasharray:3 3}
.ff-film.is-mini #mlead circle{fill:var(--acc)}.ff-film.is-mini #mlead circle.h{fill:none;stroke:var(--acc);stroke-width:1.5;opacity:.6;animation:ffdot 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ffmt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ffpill{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@keyframes ffdot{from{scale:.5;opacity:.9}to{scale:1.6;opacity:0}}
@media (max-height:740px){.ff-film.is-mini #beat #bs{display:none}.ff-film.is-mini #mtk .mh{display:none}.ff-film.is-mini #mtk.many .mr{min-height:18px}.ff-film.is-mini #lcdwrap{width:28%!important}}