/* Simorgh AI News — بخش‌های تعاملی (پاپ‌آپ + انیمیشن نوار خبر).
   عمداً از widget.css جدا است: AMP در <style amp-custom> اجازه‌ی position:fixed نمی‌دهد
   و انیمیشن را محدود می‌کند، پس این فایل فقط در صفحات غیر-AMP بارگذاری می‌شود. */

/* ================= Ticker (breaking-news bar) — motion layer =================
   Loads on non-AMP pages only. The base look lives in widget.css; here we add
   the four motion styles + the pulsing "live" dot + the progress bar. */

/* pulsing live dot */
.simorgh-news-ticker-dot {
	animation: simorgh-news-dot-pulse 2s ease-out infinite;
}
@keyframes simorgh-news-dot-pulse {
	0%   { box-shadow: 0 0 0 0 var(--simorgh-news-ticker-pulse); }
	70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* --- style: marquee (continuous flow, pure CSS) --- */
.simorgh-news-ticker--marquee .simorgh-news-ticker-viewport { overflow: hidden; }
.simorgh-news-ticker--marquee .simorgh-news-ticker-track {
	inline-size: max-content;
	animation: simorgh-news-marquee var(--simorgh-news-ticker-dur, 40s) linear infinite;
	will-change: transform;
}
.simorgh-news-ticker--marquee[data-pause-hover="1"]:hover .simorgh-news-ticker-track,
.simorgh-news-ticker--marquee .simorgh-news-ticker-track:focus-within {
	animation-play-state: paused;
}
@keyframes simorgh-news-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --- styles: rotate / fade (one headline at a time) --- */
.simorgh-news-ticker--rotate .simorgh-news-ticker-viewport,
.simorgh-news-ticker--fade .simorgh-news-ticker-viewport { overflow: hidden; }
.simorgh-news-ticker--rotate .simorgh-news-ticker-track,
.simorgh-news-ticker--fade .simorgh-news-ticker-track {
	display: block;
	position: relative;
	inline-size: 100%;
	gap: 0;
}
.simorgh-news-ticker--rotate .simorgh-news-ticker-item,
.simorgh-news-ticker--fade .simorgh-news-ticker-item {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 16px;
	inline-size: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.simorgh-news-ticker--rotate .simorgh-news-ticker-item { transform: translateY(115%); }
.simorgh-news-ticker--rotate .simorgh-news-ticker-item.is-active,
.simorgh-news-ticker--fade .simorgh-news-ticker-item.is-active {
	position: relative;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.simorgh-news-ticker--rotate .simorgh-news-ticker-item.is-leaving {
	opacity: 0;
	transform: translateY(-115%);
}
.simorgh-news-ticker--fade .simorgh-news-ticker-item.is-leaving { opacity: 0; }

/* --- progress bar (rotate / fade) --- */
.simorgh-news-ticker-progress.is-running {
	animation: simorgh-news-ticker-progress var(--simorgh-news-ticker-dur, 5s) linear forwards;
}
@keyframes simorgh-news-ticker-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.simorgh-news-ticker--marquee .simorgh-news-ticker-track { animation: none; }
	.simorgh-news-ticker--marquee .simorgh-news-ticker-viewport { overflow-x: auto; }
	.simorgh-news-ticker-dot { animation: none; }
	.simorgh-news-ticker--rotate .simorgh-news-ticker-item,
	.simorgh-news-ticker--fade .simorgh-news-ticker-item { transition: opacity 0.2s linear; transform: none; }
}

/* ---------- Popup ---------- */
.simorgh-news-popup {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 16px;
}
.simorgh-news-popup[hidden] { display: none; }
.simorgh-news-popup-inner {
	background: #fff;
	color: #1a1a1a;
	max-inline-size: 620px;
	inline-size: 100%;
	max-block-size: 82vh;
	overflow-y: auto;
	border-radius: 14px;
	padding: 26px;
	position: relative;
	direction: rtl;
}
.simorgh-news-popup-close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 14px;
	background: none;
	border: 0;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}
.simorgh-news-popup-body img { border-radius: 10px; margin-block-end: 12px; }
.simorgh-news-popup-body .simorgh-news-badge { font-size: 0.75em; }

@media (prefers-color-scheme: dark) {
	.simorgh-news-popup-inner { background: #1e1e1e; color: #eee; }
}

/* ---------- Staggered entrance (non-AMP only) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.simorgh-news-layout-grid .simorgh-news-entry,
	.simorgh-news-layout-magazine .simorgh-news-entry,
	.simorgh-news-layout-showcase .simorgh-news-entry,
	.simorgh-news-layout-masonry .simorgh-news-entry,
	.simorgh-news-layout-slider .simorgh-news-entry {
		animation: simorgh-news-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--simorgh-news-i, 0) * 60ms);
	}
}
@keyframes simorgh-news-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}