/* =======================================================
   RESET
======================================================= */

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

/* =======================================================
   ROOT
======================================================= */

:root{
    --bg:#050200;
    --bg-soft:#090400;
    --amber:#ffb52e;
    --amber-soft:#c98200;
    --amber-dim:#7b4a00;
    --amber-fade:#3d2400;
    --text:#f7c76a;
    --text-soft:#d7a14b;
    --border:#5a3400;
    --shadow:
        0 0 1px rgba(255,181,46,.95),
        0 0 4px rgba(255,181,46,.25),
        0 0 10px rgba(255,140,0,.08);

    --font:
        "Courier New",
        monospace;
}

/* =======================================================
   HTML / BODY
======================================================= */

html{
	-webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    background:
		radial-gradient(
			ellipse at center,
			#140900 0%,
			#050200 75%
		);

    color:var(--text);
    font-family:var(--font);
    overflow-x:hidden;
    position:relative;
    line-height:1.7;
    /*text-shadow:0 0 1px rgba(255,176,0,.35);*/
    /*animation:flicker .28s infinite;*/
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
		radial-gradient(
			ellipse at center,
			rgba(255,180,60,.045) 0%,
			rgba(0,0,0,0) 70%
		);

    z-index:1;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
		radial-gradient(
			ellipse at center,
			rgba(0,0,0,0) 55%,
			rgba(0,0,0,.42) 100%
		);

    z-index:2;
}

/* =======================================================
   CRT OVERLAY / CRT NOISE
======================================================= */

.crt,
.noise {
    pointer-events: none;
    position: fixed;
    inset: 0;
}

.crt{
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
		repeating-linear-gradient(
			to bottom,
			rgba(255,170,0,.028),
			rgba(255,170,0,.028) 1px,
			transparent 1px,
			transparent 4px
		);

    opacity:.45;
    z-index:999;
	text-shadow:0 0 1px rgba(255,176,0,.35);
	animation:flicker .28s infinite;
}

.noise{
    opacity:.025;
    background-image:
		radial-gradient(
			rgba(255,210,120,.22) 1px,
			transparent 1px
		);

    background-size:3px 3px;
    z-index:998;
}

.crt::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 1px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode:overlay;
    animation:scanJitter .12s infinite;
}

@keyframes scanJitter{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(.4px); }
    50%{ transform:translateX(-.3px); }
    75%{ transform:translateX(.2px); }
    100%{ transform:translateX(0); }
}

/* =======================================================
   TOPBAR
======================================================= */

.topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 30px;
    background:rgba(8,4,0,.92);
    border-bottom:1px solid rgba(255,181,46,.18);
    z-index:1000;
    backdrop-filter:blur(1px);
	overflow:hidden;
}

.topbar::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
		linear-gradient(
			to bottom,
			transparent 0%,
			rgba(255,170,60,.04) 48%,
			rgba(255,170,60,.08) 50%,
			rgba(255,170,60,.04) 52%,
			transparent 100%
		);

    animation:scanRoll 6s linear infinite;
    opacity:.45;
}

@keyframes scanRoll{
    0%{ transform:translateY(-100%); }
    100%{ transform:translateY(100%); }
}

/* =======================================================
   CRT ANALOG LOGO
======================================================= */

.logo{
    position:relative;
    display:inline-block;
    color:var(--amber);
    letter-spacing:2px;
    font-weight:bold;
    white-space:nowrap;
    opacity:.96;
    transform-origin:center;
    text-shadow:
		0 0 1px rgba(255,200,120,.95),
		0 0 4px rgba(255,140,0,.18);
}

/* =======================================================
   PHOSPHOR TRAIL
======================================================= */

.crt-logo::before{
    content:attr(data-text);
    position:absolute;
    inset:0;
    left:1px;
    color:rgba(255,180,80,.18);
    pointer-events:none;
    filter:blur(.5px);
    opacity:.55;
    mix-blend-mode:screen;
    animation:phosphorTrail .08s infinite;
}

/* =======================================================
   ANALOG GLITCH LAYER
======================================================= */

.crt-logo::after{
    content:attr(data-text);
    position:absolute;
    inset:0;
    pointer-events:none;
    color:rgba(255,210,140,.12);
    opacity:0;
    transform-origin:left center;
    animation:analogGlitch 8s infinite;
}

/* =======================================================
   MAIN CRT MOTION
======================================================= */

.crt-logo{
    animation:
		crtBreath 5s infinite,
		crtMicroShake .15s infinite;
}

/* =======================================================
   PHOSPHOR TRAIL
======================================================= */

@keyframes phosphorTrail{
    0%{
        transform:translateX(0);
        opacity:.18;
    }

    50%{
        transform:translateX(.6px);
        opacity:.1;
    }

    100%{
        transform:translateX(.3px);
        opacity:.16;
    }
}

/* =======================================================
   ANALOG CRT GLITCH
======================================================= */

@keyframes analogGlitch{
    0%{
        opacity:0;
        transform:none;
        filter:none;
    }

    92%{
        opacity:0;
        transform:none;
    }

    93%{
        opacity:.35;
        transform:
			skewX(8deg)
			scaleX(1.02)
			translateX(-2px);

        filter:blur(.6px);
    }

    93.5%{
        opacity:.15;
        transform:
			skewX(-6deg)
			scaleX(.98)
			translateX(2px);
    }

    94%{
        opacity:.4;
        transform:
			skewX(12deg)
			scaleX(1.04)
			translateX(-3px);
    }

    94.5%{
        opacity:.08;
        transform:
			skewX(-3deg)
			scaleX(.99)
			translateX(1px);
    }

    95%{
        opacity:0;
        transform:none;
        filter:none;
    }

    100%{ opacity:0; }
}

/* =======================================================
   CRT BRIGHTNESS DRIFT
======================================================= */

@keyframes crtBreath{
    0%{ opacity:.95;

        text-shadow:
			0 0 1px rgba(255,190,90,.85),
			0 0 3px rgba(255,140,0,.12);
    }

    50%{ opacity:1;

        text-shadow:
			0 0 2px rgba(255,210,120,.95),
			0 0 5px rgba(255,170,0,.18);
    }

    100%{ opacity:.96; }
}

/* =======================================================
   MICRO ELECTRICAL SHAKE
======================================================= */

@keyframes crtMicroShake{
    0%{ transform:translate(0,0); }
    25%{ transform:translate(.2px,0); }
    50%{ transform:translate(-.2px,.1px); }
    75%{ transform:translate(.1px,-.1px); }
    100%{ transform:translate(0,0); }
}

/* =======================================================
   MENU
======================================================= */

.menu{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.menu a{
    color:var(--text);
    text-decoration:none;
    transition:.2s;
    position:relative;
}

.menu a::before{
    content:">";
    margin-right:6px;
    opacity:.45;
}

.menu a:hover{
    color:var(--amber);
    text-shadow:var(--shadow);
}

/* =======================================================
   SEARCH
======================================================= */

.search-box input{
    width:170px;
    background:#120700;
    border:1px solid var(--amber-soft);
    color:var(--amber);
    padding:10px;
    outline:none;
    font-family:var(--font);
}

.search-box input:focus{
    box-shadow:var(--shadow);
}

.search-box input::placeholder{
    color:#c98928;
}

.search-box input,
.contact-form input,
.contact-form textarea{
    caret-color:var(--amber);
}
/* =======================================================
   HERO
======================================================= */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:140px 20px 80px;
    text-align:center;
}

.hero-box{
    max-width:900px;
}

.ascii-logo{
    color:var(--amber);
    margin-bottom:25px;
    text-shadow:var(--shadow);
    /*overflow-x:auto;*/
	font-size:clamp(.28rem, .9vw, .8rem);
    white-space:pre;
    line-height:1.2;
}

.boot{
    color:var(--amber);
    margin-bottom:20px;
    animation:blink 1s infinite;
    letter-spacing:1px;
}

.hero h1{
    font-size:4rem;
    margin-bottom:20px;
    color:var(--amber);
    text-shadow:var(--shadow);
}

.hero-text{
    max-width:700px;
    margin:auto auto 35px;
}

/* =======================================================
   BUTTON
======================================================= */

.btn{
    display:inline-block;
    padding:14px 28px;
    border:1px solid rgba(255,181,46,.28);
    color:var(--amber);
    text-decoration:none;
    transition:.2s;
    background:#120700;
}

.btn:hover{
    background:rgba(255,181,46,.08);
    color:var(--amber);
    box-shadow:0 0 10px rgba(255,160,0,.08);
}

/* =======================================================
   SECTION
======================================================= */

.section{
    max-width:1200px;
    margin:auto;
    padding:120px 20px 80px;
}

.section h2{
    margin-bottom:35px;
    color:var(--amber);
    text-shadow:var(--shadow);
}

/* =======================================================
   GRID
======================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

/* =======================================================
   CARD
======================================================= */

.card{
    background:rgba(20,10,0,.45);
    border:1px solid rgba(255,181,46,.12);
    padding:25px;
    transition:.2s;
}

.card:hover{
    transform:translateY(-2px);
    box-shadow:0 0 10px rgba(255,160,0,.06);
}

.card h3{
    color:var(--amber);
    margin-bottom:15px;
}

/* =======================================================
   LINKS
======================================================= */

.links-list{
    list-style:none;
}

.links-list li{
    margin-bottom:15px;
}

.links-list a{
    color:var(--text);
    text-decoration:none;
}

.links-list a:hover{
    color:var(--amber);
    text-shadow:var(--shadow);
}

/* =======================================================
   LINKS PAGE
======================================================= */

.links-page{
    list-style:none;
    display:flex;
    justify-content:flex-end;
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid rgba(255,176,0,.18);
}

.links-page li{
    opacity:.85;
}

.links-page a{
    color:var(--amber);
    text-decoration:none;
    transition:.2s;
}

.links-page a:hover{
    text-shadow:var(--shadow);
    opacity:1;
}

.links-page li::before{
    /*content:"[LINK]";*/
    margin-right:10px;
    color:var(--amber-dark);
    opacity:.9;
}

/* =======================================================
   TERMINAL WINDOW
======================================================= */

.terminal-window{
    border:1px solid var(--amber-soft);
    background:#120700;
    overflow:hidden;
	position:relative;
    box-shadow:
        0 0 3px rgba(255,176,0,.4),
        0 0 12px rgba(255,176,0,.18),
        inset 0 0 18px rgba(255,140,0,.05);

    animation:
		crtWarp 7s infinite linear,
		crtNoise 120ms infinite;
}

.terminal-window::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
		linear-gradient(
			to bottom,
			transparent 0%,
			rgba(255,180,0,.06) 50%,
			transparent 100%
		);

    animation:scanlineMove 8s linear infinite;
    mix-blend-mode:screen;
}

@keyframes scanlineMove{
    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(100%);
    }
}
.terminal-header{
    padding:14px 20px;
    border-bottom:1px solid rgba(255,181,46,.12);
    background:#160b00;
    color:var(--amber);
    opacity:.9;
}

.terminal-body{
    padding:25px;
    line-height:1.8;
    font-size:.95rem;
    letter-spacing:.4px;
}

.prompt{
    color:var(--amber);
    text-shadow:0 0 3px rgba(255,181,46,.35);
}

.terminal-line{
    color:var(--text-soft);
}

.terminal-body p{
    word-break:break-word;
}

/* =======================================================
   TERMINAL EMULATOR
======================================================= */

#terminal-screen{
    min-height:500px;
    cursor:text;
}

.terminal-output{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.terminal-input-line{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}

#terminal-input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:var(--amber);
    font-family:var(--font);
    font-size:1rem;
    caret-color:var(--amber);
    min-width:120px;
    text-shadow:0 0 2px rgba(255,181,46,.2);
}

.terminal-response{
    color:var(--text-soft);
    white-space:pre-wrap;
    word-break:break-word;
}

.terminal-error{
    color:#ff7a4f;
}

.terminal-link{
    color:var(--amber);
    text-decoration:none;
}

.terminal-link:hover{
    text-shadow:var(--shadow);
}

.command-line{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.command-text{
    color:var(--text);
}

/* =======================================================
   CRT TERMINAL CURSOR
======================================================= */

#terminal-input{
    animation:terminalFlicker .12s infinite;
}

@keyframes terminalFlicker{
    0%{ opacity:1; }
    50%{ opacity:.96; }
    100%{ opacity:1; }
}

/* =======================================================
   MATRIX MODE
======================================================= */

.matrix-mode{
    filter:
		hue-rotate(90deg)
		brightness(1.1);
}

/* =======================================================
   TERMINAL ASCII
======================================================= */

pre{
    overflow-x:auto;
    overflow-y:hidden;
    color:var(--amber);
    line-height:1.4;
}

/* =======================================================
   TERMINAL RESPONSE
======================================================= */

.terminal-response{
    overflow-wrap:anywhere;
}

.terminal-response,
pre,
.ascii-logo {
    white-space: pre-wrap;
    font-family: monospace;
}

@keyframes crtWarp{
    0%{ transform:translateX(0); }
    1%{ transform:translateX(-1px); }
    2%{ transform:translateX(1px); }
    3%{ transform:translateX(0); }
    89%{ transform:none; }

    90%{ transform:
        skewX(.5deg)
        scaleY(1.002);
    }
    91%{ transform:
        skewX(-.7deg)
        translateX(-2px);
    }

    92%{ transform:none; }
    100%{  transform:none; }
}

@keyframes crtNoise{
    0%{ filter:brightness(1); }
    50%{ filter:brightness(1.02); }
    51%{ filter:brightness(.98); }
    100%{ filter:brightness(1); }
}

/* =======================================================
   CONTACT FORM
======================================================= */

.contact-form{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:25px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.contact-form label{
    color:var(--amber);
}

.contact-form input,
.contact-form textarea{
    background:#120800;
    border:1px solid rgba(255,181,46,.16);
    color:var(--amber);
    padding:14px;
    outline:none;
    font-family:var(--font);
    transition:.2s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:rgba(255,181,46,.4);
    box-shadow:0 0 5px rgba(255,160,0,.08);
}

.contact-form textarea{
    min-height:180px;
    resize:vertical;
}

.contact-form button{
    width:250px;
    padding:14px;
    background:#120700;
    border:1px solid var(--amber);
    color:var(--amber);
    cursor:pointer;
    font-family:var(--font);
    transition:.2s;
}

.contact-form button:hover{
    background:var(--amber);
    color:#000;
    box-shadow:var(--shadow);
}

/* =======================================================
   CURSOR
======================================================= */

.cursor{
    display:inline-block;
    width:9px;
    height:17px;
    background:var(--amber);
    margin-left:5px;
    animation:blink 1s step-end infinite;
    opacity:.8;
}

/* =======================================================
   FOOTER
======================================================= */

.footer{
    text-align:center;
    padding:50px 20px;
    border-top:1px solid var(--amber-soft);
    margin-top:80px;
}

/* =======================================================
   ANIMATIONS
======================================================= */

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

@keyframes flicker{
    0%{ opacity:.985; }
    50%{ opacity:1; }
    100%{ opacity:.992; }
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media(max-width:900px){
    .topbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero h1{
        font-size:2.7rem;
    }

    .menu{
        gap:12px;
    }

    .search-box{
        width:100%;
    }

    .search-box input{
        width:100%;
    }
}

@media(max-width:600px){
    .hero h1{
        font-size:2rem;
    }

    .ascii-logo{
        font-size:.55rem;
    }

    .terminal-body{
        padding:18px;
    }

    .contact-form button{
        width:100%;
    }

    .section{
        padding:100px 15px 70px;
    }
}