/*========================================================

                    Ayoub Portfolio

                        style.css

========================================================*/

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

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

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

    font-family:"IBM Plex Mono",monospace;

}

/*========================================================
VARIABLES
========================================================*/

:root{

    --background:#000000;

    --panel:#090909;

    --panel2:#111111;

    --border:#ff7a00;

    --border2:#ff9900;

    --text:#ffb347;

    --accent:#ff6a00;

    --accent2:#ffb000;

    --green:#7dff7d;

    --shadow:0 0 10px rgba(255,120,0,.45);

    --radius:8px;

    --transition:.30s;

}

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

body{

    background:#000;

    color:var(--text);

    background-image:

    radial-gradient(circle at top,#111 0%,#000 70%);

    min-height:100vh;

    line-height:1.6;

}

/* animated background */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    radial-gradient(#222 1px,transparent 1px);

    background-size:24px 24px;

    opacity:.08;

    animation:gridMove 20s linear infinite;

    pointer-events:none;

    z-index:-2;

}

/* vignette */

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle,
    transparent 45%,
    rgba(0,0,0,.75) 100%);

    pointer-events:none;

    z-index:999;

}

/*========================================================
CRT
========================================================*/

#scanlines{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:998;

    background:

    repeating-linear-gradient(

        to bottom,

        rgba(255,255,255,.02),

        rgba(255,255,255,.02) 1px,

        transparent 2px,

        transparent 4px

    );

    opacity:.45;

}

#noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:997;

    opacity:.035;

    background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

    animation:noise .20s infinite;

}

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

a{

    color:var(--accent);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:white;

    text-shadow:

    0 0 5px var(--accent),

    0 0 15px var(--accent);

}

/*========================================================
SELECTION
========================================================*/

::selection{

    background:var(--accent);

    color:black;

}

/*========================================================
SCROLLBAR
========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:var(--accent);

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent2);

}

/*========================================================
BOOT SCREEN
========================================================*/

#boot-screen{

    position:fixed;

    inset:0;

    background:black;

    color:var(--accent);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

    font-family:"VT323",monospace;

    padding:40px;

}

#boot-output{

    width:min(850px,95vw);

    white-space:pre-wrap;

    font-size:1.6rem;

    line-height:1.3;

}

#boot-cursor{

    font-size:2rem;

    animation:blink .8s infinite;

}

#boot-enter{

    opacity:0;

    margin-top:30px;

    font-size:1.3rem;

    border:1px solid var(--accent);

    padding:12px 28px;

    transition:.5s;

    cursor:pointer;

}

#boot-enter.show{

    opacity:1;

}

#boot-enter:hover{

    background:var(--accent);

    color:black;

}

.power-off{

    animation:powerOff .8s forwards;

}

/*========================================================
SITE
========================================================*/

#site{

    opacity:0;

    visibility:hidden;

    transition:1s;

}

#site.visible{

    opacity:1;

    visibility:visible;

}

/*========================================================
HERO
========================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    padding:60px 20px;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,
    rgba(255,120,0,.10),
    transparent 65%);

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

}

/* boot text */

.boot-text{

    font-family:"VT323",monospace;

    font-size:1.6rem;

    color:var(--accent);

    letter-spacing:4px;

    margin-bottom:25px;

    animation:flicker 4s infinite;

}

/* Japanese title */

#logo{

    font-family:"VT323",monospace;

    font-size:7rem;

    color:var(--accent);

    text-shadow:

    0 0 10px var(--accent),

    0 0 30px var(--accent);

    cursor:pointer;

    transition:.3s;

    user-select:none;

}

#logo:hover{

    transform:scale(1.05);

}

/* English title */

.hero h2{

    font-family:"VT323",monospace;

    font-size:3rem;

    letter-spacing:10px;

    margin-top:-10px;

    color:white;

}

/* subtitle */

.subtitle{

    margin-top:25px;

    font-size:1rem;

    color:#ffc97c;

    letter-spacing:2px;

}

/* quote */

.quote{

    margin-top:18px;

    color:#999;

    font-style:italic;

}

/*========================================================
BUTTONS
========================================================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

.hero-buttons a{

    padding:12px 28px;

    border:2px solid var(--accent);

    background:rgba(0,0,0,.5);

    color:var(--accent);

    transition:.3s;

    box-shadow:var(--shadow);

}

.hero-buttons a:hover{

    background:var(--accent);

    color:black;

    transform:translateY(-4px);

}

/*========================================================
MAIN
========================================================*/

main{

    width:min(1200px,94vw);

    margin:auto;

    padding-bottom:120px;

}

/*========================================================
PANELS
========================================================*/

.panel{

    background:rgba(10,10,10,.90);

    border:2px solid var(--border);

    border-radius:var(--radius);

    margin:50px 0;

    overflow:hidden;

    box-shadow:

    0 0 20px rgba(255,120,0,.12);

    transition:.4s;

}

.panel:hover{

    box-shadow:

    0 0 25px rgba(255,120,0,.35);

}

/* title */

.panel-title{

    background:#090909;

    border-bottom:2px solid var(--border);

    padding:14px 22px;

    font-family:"VT323",monospace;

    font-size:2rem;

    color:var(--accent);

    letter-spacing:3px;

}

/* content */

.panel-content{

    display:flex;

    gap:40px;

    align-items:center;

    padding:35px;

}

/*========================================================
ABOUT
========================================================*/

.about-image{

    flex-shrink:0;

}

.about-image img{

    width:240px;

    border:2px solid var(--accent);

    image-rendering:pixelated;

    box-shadow:var(--shadow);

}

.about-text{

    flex:1;

}

.about-text p{

    margin-bottom:18px;

    font-size:1rem;

    line-height:1.8;

}

/*========================================================
SYSTEM STATUS
========================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    padding:30px;

}

.stat{

    border:1px solid var(--border);

    padding:20px;

    background:#080808;

    transition:.3s;

}

.stat:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.stat h3{

    font-family:"VT323",monospace;

    color:var(--accent);

    font-size:1.8rem;

    margin-bottom:12px;

}

.online{

    color:#65ff65;

    font-weight:bold;

    text-shadow:

    0 0 8px #65ff65;

}

/*========================================================
PROJECT CARDS
========================================================*/

.cards{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(270px,1fr));

    gap:25px;

    padding:30px;

}

.card{

    background:#080808;

    border:1px solid var(--border);

    padding:25px;

    transition:.35s;

}

.card:hover{

    transform:

    translateY(-8px);

    border-color:white;

    box-shadow:

    0 0 25px rgba(255,140,0,.35);

}

.card h3{

    font-family:"VT323",monospace;

    font-size:2rem;

    margin-bottom:15px;

    color:var(--accent);

}

.card p{

    color:#d4a56b;

}

/*========================================================
GALLERY
========================================================*/

.gallery{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    padding:30px;

}

.gallery img{

    width:100%;

    border:2px solid var(--border);

    transition:.35s;

    image-rendering:pixelated;

}

.gallery img:hover{

    transform:scale(1.05);

    box-shadow:

    0 0 20px var(--accent);

}

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

.terminal{

    background:#040404;

    padding:20px;

    font-family:"VT323",monospace;

    min-height:420px;

    display:flex;

    flex-direction:column;

}

#terminal-output{

    flex:1;

    overflow-y:auto;

    white-space:pre-wrap;

    font-size:1.45rem;

    color:#ffd59b;

    margin-bottom:15px;

}

#terminal-output pre{

    margin-bottom:8px;

    font-family:inherit;

}

.terminal-input{

    display:flex;

    align-items:center;

    gap:10px;

    border-top:1px solid rgba(255,120,0,.25);

    padding-top:15px;

}

.terminal-input span{

    color:var(--accent);

    white-space:nowrap;

}

.terminal-input input{

    flex:1;

    background:transparent;

    border:none;

    outline:none;

    color:white;

    font-family:inherit;

    font-size:1.4rem;

}

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

footer{

    text-align:center;

    padding:60px 20px;

    color:#777;

    border-top:2px solid rgba(255,120,0,.2);

    margin-top:60px;

}

footer p{

    margin:10px 0;

}

.lain{

    color:var(--accent);

    letter-spacing:2px;

}

/*========================================================
WIRED MODE
========================================================*/

body.wired{

    --background:#001100;

    --panel:#021502;

    --panel2:#042204;

    --border:#72ff72;

    --border2:#9eff9e;

    --accent:#72ff72;

    --accent2:#b4ffb4;

    --text:#b8ffb8;

    --shadow:0 0 18px rgba(114,255,114,.45);

}

body.wired{

    background:#001100;

    color:#caffca;

}

body.wired .panel{

    box-shadow:0 0 18px rgba(114,255,114,.25);

}

body.wired #logo{

    color:#72ff72;

    text-shadow:

    0 0 10px #72ff72,

    0 0 25px #72ff72;

}

body.wired .online{

    color:#9dff9d;

}

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

@keyframes blink{

    0%,49%{

        opacity:1;

    }

    50%,100%{

        opacity:0;

    }

}

@keyframes flicker{

    0%{

        opacity:1;

    }

    4%{

        opacity:.8;

    }

    5%{

        opacity:.25;

    }

    6%{

        opacity:1;

    }

    15%{

        opacity:.95;

    }

    16%{

        opacity:.5;

    }

    17%{

        opacity:1;

    }

    100%{

        opacity:1;

    }

}

@keyframes noise{

    from{

        transform:translate(0,0);

    }

    25%{

        transform:translate(-4px,2px);

    }

    50%{

        transform:translate(2px,-2px);

    }

    75%{

        transform:translate(3px,1px);

    }

    to{

        transform:translate(0,0);

    }

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(24px);

    }

}

@keyframes powerOff{

    0%{

        opacity:1;

        transform:scaleY(1);

    }

    60%{

        transform:scaleY(.02);

        filter:brightness(3);

    }

    100%{

        opacity:0;

        transform:scaleY(0);

    }

}

@keyframes glitch{

    0%{

        transform:translateX(0);

        filter:hue-rotate(0deg);

    }

    20%{

        transform:translateX(-2px);

    }

    40%{

        transform:translateX(2px);

    }

    60%{

        transform:translateY(1px);

    }

    80%{

        filter:contrast(1.2);

    }

    100%{

        transform:none;

        filter:none;

    }

}

.glitch{

    animation:glitch .12s infinite;

}

.crt-flash{

    animation:flash .15s;

}

@keyframes flash{

    from{

        filter:brightness(1.3);

    }

    to{

        filter:brightness(1);

    }

}

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

@media (max-width:900px){

.panel-content{

    flex-direction:column;

    text-align:center;

}

.about-image img{

    width:180px;

}

#logo{

    font-size:4.8rem;

}

.hero h2{

    font-size:2rem;

}

.cards{

    grid-template-columns:1fr;

}

.gallery{

    grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:600px){

.hero{

    padding:40px 15px;

}

#logo{

    font-size:3.5rem;

}

.hero h2{

    letter-spacing:4px;

}

.boot-text{

    font-size:0.4rem;

}

.panel-title{

    font-size:1.6rem;

}

.terminal{

    min-height:320px;

}

.gallery{

    grid-template-columns:1fr;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons a{

    width:220px;

    text-align:center;

}

main{

    width:96vw;

}

}

/*========================================================
SMALL DETAILS
========================================================*/

img{

    user-select:none;

}

.panel{

    backdrop-filter:blur(2px);

}

.card,
.stat,
.gallery img{

    will-change:transform;

}

.hero-buttons a,
.card,
.stat,
.gallery img{

    transition:

    transform .3s,

    box-shadow .3s,

    border-color .3s,

    color .3s,

    background .3s;

}

html{

    scrollbar-color:var(--accent) #050505;

}

body{

    transition:

    background .5s,

    color .5s;

}