/* =========================================================
   Breaking News FX - styles
   ========================================================= */

.bnfx-thumb {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 6px;
	isolation: isolate;
}

.bnfx-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.bnfx-fx-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

/* "BREAKING" badge */
.bnfx-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	background: #e10600;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 3px 10px;
	border-radius: 4px;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	display: none;
}

.bnfx-anim-breaking-badge .bnfx-badge {
	display: inline-block;
	animation: bnfx-badge-blink 1.2s ease-in-out infinite;
}

@keyframes bnfx-badge-blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.95); }
}

/* ---------------------------------------------------------
   THUMBNAIL ANIMATIONS (5)
   --------------------------------------------------------- */

/* 1. Pulse Zoom */
.bnfx-anim-pulse img {
	animation: bnfx-pulse 3s ease-in-out infinite;
	transform-origin: center;
}

@keyframes bnfx-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}

/* 2. Slow Zoom-In (Ken Burns) */
.bnfx-anim-zoom img {
	animation: bnfx-zoom 8s ease-in-out infinite alternate;
	transform-origin: center;
}

@keyframes bnfx-zoom {
	0%   { transform: scale(1); }
	100% { transform: scale(1.15); }
}

/* 3. Shine Sweep */
.bnfx-anim-shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		115deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.55) 50%,
		rgba(255,255,255,0) 100%
	);
	transform: skewX(-20deg);
	animation: bnfx-shine 3.2s ease-in-out infinite;
	z-index: 3;
	pointer-events: none;
}

@keyframes bnfx-shine {
	0%   { left: -150%; }
	60%  { left: 150%; }
	100% { left: 150%; }
}

/* 4. 3D Tilt Glow */
.bnfx-anim-flip-glow {
	animation: bnfx-tilt-glow 4s ease-in-out infinite;
	transform-style: preserve-3d;
	box-shadow: 0 0 0 rgba(255, 60, 60, 0);
}

@keyframes bnfx-tilt-glow {
	0%, 100% {
		transform: rotateY(0deg) rotateX(0deg) scale(1);
		box-shadow: 0 0 0 rgba(255, 60, 60, 0);
	}
	25% {
		transform: rotateY(4deg) rotateX(-2deg) scale(1.02);
		box-shadow: 0 6px 24px rgba(255, 60, 60, .35);
	}
	75% {
		transform: rotateY(-4deg) rotateX(2deg) scale(1.02);
		box-shadow: 0 6px 24px rgba(60, 140, 255, .35);
	}
}

/* 5. Breaking Badge Blink — handled above (badge), plus subtle scale */
.bnfx-anim-breaking-badge img {
	animation: bnfx-badge-scale 2.4s ease-in-out infinite;
}

@keyframes bnfx-badge-scale {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.03); }
}

/* ---------------------------------------------------------
   LIGHTNING / FLASH EFFECTS (5)
   --------------------------------------------------------- */

/* 1. Camera Flash */
.bnfx-light-flash .bnfx-fx-layer {
	background: #fff;
	opacity: 0;
	animation: bnfx-flash 4s ease-in-out infinite;
	mix-blend-mode: overlay;
}

@keyframes bnfx-flash {
	0%, 92%, 100% { opacity: 0; }
	94%           { opacity: .85; }
	96%           { opacity: 0; }
	98%           { opacity: .6; }
}

/* 2. Spark Streaks */
.bnfx-light-spark .bnfx-fx-layer::before,
.bnfx-light-spark .bnfx-fx-layer::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 60%;
	background: linear-gradient(180deg, rgba(255,255,150,0) 0%, #fff7a0 50%, rgba(255,255,150,0) 100%);
	filter: drop-shadow(0 0 6px #fff7a0);
	opacity: 0;
}

.bnfx-light-spark .bnfx-fx-layer::before {
	top: -10%;
	left: 18%;
	transform: rotate(18deg);
	animation: bnfx-spark 3.5s ease-in-out infinite;
}

.bnfx-light-spark .bnfx-fx-layer::after {
	top: -10%;
	right: 22%;
	transform: rotate(-18deg);
	animation: bnfx-spark 3.5s ease-in-out infinite;
	animation-delay: .6s;
}

@keyframes bnfx-spark {
	0%, 85%, 100% { opacity: 0; top: -20%; }
	88%           { opacity: 1; top: 0%; }
	92%           { opacity: 0; top: 30%; }
}

/* 3. Neon Border Glow */
.bnfx-light-neon-border {
	border-radius: 8px;
}

.bnfx-light-neon-border::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 8px;
	border: 3px solid transparent;
	background: linear-gradient(120deg, #00f0ff, #ff00d4, #fffb00, #00f0ff) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	background-size: 300% 300%;
	animation: bnfx-neon 4s linear infinite;
	z-index: 3;
	pointer-events: none;
}

@keyframes bnfx-neon {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* 4. Red Strobe */
.bnfx-light-strobe .bnfx-fx-layer {
	background: rgba(255, 0, 0, .35);
	opacity: 0;
	animation: bnfx-strobe 2.5s steps(1, end) infinite;
}

@keyframes bnfx-strobe {
	0%, 100% { opacity: 0; }
	10%      { opacity: .6; }
	20%      { opacity: 0; }
	30%      { opacity: .6; }
	40%      { opacity: 0; }
}

/* 5. Electric Title Glow (used mainly on title, but works as border too) */
.bnfx-light-electric-text .bnfx-fx-layer {
	box-shadow: inset 0 0 0 2px rgba(120, 220, 255, 0);
	animation: bnfx-electric-box 1.6s ease-in-out infinite;
}

@keyframes bnfx-electric-box {
	0%, 100% { box-shadow: inset 0 0 0 2px rgba(120,220,255,0), inset 0 0 12px rgba(120,220,255,0); }
	50%      { box-shadow: inset 0 0 0 2px rgba(120,220,255,.9), inset 0 0 18px rgba(120,220,255,.6); }
}

/* ---------------------------------------------------------
   TITLE EFFECT (applies lightning_style to the title text)
   --------------------------------------------------------- */
.bnfx-title-fx {
	display: inline-block;
	position: relative;
}

.bnfx-title-fx.bnfx-light-flash,
.bnfx-title-fx.bnfx-light-strobe {
	animation: bnfx-title-flash 2.5s ease-in-out infinite;
}

@keyframes bnfx-title-flash {
	0%, 85%, 100% { text-shadow: none; color: inherit; }
	90%           { text-shadow: 0 0 8px #fff, 0 0 16px #ff3b3b; color: #ff3b3b; }
}

.bnfx-title-fx.bnfx-light-spark,
.bnfx-title-fx.bnfx-light-electric-text {
	animation: bnfx-title-electric 1.8s ease-in-out infinite;
}

@keyframes bnfx-title-electric {
	0%, 100% { text-shadow: 0 0 2px rgba(120,220,255,.2); }
	50%      { text-shadow: 0 0 6px rgba(120,220,255,.9), 0 0 14px rgba(120,220,255,.6); }
}

.bnfx-title-fx.bnfx-light-neon-border {
	animation: bnfx-title-neon 3s linear infinite;
	background: linear-gradient(120deg, #00f0ff, #ff00d4, #fffb00, #00f0ff);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@keyframes bnfx-title-neon {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bnfx-thumb img,
	.bnfx-thumb::before,
	.bnfx-thumb::after,
	.bnfx-fx-layer,
	.bnfx-fx-layer::before,
	.bnfx-fx-layer::after,
	.bnfx-title-fx {
		animation: none !important;
	}
}