/* NE Design System — modules/home.css */
/* Home page: hero slider, features, discord CTA, calendar cards */
/* Base hero styles are in layout.css (global) */

/* === Hero Slider === */
.ne-slider {
	position: relative;
	overflow: hidden;
}

/* CRT scanlines overlay */
.ne-slider::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.15) 0px,
			rgba(0, 0, 0, 0.15) 1px,
			transparent 1px,
			transparent 3px
		);
	z-index: 5;
	pointer-events: none;
}

/* Sweeping scanline bar */
.ne-slider::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(
		0deg,
		transparent 0%,
		rgba(255, 255, 255, 0.04) 40%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0.04) 60%,
		transparent 100%
	);
	z-index: 6;
	pointer-events: none;
	animation: ne-scanline 8s linear infinite;
}

@keyframes ne-scanline {
	0% { top: -80px; }
	100% { top: 100%; }
}

.ne-slider__track {
	position: relative;
	min-height: 500px;
}

.ne-slider__track::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(to bottom, transparent 0%, rgba(22, 25, 49, 0.4) 30%, rgba(22, 25, 49, 0.75) 60%, #161931 100%);
	z-index: 7;
	pointer-events: none;
}

/* Video background for slides */
.ne-hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.ne-hero__video::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(11, 13, 26, 0.45), rgba(11, 13, 26, 0.8));
	z-index: 1;
}

.ne-hero__video iframe,
.ne-hero__video > div {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: 177.78vh; /* 100vh * 16/9 */
	height: 56.25vw; /* 100vw * 9/16 */
	transform: translate(-50%, -65%);
	border: 0;
	pointer-events: none;
}

.ne-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	z-index: 0;
}

.ne-slider__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* Slider title font override */
.ne-slider .ne-hero__title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-style: normal;
	letter-spacing: -1.5px;
	text-transform: uppercase;
}

/* Arrows */
.ne-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.15);
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	padding: var(--ne-space-3) var(--ne-space-2);
	opacity: 0;
	transition: opacity 0.3s ease, color 0.3s ease;
}

.ne-slider:hover .ne-slider__arrow {
	opacity: 1;
}

.ne-slider__arrow:hover {
	color: rgba(255, 255, 255, 0.5);
}

.ne-slider__arrow--prev {
	left: var(--ne-space-4);
}

.ne-slider__arrow--next {
	right: var(--ne-space-4);
}

/* Dots */
.ne-slider__dots {
	position: absolute;
	bottom: var(--ne-space-5);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--ne-space-2);
	z-index: 10;
}

.ne-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	padding: 0;
	transition: background 0.3s, transform 0.3s;
}

.ne-slider__dot:hover {
	background: rgba(255, 255, 255, 0.5);
}

.ne-slider__dot.is-active {
	background: var(--ne-accent);
	transform: scale(1.3);
}

/* === Glitch effect on hero titles === */
.ne-glitch {
	position: relative;
}

.ne-glitch::before,
.ne-glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
}

.ne-glitch::before {
	color: #00e5ff;
	text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
	animation: ne-glitch-1 4s infinite;
}

.ne-glitch::after {
	color: #ff004d;
	text-shadow: 0 0 6px rgba(255, 0, 77, 0.3);
	animation: ne-glitch-2 4s infinite;
}

@keyframes ne-glitch-1 {
	0%, 1%   { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Burst 1 */
	2%       { opacity: 0.8; transform: translate(-4px, 1px); clip-path: inset(20% 0 45% 0); }
	4%       { opacity: 0.8; transform: translate(3px, 0);    clip-path: inset(55% 0 15% 0); }
	5%       { opacity: 0.7; transform: translate(-5px, 0);   clip-path: inset(5% 0 70% 0); }
	7%       { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Idle */
	8%, 49%  { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Burst 2 */
	50%      { opacity: 0.8; transform: translate(5px, 0);    clip-path: inset(35% 0 30% 0); }
	52%      { opacity: 0.8; transform: translate(-4px, 1px); clip-path: inset(10% 0 55% 0); }
	53%      { opacity: 0.6; transform: translate(3px, -1px); clip-path: inset(65% 0 5% 0); }
	55%      { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Idle */
	56%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
}

@keyframes ne-glitch-2 {
	0%, 3%   { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Burst 1 */
	4%       { opacity: 0.7; transform: translate(4px, 0);    clip-path: inset(30% 0 35% 0); }
	5%       { opacity: 0.7; transform: translate(-5px, 1px); clip-path: inset(5% 0 60% 0); }
	7%       { opacity: 0.6; transform: translate(3px, 0);    clip-path: inset(60% 0 5% 0); }
	9%       { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Idle */
	10%, 51% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Burst 2 */
	52%      { opacity: 0.7; transform: translate(-5px, 0);   clip-path: inset(40% 0 25% 0); }
	54%      { opacity: 0.7; transform: translate(4px, -1px); clip-path: inset(15% 0 50% 0); }
	55%      { opacity: 0.5; transform: translate(-3px, 1px); clip-path: inset(65% 0 10% 0); }
	57%      { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
	/* Idle */
	58%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
}

/* === Features grid (linear style) === */
.ne-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--ne-border);
	border: 1px solid var(--ne-border);
	border-radius: var(--ne-radius-lg);
	overflow: hidden;
}

.ne-feature {
	display: flex;
	align-items: flex-start;
	gap: var(--ne-space-4);
	padding: var(--ne-space-5);
	background: var(--ne-surface);
	transition: background var(--ne-duration) var(--ne-ease);
}

.ne-feature:hover {
	background: var(--ne-elevated);
}

.ne-feature__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ne-radius-md);
	background: var(--ne-accent-glow);
	color: var(--ne-accent);
	font-size: 0.875rem;
}

.ne-feature__title {
	font-family: var(--ne-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ne-text);
	margin: 0 0 var(--ne-space-1);
}

.ne-feature__desc {
	font-size: 0.8rem;
	color: var(--ne-text-subtle);
	line-height: 1.5;
	margin: 0;
}

/* === Calendar cards === */
.ne-cal-card {
	display: flex;
	flex-direction: column;
	background: var(--ne-surface);
	border: 1px solid var(--ne-border);
	border-radius: var(--ne-radius-lg);
	padding: var(--ne-space-5);
	text-decoration: none;
	color: var(--ne-text);
	overflow: hidden;
	transition: border-color var(--ne-duration) var(--ne-ease),
				transform var(--ne-duration) var(--ne-ease);
}

/* Track image for pending/upcoming cards */
.ne-cal-card__image {
	height: 120px;
	margin: calc(-1 * var(--ne-space-5));
	margin-bottom: var(--ne-space-4);
	overflow: hidden;
	position: relative;
}

.ne-cal-card__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, var(--ne-surface) 100%);
}

.ne-cal-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ne-duration) var(--ne-ease);
}

.ne-cal-card:hover .ne-cal-card__image img {
	transform: scale(1.03);
}

.ne-cal-card:hover {
	border-color: var(--ne-border-s);
	transform: translateY(-1px);
}

.ne-cal-card.is-next {
	border-color: var(--ne-accent);
}

.ne-cal-card.is-next:hover {
	border-color: var(--ne-accent-soft);
}

.ne-cal-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ne-space-3);
}

.ne-cal-card__date {
	font-family: var(--ne-font-mono);
	font-size: 0.688rem;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--ne-text-subtle);
}

.ne-cal-card__pill {
	font-size: 0.625rem;
	padding: 2px 8px;
}

.ne-cal-card__title {
	font-family: var(--ne-font-body);
	font-size: 0.925rem;
	font-weight: 600;
	color: var(--ne-text);
	line-height: 1.4;
	margin-bottom: var(--ne-space-2);
}

.ne-cal-card__meta {
	font-family: var(--ne-font-mono);
	font-size: 0.688rem;
	color: var(--ne-text-muted);
	letter-spacing: 0.3px;
	margin-bottom: var(--ne-space-3);
}

.ne-cal-card__footer {
	margin-top: auto;
}

.ne-cal-card__winner {
	font-family: var(--ne-font-mono);
	font-size: 0.688rem;
	color: var(--ne-yellow);
	margin-top: var(--ne-space-2);
}

.ne-cal-card__winner i {
	margin-right: var(--ne-space-1);
}

/* === Discord CTA === */
.ne-discord-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ne-space-7);
	padding: var(--ne-space-7) var(--ne-space-6);
	background:
		radial-gradient(ellipse at 80% 50%, rgba(88, 101, 242, 0.12) 0%, transparent 50%),
		var(--ne-elevated);
	border: 1px solid var(--ne-border);
	border-radius: var(--ne-radius-lg);
}

.ne-discord-cta__text {
	flex: 1;
	text-align: left;
}

.ne-discord-cta .ne-discord-cta__title {
	font-family: var(--ne-font-display);
	font-style: italic;
	font-size: 2.2rem;
	color: var(--ne-text);
	margin: 0 0 var(--ne-space-3);
	line-height: 1.2;
	text-align: left;
}

.ne-discord-cta__title em {
	color: var(--ne-accent);
}

.ne-discord-cta__desc {
	font-size: 0.875rem;
	color: var(--ne-text-subtle);
	line-height: 1.6;
	margin: 0;
	max-width: 520px;
}

.ne-discord-cta__action {
	flex-shrink: 0;
}

/* === Responsive === */
@media (max-width: 1024px) {
	.ne-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 750px) {
	.ne-features {
		grid-template-columns: 1fr;
	}

	.ne-feature {
		padding: var(--ne-space-4);
	}

	.ne-discord-cta {
		flex-direction: column;
		text-align: center;
		padding: var(--ne-space-6) var(--ne-space-5);
	}

	.ne-discord-cta__title {
		font-size: 1.6rem;
	}

	.ne-discord-cta__desc {
		max-width: none;
	}
}