/**
 * BracketSpot — Landing Page (Cyberpunk)
 *
 * Page-specific overrides for landing.html. Consumes shared cyberpunk
 * tokens via the @import below, then layers landing-specific layout +
 * keyframes (grid scroll, particle float, logo float) on top.
 *
 * Design doc: docs/plans/2026-05-23-cyberpunk-public-pages-design.md §4.1
 * Foundational design: docs/plans/2026-05-22-cyberpunk-theme-design.md
 * Style guide: STYLE_GUIDE.md §19 (Cyberpunk Reference) + §20 (Theme Architecture)
 *
 * Visual-only refactor (T060): every text node in landing.html preserved
 * byte-identical. No copy changes anywhere — see design doc §2 D1.
 *
 * Pi GPU floor: particle count reduced from 12 → 6; scanline overlay
 * already capped by cyberpunk.css; glow stacks capped at 3 layers per
 * --cp-glow-neon-lg.
 */

@import url('./cyberpunk.css?vh=1');
@import url('./vectorheart.css?vh=1');  /* T157 (Vectorheart PR-D-1): pairs with the cyberpunk import above */

/* ==========================================================================
   0. :root fallbacks for --cp-* tokens — T069 fix #1
   cyberpunk.css defines these tokens ONLY under [data-theme="neon"]; under
   any other theme, var(--cp-*) would resolve to nothing and break layout.
   These :root defaults guarantee the tokens always resolve, mirroring the
   cyberpunk palette. The cyberpunk.css [data-theme="neon"] block above
   still overrides these under cyberpunk theme; under non-neon themes, the
   minimalist palette from style.css applies to most surfaces while the
   --cp-* family resolves to these safe defaults so any leftover landing.css
   rule using var(--cp-*) doesn't render with empty values.
   (CSS @import must precede other rules — that's why this block sits after.)
   ========================================================================== */

:root {
	--cp-bg: #0a0a0f;
	--cp-fg: #e0e0e0;
	--cp-card: #12121a;
	--cp-muted: #1c1c2e;
	--cp-border: #2a2a3a;
	--cp-muted-foreground: #8a8f99;
	--cp-accent-primary: #00ff88;
	--cp-accent-secondary: #ff00ff;
	--cp-accent-tertiary: #00d4ff;
	--cp-destructive: #ff3366;
	--cp-glow-neon: 0 0 5px var(--cp-accent-primary), 0 0 10px rgba(0,255,136,0.25);
	--cp-glow-neon-sm: 0 0 3px var(--cp-accent-primary), 0 0 6px rgba(0,255,136,0.19);
	--cp-glow-neon-lg: 0 0 10px var(--cp-accent-primary), 0 0 20px rgba(0,255,136,0.38), 0 0 40px rgba(0,255,136,0.19);
	--cp-font-display: 'Orbitron', 'Share Tech Mono', monospace;
	--cp-font-body: 'JetBrains Mono', 'Fira Code', monospace;
	--cp-font-label: 'Share Tech Mono', monospace;
}

/* Vectorheart (T166, 2026-05-25). The :root block above hardcodes the
   cyberpunk palette into landing.css. Without this block, those :root
   declarations win source-order against the [data-theme="vector"] cp-shim
   in shared/vectorheart.css (same specificity, defined earlier in the
   cascade). landing.html is brand-locked to data-theme="vector" by T163,
   so the override below is what makes the page paint Vectorheart.

   [data-theme="vector"] specificity (0,1,1) > :root specificity (0,1,0),
   so this wins regardless of source order. */
[data-theme="vector"] {
	--cp-bg:                 #0A0A0A;
	--cp-fg:                 #D4D4D4;
	--cp-card:               #141414;
	--cp-muted:              #141414;
	--cp-border:             #1F1F1F;
	--cp-muted-foreground:   #8C8C8C;
	--cp-accent-primary:     #FF0066;   /* signal-magenta — brand */
	--cp-accent-secondary:   #EED202;   /* signal-yellow */
	--cp-accent-tertiary:    #00E5FF;   /* signal-cyan */
	--cp-destructive:        #D40000;   /* signal-red */
	--cp-glow-neon:          none;      /* flat by design */
	--cp-glow-neon-sm:       none;
	--cp-glow-neon-lg:       none;
	--cp-font-display:       'Oxanium', 'Big Shoulders Display', sans-serif;
	--cp-font-body:          'Inter', system-ui, -apple-system, sans-serif;
	--cp-font-label:         'Space Mono', 'JetBrains Mono', monospace;
}

/* ==========================================================================
   1. Reset / box sizing
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	font-family: var(--cp-font-body);
}

body {
	display: flex;
	flex-direction: column;
	background: var(--cp-bg);
	color: var(--cp-fg);
	overflow-x: hidden;
}

/* ==========================================================================
   2. Background layers (radial gradient + neon-green grid)
   Gated to [data-theme="neon"] — T069 fix #2. Under non-neon themes these
   layers don't paint at all so the minimalist palette can show through.
   ========================================================================== */

[data-theme="neon"] .bg-gradient {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 20%, rgba(0, 255, 136, 0.10) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 80%, rgba(255, 0, 255, 0.06) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 50%, var(--cp-card) 0%, var(--cp-bg) 100%);
	z-index: 0;
}

[data-theme="neon"] .bg-grid {
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 255, 136, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 255, 136, 0.05) 1px, transparent 1px);
	background-size: 60px 60px;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	[data-theme="neon"] .bg-grid {
		animation: landing-grid-move 20s linear infinite;
	}

	@keyframes landing-grid-move {
		0%   { transform: translate(0, 0); }
		100% { transform: translate(60px, 60px); }
	}
}

/* ==========================================================================
   3. Floating particles (6 dots — Pi GPU floor)
   ========================================================================== */

.particles {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: var(--cp-accent-primary);
	border-radius: 50%;
	opacity: 0.6;
}

.particle:nth-child(1) { left: 12%; top: 22%; }
.particle:nth-child(2) { left: 28%; top: 78%; }
.particle:nth-child(3) { left: 44%; top: 42%; background: var(--cp-accent-tertiary); }
.particle:nth-child(4) { left: 60%; top: 65%; }
.particle:nth-child(5) { left: 76%; top: 30%; background: var(--cp-accent-tertiary); }
.particle:nth-child(6) { left: 88%; top: 80%; }

@media (prefers-reduced-motion: no-preference) {
	.particle           { animation: landing-particle-float 18s infinite ease-in-out; }
	.particle:nth-child(1) { animation-delay:  0s; animation-duration: 18s; }
	.particle:nth-child(2) { animation-delay: -3s; animation-duration: 22s; }
	.particle:nth-child(3) { animation-delay: -6s; animation-duration: 16s; }
	.particle:nth-child(4) { animation-delay: -9s; animation-duration: 20s; }
	.particle:nth-child(5) { animation-delay: -12s; animation-duration: 24s; }
	.particle:nth-child(6) { animation-delay: -15s; animation-duration: 19s; }

	@keyframes landing-particle-float {
		0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
		25%      { transform: translateY(-30px) translateX(10px) scale(1.2); opacity: 0.8; }
		50%      { transform: translateY(-15px) translateX(-10px) scale(0.9); opacity: 0.5; }
		75%      { transform: translateY(-40px) translateX(5px) scale(1.1); opacity: 0.7; }
	}
}

/* ==========================================================================
   4. Main container + decorative bracket SVGs
   ========================================================================== */

.coming-soon-container {
	position: relative;
	z-index: 10;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2rem;
}

.bracket-decor {
	position: absolute;
	opacity: 0.3;
	pointer-events: none;
}

.bracket-left {
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	width: 120px;
	height: 300px;
}

.bracket-right {
	right: 5%;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
	width: 120px;
	height: 300px;
}

@media (max-width: 768px) {
	.bracket-decor { display: none; }
}

/* ==========================================================================
   5. Logo (chamfered, neon-green)
   ========================================================================== */

.logo-wrapper {
	position: relative;
	margin-bottom: 2rem;
}

.logo-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	filter: blur(30px);
}

/* Neon-green glow only paints under cyberpunk theme — T069 fix #2. */
[data-theme="neon"] .logo-glow {
	background: radial-gradient(circle, rgba(0, 255, 136, 0.4) 0%, transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
	.logo-glow { animation: landing-pulse-glow 3s ease-in-out infinite; }

	@keyframes landing-pulse-glow {
		0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
		50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
	}
}

.logo-icon {
	position: relative;
	width: 100px;
	height: 100px;
	background: var(--cp-card);
	border: 2px solid var(--cp-accent-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
	.logo-icon { animation: landing-logo-float 6s ease-in-out infinite; }

	@keyframes landing-logo-float {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-10px); }
	}
}

.logo-icon svg {
	width: 56px;
	height: 56px;
	color: var(--cp-accent-primary);
}

/* ==========================================================================
   6. Brand name (Orbitron + glitch)
   ========================================================================== */

.brand-name {
	font-family: var(--cp-font-display);
	font-size: 3.5rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	color: var(--cp-fg);
	text-shadow: var(--cp-glow-neon-lg);
}

@media (max-width: 640px) {
	.brand-name { font-size: 2.5rem; }
}

/* ==========================================================================
   7. Coming Soon badge (magenta chamfered pill)
   ========================================================================== */

.coming-soon-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 0, 255, 0.08);
	border: 1px solid var(--cp-accent-secondary);
	color: var(--cp-accent-secondary);
	font-family: var(--cp-font-label);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.625rem 1.5rem;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.badge-dot {
	width: 8px;
	height: 8px;
	background: var(--cp-accent-secondary);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--cp-accent-secondary);
}

@media (prefers-reduced-motion: no-preference) {
	.coming-soon-badge { animation: landing-badge-pulse 2s ease-in-out infinite; }
	.badge-dot         { animation: landing-dot-pulse   2s ease-in-out infinite; }

	@keyframes landing-badge-pulse {
		0%, 100% { box-shadow: 0 0 0 0   rgba(255, 0, 255, 0.25); }
		50%      { box-shadow: 0 0 0 8px rgba(255, 0, 255, 0);    }
	}

	@keyframes landing-dot-pulse {
		0%, 100% { transform: scale(1);   opacity: 1;   }
		50%      { transform: scale(1.3); opacity: 0.7; }
	}
}

/* ==========================================================================
   8. Tagline (JetBrains Mono, --cp-fg)
   ========================================================================== */

.tagline {
	font-family: var(--cp-font-body);
	font-size: 1.25rem;
	color: var(--cp-fg);
	max-width: 480px;
	line-height: 1.7;
	margin-bottom: 3rem;
}

.tagline strong {
	color: var(--cp-accent-primary);
	font-weight: 700;
}

/* ==========================================================================
   9. Button group
   ========================================================================== */

.btn-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	max-width: 320px;
}

@media (min-width: 640px) {
	.btn-group {
		flex-direction: row;
		max-width: none;
		width: auto;
		gap: 1.25rem;
	}
}

/* Default-variant: transparent + neon-green border (Sign In) */
.btn-primary {
	position: relative;
	background: transparent;
	border: 2px solid var(--cp-accent-primary);
	color: var(--cp-accent-primary);
	padding: 1rem 2.5rem;
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	cursor: pointer;
}

.btn-primary:hover {
	background: var(--cp-accent-primary);
	color: var(--cp-bg);
	box-shadow: var(--cp-glow-neon-lg);
	transform: translateY(-2px);
}

/* Outline-variant: subtle border → magenta on hover (Browse Tournaments) */
.btn-secondary {
	position: relative;
	background: transparent;
	border: 1px solid var(--cp-border);
	color: var(--cp-fg);
	padding: 1rem 2.5rem;
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	cursor: pointer;
}

.btn-secondary:hover {
	border-color: var(--cp-accent-secondary);
	color: var(--cp-accent-secondary);
	box-shadow: var(--cp-glow-secondary);
	transform: translateY(-2px);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

footer {
	position: relative;
	z-index: 10;
	padding: 1.5rem;
	text-align: center;
	color: var(--cp-muted-foreground);
	font-family: var(--cp-font-label);
	font-size: 0.875rem;
	border-top: 1px solid var(--cp-border);
}

/* ==========================================================================
   11. Reduced motion catch-all (defense in depth)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   12. Page-level scanline overlay — gated to [data-theme="neon"] only.
   Non-neon themes don't get the CRT effect (consistent with cyberpunk.css §3.4).
   ========================================================================== */

[data-theme="neon"] body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(0, 255, 136, 0.03) 0px,
		rgba(0, 255, 136, 0.03) 1px,
		transparent 1px,
		transparent 3px
	);
	opacity: 0.3;
}

/* ==========================================================================
   13. Focus-visible rules for keyboard accessibility — T069 fix #4
   Cyberpunk default: 2px neon-green outline with 4px offset (escapes the
   cyber-chamfer-sm clip-path boundary on .btn-primary). Minimalist fallback
   for non-neon themes uses the blue accent so the ring is visible on a
   white/light background.
   ========================================================================== */

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
	outline: 2px solid var(--cp-accent-primary);
	outline-offset: 4px;
}

:root:not([data-theme="neon"]) .btn-primary:focus-visible,
:root:not([data-theme="neon"]) .btn-secondary:focus-visible {
	outline: 2px solid var(--accent-blue, #3b82f6);
	outline-offset: 2px;
}