/*
 * Escena experimental aislada.
 * Este archivo solo se carga cuando una pieza de tipo quiebre coincide con la URL actual.
 */

.aploc-modo-quiebre {
	position: fixed;
	inset: 0;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 18px;
	border: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: transparent;
	z-index: 2147483000;
	isolation: isolate;
	overscroll-behavior: contain;
}

.aploc-modo-quiebre:popover-open {
	display: grid;
}

.aploc-modo-quiebre::backdrop {
	background: rgba( 2, 4, 7, 0.38 );
	backdrop-filter: blur( 1.5px );
	pointer-events: none;
}

.aploc-modo-quiebre.aploc-visible {
	transform: none;
	pointer-events: none;
}

.aploc-modo-quiebre .aploc-panel {
	z-index: 2;
	opacity: 0;
	transform: scale( 0.72 ) rotate( -1.5deg );
	clip-path: polygon( 4% 10%, 38% 3%, 53% 8%, 82% 2%, 98% 16%, 94% 46%, 100% 72%, 88% 97%, 58% 92%, 33% 100%, 6% 88%, 1% 55% );
	filter: drop-shadow( 0 22px 45px rgba( 0, 0, 0, 0.5 ) );
	transition: opacity 260ms ease, transform 520ms cubic-bezier( .16, .82, .24, 1.18 );
	pointer-events: auto;
}

.aploc-modo-quiebre.aploc-revelado .aploc-panel {
	opacity: 1;
	transform: scale( 1 ) rotate( 0 );
}

.aploc-modo-quiebre .aploc-contenido {
	background: #101010;
}

.aploc-modo-quiebre .aploc-cerrar {
	position: fixed;
	top: max( 14px, env( safe-area-inset-top ) );
	right: max( 14px, env( safe-area-inset-right ) );
	pointer-events: auto;
}

.aploc-fractura {
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
	opacity: 0;
}

.aploc-escena-iniciada .aploc-fractura {
	animation: aploc-destello 900ms ease-out both;
}

.aploc-fractura::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 48%;
	width: 28px;
	height: 28px;
	border: 3px solid rgba( 255, 255, 255, 0.92 );
	border-radius: 48% 52% 46% 54%;
	box-shadow:
		0 0 0 6px rgba( 255, 255, 255, 0.12 ),
		0 0 34px rgba( 255, 255, 255, 0.8 );
	transform: translate( -50%, -50% );
}

.aploc-fractura i {
	position: absolute;
	left: 50%;
	top: 48%;
	width: var( --aploc-largo );
	height: 2px;
	background: linear-gradient( 90deg, rgba( 255, 255, 255, 0.96 ), rgba( 255, 255, 255, 0.18 ) 70%, transparent );
	box-shadow: 0 0 4px rgba( 255, 255, 255, 0.72 );
	transform-origin: left center;
	transform: rotate( var( --aploc-rayo ) ) scaleX( 0 );
	animation: aploc-rayo 460ms var( --aploc-espera ) cubic-bezier( .2, .75, .2, 1 ) forwards;
}

.aploc-fractura i::after {
	content: "";
	position: absolute;
	left: 36%;
	top: 0;
	width: 42%;
	height: 1px;
	background: rgba( 255, 255, 255, 0.72 );
	transform: rotate( 18deg );
	transform-origin: left center;
}

.aploc-sacudida body > *:not( .aploc-modo-quiebre ) {
	animation: aploc-sacudir 640ms linear both;
	will-change: transform;
}

@keyframes aploc-rayo {
	to { transform: rotate( var( --aploc-rayo ) ) scaleX( 1 ); }
}

@keyframes aploc-destello {
	0% { opacity: 0; }
	8%, 66% { opacity: 1; }
	100% { opacity: 0.42; }
}

@keyframes aploc-sacudir {
	0%, 100% { transform: translate3d( 0, 0, 0 ); }
	12% { transform: translate3d( -7px, 4px, 0 ) rotate( -0.25deg ); }
	24% { transform: translate3d( 8px, -5px, 0 ) rotate( 0.3deg ); }
	38% { transform: translate3d( -5px, -3px, 0 ); }
	52% { transform: translate3d( 5px, 4px, 0 ); }
	68% { transform: translate3d( -3px, 1px, 0 ); }
	84% { transform: translate3d( 2px, -2px, 0 ); }
}

@media ( max-width: 640px ) {
	.aploc-modo-quiebre {
		padding: 12px;
	}

	.aploc-modo-quiebre .aploc-panel {
		width: min( var( --aploc-ancho ), 96vw );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.aploc-modo-quiebre .aploc-panel {
		transition: none;
	}

	.aploc-fractura {
		display: none;
	}
}