/**
 * RB Blocks — Scenes frontend CSS
 *
 * .rb-scene-host — обёртка core/group или core/cover, у которой выбрана сцена.
 * Класс добавляется PHP-инжекторо м BlockExtension::inject_scene.
 *
 * Координаты слоёв в design-space (viewport.w × viewport.h из manifest).
 * Контейнер .rb-scene__inner масштабируется через CSS container query
 * до ширины родителя; все translate в keyframes остаются в design-px.
 */

.rb-scene-host,
.rb-hero-scene-host {
	position         : relative;
	overflow         : hidden;
	container-type   : inline-size;
}

/* Hero scene-host: контент Blocksy hero (заголовок, breadcrumbs) z-index:1
 * чтобы оказаться поверх сцены (.rb-scene уже z-index:0). */
.rb-hero-scene-host > :not( .rb-scene ) {
	position : relative;
	z-index  : 1;
}

.rb-scene {
	position       : absolute;
	top            : 0;
	left           : 0;
	width          : 100%;
	height         : 100%;
	pointer-events : none;
	z-index        : 0;
	overflow       : hidden;
}

/* 9 позиций якоря окна. Применяются когда window.w/h задают конечный размер
 * и нужно прибить окно к нужному краю/центру обёртки. */
.rb-scene[ data-anchor="top-right" ]      { left: auto; right: 0; }
.rb-scene[ data-anchor="bottom-left" ]    { top: auto; bottom: 0; }
.rb-scene[ data-anchor="bottom-right" ]   { top: auto; bottom: 0; left: auto; right: 0; }

.rb-scene[ data-anchor="top-center" ]     { left: 50%; transform: translateX( -50% ); }
.rb-scene[ data-anchor="bottom-center" ]  { top: auto; bottom: 0; left: 50%; transform: translateX( -50% ); }
.rb-scene[ data-anchor="center-left" ]    { top: 50%; transform: translateY( -50% ); }
.rb-scene[ data-anchor="center-right" ]   { top: 50%; left: auto; right: 0; transform: translateY( -50% ); }
.rb-scene[ data-anchor="center-center" ]  { top: 50%; left: 50%; transform: translate( -50%, -50% ); }

.rb-scene__inner {
	position         : absolute;
	top              : 0;
	left             : 0;
	width            : var(--rb-scene-w, 1200px);
	height           : var(--rb-scene-h, 764px);
	transform-origin : top left;
	transform        : scale( min( calc( 100cqi / var(--rb-scene-w, 1200px) ), 1 ) );
}

.rb-scene__layer {
	position    : absolute;
	will-change : transform, opacity;
}

.rb-scene__layer img {
	display          : block;
	width            : 100%;
	height           : auto;
	object-fit       : contain;
	user-select      : none;
	-webkit-user-drag: none;
}

/* Mobile + tablet — анимации заморожены (как в Tilda на res < 1200px).
 * Слои остаются на «from»-позиции из inline left/top. */
@media ( max-width: 1199px ) {
	.rb-scene__layer {
		animation : none !important;
	}
}

/* Доступность — выключаем анимации при системной настройке. */
@media ( prefers-reduced-motion: reduce ) {
	.rb-scene__layer {
		animation-play-state : paused !important;
	}
}

/* ======================================================================
 * Editor preview
 * ====================================================================== */

/* Overlay-копия сцены в редакторе. RawHTML рендерит wrapping div со scene HTML.
 * Анимации paused чтобы не отвлекали при компоновке, opacity снижен — видно
 * куда класть заголовок и форму. */
.rb-scene-editor-preview {
	position      : absolute;
	inset         : 0;
	z-index       : 0;
	pointer-events: none;
	opacity       : 0.4;
	overflow      : hidden;
}

.rb-scene-editor-preview .rb-scene__layer {
	animation-play-state : paused !important;
}

/* Editor лейбл «Сцена: ...» в углу */
.rb-scene-editor-preview::before {
	content      : "Сцена: " attr( data-rb-scene-title );
	position     : absolute;
	top          : 4px;
	left         : 4px;
	z-index      : 100;
	padding      : 2px 8px;
	background   : #7c3aed;
	color        : #fff;
	font-size    : 11px;
	font-weight  : 500;
	font-family  : -apple-system, BlinkMacSystemFont, sans-serif;
	border-radius: 3px;
	opacity      : 1;
}

/* Editor: block-list-block с привязанной сценой получает атрибут
 * data-rb-has-scene через withSceneHostMarker HOC. */
[ data-rb-has-scene ] {
	position : relative;
	overflow : hidden;
}