/* netex · engines/scan-film.css · S10 Scan Line (layers added by the engine over the server-rendered poster) */
@layer pages {
.sf__layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sf__still, .sf__still img, .sf__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf__still img, .sf__video { object-fit: cover; object-position: 50% 50%; }
.sf__still[hidden] { display: none; }
.ind-hero__poster img { object-position: 50% 50%; }
.sf__video { opacity: 0; transition: opacity 400ms var(--ease-mech); }
.sf.has-video .sf__video { opacity: 1; }
.sf.is-static .sf__video { opacity: 0; }
.sf.is-static.is-playing .sf__video { opacity: 1; }

/* The machine layer, revealed behind the beam (clip-path set by the engine). */
.sf__sight { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sf__box { fill: rgb(2 168 233 / .08); stroke: var(--cyan); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sf__box.is-defect { fill: rgb(255 90 31 / .16); stroke: var(--molten); stroke-width: 2.5; }
.sf__box.is-review { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sf__tick { stroke: var(--cyan); stroke-width: 1; fill: none; }
.sf__label { font: 600 12px var(--f-mono); letter-spacing: .02em; fill: var(--paper); stroke: var(--ink); stroke-width: 3.5px; paint-order: stroke; }
.sf__label.is-defect { fill: var(--molten); }
.sf__label.is-ok { fill: var(--cyan); }
@media (max-width: 767px) { .sf__label { font-size: 10px; stroke-width: 3px; } }

/* The 47° beam: a 2 px N-gradient leading edge and a faint cyan band trailing it. */
.sf__edge { position: absolute; left: 0; top: 0; height: 2px; background: var(--n-grad); transform-origin: 50% 50%; will-change: transform; }
.sf__band { position: absolute; inset: 0; background: rgb(2 168 233 / .07); }
.sf__edge.is-off, .sf__band.is-off { opacity: 0; }

/* HUD: counter, OEE (demo) gauge, line status, the last three events. */
.sf-hud { display: grid; justify-items: end; gap: var(--s-2); color: var(--paper); text-align: right; }
.sf-hud__count { margin: 0; padding: 4px 8px; background: rgb(8 9 14 / .78); font: 600 clamp(1rem, .85rem + .6vw, 1.375rem)/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.sf-hud__oee { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 8px; background: rgb(8 9 14 / .78); font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .04em; }
.sf-hud__gauge { width: 40px; height: 23px; overflow: visible; }
.sf-hud__arc { fill: none; stroke: rgb(241 238 230 / .55); stroke-width: 2; }
.sf-hud__needle { stroke: var(--cyan); stroke-width: 2; transition: transform var(--dur-mech) var(--ease-mech); }
.sf-hud__run { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: 4px 8px; background: rgb(8 9 14 / .78); font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .04em; }
.sf-hud__run i { width: 8px; height: 8px; background: var(--cyan); }
.sf-hud__log { display: grid; justify-items: end; gap: 3px; margin: 0; padding: 0; list-style: none; font: 500 .6875rem/1.3 var(--f-mono); }
.sf-hud__log li { padding: 3px 7px; background: rgb(8 9 14 / .78); max-width: 34ch; }
.sf-hud__log li.is-defect { color: var(--molten); }
.sf-hud__log li.is-ok { color: var(--cyan); }
.sf-hud__log:empty { display: none; }
.sf__caption { position: absolute; z-index: 5; left: 8px; top: 8px; margin: 0; padding: 4px 8px; background: rgb(8 9 14 / .8); color: var(--paper); font: 500 .6875rem/1.35 var(--f-mono); max-width: 40ch; }

@media (max-width: 767px) {
	.sf .ind-hero__hud { position: static; order: 3; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: var(--s-3) var(--margin) 0; }
	.sf .ind-hero__film { order: 2; }
	.sf .ind-hero__ctl { order: 4; }
	.sf-hud { justify-items: start; text-align: left; grid-template-columns: auto auto; align-items: center; }
	.sf-hud__log { grid-column: 1 / -1; justify-items: start; }
	.sf-hud__count, .sf-hud__oee, .sf-hud__run, .sf-hud__log li { background: var(--ink-2); }
	.sf-hud__run { grid-column: 1 / -1; justify-self: start; }
}

/* Static (reduced motion, Save-Data, no video): copy first, then the whole still with the machine layer open. */
.sf.is-static .ind-hero__stage { display: grid; height: auto; min-height: 0; max-height: none; overflow: visible; }
.sf.is-static .ind-hero__plate { position: relative; order: 1; width: auto; clip-path: none; padding: calc(var(--header-h) + var(--s-6)) var(--margin) var(--s-7) max(var(--margin), calc((100vw - var(--max)) / 2)); }
.sf.is-static .ind-hero__film { position: relative; order: 2; inset: auto; aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .sf.is-static .ind-hero__hud { position: absolute; order: 0; top: var(--s-4); right: var(--margin); padding: 0; flex-direction: column; align-items: flex-end; } }
.sf.is-static .ind-hero__film .nx-ailabel { top: auto; bottom: 8px; left: 8px; }
.sf.is-static .sf__caption { top: auto; bottom: var(--s-3); left: auto; right: var(--margin); }
.sf.is-static .ind-hero__ctl { position: relative; order: 3; right: auto; bottom: auto; flex-direction: row; justify-content: flex-end; padding: var(--s-4) var(--margin) 0; }
.sf.is-static .ind-hero__hint { display: none; }
@media (max-width: 767px) {
	.sf.is-static .ind-hero__hud { position: static; order: 3; }
	.sf.is-static .ind-hero__ctl { order: 4; }
	/* Under the still, not over it (the engine moves it out of the 16:9 frame on phones). */
	.sf.is-static .ind-hero__stage > .sf__caption { position: static; order: 2; max-width: none; margin: 0; padding: var(--s-2) var(--margin) 0; background: none; color: var(--fg-2); }
}
}