/**
 * Lumière autour du cadre (accueil).
 * Cartes + hero : cycle froid 21 s (bleu / cyan / violet…).
 * Menu + nav bas : cycle chaud 26 s (corail / ambre / citron…), distinct des cartes.
 */

body.dsc-home-manga-light article.card.featured-card {
	position: relative;
	animation: dsc-home-manga-frame-glow 21s linear infinite;
	outline: 2px solid rgba(170, 210, 255, 0.55);
	outline-offset: 2px;
}

body.dsc-home-manga-light article.card.featured-card:nth-child(4n + 1) {
	animation-delay: 0s;
}
body.dsc-home-manga-light article.card.featured-card:nth-child(4n + 2) {
	animation-delay: -3.5s;
}
body.dsc-home-manga-light article.card.featured-card:nth-child(4n + 3) {
	animation-delay: -7s;
}
body.dsc-home-manga-light article.card.featured-card:nth-child(4n) {
	animation-delay: -10.5s;
}

@keyframes dsc-home-manga-frame-glow {
	0%,
	100% {
		outline-color: rgba(140, 195, 255, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 255, 255, 0.18),
			0 0 30px rgba(110, 175, 255, 0.38),
			0 0 56px rgba(85, 145, 235, 0.3),
			0 0 92px rgba(65, 125, 220, 0.2);
	}
	8%,
	12% {
		outline-color: rgba(210, 235, 255, 0.88);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.28),
			0 0 44px rgba(150, 210, 255, 0.52),
			0 0 84px rgba(120, 185, 250, 0.4),
			0 0 120px rgba(95, 160, 240, 0.28);
	}
	20% {
		outline-color: rgba(120, 225, 215, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 255, 255, 0.18),
			0 0 32px rgba(70, 205, 195, 0.4),
			0 0 58px rgba(50, 185, 175, 0.32),
			0 0 94px rgba(40, 165, 158, 0.2);
	}
	28%,
	32% {
		outline-color: rgba(170, 245, 235, 0.85);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.26),
			0 0 42px rgba(100, 220, 208, 0.5),
			0 0 80px rgba(70, 200, 188, 0.38),
			0 0 118px rgba(55, 180, 170, 0.24);
	}
	40% {
		outline-color: rgba(195, 165, 255, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 255, 255, 0.18),
			0 0 32px rgba(175, 130, 245, 0.4),
			0 0 58px rgba(150, 105, 230, 0.32),
			0 0 94px rgba(125, 85, 210, 0.2);
	}
	48%,
	52% {
		outline-color: rgba(230, 200, 255, 0.88);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.27),
			0 0 44px rgba(200, 155, 255, 0.52),
			0 0 82px rgba(170, 120, 245, 0.4),
			0 0 120px rgba(145, 95, 225, 0.26);
	}
	60% {
		outline-color: rgba(255, 155, 195, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 255, 255, 0.18),
			0 0 32px rgba(255, 120, 175, 0.38),
			0 0 58px rgba(240, 95, 155, 0.3),
			0 0 94px rgba(220, 75, 135, 0.2);
	}
	68%,
	72% {
		outline-color: rgba(255, 205, 225, 0.88);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.28),
			0 0 44px rgba(255, 160, 200, 0.5),
			0 0 82px rgba(245, 130, 180, 0.38),
			0 0 118px rgba(230, 110, 160, 0.24);
	}
	80% {
		outline-color: rgba(255, 195, 110, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 255, 255, 0.18),
			0 0 32px rgba(255, 185, 90, 0.4),
			0 0 58px rgba(240, 165, 70, 0.32),
			0 0 94px rgba(220, 145, 55, 0.2);
	}
	88%,
	92% {
		outline-color: rgba(255, 230, 170, 0.88);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.27),
			0 0 44px rgba(255, 210, 130, 0.52),
			0 0 82px rgba(245, 190, 100, 0.4),
			0 0 118px rgba(230, 175, 80, 0.26);
	}
}

/* Slider hero : cycle de teintes aligné (les halos rouge/orange du thème sont conservés). */
body.dsc-home-manga-light .hero {
	animation: dsc-home-hero-frame-glow 21s linear infinite;
	outline: 2px solid rgba(170, 210, 255, 0.55);
	outline-offset: 2px;
}

@keyframes dsc-home-hero-frame-glow {
	0%,
	100% {
		outline-color: rgba(140, 195, 255, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 31, 63, 0.1) inset,
			0 0 42px rgba(255, 31, 63, 0.14),
			0 0 64px rgba(255, 179, 0, 0.1),
			0 0 0 1px rgba(255, 255, 255, 0.16),
			0 0 34px rgba(110, 175, 255, 0.4),
			0 0 68px rgba(85, 145, 235, 0.3),
			0 0 102px rgba(65, 125, 220, 0.18);
	}
	8%,
	12% {
		outline-color: rgba(210, 235, 255, 0.9);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.44),
			0 0 0 1px rgba(255, 31, 63, 0.11) inset,
			0 0 50px rgba(255, 31, 63, 0.17),
			0 0 78px rgba(255, 179, 0, 0.13),
			0 0 0 1px rgba(255, 255, 255, 0.26),
			0 0 48px rgba(145, 200, 255, 0.52),
			0 0 92px rgba(115, 175, 245, 0.4),
			0 0 132px rgba(90, 155, 235, 0.26);
	}
	20% {
		outline-color: rgba(120, 225, 215, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 31, 63, 0.1) inset,
			0 0 42px rgba(255, 31, 63, 0.14),
			0 0 64px rgba(255, 179, 0, 0.1),
			0 0 0 1px rgba(255, 255, 255, 0.16),
			0 0 36px rgba(75, 200, 190, 0.42),
			0 0 70px rgba(55, 180, 172, 0.32),
			0 0 104px rgba(45, 165, 158, 0.2);
	}
	28%,
	32% {
		outline-color: rgba(170, 245, 235, 0.88);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.44),
			0 0 0 1px rgba(255, 31, 63, 0.11) inset,
			0 0 52px rgba(255, 31, 63, 0.18),
			0 0 82px rgba(255, 179, 0, 0.14),
			0 0 0 1px rgba(255, 255, 255, 0.25),
			0 0 46px rgba(95, 215, 205, 0.5),
			0 0 88px rgba(70, 195, 185, 0.38),
			0 0 126px rgba(55, 175, 168, 0.24);
	}
	40% {
		outline-color: rgba(195, 165, 255, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 31, 63, 0.1) inset,
			0 0 42px rgba(255, 31, 63, 0.14),
			0 0 64px rgba(255, 179, 0, 0.1),
			0 0 0 1px rgba(255, 255, 255, 0.16),
			0 0 36px rgba(170, 125, 245, 0.42),
			0 0 70px rgba(145, 100, 228, 0.32),
			0 0 104px rgba(120, 80, 210, 0.2);
	}
	48%,
	52% {
		outline-color: rgba(230, 200, 255, 0.9);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.44),
			0 0 0 1px rgba(255, 31, 63, 0.12) inset,
			0 0 52px rgba(255, 31, 63, 0.19),
			0 0 84px rgba(255, 179, 0, 0.14),
			0 0 0 1px rgba(255, 255, 255, 0.26),
			0 0 48px rgba(195, 150, 255, 0.52),
			0 0 90px rgba(165, 115, 240, 0.4),
			0 0 130px rgba(140, 95, 220, 0.26);
	}
	60% {
		outline-color: rgba(255, 155, 195, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 31, 63, 0.1) inset,
			0 0 42px rgba(255, 31, 63, 0.14),
			0 0 64px rgba(255, 179, 0, 0.1),
			0 0 0 1px rgba(255, 255, 255, 0.16),
			0 0 36px rgba(250, 115, 170, 0.42),
			0 0 70px rgba(235, 90, 150, 0.32),
			0 0 104px rgba(215, 75, 130, 0.2);
	}
	68%,
	72% {
		outline-color: rgba(255, 205, 225, 0.9);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.44),
			0 0 0 1px rgba(255, 31, 63, 0.13) inset,
			0 0 54px rgba(255, 31, 63, 0.2),
			0 0 84px rgba(255, 179, 0, 0.14),
			0 0 0 1px rgba(255, 255, 255, 0.27),
			0 0 48px rgba(255, 155, 195, 0.5),
			0 0 90px rgba(245, 125, 175, 0.38),
			0 0 128px rgba(225, 105, 155, 0.24);
	}
	80% {
		outline-color: rgba(255, 195, 110, 0.55);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 31, 63, 0.1) inset,
			0 0 42px rgba(255, 31, 63, 0.14),
			0 0 64px rgba(255, 179, 0, 0.1),
			0 0 0 1px rgba(255, 255, 255, 0.16),
			0 0 36px rgba(255, 190, 85, 0.44),
			0 0 70px rgba(245, 170, 65, 0.34),
			0 0 104px rgba(225, 150, 50, 0.22);
	}
	88%,
	92% {
		outline-color: rgba(255, 230, 170, 0.9);
		outline-width: 3px;
		outline-offset: 3px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.44),
			0 0 0 1px rgba(255, 31, 63, 0.11) inset,
			0 0 52px rgba(255, 31, 63, 0.18),
			0 0 86px rgba(255, 179, 0, 0.15),
			0 0 0 1px rgba(255, 255, 255, 0.26),
			0 0 48px rgba(255, 215, 125, 0.54),
			0 0 92px rgba(248, 195, 95, 0.42),
			0 0 132px rgba(235, 180, 75, 0.28);
	}
}

/* Menu : cycle chaud / ambre (distinct des cartes & hero, cycle froid 21 s). */
body.dsc-home-manga-light .header .menu-pill,
body.dsc-home-manga-light .header .account-btn,
body.dsc-home-manga-light .header .top-tab.genre-tab,
body.dsc-home-manga-light .bottom-nav .nav-item {
	position: relative;
	z-index: 0;
	animation: dsc-home-menu-chip-glow 26s linear infinite;
	outline: 2px solid rgba(255, 150, 130, 0.48);
	outline-offset: 1px;
}

body.dsc-home-manga-light .header .menu-pills > a.menu-pill:nth-child(1) {
	animation-delay: 0s;
}
body.dsc-home-manga-light .header .menu-pills > a.menu-pill:nth-child(2) {
	animation-delay: -3.4s;
}
body.dsc-home-manga-light .header .menu-pills > a.menu-pill:nth-child(3) {
	animation-delay: -6.8s;
}
body.dsc-home-manga-light .header .menu-dropdown .menu-pill {
	animation-delay: -10.2s;
}

body.dsc-home-manga-light .header .account-actions > .account-btn:nth-child(1) {
	animation-delay: -1.7s;
}
body.dsc-home-manga-light .header .account-actions > .account-btn:nth-child(2) {
	animation-delay: -5.1s;
}
body.dsc-home-manga-light .header .account-actions > .account-btn:nth-child(3) {
	animation-delay: -8.3s;
}

body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(1) {
	animation-delay: -0.9s;
}
body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(2) {
	animation-delay: -1.8s;
}
body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(3) {
	animation-delay: -2.7s;
}
body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(4) {
	animation-delay: -3.6s;
}
body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(5) {
	animation-delay: -4.5s;
}
body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(6) {
	animation-delay: -5.4s;
}
body.dsc-home-manga-light .header .top-tabs.genres-primary > .top-tab:nth-child(7) {
	animation-delay: -6.3s;
}
body.dsc-home-manga-light .header .genres-more .top-tab {
	animation-delay: -11s;
}

body.dsc-home-manga-light .bottom-nav .nav-item:nth-child(1) {
	animation-delay: 0s;
}
body.dsc-home-manga-light .bottom-nav .nav-item:nth-child(2) {
	animation-delay: -3.7s;
}
body.dsc-home-manga-light .bottom-nav .nav-item:nth-child(3) {
	animation-delay: -7.4s;
}
body.dsc-home-manga-light .bottom-nav .nav-item:nth-child(4) {
	animation-delay: -11.1s;
}
body.dsc-home-manga-light .bottom-nav .nav-item:nth-child(5) {
	animation-delay: -14.8s;
}

@keyframes dsc-home-menu-chip-glow {
	0%,
	100% {
		outline-color: rgba(255, 130, 110, 0.52);
		outline-width: 2px;
		outline-offset: 1px;
		box-shadow:
			0 6px 20px rgba(0, 0, 0, 0.48),
			0 0 0 1px rgba(255, 90, 105, 0.14) inset,
			0 0 12px rgba(255, 95, 85, 0.32),
			0 0 22px rgba(255, 60, 95, 0.24),
			0 0 34px rgba(255, 140, 70, 0.14);
	}
	8%,
	12% {
		outline-color: rgba(255, 100, 150, 0.82);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.4),
			0 0 0 1px rgba(255, 50, 120, 0.16) inset,
			0 0 18px rgba(255, 70, 140, 0.44),
			0 0 34px rgba(255, 40, 110, 0.34),
			0 0 48px rgba(240, 60, 160, 0.2);
	}
	20% {
		outline-color: rgba(255, 185, 70, 0.52);
		outline-width: 2px;
		outline-offset: 1px;
		box-shadow:
			0 6px 20px rgba(0, 0, 0, 0.48),
			0 0 0 1px rgba(255, 170, 60, 0.12) inset,
			0 0 14px rgba(255, 190, 60, 0.4),
			0 0 26px rgba(255, 160, 40, 0.32),
			0 0 40px rgba(245, 130, 30, 0.18);
	}
	28%,
	32% {
		outline-color: rgba(255, 210, 120, 0.85);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.4),
			0 0 0 1px rgba(255, 200, 80, 0.14) inset,
			0 0 18px rgba(255, 205, 90, 0.48),
			0 0 34px rgba(255, 175, 50, 0.36),
			0 0 50px rgba(240, 150, 40, 0.22);
	}
	40% {
		outline-color: rgba(255, 150, 90, 0.52);
		outline-width: 2px;
		outline-offset: 1px;
		box-shadow:
			0 6px 20px rgba(0, 0, 0, 0.48),
			0 0 0 1px rgba(255, 120, 70, 0.12) inset,
			0 0 14px rgba(255, 130, 75, 0.38),
			0 0 26px rgba(255, 100, 55, 0.3),
			0 0 40px rgba(235, 85, 45, 0.17);
	}
	48%,
	52% {
		outline-color: rgba(255, 175, 130, 0.82);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.4),
			0 0 0 1px rgba(255, 160, 110, 0.14) inset,
			0 0 18px rgba(255, 165, 120, 0.46),
			0 0 34px rgba(255, 130, 85, 0.34),
			0 0 50px rgba(230, 100, 65, 0.2);
	}
	60% {
		outline-color: rgba(220, 255, 140, 0.48);
		outline-width: 2px;
		outline-offset: 1px;
		box-shadow:
			0 6px 20px rgba(0, 0, 0, 0.48),
			0 0 0 1px rgba(200, 255, 100, 0.1) inset,
			0 0 14px rgba(210, 245, 90, 0.36),
			0 0 26px rgba(185, 230, 70, 0.28),
			0 0 40px rgba(160, 210, 60, 0.16);
	}
	68%,
	72% {
		outline-color: rgba(185, 255, 175, 0.78);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.4),
			0 0 0 1px rgba(170, 250, 150, 0.12) inset,
			0 0 18px rgba(175, 250, 130, 0.42),
			0 0 34px rgba(140, 235, 110, 0.32),
			0 0 48px rgba(110, 215, 95, 0.18);
	}
	80% {
		outline-color: rgba(255, 120, 160, 0.5);
		outline-width: 2px;
		outline-offset: 1px;
		box-shadow:
			0 6px 20px rgba(0, 0, 0, 0.48),
			0 0 0 1px rgba(255, 80, 130, 0.12) inset,
			0 0 14px rgba(255, 110, 150, 0.36),
			0 0 26px rgba(240, 80, 130, 0.28),
			0 0 40px rgba(220, 60, 115, 0.16);
	}
	88%,
	92% {
		outline-color: rgba(255, 160, 185, 0.82);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.4),
			0 0 0 1px rgba(255, 120, 150, 0.14) inset,
			0 0 18px rgba(255, 140, 170, 0.44),
			0 0 34px rgba(250, 100, 145, 0.32),
			0 0 48px rgba(235, 80, 125, 0.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.dsc-home-manga-light article.card.featured-card {
		animation: none;
		outline-color: rgba(175, 200, 245, 0.72);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 18px 55px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 255, 255, 0.22),
			0 0 36px rgba(140, 190, 255, 0.35),
			0 0 70px rgba(160, 130, 220, 0.22),
			0 0 90px rgba(200, 150, 120, 0.12);
	}

	body.dsc-home-manga-light .hero {
		animation: none;
		outline-color: rgba(180, 205, 245, 0.75);
		outline-width: 2px;
		outline-offset: 2px;
		box-shadow:
			0 24px 80px rgba(0, 0, 0, 0.55),
			0 0 0 1px rgba(255, 31, 63, 0.1) inset,
			0 0 46px rgba(255, 31, 63, 0.16),
			0 0 72px rgba(255, 179, 0, 0.12),
			0 0 0 1px rgba(255, 255, 255, 0.2),
			0 0 40px rgba(130, 175, 245, 0.35),
			0 0 78px rgba(150, 130, 230, 0.22);
	}

	body.dsc-home-manga-light .header .menu-pill,
	body.dsc-home-manga-light .header .account-btn,
	body.dsc-home-manga-light .header .top-tab.genre-tab,
	body.dsc-home-manga-light .bottom-nav .nav-item {
		animation: none;
		outline-color: rgba(255, 170, 130, 0.65);
		outline-width: 2px;
		outline-offset: 1px;
		box-shadow:
			0 6px 18px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 100, 90, 0.1) inset,
			0 0 14px rgba(255, 140, 90, 0.28),
			0 0 28px rgba(255, 190, 100, 0.18),
			0 0 36px rgba(200, 230, 120, 0.1);
	}
}
