/* V5.11-V5.13 · WebGL scene stages (landing, /munkafolyamat). Linked with media="(min-width: 1024px)":
   phones and tablets never fetch a poster, and without this sheet the empty stage has no box.
   The stage never takes pointer events and never moves layout; poster and canvas only cross-fade
   their opacity. The live layer is decided by js/scene-gate.js. */
.mfl-scene{pointer-events:none;user-select:none}
.mfl-scene::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:cover;transition:opacity .9s ease}
.mfl-scene.is-live::before{opacity:0}
.mfl-scene__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.mfl-scene.is-live .mfl-scene__canvas{opacity:1}

/* Landing (V5.11 home; the V5.13 particle stage is added by WP1): a sticky, viewport-sized stage under
   the landing copy. Its negative margin equals its height, so it adds nothing to the flow. The landing
   is always dark, so the scene keeps the dark brand tokens even when the workspace uses the cream theme
   (css/landing.css pins them on .ide-landing; the stage repeats the same values below). */
.ide-landing>.mfl-scene--home{position:sticky;top:0;z-index:0;display:block;max-width:none;height:100vh;height:100dvh;margin:0 0 -100vh;margin-bottom:-100dvh;padding:0;overflow:hidden;contain:strict}
.ide-landing>.mfl-scene--home~*{position:relative;z-index:1}
.mfl-scene--home::before{background-image:url("/images/scene/poster-home.webp?v=348797540fa7");background-image:image-set(url("/images/scene/poster-home.avif?v=7afe0c2c90e1") type("image/avif"),url("/images/scene/poster-home.webp?v=348797540fa7") type("image/webp"))}
html[data-theme="cream"] .mfl-scene--home{--carbon:#0f0a1e;--bone:#f3f3f9;--ember:#6600ff;--ember-2:#d59bff;--gold:#00ffcc;--ember-grad:linear-gradient(95deg,#a975ff,#fa66ff)}

/* V5.13 landing: the particle stage (plan A.4, B.1 I1; WP1). The same sticky, viewport-sized box as the V5.11
   stage. The poster is the full hero frame (opaque, 1080x675, images/scene/poster-particles.*) and is requested
   only where the gate could ever go live: a desktop with a fine pointer (the sheet itself is >= 1024px). Tablets
   at >= 1024px with a coarse pointer keep an empty, transparent stage over the landing's own background.
   The poster never depends on data-scene-state (R5: with data-forge-module renamed the gate is silent and the
   page is still complete); the live canvas only fades over it (opacity only, CLS 0). */
.ide-landing>.mfl-scene--particles{position:sticky;top:0;z-index:0;display:block;max-width:none;height:100vh;height:100dvh;margin:0 0 -100vh;margin-bottom:-100dvh;padding:0;overflow:hidden;contain:strict}
:where(.ide-landing>.mfl-scene--particles)~*{position:relative;z-index:1}
@media (pointer:fine){
  .mfl-scene--particles::before{background-image:url("/images/scene/poster-particles.webp?v=dc5628fb8932");background-image:image-set(url("/images/scene/poster-particles.avif?v=a86a3d8f5270") type("image/avif"),url("/images/scene/poster-particles.webp?v=dc5628fb8932") type("image/webp"))}
}
/* Reveal the finished scene, not a stationary poster waiting for WebGL. The inline landing flag
   holds the first paint too; if the gate script fails entirely, the CSS-only fallback appears
   after five seconds. No-JS, unsupported GPUs and failed imports retain the full poster. */
@keyframes lnd-scene-reveal{from{opacity:0;translate:0 18px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes lnd-scene-fallback{from{opacity:0;translate:0 18px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion-paused="true"]) .ide-landing>.mfl-scene--particles{animation:lnd-scene-reveal 1.8s cubic-bezier(.22,1,.36,1) .08s backwards}
  html[data-lnd-fx]:not([data-motion-paused="true"]) .ide-landing>.mfl-scene--particles:not([data-scene-state]){animation-name:lnd-scene-fallback;animation-delay:5s}
  html[data-lnd-fx]:not([data-motion-paused="true"]) .ide-landing>.mfl-scene--particles:is([data-scene-state="waiting"],[data-scene-state="loading"],[data-scene-state="standby"]){opacity:0;animation:none}
}
/* R12: a fallback past the hero (host[data-lnd-past-hero], set by js/landing.js) fades to plain dark, never to
   the hero poster behind Munkáink; the poster returns with the hero. */
.ide-landing[data-lnd-past-hero]>.mfl-scene--particles::before{background-image:none}
/* The landing is always dark (plan D12): the stage keeps the dark brand tokens under the cream workspace theme. */
html[data-theme="cream"] .mfl-scene--particles{--carbon:#0f0a1e;--bone:#f3f3f9;--bone-dim:#cbc7db;--ember:#6600ff;--ember-2:#d59bff;--gold:#00ffcc;--ember-grad:linear-gradient(95deg,#a975ff,#fa66ff);--lnd-bg:#07040f}
/* R13: forced colours (Windows High Contrast) get the compact landing without a stage. */
@media (forced-colors:active){.ide-landing>.mfl-scene--particles{display:none}}

/* /munkafolyamat: the stage is sticky inside the process section; the live view is absolute in the
   stage and js keeps its box on the editor viewport (not position:fixed: the section and .wf contain
   layout, so a fixed box would scroll away); the section clips both vertically, never horizontally. */
/* 38vh of closing room after station 06: there the camera steps back to the overview of all six
   lit stations (the same frame as the poster). */
.wf-block:has(>.mfl-scene--pipeline){clip-path:inset(0 -100vw);padding-bottom:calc(clamp(52px,8cqi,100px) + 38vh)}
.mfl-scene--pipeline{position:sticky;top:0;z-index:0;display:block;height:calc(100vh - 160px);margin-bottom:calc(160px - 100vh)}
.mfl-scene--pipeline~*{position:relative;z-index:1}
.mfl-scene--pipeline::before{opacity:.55;background-size:contain;background-image:url("/images/scene/poster-pipeline.webp?v=18d8c89478d3");background-image:image-set(url("/images/scene/poster-pipeline.avif?v=24386d06a5e8") type("image/avif"),url("/images/scene/poster-pipeline.webp?v=18d8c89478d3") type("image/webp"));-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
html[data-theme="cream"] .mfl-scene--pipeline::before{background-image:url("/images/scene/poster-pipeline-cream.webp?v=e9b3859097bb");background-image:image-set(url("/images/scene/poster-pipeline-cream.avif?v=fa51d173b381") type("image/avif"),url("/images/scene/poster-pipeline-cream.webp?v=e9b3859097bb") type("image/webp"))}
.mfl-scene--pipeline.is-live::before{opacity:0}
.mfl-scene__view{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;pointer-events:none}
.mfl-scene__labels{position:absolute;inset:0}
.mfl-scene__label{position:absolute;left:0;top:0;white-space:nowrap;font:500 12px/1 var(--wf-mono,'IBM Plex Mono',monospace);letter-spacing:.04em;color:var(--bone-dim,#cbc7db);background:var(--carbon,#0f0a1e);border:1px solid var(--line-strong,rgba(226,210,255,.24));border-radius:6px;padding:6px 9px;opacity:0;transition:opacity .35s ease,border-color .35s ease}
.mfl-scene__label b{color:var(--ember-2,#d59bff);font-weight:600}
.mfl-scene__label i{font-style:normal;color:var(--bone-faint,#aba6bf)}
.mfl-scene__label.is-on{border-color:var(--gold,#00ffcc);color:var(--bone,#f3f3f9)}

@media (prefers-reduced-motion:reduce){.mfl-scene::before,.mfl-scene__canvas,.mfl-scene__label{transition:none}}
html[data-motion-paused="true"] .mfl-scene::before,html[data-motion-paused="true"] .mfl-scene__canvas,html[data-motion-paused="true"] .mfl-scene__label{transition:none}