/* ---------- 					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/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; min-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);
	cursor: 				    none !important;
}

.page {
	max-width: 				    var(--max-page-width);
	min-height:                 100vh;
	margin: 				    auto;
	padding: 				    var(--space-md);
}

.page.norm {
    display:                    grid;
    grid-template-columns:      minmax(220px, 280px) 1fr;
    gap:                        var(--space-md);
}

.page.centered {
    display:                    grid;
    justify-content:            center;
    align-content:              center;
}

/* 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 var(--col-border);
	background: 			    var(--col-panel);
	margin-bottom: 		        var(--space-md);
	height:                     auto;
}

.card-head {
    height:                     auto;
	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);
}

.card-head h3 {
	margin: 				    auto;
}

.card-content {
    width:                      100%;
    padding:                    8px 10px;
}

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

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

/* List component */
.list {
	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%;
	animation: 				    scroll 25s 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);
	max-width:                  var(--max-page-width);
	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;
	margin-left:                auto;
}

.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 {
    display:                    flex;
    flex-direction:             column;
	padding: 				    var(--space-md);
}

.window-content.centered {
    text-align:                 center;
}

.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 rgba(0,0,0,0), 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;
	}
}