/* ---------- 					Vaporwave / Neobrutalism CSS 					---------- */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@font-face { font-family: "Deltarune"; src: url("../assets/fonts/Deltarune.ttf") format(truetype); }
@font-face { font-family: "DotumChe"; src: url("../assets/fonts/DotumChe-Pixel.ttf") format(truetype); }
@font-face { font-family: "DTM-Sans"; src: url("../assets/fonts/DTM-Sans.ttf") format(truetype); }
@font-face { font-family: "MERCY"; src: url("../assets/fonts/MERCY.ttf") format(truetype); }
@font-face { font-family: "PixelOperator"; src: url("../assets/fonts/PixelOperator.ttf") format(truetype); }
@font-face { font-family: "VanillaExtract"; src: url("../assets/fonts/VanillaExtract.ttf") format(truetype); }

/* ---------- 					Theme tokens 					---------- */
:root {
	/* ----- Palette: base + accents ----- */
	--col-bg-deep:            #0a0d10;  						/* deep CRT black */
	--col-panel:              #0e1319;  						/* panel/paper */
	--col-grid:               #0f1a1f;  						/* subtle grid background */
	--col-border:             #1b2b33;  						/* borders */
	--col-shadow:             #031015;  						/* drop shadow */

	 /* Vaporwave accent colors (tune for image) */
	--col-neon-pink:         #ff5bb0;  						/* strong magenta/pink */
	--col-neon-magenta:      #ff3fa0;
	--col-neon-cyan:         #34f0e0;  						/* cyan mint */
	--col-neon-violet:       #8ea2ff;  						/* distant purple */
	--col-phosphor:          #dfffe3;  						/* readable text */

	/* ----- Typography ----- */
	--font-mono:            "PixelOperator", ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
	--font-sans:            "DTM-Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--text-tiny:            5px;  /* For the lols*/
	--text-sm:              12px;
	--text-md:              16px;
	--text-lg:              22px;
	--text-xl:              26px;

	/* ----- Background image (use your provided file) ----- */
	--bg-img: url("https://fluffymotherfox.neocities.org/assets/img/vpwave-bg.png"); 															/* your attached asset path */
	--bg-img-size:         	cover;								/* cover, contain, auto, or specific size */
	--bg-img-position:     	center;								/* center, top, bottom, left, right, or specific position */
	--bg-img-repeat:       	no-repeat;							/* repeat, no-repeat, repeat-x, repeat-y */
	--bg-img-attachment: 	  fixed;								/* scroll or fixed */

	/* ----- Layout spacing ----- */
	--space-sm:             8px;								/* small spacing */
	--space-md:             16px;								/* medium spacing */
	--space-lg:             24px;								/* large spacing */
	--max-page-width:       75vw;							/* max width for centering content */

	/* ----------  CRT / Scanline / Overlay Tokens ---------- */
  	/* Scanlines */
	--scanline-height: 		5px;									/* Height of scan lines and spacing */
	--scanline-alpha: 		0.3;									/* Opacity of scan lines */
	--scanline-speed: 		7s;										/* Speed of scan line animation */
	--scanline-colour:
		rgba(
			255,
			16,
			240,
			var(--scanline-alpha)
		);  														/* Color of scan lines (default: neon pink) */

	/* Noise / Grain */
	--crt-noise-opacity: 	0.02;	 								/* overall film grain strength (0 - 0.12) */
	--crt-noise-tile:
		url(
			"https://fluffymotherfox.neocities.org/assets/img/crt-noise.png"
		);

	/* Chroma / Glow */
	--crt-chroma-offset-x:   1.8px;   							/* horizontal separation */
	--crt-chroma-offset-y:   0.8px;   							/* vertical separation */
	--crt-glow-opacity:      0.23;    							/* glow intensity */
	--col-crt-chroma-a:		rgba(180, 10, 89, var(--crt-glow-opacity));
	--col-crt-chroma-b:		rgba(220, 10, 89, var(--crt-glow-opacity));
	--crt-vignette-strength: 0.56;    							/* darker corners */

	/* Accessibility / Reduced Motion */
	--prefers-reduced-motion: no-preference; 					/* respects user system setting */
}

/* ----------  Core reset and layout ---------- */
* { box-sizing: border-box; }
html,body { margin: 0; height: 100%; overflow-x: hidden; }
body {
	font-family: 			var(--font-mono);
	font-size: 				var(--text-sm);
	color: 					  var(--col-phosphor);
	background: 
		var(--col-bg-deep)
		var(--bg-img)
		var(--bg-img-position) / var(--bg-img-size);
	background-attachment:	var(--bg-img-attachment);
	background-repeat: 		var(--bg-img-repeat);
	backdrop-filter:		blur(0px);
	cursor: 				none !important;
}

/* Page container */
.page {
	max-width: 				var(--max-page-width);
	margin: 				  0 auto;
	padding: 				  var(--space-md);
	display: 				  grid;
	grid-template-columns: 	minmax(220px, 280px) 1fr;
	gap:					    var(--space-md);
}

/* responsive collapse */
@media (max-width: 980px) {
	.page { grid-template-columns: 1fr; }
}

/* Navigation sidebar */
.nav {
	position: 				sticky;
	top: 					    var(--space-md);
	max-height: 			calc(100vh - 32px);
	overflow: 				auto;
	align-self: 			start;
}

/* Card component */
.card {
	/*border: 				  2px solid #000;*/
	background: 			var(--col-panel);
	box-shadow: 			0 8px 0 var(--col-shadow), 0 0 0 2px var(--col-border) inset;
	margin-bottom: 		var(--space-md);
}

.card h3 {
	margin: 				  0;
	padding: 				  10px 12px;
	font-family: 			var(--font-mono);
	font-size: 				var(--text-md);
	border-bottom: 		2px solid var(--col-border);
	background: 			rgba(142, 162, 255, 0.1);
	color: 					  var(--col-neon-violet);
}

/* Stack layout */
.stack {
	display: 				flex;
	flex-direction: 		column;
	gap: 					var(--space-md);
}

/* Padding utility */
.pad {
	padding: 				var(--space-md);
}

/* List component */
.list {
	padding: 				8px 10px;
	display: 				flex;
	flex-direction: 		column;
	gap: 					6px;
}

.list a {
	color: 					  var(--col-neon-cyan);
	text-decoration: 	none;
	padding: 				  6px 8px;
	transition: 			all 0.2s ease;
}

.list a:hover {
	background: 			rgba(52, 240, 224, 0.1);
	border-left: 			2px solid var(--col-neon-cyan);
}

/* Badge component */
.badge {
	border:           2px solid var(--col-border);
	background: 			rgba(255, 59, 176, 0.1);
	color: 					  var(--col-neon-pink);
	padding: 				  4px 8px;
	font-family: 			var(--font-mono);
	font-size: 				var(--text-sm);
	display: 				  inline-block;
}

/* Pill component */
.pill {
	border: 				  2px solid var(--col-border);
	background: 			rgba(52, 240, 224, 0.1);
	padding: 				  4px 8px;
	font-family: 			var(--font-mono);
	font-size: 				var(--text-sm);
	color: 				  	var(--col-neon-cyan);
	display: 				  inline-block;
	margin: 				  2px;
}

/* Toolbar */
.toolbar {
	display: 				flex;
	gap: 					8px;
	flex-wrap: 				wrap;
}

/* Search component */
.search {
	display: 				flex;
	gap: 					8px;
}

.search input {
	flex: 					1;
	background: 			rgba(10, 20, 24, 0.8);
	color: 					var(--col-phosphor);
	border: 				2px solid var(--col-border);
	padding: 				8px 10px;
	font-family: 			var(--font-mono);
	width: 					100%;
	box-sizing: 			border-box;
}

.search input:focus {
	outline: 				2px solid var(--col-neon-cyan);
}

/* Marquee component */
.marq {
	overflow: 				hidden;
	position: 				relative;
	white-space:			nowrap;
	border-top: 			2px solid var(--col-border);
	border-bottom: 		2px solid var(--col-border);
	background: 			rgba(255, 59, 176, 0.05);
}

.marq span {
	display: 				  inline-block;
	width:            100%;
	/*padding-left: 	100%;*/
	animation: 				scroll 50s linear infinite;
	padding: 				  6px 10px;
	font-family: 			var(--font-mono);
	font-size: 				var(--text-md);
	color: 					  var(--col-neon-pink);
}

@keyframes scroll {
	from { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}

/* Note text */
.note {
	color: 					  var(--col-neon-violet);
	font-style: 			italic;
	font-size: 				var(--text-sm);
	opacity: 				  0.8;
}

.window {
	background: 			var(--col-panel);
	border:					  2px solid var(--col-border);
	box-shadow:				0 8px 0 var(--col-shadow), 0 0 0 2px var(--col-border) inset;
	position:				  relative;
	overflow: 				hidden;
}

.titlebar {
	display:flex; align-items:  center; gap:8px; padding:8px 10px;
	border-bottom:		2px solid var(--col-border);
	background:				linear-gradient(180deg, rgba(142, 162, 255, 0.08), transparent);
}

.title {
  font-size: var(--text-md);
}

.window-controls {
	display: 				  flex;
	gap: 					    6px;
}

.control {
	width: 					  12px;
	height: 				  12px;
	border: 				  2px solid var(--col-border);
	display: 				  inline-block;
	border-radius: 		50%;
}

.control.close { background: #ff5f5f; }
.control.minimize { background: #ffbf5f; }
.control.maximize { background: #5fff7f; }

.window-content {
	padding: 				var(--space-md);
}

.main-nav {
	display: 				flex;
	flex-direction: column;
	gap: 					  4px;
}

.nav-item {
	padding: 				8px 12px;
	border: 				1px solid transparent;
	color: 					var(--col-phosphor);
	text-decoration:none;
	transition: 		all 0.2s ease;
	font-family: 		var(--font-mono);
	font-size: 			var(--text-sm);
}

.nav-item:hover {
	border-left: 			2px solid var(--col-neon-cyan);
	background: 			rgba(52, 240, 224, 0.1);
	color: 					  var(--col-neon-cyan);
}

h1 {
	font-family: 			var(--font-sans);
	color: 				    var(--col-neon-pink);
	text-shadow: 			0 0 10px var(--col-neon-magenta);
	margin-bottom: 		var(--space-lg);
}

h2 {
	font-family: 			var(--font-mono);
	color: 					  var(--col-neon-cyan);
	font-size: 				var(--text-lg);
	margin: 				  var(--space-md) 0 var(--space-sm);
}

.btn {
  background: 			var(--col-panel);
  border: 					2px solid var(--col-border);
  color: 					  var(--col-phosphor);
  padding: 					var(--space-sm) var(--space-md);
  font-family: 			var(--font-mono);
  font-size: 				var(--text-sm);
  cursor: 					pointer;
  box-shadow: 			0 4px 0 var(--col-shadow);
  transition: 			all 0.1s ease;
  position: 				relative;
  top: 						  0;
}

.btn:hover {
  background: 				var(--col-grid);
  top: 						    1px;
  box-shadow: 				0 3px 0 var(--col-shadow);
}

.btn:active {
  top: 						4px;
  box-shadow: 				0 0 0 var(--col-shadow);
}

.btn-neon {
  background: 				transparent;
  border: 					  2px solid var(--col-neon-cyan);
  box-shadow:
  							0 4px 0 var(--col-shadow), 
    						0 0 10px var(--col-neon-cyan);
  color: 					var(--col-neon-cyan);
}

/* Allow cursor changes on interactive elements */
a, button, .btn, .nav-item {
  pointer-events: auto;
  cursor: none; /* Ensure the pointer cursor is set */
}

.cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
}

.custom-cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
    z-index: 9991;
}

.cursor-dot {
    width: 4px;
    height: 4px;
    background: var(--col-phosphor);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 5px var(--col-neon-cyan),
        0 0 10px var(--col-neon-cyan),
        0 0 15px var(--col-neon-cyan);
}

.cursor-ring {
    width: 16px;
    height: 16px;
    border: 1px solid var(--col-neon-pink);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: cursorGlow 3s infinite;
    box-shadow: 
        inset 0 0 5px var(--col-neon-pink),
        0 0 10px var(--col-neon-pink);
}

/* .cursor-trail {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--col-neon-violet);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    filter: blur(1px);
} */

@keyframes cursorGlow {
    0%, 100% { 
        opacity: 0.8; 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            inset 0 0 5px var(--col-neon-pink),
            0 0 10px var(--col-neon-pink);
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 
            inset 0 0 8px var(--col-neon-pink),
            0 0 15px var(--col-neon-pink),
            0 0 20px var(--col-neon-magenta);
    }
}

.clicking .cursor-ring {
    transform: translate(-50%, -50%) scale(0.8);
    border-color: var(--col-neon-cyan);
}

.hovering .cursor-ring {
    transform: translate(-50%, -50%) scale(1.3);
    border-color: var(--col-neon-cyan);
}

/* ----------  CRT overlay: scanline + grain + chroma (place at document end) ---------- */
.crt-overlay {
	pointer-events: 		none;
	position: 				fixed;
	top:					0;
	left:					0;
	width:					100%;
	height:					100%;
	z-index:				9999 !important;
}

/* SCANLINES: efficient repeating-linear-gradient + animation */
.crt-overlay::before {
  content: 					"";
  position: 				absolute;
  top: 						0;
  left: 					0;
  width: 					100%;
  height: 					100%;
  inset: 					0;
  background-image:
    linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--scanline-height) - 1px),
      var(--scanline-colour) calc(var(--scanline-height) - 1px),
      var(--scanline-colour) var(--scanline-height)
    );
  background-size: 			100% var(--scanline-height);
  opacity:					  var(--scanline-alpha);
  pointer-events: 			none;
}

/* NOISE + VIGNETTE layer (use small tile PNG for best result) */
.crt-overlay::after {
	content: 				"";
	position: 				absolute;
	top: 					0;
	left: 					0;
	width: 					100%;
	height: 				100%;
	background-image:
		radial-gradient(ellipse at center,
			rgba(0,0,0,0) 35%,
			rgba(0,0,0,var(--crt-vignette-strength)) 100%
		), var(--crt-noise-tile);
	background-blend-mode: 	multiply, overlay;
	opacity:				var(--crt-noise-opacity);
	mix-blend-mode: 		overlay;
	pointer-events: 		none;
	filter: 				contrast(1.02);
}

.scanline {
	pointer-events: 		none;
	position: 				fixed;
	top:					0;
	left:					0;
	width:					100%;
	height:					2%;
	z-index:				10000;
}

.scanline::before {
	content: 					"";
	position: 				absolute;
	top: 						0;
	left: 					0;
	width: 					100%;
	height: 					100%;
	inset: 					0;
	background-image:
		linear-gradient(
		0deg,
		transparent,
		transparent calc(var(--scanline-height) - 1px),
		var(--scanline-colour) calc(var(--scanline-height) - 1px),
		var(--scanline-colour) var(--scanline-height)
		);
	background-size: 			100% var(--scanline-height);
	opacity:					var(--scanline-alpha);
	animation: 				scanline var(--scanline-speed) linear infinite;
	pointer-events: 			none;
}

/* CHROMA / GLOW: separate element to avoid re-painting page content */
.crt-chroma {
	position: 				fixed;
	top: 					0;
	left: 					0;
	width: 					100%;
	height: 				100%;
	pointer-events:			none;
	mix-blend-mode: 		screen;
	opacity: 				var(--crt-glow-opacity);
	z-index:				9998;
}

/* Thin red/pink and cyan offsets to emulate chromatic aberration */
.crt-chroma::before,
.crt-chroma::after {
	content:				"";
	position:				absolute;
	top: 					0;
	left: 					0;
	width: 					100%;
	height: 				100%;
	pointer-events:			none;
	background:
		linear-gradient(180deg,
			var(--col-crt-chroma-a) 0%,
			var(--col-crt-chroma-b) 50%,
			transparent 100%
		);
	mix-blend-mode:			screen;
	filter:					blur(0.6px) saturate(1.05);
}

/* pink shift (left/up) */
.crt-chroma::before {
	transform: 				translate3d(calc(-1 * var(--crt-chroma-offset-x)), calc(-0.6 * var(--crt-chroma-offset-y)), 0);
	opacity:				0.75;
}

/* cyan shift (right/down) */
.crt-chroma::after {
	background:
		linear-gradient(180deg,
			rgba(52, 240, 224, 0.06) 0%,
			rgba(52, 240, 224, 0.02) 50%,
			transparent 100%
		);
	transform:				translate3d(var(--crt-chroma-offset-x), calc(0.6 * var(--crt-chroma-offset-y)), 0);
	opacity:				0.7;
}

.scanline, .crt-overlay::before { /* Target your animated elements */
    transform: translateZ(0); /* Triggers GPU layer */
    /* Optional: May help with flickering */
    backface-visibility: hidden;
    perspective: 1000;
}

.crt-overlay.hidden { display: none !important; }

@keyframes scanline {
  0% {transform: translateY(100vh); opacity: calc(2.5 * var(--scanline-alpha));}
  100% {transform: translateY(-100vh); opacity: calc( 2.5 * var(--scanline-alpha));}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.crt-overlay::before,
	.scanline::before {
		animation: none;
	}
}