/* =========================================================================
   netex · engines/brain-stage.css (Home group) · the brain stage, shared by Home and About
   Enqueued in <head> by netex_brain_stage_preload() (first paint: the poster is the LCP),
   and injected by the engine as a fallback. Layout of the stage itself is set by the page:
   Home places it in the Split's pin and draws its hero «Η ζωγραφιά και το σχέδιό της» in
   pages/front-page.css (strategy/hero-decision.md); About places it in its hero column.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer components {

.brain-stage { position: relative; color: var(--paper); }
.brain-stage__view { position: relative; }
.brain-stage__frame { position: relative; width: 100%; aspect-ratio: 1; }

/* Media: the painting + its loop, screen-blended so the black of the files becomes the ground. */
.brain-stage__media {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	isolation: isolate;
	-webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%);
	mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%);
}
.brain-stage__media picture, .brain-stage__media img, .brain-stage__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.brain-stage__video { opacity: 0; transition: opacity 400ms var(--ease-mech); }
.brain-stage.is-playing .brain-stage__video { opacity: 1; }

/* AI-motion label, plate caption, pause control. */
.brain-stage .nx-ailabel { left: 0; bottom: 0; }
.brain-stage__fig { margin-top: var(--s-3); max-width: 44ch; }
.brain-stage__pause {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: var(--z-stage-ui);
	--bg-2: rgb(8 9 14 / .72); --fg: var(--paper); --bg: var(--ink); --rule: rgb(241 238 230 / .28); --focus: var(--cyan);
	color: var(--paper);
}
.brain-stage__pause[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
html.no-js .brain-stage__pause, html:not(.js) .brain-stage__pause { display: none; }

/* Hand-over to the Home split: the still painting takes the stage. */
.brain-stage__view { transition: opacity 300ms var(--ease-mech); }
.brain-stage.is-split .brain-stage__view, .brain-stage.is-split .brain-stage__fig { opacity: 0; pointer-events: none; }
.brain-stage.is-split .brain-stage__pause { visibility: hidden; }

/* About variant: the painting, full size, its loop and the caption. No intro. */
.brain-stage--about .brain-stage__media { -webkit-mask-image: none; mask-image: none; }

@media (prefers-reduced-motion: reduce) {
	.brain-stage__video, .brain-stage__view { transition: none; }
}

} /* end @layer components */