/* The page stays neutral; light and color belong to the film interaction. */
html{scrollbar-gutter:stable}
html.film-open{overflow:hidden}
.film-trigger{display:block;position:relative;isolation:isolate;overflow:hidden;width:100%;padding:0;border:0;border-radius:10px;background:#111;cursor:pointer;color:#fff;text-align:left;box-shadow:0 3px 12px #00000018;transition:box-shadow .3s,transform .3s}
.film-trigger .film-preview{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:0;border-radius:0;pointer-events:none;transition:filter .35s}
.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,#00000008 40%,#00000070);pointer-events:none;transition:background .3s}
.film-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:72px;height:72px;padding-left:5px;border:1px solid #ffffffb3;border-radius:50%;color:white;background:#ffffff1a;backdrop-filter:blur(9px);font:26px/1 Arial,sans-serif;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s,transform .35s,box-shadow .35s;pointer-events:none}
.film-watch{position:absolute;left:18px;bottom:17px;display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #ffffff26;border-radius:24px;background:#14171bd9;color:#fff;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.08em;backdrop-filter:blur(8px);transition:background .3s,border-color .3s,box-shadow .3s}
.film-watch-arrow{max-width:0;opacity:0;overflow:hidden;transition:max-width .25s,opacity .25s}
.film-preview-label{position:absolute;right:18px;top:16px;color:#fff;font:9px/1.4 monospace;letter-spacing:.15em;opacity:0;transition:opacity .25s;text-shadow:0 1px 8px #000}
.film-trigger:focus-visible{outline:3px solid #4baec4;outline-offset:5px}
.film-trigger:focus-visible .film-play{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 30px #73e3ff38}
@media(hover:hover){
  .film-trigger:hover{transform:translateY(-2px);box-shadow:0 12px 30px #172b3c24,0 0 0 1px #8bdde26b}
  .film-trigger:hover .film-preview{filter:brightness(.73)}
  .film-trigger:hover .film-play{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 30px #73e3ff38}
  .film-trigger:hover .film-watch{background:#153c51ed;border-color:#74e8ff9c;box-shadow:0 0 20px #53ddff2b}
  .film-trigger:hover .film-watch-arrow{max-width:16px;opacity:1}
  .film-trigger:hover .film-preview-label{opacity:.9}
}
.film-preview-toggle{border:0;background:none;padding:3px 0;color:#626a70;cursor:pointer;font:inherit;min-height:28px;text-align:left}
.film-preview-toggle:hover{text-decoration:underline;text-underline-offset:3px}
.film-dialog{width:min(1160px,calc(100% - 48px));max-width:none;max-height:calc(100svh - 48px);padding:0;border:1px solid #80e4ff45;border-radius:16px;background:#0b1019;color:#eaf2f7;overflow:visible;box-shadow:0 32px 100px #0009,0 0 60px #5baec51a}
.film-dialog::backdrop{background:radial-gradient(ellipse at 50% 45%,#182936a8,#050a13d9);backdrop-filter:blur(10px);animation:film-backdrop-in .35s ease-out both}
.film-panel{position:relative;padding:20px;border-radius:15px;background:linear-gradient(135deg,#16232dd9,#0b1019 45%,#121222);overflow:hidden}
.film-dialog[open] .film-panel{animation:film-open .6s cubic-bezier(.16,1,.3,1) both}
.film-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 2px 17px}
.film-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 5px;color:#a4cdd7;font:9px/1.4 monospace;letter-spacing:.22em}
.film-eyebrow span{width:5px;height:5px;border-radius:50%;background:#91e4ee;box-shadow:0 0 10px #91e4ee66}
.film-header h2{margin:0;font:500 21px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.3px;color:#f1f5f9}
.film-close{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff08;color:#f1f5f9;font:26px/1 Arial;cursor:pointer;transition:background .2s,border-color .2s}
.film-close:hover{background:#ffffff18;border-color:#9be2ed}
.film-close:focus-visible,.film-dialog a:focus-visible{outline:2px solid #9be2ed;outline-offset:3px}
.film-screen{position:relative;background:#000;border-radius:7px}
.film-screen video{display:block;width:100%;max-height:calc(100svh - 196px);aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:7px}
.film-scan{position:absolute;inset:0;overflow:hidden;border-radius:7px;pointer-events:none}
.film-dialog[open] .film-scan::after{content:"";position:absolute;left:0;right:0;top:-30%;height:25%;background:linear-gradient(transparent,#92edff18 85%,#c4f6ff99);animation:film-scan-in .85s .08s ease-out both}
.film-corner{position:absolute;width:20px;height:20px;border-color:#9fe9f0;border-style:solid;pointer-events:none;opacity:.7;filter:drop-shadow(0 0 5px #68dcff55)}
.film-corner-tl{left:-4px;top:-4px;border-width:2px 0 0 2px}.film-corner-tr{right:-4px;top:-4px;border-width:2px 2px 0 0}.film-corner-bl{left:-4px;bottom:-4px;border-width:0 0 2px 2px}.film-corner-br{right:-4px;bottom:-4px;border-width:0 2px 2px 0}
.film-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:15px 2px 0;border:0;color:#a3afbf;font:11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.film-dialog .film-footer a{color:#c0dae5!important;white-space:nowrap}
.film-error{margin:12px 0 0;font-size:12px;color:#ffdcaf}.film-error[hidden]{display:none}
@keyframes film-open{from{opacity:0;transform:translate(var(--film-from-x,0),var(--film-from-y,20px)) scale(var(--film-from-scale,.75));clip-path:inset(44% 0 round 12px)}45%{opacity:1;clip-path:inset(0 round 12px)}to{opacity:1;transform:translate(0,0) scale(1);clip-path:inset(0 round 12px)}}
@keyframes film-scan-in{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:.5}100%{transform:translateY(540%);opacity:0}}
@keyframes film-backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:650px){.film-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);border-radius:12px}.film-panel{padding:12px}.film-header{padding-bottom:12px}.film-header h2{font-size:18px}.film-eyebrow{font-size:8px;letter-spacing:.14em}.film-close{width:40px;height:40px}.film-watch{left:12px;bottom:12px;padding:8px 11px;font-size:10px}.film-play{width:58px;height:58px;font-size:22px}.film-footer{font-size:10px}.film-preview-toggle{min-height:36px}}
@media(prefers-reduced-motion:reduce){.film-trigger,.film-trigger *{transition:none!important}.film-dialog[open] .film-panel,.film-dialog::backdrop{animation:none}.film-scan{display:none}.film-trigger:hover{transform:none}}
@media print{.film-dialog,.film-preview-toggle{display:none}.film-trigger{box-shadow:none}}