/* animations.css */

/* ==================== Tile Animations ==================== */

/* Flash Animation für Tiles */
@keyframes ngFlash {
	0%,
	100% {
		outline-color: #9ccf7d;
		box-shadow: 0 0 0 0 rgba(156, 207, 125, 0);
	}

	50% {
		outline-color: #c9e7b5;
		box-shadow: 0 0 8px 2px rgba(156, 207, 125, 0.6);
	}
}

/* Pulse Animation */
@keyframes ngPulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .5;
	}
}

/* Tile Slide In Animation */
@keyframes ngTileSlideInRight {
	0% {
		opacity: 0;
		transform: translateX(46px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Fade In Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Skeleton Loading Animation */
@keyframes ngSkel {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 200% 0;
	}
}

/* Tile Level Pulse */
@keyframes ngTileLevelPulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(255, 138, 51, 0);
	}

	50% {
		box-shadow: 0 0 10px 2px rgba(255, 138, 51, .5);
	}
}

/* Tech Progress Animation */
@keyframes ngTechProg {
	0% {
		transform: translateX(-80%)
	}

	100% {
		transform: translateX(100%)
	}
}

/* Tech Blink Animation */
@keyframes ngTechBlink {
	0%,
	100% {
		border-color: var(--ng-tech-active-border);
	}

	50% {
		border-color: #ffb45e;
	}
}

/* Unit Pulse Animation */
@keyframes ngUnitPulse {
	0%,
	100% {
		border-color: var(--ng-tech-idle-border);
	}

	50% {
		border-color: var(--ng-tech-active-border);
	}
}

/* Tile Border Blink */
@keyframes ng-tile-blink-border {
	0% {
		border-color: var(--ng-tech-idle-border);
		box-shadow: 0 0 0 0 rgba(255, 102, 0, 0);
	}

	50% {
		border-color: var(--ng-tech-active-border);
		box-shadow: 0 0 8px 2px rgba(255, 102, 0, .5);
	}

	100% {
		border-color: var(--ng-tech-idle-border);
		box-shadow: 0 0 0 0 rgba(255, 102, 0, 0);
	}
}

/* Tile Pulse Animation */
@keyframes ngTilePulse {
	0%,
	100% {
		border-color: var(--ng-tech-idle-border);
	}

	50% {
		border-color: var(--ng-tech-active-border);
	}
}

/* ==================== CRT Animations ==================== */

/* CRT Scan Drift */
@keyframes crtScanDrift {
	0% { filter: brightness(0.98); }
	45% { filter: brightness(1.00); }
	55% { filter: brightness(0.94); }
	100% { filter: brightness(0.98); }
}

@keyframes ngScanlinesDown {
	0% { background-position: 0 0; }
	100% { background-position: 0 24px; }
}

@keyframes ngVhsTracking {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 0 220px, 0 60px; }
}

@keyframes ngVhsNoise {
	0%, 100% { opacity: 0.16; filter: none; }
	10% { opacity: 0.28; filter: contrast(1.08); }
	22% { opacity: 0.10; }
	35% { opacity: 0.24; filter: contrast(1.14) saturate(1.1); }
	60% { opacity: 0.14; }
	78% { opacity: 0.26; filter: contrast(1.12); }
}

@keyframes ngTestcardFlash {
	0% { opacity: 0; }
	1% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* CRT Flicker */
@keyframes crtFlicker {
	0%,
	2%,
	4%,
	6%,
	8%,
	10%,
	12%,
	14%,
	16%,
	18%,
	20%,
	22%,
	24%,
	26%,
	28%,
	30%,
	32%,
	34%,
	36%,
	38%,
	40%,
	42%,
	44%,
	46%,
	48%,
	50%,
	52%,
	54%,
	56%,
	58%,
	60%,
	62%,
	64%,
	66%,
	68%,
	70%,
	72%,
	74%,
	76%,
	78%,
	80%,
	82%,
	84%,
	86%,
	88%,
	90%,
	92%,
	94%,
	96%,
	98%,
	100% {
		opacity: 0.993;
	}

	1%, 11%, 21%, 31%, 41%, 51%, 61%, 71%, 81%, 91% {
		opacity: 1;
	}

	3%, 13%, 23%, 33%, 43%, 53%, 63%, 73%, 83%, 93% {
		opacity: 0.985;
	}

	7%, 27%, 47%, 67%, 87% {
		opacity: 0.978;
	}
}

/* CRT Jitter */
@keyframes crtJitter {
	0%, 90%, 100% { transform: translate3d(0, 0, 0); }
	91% { transform: translate3d(0.5px, -0.5px, 0); }
	92% { transform: translate3d(-0.5px, 0.5px, 0); }
	93% { transform: translate3d(0.5px, 0, 0); }
	94% { transform: translate3d(-0.5px, 0, 0); }
	95% { transform: translate3d(0, 0.5px, 0); }
	96% { transform: translate3d(0, 0, 0); }
}

/* NG Flicker */
@keyframes ngFlicker {
	0%,
	2%,
	4%,
	6%,
	8%,
	10%,
	12%,
	14%,
	16%,
	18%,
	20%,
	22%,
	24%,
	26%,
	28%,
	30%,
	32%,
	34%,
	36%,
	38%,
	40%,
	42%,
	44%,
	46%,
	48%,
	50%,
	52%,
	54%,
	56%,
	58%,
	60%,
	62%,
	64%,
	66%,
	68%,
	70%,
	72%,
	74%,
	76%,
	78%,
	80%,
	82%,
	84%,
	86%,
	88%,
	90%,
	92%,
	94%,
	96%,
	98%,
	100% {
		opacity: 0.99;
	}

	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
		opacity: 1;
	}

	9%, 29%, 49%, 69%, 89% {
		opacity: 0.965;
	}
}

/* NG Glitch Shift */
@keyframes ngGlitchShift {
	0%, 86%, 100% {
		filter: none;
		transform: translate3d(0, 0, 0);
	}

	87% {
		filter: hue-rotate(18deg);
		transform: translate3d(-3px, 1px, 0);
	}

	88% {
		filter: hue-rotate(-18deg);
		transform: translate3d(3px, -1px, 0);
	}

	89% {
		filter: none;
		transform: translate3d(0, 0, 0);
	}
}

/* ==================== SPA & Loading Animations ==================== */

/* SPA Spinner */
@keyframes ng-spa-spin {
    to { transform: rotate(360deg); }
}

/* SPA Pulse */
@keyframes ng-spa-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ==================== UI Animations ==================== */

/* Pulse Glow */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(55, 168, 255, 0.5); }
    50% { box-shadow: 0 0 15px rgba(55, 168, 255, 0.8); }
}

/* Remix Icon Spin */
@keyframes ri-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Cursor Blink */
@keyframes blink-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ==================== Animation Classes ==================== */

/* Flash & Delay States */
.ng-tile-flash {
	outline: 2px solid #9ccf7d;
	animation: ngFlash .8s ease-in-out 2;
}

.ng-tile-delayed .ng-live-pending {
	animation: ngPulse 3.2s infinite;
}

/* Tile Slide In Animation */
.ng-main-sections-bar .ng-tile.ng-tile-system {
	animation: ngTileSlideInRight .75s cubic-bezier(.16, .84, .44, 1) forwards;
	opacity: 0;
	will-change: opacity, transform;
}
.ng-main-sections-bar .ng-tile.ng-tile-system:nth-child(1){ animation-delay: .08s; }
.ng-main-sections-bar .ng-tile.ng-tile-system:nth-child(2){ animation-delay: .16s; }
.ng-main-sections-bar .ng-tile.ng-tile-system:nth-child(3){ animation-delay: .24s; }
.ng-main-sections-bar .ng-tile.ng-tile-system:nth-child(4){ animation-delay: .32s; }
.ng-main-sections-bar .ng-tile.ng-tile-system:nth-child(5){ animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
	.ng-main-sections-bar .ng-tile.ng-tile-system{
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Section Panel Fade In */
.ng-section-panel-inner {
	min-height: 320px;
	animation: fadeIn .22s ease;
}

/* Cube Glitch Effect */
.ng-cube-face.ng-face-front::after {
	content: none;
	background: none;
	opacity: 0;
	animation: none;
}

/* Skeleton Loading */
.ng-face-skeleton .ng-skel-line {
	height: 10px;
	margin-bottom: var(--space-8);
	border-radius: 4px;
	background: linear-gradient(90deg, #2a3036, #3a444c, #2a3036);
	background-size: 200% 100%;
	animation: ngSkel 1.2s ease-in-out infinite;
}

/* Tech Progress Bar */
.ng-tile-tech .ng-progress:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--ng-tech-active-border), #ffb45e);
	animation: ngTechProg 6s linear infinite
}

/* Tech Research Active */
.ng-tile-tech.is-researching {
	animation: ngTechBlink 2.6s linear infinite;
	position: relative;
}

/* Hangar & Defense Active */
.ng-tile-system.is-active-hangar {
	animation: ngUnitPulse 2.8s ease-in-out infinite;
}

.ng-tile-system.is-active-defense {
	animation: ngUnitPulse 2.2s ease-in-out infinite;
}

/* Active Progress Border */
.ng-tile-active-progress {
	animation: ng-tile-blink-border 2.8s linear infinite;
}

/* CRT Effects on Tile Background */
.ng-tile-bg {
	position: absolute;
	inset: 0;
	background-image: var(--ng-tile-bg);
	background-size: cover;
	background-position: center;
	filter: none;
	transition: none;
	z-index: 0;
	transform: translateY(0);
	animation: none;
}

/* 3D Cube Vorderseite erhält identische CRT-Animationen wie Tiles */
.ng-cube-face .ng-face-front {
	animation: none;
}

/* CRT Disabled State */
body.ng-crt-scan-disabled .ng-tile::before,
body.ng-crt-scan-disabled .ng-cube-face .ng-face-front::before {
	opacity: 0;
}

/* Tile Overlay Glitch */
.ng-tile .ng-tile-bg::after {
	content: none;
	background: none;
	opacity: .0;
	animation: none;
}

/* Building Active Pulse */
.ng-tile-building-active {
	position: relative;
	animation: ngTilePulse 2.8s ease-in-out infinite;
}

/* SPA Loading Spinner */
.ng-spa-loading-spinner {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(55, 168, 255, 0.15);
    border-top-color: #37a8ff;
    border-radius: 50%;
    animation: ng-spa-spin 0.8s linear infinite;
}

/* SPA Loading Text */
.ng-spa-loading-text {
    font-size: 14px;
    color: #7aa2c0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: ng-spa-pulse 1.5s ease-in-out infinite;
}

/* Message Status Badge */
.ng-message-status {
    font-size: 9px;
    font-weight: bold;
    padding: var(--space-2) var(--space-6);
    background: #37a8ff;
    color: #0a0e14;
    border-radius: 3px;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Remix Icon Spin */
.ri-spin {
    animation: ri-spin 1s linear infinite;
}

/* System Badge */
.ng-system-badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 600;
    padding: var(--space-2) 5px;
    background: rgba(60, 70, 80, 0.4);
    color: #8a9299;
    border-radius: 2px;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Hacker Terminal Cursor */
.ng-hacker-cursor {
    color: #6a8060;
    display: inline;
    margin-left: var(--space-4);
    background: none !important;
    width: auto !important;
    height: auto !important;
    animation: blink-cursor 1s step-end infinite !important;
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES (Teil 2)
   Diese Blöcke lagen im nicht geschlossenen :root-Block und wurden
   dadurch vom Parser verworfen. Keyframe-Regeln sind innerhalb eines
   Style-Blocks ungueltig und muessen auf Top-Level stehen.
   ═══════════════════════════════════════════════════════════════ */

@keyframes landingLogoGlobeGlow {
	0%, 100% { filter: drop-shadow(0 0 12px rgb(var(--rgb-neon) / 28%)); }
	50% { filter: drop-shadow(0 0 32px rgb(var(--rgb-neon) / 55%)); }
}

@keyframes hud-alien-scroll {
	0%   { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

@keyframes hud-res-shimmer { 0% { left: -100%; } 100% { left: 100%; } }

@keyframes ngRadarLiveDotBlink {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0.15; }
}

@keyframes ngRadarLiveJitter {
	0%, 100% { transform: translate(-50%, -50%) translateX(0); }
	18% { transform: translate(-50%, -50%) translateX(-1px); }
	19% { transform: translate(-50%, -50%) translateX(1px); }
	37% { transform: translate(-50%, -50%) translateX(-0.5px); }
	38% { transform: translate(-50%, -50%) translateX(0.5px); }
	62% { transform: translate(-50%, -50%) translateX(-1.5px); }
	63% { transform: translate(-50%, -50%) translateX(1px); }
}

@keyframes ngRadarLiveSkew {
	0%, 100% { transform: translate(-50%, -50%) skewX(0deg); }
	14% { transform: translate(-50%, -50%) skewX(-3deg); }
	15% { transform: translate(-50%, -50%) skewX(2deg); }
	43% { transform: translate(-50%, -50%) skewX(-2deg); }
	44% { transform: translate(-50%, -50%) skewX(1.5deg); }
	72% { transform: translate(-50%, -50%) skewX(-2.5deg); }
	73% { transform: translate(-50%, -50%) skewX(2deg); }
}

@keyframes ngRadarLiveTextGlitch {
	0%, 100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
	12% { transform: translateX(-1px); clip-path: inset(16% 0 52% 0); }
	13% { transform: translateX(1px); clip-path: inset(54% 0 20% 0); }
	29% { transform: translateX(-0.5px); clip-path: inset(0 0 0 0); }
	30% { transform: translateX(0.5px); clip-path: inset(72% 0 6% 0); }
	51% { transform: translateX(-1px); clip-path: inset(26% 0 44% 0); }
	52% { transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@keyframes ngRadarClockSlice {
	0%, 100% { clip-path: inset(0 0 0 0); }
	11% { clip-path: inset(0 0 0 0); }
	12% { clip-path: inset(20% 0 48% 0); }
	13% { clip-path: inset(0 0 0 0); }
	36% { clip-path: inset(0 0 0 0); }
	37% { clip-path: inset(64% 0 8% 0); }
	38% { clip-path: inset(0 0 0 0); }
	79% { clip-path: inset(0 0 0 0); }
	80% { clip-path: inset(32% 0 36% 0); }
	81% { clip-path: inset(0 0 0 0); }
}

@keyframes ngRadarClockNudge {
	0%, 100% { transform: translateX(0); }
	18% { transform: translateX(0); }
	19% { transform: translateX(-0.5px); }
	20% { transform: translateX(0.5px); }
	21% { transform: translateX(0); }
	58% { transform: translateX(0); }
	59% { transform: translateX(-1px); }
	60% { transform: translateX(0); }
	92% { transform: translateX(0.5px); }
	93% { transform: translateX(0); }
}

@keyframes ngRadarClockChromatic {
	0%, 100% {
		text-shadow: -0.5px 0 rgba(255, 80, 80, 0.18), 0.5px 0 rgba(80, 255, 200, 0.2), 0 0 6px rgb(var(--rgb-ice) / 42%);
	}
	29% {
		text-shadow: 0 0 rgba(255, 80, 80, 0), 0 0 rgba(80, 255, 200, 0), 0 0 5px rgb(var(--rgb-ice) / 38%);
	}
	63% {
		text-shadow: -0.5px 0 rgba(255, 80, 80, 0.2), 0.5px 0 rgba(80, 255, 200, 0.22), 0 0 7px rgb(var(--rgb-ice) / 44%);
	}
	84% {
		text-shadow: -0.2px 0 rgba(255, 80, 80, 0.16), 0.2px 0 rgba(80, 255, 200, 0.18), 0 0 6px rgb(var(--rgb-ice) / 40%);
	}
}

@keyframes ng-header-icon-badge-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.22; }
}

@keyframes ng-mission-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

@keyframes ng-card-border-shimmer {
	0% { background-position: -100% 0; }
	100% { background-position: 100% 0; }
}

@keyframes ng-terminal-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@keyframes ng-crt-scanline-drift {
	0% { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 0 4px, 0 0, 0 4px; }
}

@keyframes ng-crt-scanline-flicker {
	0%, 100% { opacity: 0.62; }
	50% { opacity: 0.88; }
}

@keyframes ng-crt-vignette-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.88; }
}

@keyframes ngHostileBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

@keyframes ngRadarChipPulse {
	0%, 100% { box-shadow: inset 0 0 10px rgb(var(--rgb-azure) / 22%), 0 0 10px rgb(var(--rgb-azure) / 16%), 0 0 0 1px rgb(var(--rgb-ice) / 14%); }
	50% { box-shadow: inset 0 0 16px rgb(var(--rgb-ice) / 34%), 0 0 18px rgb(var(--rgb-azure) / 32%), 0 0 0 1px rgb(var(--rgb-ice) / 28%); }
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@keyframes ng-craft-glow {
	0%,100% { box-shadow: 0 0 12px rgba(120,80,255,.2); }
	50% { box-shadow: 0 0 20px rgba(120,80,255,.4); }
}

@keyframes ng-artifact-pulse {
	0%, 100% { opacity: .5; transform: translate(-50%, -60%) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
}

@keyframes ng-artifact-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes ng-artifact-scalein {
	0% { transform: scale(0) rotate(-15deg); opacity: 0; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes ng-sp-pulse {
	0%, 100% { filter: drop-shadow(0 0 4px rgb(var(--rgb-amber) / 75%)) drop-shadow(0 0 8px rgb(var(--rgb-amber) / 30%)); }
	50%      { filter: drop-shadow(0 0 8px rgb(var(--rgb-amber)))   drop-shadow(0 0 16px rgb(var(--rgb-amber) / 60%)); }
}

@keyframes ng-skill-glow {
	0%   { box-shadow: 0 0 0 0 rgb(var(--rgb-amber) / 60%); }
	40%  { box-shadow: 0 0 20px 4px rgb(var(--rgb-amber) / 35%); }
	100% { box-shadow: 0 0 0 0 rgb(var(--rgb-amber) / 0); }
}

@keyframes spin-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes ng-levelup-scalein { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ng-levelup-fadein { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ng-levelup-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes ng-levelup-twinkle { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }