/* ===================================================================
   VANOWARNA — CRT Radar-Green Portfolio Terminal
   =================================================================== */

:root {
    --bg: #030806;
    --grid-c: rgba(51,255,51,.06);
    --ink: #c8f0c2;
    --muted: #5a8a56;
    --accent: #33ff33;
    --accent-dim: #1a8c1a;
    --accent-bright: #88ffaa;
    --terminal-bg: rgba(4,12,6,.92);
    --terminal-border: rgba(51,255,51,.22);
    --shadow: 0 24px 80px rgba(0,0,0,.6);
    --phosphor: 0 0 6px rgba(51,255,51,.45), 0 0 30px rgba(51,255,51,.12);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
    margin:0;height:100%;overflow:hidden;
    font-family:"JetBrains Mono","Courier New",monospace;
    color:var(--ink);
    background:var(--bg);
}

::selection{background:rgba(51,255,51,.25);color:#fff}

/* ===== Terminal links ===== */
.terminal-link{
    color:var(--accent);text-decoration:none;
    border-bottom:1px dashed rgba(51,255,51,.35);
    transition:border-color .2s,text-shadow .2s;
    cursor:pointer;
}
.terminal-link:hover{
    border-bottom-color:var(--accent);
    text-shadow:0 0 8px rgba(51,255,51,.5);
}

/* ===== Particle & grain canvases ===== */
#particles-bg{
    position:fixed;inset:0;z-index:0;
    pointer-events:none;
    width:100vw;height:100vh;
}
#film-grain{
    position:fixed;inset:0;z-index:9997;
    pointer-events:none;
    width:100vw;height:100vh;
    opacity:.45;
    mix-blend-mode:screen;
}

/* ===== Cursor-following glow ===== */
.cursor-glow{
    position:fixed;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(51,255,51,.14),transparent 70%);
    pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);
    transition:left .15s ease-out,top .15s ease-out;
    will-change:left,top;
    filter:blur(2px);
    mix-blend-mode:screen;
}

/* ===== Backdrop layers ===== */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.glow{
    position:absolute;width:600px;height:600px;
    background:radial-gradient(circle,rgba(51,255,51,.28),transparent 70%);
    top:-180px;left:-180px;filter:blur(30px);
    animation:pulse 6s ease-in-out infinite alternate;
}

.grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(var(--grid-c) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid-c) 1px,transparent 1px);
    background-size:44px 44px;
}

.scanlines{
    position:absolute;inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.15) 1px,rgba(0,0,0,.15) 2px);
    animation:scanMove 8s linear infinite;
}

.noise{
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    background-size:200px 200px;
    opacity:.6;
    animation:noiseShift .15s steps(3) infinite;
}

.orbit{
    position:absolute;right:-220px;bottom:-220px;
    width:500px;height:500px;
    border:1px dashed rgba(51,255,51,.18);border-radius:50%;
    animation:spin 26s linear infinite;
}
.orbit-2{
    width:340px;height:340px;right:-120px;bottom:-120px;
    animation-duration:18s;animation-direction:reverse;
    border-style:dotted;
}

.vignette{
    position:absolute;inset:0;
    background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* ===== Layout ===== */
.layout{
    position:relative;z-index:1;
    max-width:1020px;margin:0 auto;
    padding:clamp(16px,2.5vw,32px) 20px clamp(32px,4vw,56px);
    display:grid;gap:16px;
    height:100vh;
    grid-template-rows:auto 1fr;
    overflow:hidden;
}

/* ===== Hero ===== */
.hero{text-align:center;display:grid;gap:8px;justify-items:center}

.eyebrow{
    text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;
    color:var(--muted);margin:0;
}

/* Eyebrow glitch (smaller, subtler) */
.glitch-sm{
    position:relative;
}
.glitch-sm::before,.glitch-sm::after{
    content:attr(data-text);
    position:absolute;left:0;top:0;width:100%;height:100%;
    overflow:hidden;pointer-events:none;opacity:0;
}
.glitch-sm::before{
    color:var(--muted);text-shadow:1px 0 #ff0040;
    animation:glitch-sm-1 2.5s infinite linear alternate-reverse;
}
.glitch-sm::after{
    color:var(--muted);text-shadow:-1px 0 #0ff;
    animation:glitch-sm-2 2s infinite linear alternate-reverse;
}

/* Glitch for main subtitle */
.subtitle-main.glitch-sm::before{
    color:var(--accent-bright);text-shadow:1px 0 #ff0040;
}
.subtitle-main.glitch-sm::after{
    color:var(--accent-bright);text-shadow:-1px 0 #0ff;
}

/* Glitch heading */
.glitch{
    font-family:"JetBrains Mono",monospace;
    font-size:clamp(2.8rem,8vw,5.4rem);font-weight:700;
    margin:0;color:var(--accent);
    text-shadow:var(--phosphor);
    position:relative;
    letter-spacing:.12em;
}
.glitch::before,.glitch::after{
    content:attr(data-text);
    position:absolute;left:0;top:0;width:100%;height:100%;
    overflow:hidden;
    color:var(--accent);
    pointer-events:none;
    opacity:0;
}
.glitch::before{
    text-shadow:2px 0 #ff0040;
    animation:glitch-1 2s infinite linear alternate-reverse;
}
.glitch::after{
    text-shadow:-2px 0 #0ff;
    animation:glitch-2 1.5s infinite linear alternate-reverse;
}

.subtitle{
    margin:0;letter-spacing:.04em;
}

.subtitle-main{
    color:var(--accent-bright);font-size:clamp(.9rem,2.2vw,1.1rem);
    font-weight:300;
    text-shadow:0 0 10px rgba(51,255,51,.5),0 0 25px rgba(51,255,51,.25);
    margin-bottom:-4px;
}

.subtitle-sub{
    color:var(--muted);font-size:clamp(.75rem,1.8vw,.92rem);
    text-shadow:0 0 6px rgba(51,255,51,.25),0 0 15px rgba(51,255,51,.08);
    margin-top:0;
}

/* ===== Terminal ===== */
.terminal{
    position:relative;
    border-radius:14px;
    background:var(--terminal-bg);
    border:1px solid var(--terminal-border);
    box-shadow:
        0 8px 40px rgba(0,0,0,.4),
        0 0 60px rgba(51,255,51,.06),
        0 0 120px rgba(51,255,51,.04),
        0 0 240px rgba(51,255,51,.025),
        0 0 500px rgba(51,255,51,.015),
        inset 0 1px 0 rgba(51,255,51,.06);
    overflow:hidden;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex;flex-direction:column;
    min-height:0;
}
/* Gradient glow behind terminal */
.terminal::before{
    content:'';
    position:absolute;
    inset:-80px;
    z-index:-1;
    border-radius:60px;
    background:radial-gradient(ellipse at 50% 45%,rgba(51,255,51,.07) 0%,rgba(51,255,51,.03) 35%,rgba(51,255,51,.01) 55%,transparent 75%);
    pointer-events:none;
    filter:blur(50px);
}

.terminal-chrome{
    display:flex;align-items:center;gap:14px;
    padding:12px 16px;
    background:rgba(51,255,51,.025);
    border-bottom:1px solid rgba(51,255,51,.08);
}

.dots{display:flex;gap:7px}
.dots span{width:11px;height:11px;border-radius:50%}
.dots span:nth-child(1){background:#ff5f57}
.dots span:nth-child(2){background:#ffbd2e}
.dots span:nth-child(3){background:#28c940}

.terminal-title{
    flex:1;font-size:.78rem;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.badge{
    font-size:.68rem;padding:3px 10px;border-radius:999px;
    background:rgba(51,255,51,.1);color:var(--accent);
    border:1px solid rgba(51,255,51,.3);letter-spacing:.08em;
    text-shadow:0 0 6px rgba(51,255,51,.5);
    flex-shrink:0;
    display:flex;align-items:center;gap:6px;
    animation:livePulse 2s ease-in-out infinite;
}
.badge-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 6px var(--accent),0 0 12px var(--accent);
    animation:dotBlink 1.4s ease-in-out infinite;
}

.terminal-body{
    padding:18px 16px 20px;
    font-size:clamp(.78rem,1.8vw,.9rem);
    color:var(--ink);
    flex:1;
    overflow-y:auto;
    display:flex;flex-direction:column;
    scrollbar-width:thin;
    scrollbar-color:rgba(51,255,51,.2) transparent;
}
.terminal-body::-webkit-scrollbar{width:6px}
.terminal-body::-webkit-scrollbar-track{background:transparent}
.terminal-body::-webkit-scrollbar-thumb{background:rgba(51,255,51,.2);border-radius:3px}

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

/* Lines */
.line{
    opacity:0;animation:fadeIn .3s ease forwards;
    line-height:1.6;white-space:pre-wrap;word-break:break-word;
}
.line.command{color:var(--accent);text-shadow:0 0 6px rgba(51,255,51,.25)}
.line.muted{color:#3f5a3d}
.line.heading{color:var(--accent);font-weight:700;text-shadow:0 0 8px rgba(51,255,51,.2)}
.line.sub{color:var(--accent-bright)}
.line.dim{color:#4a6848}
.line.ascii{color:var(--accent);text-shadow:var(--phosphor);font-size:inherit;line-height:1.15}

/* Input */
.input-line{
    display:flex;align-items:center;gap:8px;
    flex-shrink:0;
    padding-top:6px;
}

.prompt{
    color:var(--accent-bright);white-space:nowrap;
    font-size:inherit;flex-shrink:0;
}

.mobile-cursor{
    display:none;
}

.input{
    flex:1;min-width:0;
    background:transparent;border:none;
    color:var(--ink);
    font-family:"JetBrains Mono",monospace;font-size:inherit;
    outline:none;caret-color:var(--accent);
    caret-shape:block;
}
.input::placeholder{color:rgba(51,255,51,.2);font-style:italic}

/* Footer chips */
.terminal-footer{
    padding:12px 16px 14px;
    display:flex;gap:8px;flex-wrap:wrap;
    font-size:.74rem;
    border-top:1px solid rgba(51,255,51,.08);
    -webkit-overflow-scrolling:touch;
}

.chip{
    padding:5px 12px;border-radius:999px;
    border:1px solid rgba(51,255,51,.18);
    color:var(--accent-bright);
    background:rgba(51,255,51,.04);
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .1s;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
}
.chip:hover,.chip:active{
    background:rgba(51,255,51,.14);
    border-color:rgba(51,255,51,.45);
    transform:translateY(-1px);
}
.chip--danger{color:#ff6b6b;border-color:rgba(255,107,107,.25)}
.chip--danger:hover{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.4)}

/* ===== Animations ===== */
@keyframes fadeIn{
    from{opacity:0;transform:translateY(3px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{from{opacity:.7}to{opacity:1}}

@keyframes scanMove{
    0%{background-position:0 0}
    100%{background-position:0 200px}
}

@keyframes noiseShift{
    0%{transform:translate(0,0)}
    33%{transform:translate(-2px,1px)}
    66%{transform:translate(1px,-1px)}
    100%{transform:translate(0,0)}
}

@keyframes glitch-1{
    0%,80%{opacity:0;clip-path:none}
    82%{opacity:.8;clip-path:inset(20% 0 60% 0)}
    84%{opacity:0}
    86%{opacity:.6;clip-path:inset(55% 0 10% 0)}
    88%{opacity:0}
    90%{opacity:.7;clip-path:inset(5% 0 80% 0)}
    92%{opacity:.9;clip-path:inset(70% 0 5% 0)}
    94%{opacity:0}
    96%{opacity:.5;clip-path:inset(35% 0 45% 0)}
    100%{opacity:0}
}
@keyframes glitch-2{
    0%,78%{opacity:0;clip-path:none}
    80%{opacity:.7;clip-path:inset(65% 0 5% 0)}
    82%{opacity:0}
    84%{opacity:.5;clip-path:inset(10% 0 70% 0)}
    86%{opacity:0}
    88%{opacity:.8;clip-path:inset(40% 0 30% 0)}
    90%{opacity:0}
    93%{opacity:.6;clip-path:inset(15% 0 60% 0)}
    95%{opacity:.7;clip-path:inset(80% 0 2% 0)}
    100%{opacity:0}
}
@keyframes glitch-sm-1{
    0%,84%{opacity:0;clip-path:none}
    86%{opacity:.6;clip-path:inset(10% 0 60% 0)}
    88%{opacity:0}
    92%{opacity:.5;clip-path:inset(50% 0 20% 0)}
    94%{opacity:0}
    97%{opacity:.4;clip-path:inset(5% 0 80% 0)}
    100%{opacity:0}
}
@keyframes glitch-sm-2{
    0%,82%{opacity:0;clip-path:none}
    84%{opacity:.5;clip-path:inset(60% 0 10% 0)}
    86%{opacity:0}
    90%{opacity:.4;clip-path:inset(20% 0 50% 0)}
    93%{opacity:0}
    96%{opacity:.6;clip-path:inset(40% 0 35% 0)}
    100%{opacity:0}
}

/* LIVE badge pulse */
@keyframes livePulse{
    0%,100%{opacity:.7;filter:brightness(.85)}
    50%{opacity:1;filter:brightness(1.3)}
}
@keyframes dotBlink{
    0%,100%{opacity:.5;box-shadow:0 0 4px var(--accent)}
    50%{opacity:1;box-shadow:0 0 8px var(--accent),0 0 16px var(--accent)}
}

/* Page-wide glitch overlay (outside terminal) */
.page-glitch{
    position:fixed;inset:0;z-index:9998;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(
        transparent 0%,
        rgba(51,255,51,.03) 2%,
        transparent 3%,
        transparent 97%,
        rgba(51,255,51,.03) 98%,
        transparent 100%
    );
    mix-blend-mode:screen;
}
.page-glitch.active{
    animation:pageGlitch .15s steps(2) forwards;
}
@keyframes pageGlitch{
    0%{opacity:1;transform:translate(0,0) scaleY(1)}
    20%{opacity:1;transform:translate(-3px,1px) scaleY(1.003)}
    40%{opacity:1;transform:translate(2px,-1px) scaleY(.997)}
    60%{opacity:1;transform:translate(-1px,2px) scaleY(1.002)}
    80%{opacity:1;transform:translate(3px,0) scaleY(.998)}
    100%{opacity:0;transform:translate(0,0) scaleY(1)}
}

/* CRT flicker */
@keyframes crtFlicker{
    0%{opacity:1}
    2%{opacity:.97}
    4%{opacity:1}
    19%{opacity:1}
    20%{opacity:.98}
    22%{opacity:1}
    60%{opacity:1}
    61%{opacity:.96}
    62%{opacity:1}
}
body{animation:crtFlicker 4s infinite}

/* ===== Responsive ===== */
@media(max-width:600px){
    .layout{padding:12px 12px 80px;gap:10px}
    .terminal-body{padding:14px 12px 16px}
    .terminal-chrome{padding:10px 12px}
    .terminal-footer{padding:10px 12px 12px;gap:6px;overflow-x:auto;flex-wrap:nowrap}
    .chip{flex-shrink:0;padding:6px 14px;font-size:.72rem}
    .glitch{letter-spacing:.06em}
    .cursor-glow{display:none}

    /* Hide text input, show blinking block cursor */
    .input{display:none}
    .mobile-cursor{
        display:inline-block;
        width:.55em;height:1.1em;
        background:var(--accent);
        vertical-align:text-bottom;
        animation:blink 1s step-end infinite;
    }

    /* Compact boot fits in small screens */
    .line.ascii{font-size:.7rem;line-height:1.2;letter-spacing:-.02em}
}

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

@media(hover:none){
    .cursor-glow{display:none}
}