/* Fonty */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "SimpleFont";
    src: url("../fonts/SimpleFont.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Bardzo ciemne tło */
body { background-color: #010413; color: #cbd5e1; font-family: "Inter", sans-serif; margin: 0; overflow-x: hidden; }

.font-mono {
    font-family: "JetBrains Mono", monospace;
}

.glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.glow-1 { position: absolute; top: -10%; left: -10%; width: 50%; height: 50%; background: rgba(6, 182, 212, 0.08); filter: blur(120px); border-radius: 50%; }
.glow-2 { position: absolute; bottom: -10%; right: -10%; width: 50%; height: 50%; background: rgba(37, 99, 235, 0.08); filter: blur(120px); border-radius: 50%; }

.sidebar { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.03); }
.glass-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1rem; transition: all 0.4s ease; }
.glass-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(6, 182, 212, 0.2); transform: translateY(-2px); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Animacje wejścia */
.reveal { opacity: 0; transform: translateY(15px); transition: all 0.6s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

.skill-tag { transition: all 0.3s ease; }
.skill-tag:hover { transform: scale(1.05); filter: brightness(1.2); }

/* ----------------------------------------------------------- */
/* ZMIANA: NOWE STYLE DLA ANIMACJI ODBLASKU (SHINE)            */
/* ----------------------------------------------------------- */

/* Kontener maskujący dla zdjęcia (żeby odblask nie wychodził poza koło) */
.shine-container {
    position: relative;
    overflow: hidden; /* To jest kluczowe */
    border-radius: 9999px; /* Zaokrąglenie jak zdjęcie */
    display: inline-block;
}

/* Element odblasku (pseudo-element ::after) */
.shine-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Startuje daleko poza lewą krawędzią */
    width: 100%;
    height: 100%;

    /* Gradient tworzący linię światła */
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.03) 10%, /* Bardzo subtelny start */
            rgba(255, 255, 255, 0.6) 50%,  /* Najjaśniejszy punkt w środku */
            rgba(255, 255, 255, 0.03) 90%,
            rgba(255, 255, 255, 0) 100%
    );

    /* Pochylenie odblasku */
    transform: skewX(-25deg);

    /* Domyślnie brak animacji */
    transition: none;
}






/* Animacja terminal typing */
#boot-text {
    white-space: pre-wrap;
    line-height: 1.3em;
}

/* Fade out boot screen */
#boot-screen.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}



/* ASCII CYBER BANNER */

.ascii-glitch{
    text-align:center;
    
    margin-bottom:80px;
}

.ascii-text{
    display:inline-block;
    text-align:left;

    font-family:'SimpleFont', monospace;
    font-size: clamp(3px, 2vw, 13px);

    line-height:0.8em;
    letter-spacing:-0.08em;


    white-space:pre;
    color:#22d3ee;

    text-shadow:
            0 0 5px rgba(34,211,238,0.6),
            0 0 15px rgba(34,211,238,0.3);

    animation: glitch 2.5s infinite, flicker 5s infinite;

}


@keyframes glitch{

    0%{transform:translate(0)}
    20%{transform:translate(-1px,1px)}
    40%{transform:translate(1px,-1px)}
    60%{transform:translate(-1px,0)}
    80%{transform:translate(1px,1px)}
    100%{transform:translate(0)}

}

@keyframes flicker{

    0%{opacity:1}
    3%{opacity:0.8}
    6%{opacity:1}
    7%{opacity:0.9}
    10%{opacity:1}

}

/* GLITCH JEDNEJ LINII */
/* RGB CYBER GLITCH */

.glitch-line{
    position:relative;
    animation:glitchMove 0.25s infinite;
    display:inline-block;

}

.glitch-line::before,
.glitch-line::after{
    content:attr(data-text);
    position:absolute;
    left:0;
    top:0;
    opacity:0.8;
}

.glitch-line::before{
    color:#ff004c;
    transform:translate(-2px,0);
}

.glitch-line::after{
    color:#00eaff;
    transform:translate(2px,0);
}

@keyframes glitchMove{

    0%{transform:translate(0)}
    25%{transform:translate(-2px,1px)}
    50%{transform:translate(2px,-1px)}
    75%{transform:translate(-1px,0)}
    100%{transform:translate(0)}

}



#terminal-container {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    color: #22d3ee;
    font-family: 'JetBrains Mono', monospace;

    padding: 20px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 1rem;

    max-width: 800px;
    margin: 40px auto 80px auto;

    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#terminal-output {
    white-space: pre-wrap;
    margin-bottom: 10px;
    height: 180px;
    overflow-y: auto;
    font-size: 14px;
}

/* linia input */
.input-line {
    display: flex;
    gap: 10px;
}

/* prompt */
.prompt {
    color: #22d3ee;
    opacity: 0.7;
}

/* input */
#terminal-input {
    background: transparent;
    border: none;
    color: #ffffff;
    outline: none;
    flex: 1;
    font-family: inherit;
    caret-color: #22d3ee;
}

#terminal-output::-webkit-scrollbar {
    width: 6px;
}

#terminal-output::-webkit-scrollbar-thumb {
    background: rgba(34,211,238,0.4);
    border-radius: 10px;
}



/* Efekt Glitchu */
#glitch-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: black;
    z-index: 9999;
    animation: glitch-anim 0.2s infinite;
}

@keyframes glitch-anim {
    0% { background: #000; opacity: 1; }
    50% { background: #111; opacity: 0.8; transform: skewX(5deg); }
    100% { background: #050505; opacity: 1; }
}


/* Klasa uruchamiająca animację (dodawana przez JS/reveal) */
.reveal.active .shine-container::after {
    /* Nazwa animacji, czas, opóźnienie, sposób poruszania */
    animation: shineEffect 1.2s ease-in-out 0.5s;
}

/* Definicja ruchu odblasku */
@keyframes shineEffect {
    0% {
        left: -150%; /* Pozycja startowa (poza lewą) */
    }
    100% {
        left: 150%; /* Pozycja końcowa (poza prawą) */
    }
}
/* ----------------------------------------------------------- */