/**
 * Backlot — Ultrawide ornaments (C7 M4)
 *
 * Riempie le bande laterali su viewport ultrawide (aspect > 16:9 o >=1600px)
 * con fog volumetrica + dust particles in palette Backlot (blu notte,
 * amber gate, burgundy, gold). Il PNG centrale riceve edge smoothing
 * (mask-image linear gradient) per fondersi con la fog.
 *
 * Desktop only. Mobile/laptop nasconde tutto e la scenografia riempie.
 *
 * Colori palette scena:
 *   #0a0d1f  night blue
 *   #8B6F3E  amber gate lights
 *   #3E1418  burgundy red carpet
 *   #C9A84C  gold (backlot-gold token)
 *   #e8e2d0  moon white
 */

/* ============================================================
   1. ORNAMENT CONTAINERS (markup: .bkl-ornament--left/--right)
   ============================================================ */
.bkl-ornament {
	position: absolute;
	top: 0; bottom: 0;
	width: calc( ( 100vw - 100vh * 16 / 9 ) / 2 );
	min-width: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	/* Default: nascosto. Mostrato solo quando c'è banda reale. */
	display: none;
}
.bkl-ornament--left  { left: 0; }
.bkl-ornament--right { right: 0; }

/* ============================================================
   2. ACTIVATION: solo desktop con banda laterale presente
   - min-width 1600px  → esclude laptop piccoli
   - min-aspect 17/9   → esclude 16:9 puri (stage già riempie)
   ============================================================ */
@media (min-width: 1600px) and (min-aspect-ratio: 17/9) {
	.bkl-ornament { display: block; }
}

/* ============================================================
   3. VOLUMETRIC FOG (layer base + 2 drift layers)
   ============================================================ */
.bkl-ornament__fog {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 90% 60% at 0% 50%,  rgba(139,111,62,0.22) 0%, transparent 60%),
		radial-gradient(ellipse 70% 80% at 20% 80%, rgba(62,20,24,0.28)   0%, transparent 55%),
		radial-gradient(ellipse 60% 50% at 10% 15%, rgba(232,226,208,0.08) 0%, transparent 60%),
		linear-gradient(270deg, #050714 0%, #0a0d1f 60%, #161228 100%);
}
.bkl-ornament--right .bkl-ornament__fog {
	background:
		radial-gradient(ellipse 90% 60% at 100% 50%, rgba(139,111,62,0.22) 0%, transparent 60%),
		radial-gradient(ellipse 70% 80% at 80% 80%,  rgba(62,20,24,0.28)   0%, transparent 55%),
		radial-gradient(ellipse 60% 50% at 90% 15%,  rgba(232,226,208,0.08) 0%, transparent 60%),
		linear-gradient(90deg, #050714 0%, #0a0d1f 60%, #161228 100%);
}

.bkl-ornament__fog::before,
.bkl-ornament__fog::after {
	content: '';
	position: absolute;
	inset: -20%;
	pointer-events: none;
}
.bkl-ornament__fog::before {
	background:
		radial-gradient(ellipse 40% 30% at 30% 30%, rgba(201,162,75,0.12) 0%, transparent 70%),
		radial-gradient(ellipse 50% 40% at 70% 70%, rgba(138,30,50,0.15)  0%, transparent 70%);
	filter: blur(40px);
	animation: bkl-fog-drift 45s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}
.bkl-ornament__fog::after {
	inset: -25%;
	background:
		radial-gradient(ellipse 30% 40% at 60% 40%, rgba(212,168,122,0.1) 0%, transparent 75%),
		radial-gradient(ellipse 45% 35% at 25% 70%, rgba(10,13,31,0.5)    0%, transparent 75%);
	filter: blur(60px);
	animation: bkl-fog-drift-2 62s ease-in-out infinite alternate;
}

@keyframes bkl-fog-drift {
	0%   { transform: translate(0, 0) scale(1);     opacity: 0.7;  }
	50%  { transform: translate(-4%, 3%) scale(1.08); opacity: 0.95; }
	100% { transform: translate(3%, -2%) scale(1.04); opacity: 0.8; }
}
@keyframes bkl-fog-drift-2 {
	0%   { transform: translate(0, 0)  scale(1.02); opacity: 0.6;  }
	50%  { transform: translate(5%, -3%) scale(1.1); opacity: 0.85; }
	100% { transform: translate(-3%, 4%) scale(1);   opacity: 0.7;  }
}

/* Feather interno verso il PNG (lato che tocca lo stage) */
.bkl-ornament--left .bkl-ornament__fog {
	mask-image: linear-gradient(90deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.55) 100%);
	-webkit-mask-image: linear-gradient(90deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.55) 100%);
}
.bkl-ornament--right .bkl-ornament__fog {
	mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.55) 100%);
	-webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.55) 100%);
}

/* ============================================================
   4. DUST PARTICLES (gold specks floating upward)
   ============================================================ */
.bkl-ornament__dust {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.bkl-ornament__dust span {
	position: absolute;
	width: 2px; height: 2px;
	background: #E8C878;
	border-radius: 50%;
	box-shadow: 0 0 4px rgba(232,200,120,0.8);
	opacity: 0;
	animation: bkl-dust-float 20s linear infinite;
}
@keyframes bkl-dust-float {
	0%   { opacity: 0; transform: translateY(0) translateX(0); }
	8%   { opacity: 0.9; }
	92%  { opacity: 0.7; }
	100% { opacity: 0; transform: translateY(-90vh) translateX(18px); }
}
/* Posizioni + delay randomici per 6 particles (vs 3 su mobile non applicabile) */
.bkl-ornament__dust span:nth-child(1) { left: 20%; bottom: -2%; animation-delay:  0s; }
.bkl-ornament__dust span:nth-child(2) { left: 55%; bottom: -2%; animation-delay:  3s; }
.bkl-ornament__dust span:nth-child(3) { left: 35%; bottom: -2%; animation-delay:  7s; }
.bkl-ornament__dust span:nth-child(4) { left: 75%; bottom: -2%; animation-delay: 11s; }
.bkl-ornament__dust span:nth-child(5) { left: 15%; bottom: -2%; animation-delay: 14s; }
.bkl-ornament__dust span:nth-child(6) { left: 60%; bottom: -2%; animation-delay: 17s; }

/* Lato destro: shift diverso per evitare simmetria palese */
.bkl-ornament--right .bkl-ornament__dust span:nth-child(1) { left: 30%; animation-delay:  1s; }
.bkl-ornament--right .bkl-ornament__dust span:nth-child(2) { left: 65%; animation-delay:  5s; }
.bkl-ornament--right .bkl-ornament__dust span:nth-child(3) { left: 45%; animation-delay:  9s; }
.bkl-ornament--right .bkl-ornament__dust span:nth-child(4) { left: 80%; animation-delay: 13s; }
.bkl-ornament--right .bkl-ornament__dust span:nth-child(5) { left: 20%; animation-delay: 16s; }
.bkl-ornament--right .bkl-ornament__dust span:nth-child(6) { left: 55%; animation-delay: 19s; }

/* ============================================================
   5. EDGE SMOOTHING del PNG stage
   Mask-image su .bkl-turnstile__stage / .bkl-ticketeria__stage
   sfuma gli ultimi 50px laterali, così il PNG si fonde con la fog
   invece di presentare un bordo duro.
   Applicato SOLO quando ornamenti attivi (stessa media query).
   ============================================================ */
@media (min-width: 1600px) and (min-aspect-ratio: 17/9) {
	.bkl-turnstile__stage,
	.bkl-ticketeria__stage {
		-webkit-mask-image: linear-gradient(90deg,
			transparent 0,
			rgba(0,0,0,1) 50px,
			rgba(0,0,0,1) calc(100% - 50px),
			transparent 100%);
		mask-image: linear-gradient(90deg,
			transparent 0,
			rgba(0,0,0,1) 50px,
			rgba(0,0,0,1) calc(100% - 50px),
			transparent 100%);
		/* Il box-shadow esterno va rimosso qui perché la maschera lo clipperebbe in modo innaturale */
		box-shadow: none;
	}
}

/* ============================================================
   6. Z-INDEX: fog dietro allo stage ma davanti al bg ambient
   ============================================================ */
.bkl-turnstile > .bkl-turnstile__stage,
.bkl-ticketeria > .bkl-ticketeria__stage {
	position: relative;
	z-index: 2;
}

/* ============================================================
   7. Reduced motion: ferma animazioni, lascia fog statica
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.bkl-ornament__fog::before,
	.bkl-ornament__fog::after,
	.bkl-ornament__dust span {
		animation: none !important;
	}
	.bkl-ornament__dust span { opacity: 0.6; }
}