@keyframes explosiva {
	0% {
		transform: scale(0.1);
		filter: brightness(400%) blur(10px);
		opacity: 0;
	}

	70% {
		transform: scale(1.15);
		filter: brightness(150%) blur(2px);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		filter: brightness(100%);
		opacity: 1;
	}
}

@keyframes explosiva-grande {
	0% {
		transform: scale(0.1);
		filter: brightness(400%) blur(10px);
		opacity: 0;
	}

	70% {
		transform: scale(1.50);
		filter: brightness(150%) blur(2px);
		opacity: 1;
	}

	100% {
		transform: scale(1.35);
		filter: brightness(100%);
		opacity: 1;
	}
}

@keyframes neonFloat {

	0%,
	100% {
		text-shadow: 0 0 5px #ff1053, 0 0 15px #ff1053, 0 0 30px #ff1053;
		transform: translateY(0px);
	}

	50% {
		text-shadow: 0 0 15px #ff1053, 0 0 30px #ff1053, 0 0 50px #ff1053;
		transform: translateY(-5px);
	}
}

@keyframes relampago {

	0%,
	90%,
	100% {
		opacity: 0;
	}

	91% {
		opacity: 1;
		stroke: #39ff14;
	}

	93% {
		opacity: 0;
	}

	94% {
		opacity: 1;
		stroke: #ffffff;
	}

	97% {
		opacity: 0;
	}
}

#home {
	border: none !important;
	/* Destruir borde rojo base */
	top: 48% !important;
	/* Levanta la cámara general del recuadro un poco más arriba */
	overflow: visible !important;	/* Permite que el fuego de los fantasmas desborde sin cortarse */
	box-shadow:
		0 0 30px rgba(57, 255, 20, 0.6),
		0 0 80px rgba(157, 0, 255, 0.6),
		inset 0 0 30px rgba(57, 255, 20, 0.5),
		inset 0 0 80px rgba(157, 0, 255, 0.4) !important;
}

/* MARCO NEÓN HÍBRIDO PROCEDURAL (CSS MASK WIZARDRY) */
#home-neon-border,
#panel-neon-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12px;
	border: 12px solid transparent;
	pointer-events: none;
	z-index: 5;				/* Bajo el canvas de rayos (z-10) */
	background: linear-gradient(135deg, #39ff14 0%, #39ff14 45%, #9d00ff 55%, #9d00ff 100%) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	filter: drop-shadow(0 0 15px #39ff14) drop-shadow(0 0 35px #39ff14) drop-shadow(0 0 50px #9d00ff) drop-shadow(0 0 80px #9d00ff);
}

/* CANVAS LIGHTNING ENGINE: absoluto dentro de #home */
/* z-index: 10 → sobre el marco neón (z-5), bajo el contenido (z-20) */
#canvas-lightning-full {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	mix-blend-mode: screen;
}

/* Contenido interior de #home y #panel: siempre encima del canvas de rayos */
#home-doritos-logo,
#canvas-home-title-pacman,
#presentation,
#trailer,
#trailer-container,
#message {
	position: relative;
	z-index: 20;
}

#canvas-board {
	filter: drop-shadow(0 0 8px #39ff14) drop-shadow(0 0 15px rgba(57, 255, 20, 0.4));
	transition: filter 0.05s ease-out; /* Flash transition */
}

/* ============================================================ */
/* EFECTOS EXPLOSIVOS (Thunder Flash & Shockwaves)              */
/* ============================================================ */

/* Destello hiperluminoso sincronizado con relámpagos (home.js) */
#home-neon-border {
	transition: filter 0.05s ease-out, background 0.05s ease-out;
}
#panel-neon-border {
	transition: filter 0.05s ease-out, background 0.05s ease-out;
}

#home-neon-border.thunder-flash,
#panel-neon-border.thunder-flash {
	/* RENDIMIENTO OPTIMIZADO: Reducción de 4 a 2 pases de renderizado GPU */
	filter: drop-shadow(0 0 30px #fff) drop-shadow(0 0 80px #39ff14) !important;
	background: linear-gradient(135deg, #fff 0%, #39ff14 45%, #9d00ff 55%, #fff 100%) border-box !important;
}

#canvas-board.thunder-flash {
	filter: drop-shadow(0 0 25px rgba(57, 255, 20, 1.0)) !important;
}

/* Onda expansiva procedural generada durante la presentación de fantasmas */
.shockwave {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 6px solid #fff;
	transform: translate(-50%, -50%) scale(0.1);
	opacity: 1;
	z-index: 15;
	pointer-events: none;
	animation: shockwaveAnim 0.7s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
@keyframes shockwaveAnim {
	0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 1.0; border-width: 15px; }
	60%  { transform: translate(-50%, -50%) scale(3.5); opacity: 0.8; border-width: 3px;  }
	100% { transform: translate(-50%, -50%) scale(6.0); opacity: 0.0; border-width: 0px;  }
}

/* ============================================================ */

.lightning-strike {
	fill: none;
	stroke: #ffffff;
	stroke-width: 4;
	filter: drop-shadow(0 0 10px #39ff14) drop-shadow(0 0 20px #39ff14) drop-shadow(0 0 35px #9d00ff);
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

.lightning-strike.fast {
	animation: relampago 3s infinite;
}

.lightning-strike.medium {
	animation: relampago 4s infinite 1.2s;
}

.lightning-strike.slow {
	animation: relampago 5s infinite 2.5s;
}

.lightning-strike.flash {
	animation: relampago 1.5s infinite 0.1s;
}

.lightning-strike.hyper {
	animation: relampago 0.8s infinite 0.4s;
}

.lightning-strike.pulse {
	animation: relampago 2.2s infinite 1.8s;
}

/* Contenido interior de #home: siempre sobre el canvas de rayos */
#home-doritos-logo,
#canvas-home-title-pacman,
#presentation,
#trailer,
#message {
	position: relative;
	z-index: 20;
}

#home h1,
#panel h1 {
	text-align: center;
	font-size: 58px;
	white-space: nowrap;
	animation: explosiva 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, neonFloat 3s ease-in-out infinite alternate;
	animation-delay: 0s, 0.8s;
	/* Start float after explosion */
	filter: url(#heat-haze);
}

#panel h1 {
	margin-top: 30px;
}

#home h1 {
	margin-top: 200px;
	/* Acercado al centro superior para ceder espacio inferior al inmenso grid 2x2 */
}

#home-doritos-logo {
	position: absolute;
	top: 30px;
	/* SUBIDO AL TOPE DE LA PANTALLA */
	left: 0;
	right: 0;
	margin: auto;
	width: 240px;
	/* Escala fortalecida para lucir como logotipo superior */
	animation: explosiva 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, neonFloat 3s ease-in-out infinite alternate;
	animation-delay: 0.2s, 1.0s;
	filter: url(#heat-haze);
	opacity: 0;
	/* Hidden before animation */
	z-index: 10;
}

#home h3 {
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	bottom: 15px;
	text-align: center;
}

#home h3 em {
	font-size: inherit;
	font-style: inherit;
	color: #ff1053;
	text-shadow: 0 0 10px #ff1053;
}

#canvas-home-title-pacman {
	display: none;
}

#canvas-panel-title-pacman {
	display: none;
}

#presentation {
	position: absolute;
	margin: auto;
	padding: 0px;
	left: 0px;
	right: 0px;
	top: 290px;			/* Un poco más arriba para compensar el tamaño mayor */
	width: 520px;
	height: 510px;
	overflow: visible;	/* Permite que las fireballs desborden hacia arriba sin cortarse */
	animation: explosiva 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	animation-delay: 0.4s;
	opacity: 0;
	animation-fill-mode: forwards;
}

#home-h2-play {
	position: absolute;
	bottom: 15px;
	/* Justo apoyado sobre la línea del borde de neón inferior */
	width: 100%;
	text-align: center;

	/* Tipografía calcada de la referencia */
	font-family: "Impact", "Arial Black", sans-serif;
	font-size: 42px;
	letter-spacing: 3px;
	font-weight: 900;
	font-style: italic;

	/* Estilo "Hollow / Hueco" (sólo contorno) */
	color: transparent;
	-webkit-text-stroke: 2px #4adecb;

	/* El Resplandor Neon Cyan */
	text-shadow:
		0 0 12px rgba(74, 222, 203, 1),
		0 0 25px rgba(74, 222, 203, 0.6),
		0 0 35px rgba(74, 222, 203, 0.3);

	animation: neonFloat 2s ease-in-out infinite alternate;
}

#canvas-presentation-blinky,
#canvas-presentation-pinky,
#canvas-presentation-inky,
#canvas-presentation-clyde {
	position: absolute;
	width: 240px;			/* Ampliado desde 160px para no recortar bordes de partículas */
	height: 240px;
	background: transparent;
	z-index: 5;				/* DETRÁS del PNG (z-20) */
	pointer-events: none;
	mix-blend-mode: screen;	/* Fuego aditivo sobre el PNG */
}

/* Offset -45px para centrar canvas 240px exacto sobre PNG 150px ((240-150)/2 = 45px) */
#canvas-presentation-blinky {
	top: -45px;
	left: -5px;				/* 40 - 45 = -5 */
}

#canvas-presentation-pinky {
	top: -45px;
	left: 265px;			/* 310 - 45 = 265 */
}

#canvas-presentation-inky {
	top: 175px;				/* 220 - 45 = 175 */
	left: -5px;
}

#canvas-presentation-clyde {
	top: 175px;
	left: 265px;
}

/* FIREBALL HIGH-RES OVERLAYS LAYERED EFFECTS */

.fireball-layer {
	position: absolute;
	width: 150px;			/* Igual al canvas de fuego: círculo coincide exacto */
	height: 150px;
	object-fit: contain;
	pointer-events: none;
	z-index: 20;			/* ENCIMA del canvas de fuego (z-5): PNG visible, fuego asoma por detrás */
	opacity: 1;
}


#fireball-blinky {
	top: 0px;				/* Alineado exacto con canvas-presentation-blinky */
	left: 40px;
}

#fireball-pinky {
	top: 0px;
	left: 310px;
}

#fireball-inky {
	top: 220px;
	left: 40px;
}

#fireball-clyde {
	top: 220px;
	left: 310px;
}

@keyframes highResFirePulse {
	0% {
		transform: scale(0.93) rotate(-2deg);
		opacity: 0.8;
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.01)) url('#heat-haze');
	}

	100% {
		transform: scale(1.05) rotate(1deg);
		opacity: 1;
		filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.01)) url('#heat-haze');
	}
}

/* FIREBALL GEOMETRY FILTERS: Home Presentation */
#canvas-presentation-blinky {
	filter: drop-shadow(0 0 5px #ff1053);
}

#canvas-presentation-pinky {
	filter: drop-shadow(0 0 5px #0ab74f);
}

#canvas-presentation-inky {
	filter: drop-shadow(0 0 5px #ff3ff9);
}

#canvas-presentation-clyde {
	filter: drop-shadow(0 0 5px #ffffff);
}

/* FIREBALL GEOMETRY FILTERS: Home Trailer Cinematic */
#trailer-ghosts {
	filter: drop-shadow(0 0 8px #ff1053);
}

#presentation-character-blinky,
#presentation-character-pinky,
#presentation-character-inky,
#presentation-character-clyde,
#presentation-name-blinky,
#presentation-name-pinky,
#presentation-name-inky,
#presentation-name-clyde {
	position: absolute;
	width: 150px;
	height: 28px;
	text-align: center;
	letter-spacing: 2px;
}

#presentation-character-blinky,
#presentation-character-pinky,
#presentation-character-inky,
#presentation-character-clyde {
	font-size: 22px;
	font-weight: bold;
}

#presentation-name-blinky,
#presentation-name-pinky,
#presentation-name-inky,
#presentation-name-clyde {
	font-size: 16px;
	font-style: italic;
}

#presentation-character-blinky {
	top: 155px; /* Antes 180px */
	left: 40px;
	color: #dc2800;
	text-shadow: 0 0 10px #dc2800;
}

#presentation-name-blinky {
	top: 175px; /* Antes 205px */
	left: 40px;
	color: #dc2800;
	text-shadow: 0 0 10px #dc2800;
}

#presentation-character-pinky {
	top: 155px;
	left: 310px;
	color: #149614;
	text-shadow: 0 0 10px #149614;
}

#presentation-name-pinky {
	top: 175px;
	left: 310px;
	color: #149614;
	text-shadow: 0 0 10px #149614;
}

#presentation-character-inky {
	top: 370px; /* Antes 400px */
	left: 40px;
	color: #0082e6;
	text-shadow: 0 0 10px #0082e6;
}

#presentation-name-inky {
	top: 390px; /* Antes 425px */
	left: 40px;
	color: #0082e6;
	text-shadow: 0 0 10px #0082e6;
}

#presentation-character-clyde {
	top: 370px;
	left: 310px;
	color: #8228be;
	text-shadow: 0 0 10px #8228be;
}

#presentation-name-clyde {
	top: 390px;
	left: 310px;
	color: #8228be;
	text-shadow: 0 0 10px #8228be;
}

#trailer-container {
	position: absolute;
	top: 12px;             /* Borde de neón es de 12px, esto lo recorta exactamente por dentro */
	left: 12px;
	right: 12px;
	bottom: 12px;
	pointer-events: none;
	overflow: hidden;      /* Corta la animación antes de que toque la línea NEON */
	border-radius: 4px;    /* Radio interior acorde al exterior de 16px */
	z-index: 25;           /* Asegurar que pase sobre fondos */
}

#trailer {
	position: absolute;
	margin: auto;
	padding: 0px;
	left: 0px;
	right: 0px;
	bottom: 110px;         /* Animación levantada para que no pase sobre el texto (antes 80px) */
	/* Animación rodando justo por encima del cartel JUGAR */
	width: 350px;
	height: 150px;
	transform: scale(2);
	transform-origin: center bottom;
}

#home .iglu-brand-footer {
	bottom: -40px !important;
	text-transform: none !important;
	font-size: 12px !important;
	/* Acercándolo suavemente a la parte baja del marco neón */
}