/* TAG: MODIFIED - Teljes Cyberpunk Kurzor Overhaul */

:root {
    --color-bg: #050508;
    --color-surface: #0a0a10;
    --color-cyan: #06b6d4;
    --color-purple: #a855f7;
    --color-pink: #ec4899;
    --color-yellow: #facc15;
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

body {
    background-color: var(--color-bg);
    color: #cbd5e1;
    font-family: var(--font-body);
    overflow-x: hidden;
    /* TAG: MODIFIED - Alapból Windows kurzor, amíg be nem tölt a JS */
    cursor: auto; 

    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ */
    user-select: none;         /* Standard */
}
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* === CRT SCREEN EFFECT === */
.crt-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 2px, 3px 100%;
    opacity: 0.4;
}
.scanline {
    width: 100%;
    height: 100px;
    z-index: 9999;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(6, 182, 212, 0.1) 50%, rgba(0,0,0,0) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 10s linear infinite;
    pointer-events: none;
}
@keyframes scanline {
    0% { bottom: 100%; }
    100% { bottom: -100px; }
}

/* BOOT SZÖVEG */
#boot-log p {
    margin: 2px 0;
    font-family: 'Share Tech Mono', monospace;
}

/* SYSTEM ONLINE ANIMATION - A weboldal "megjelenése" */
.system-online {
    animation: system-boot-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes system-boot-up {
    0% {
        opacity: 0;
        transform: scale(0.98) translateY(20px);
        filter: blur(5px) grayscale(100%);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.01); /* Pici túlhúzás (bounce) */
        filter: blur(0px) grayscale(50%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0) grayscale(0%);
    }
}

/* Ha vége a bootnak, a boot screen eltűnik */
.boot-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

/* === HÁTTÉR === */
.cyber-grid-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -2;
    opacity: 0.2;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

#interactive-background { position: fixed; top: 0; left: 0; z-index: -1; }

.vignette {
    position: fixed; inset: 0; z-index: 48; pointer-events: none;
    background: radial-gradient(circle, transparent 50%, #000000 100%);
}

/* === TAG: MODIFIED - ÚJ CYBERPUNK KURZOR === */
#cursor {
    position: fixed; 
    top: 0; left: 0; 
    width: 12px; height: 12px;
    background-color: var(--color-cyan);
    transform: translate(-50%, -50%) rotate(45deg); /* Rombusz alak */
    pointer-events: none; 
    z-index: 2147483647; 
    mix-blend-mode: normal;
    box-shadow: 0 0 10px var(--color-cyan), 0 0 20px var(--color-cyan); /* Neon glow */
    transition: transform 0.1s, background-color 0.2s, width 0.2s, height 0.2s;
    opacity: 0; /* JS kapcsolja be */
}

/* Kis célkereszt vonalak a kurzor közepén */
#cursor::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    background: #000;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

#cursor-follower {
    position: fixed; 
    top: 0; left: 0; 
    width: 50px; height: 50px;
    border: 1px dashed var(--color-cyan); /* Szaggatott körvonal */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; 
    z-index: 2147483646; 
    opacity: 0; /* JS kapcsolja be */
    transition: transform 0.1s ease-out, border-color 0.2s, width 0.2s, height 0.2s, background-color 0.2s;
    animation: rotate-hud 10s linear infinite; /* Lassú forgás */
    box-shadow: 0 0 5px rgba(6, 182, 212, 0.2);
}

/* Extra tech gyűrű a follower körül */
#cursor-follower::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 1px solid transparent;
    border-top: 1px solid var(--color-purple);
    border-bottom: 1px solid var(--color-purple);
    border-radius: 50%;
    animation: rotate-hud-reverse 5s linear infinite;
    opacity: 0.5;
}

@keyframes rotate-hud {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotate-hud-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Amikor a saját kurzor aktív (JS teszi rá ezt a class-t a body-ra) */
body.custom-cursor-active {
    cursor: none; /* Ilyenkor tüntetjük el a Windows egeret */
}

/* === INTERAKCIÓK (HOVER) === */
body.hovering #cursor {
    background-color: var(--color-pink);
    box-shadow: 0 0 15px var(--color-pink);
    transform: translate(-50%, -50%) rotate(45deg) scale(0.8); /* Kisebb lesz */
}

body.hovering #cursor-follower {
    width: 60px; height: 60px;
    border-color: var(--color-pink);
    border-style: solid; /* Folyamatos vonal hoverkor */
    background-color: rgba(236, 72, 153, 0.05);
    animation: none; /* Megáll a forgás, hogy fókuszáljon */
    transform: translate(-50%, -50%) rotate(0deg); /* Reset rotation */
}

body.hovering #cursor-follower::before {
    border-color: var(--color-cyan); /* Színcsere a gyűrűn */
}

/* === KATTINTÁS (CLICKING) === */
body.clicking #cursor {
    transform: translate(-50%, -50%) rotate(225deg) scale(1.5); /* Nagyobb és pörög egyet */
    transition: transform 0.1s;
}

body.clicking #cursor-follower {
    width: 30px; height: 30px; /* Összeugrik (Recoil) */
    border-color: var(--color-yellow);
    background-color: rgba(250, 204, 21, 0.2);
    transition: width 0.1s, height 0.1s;
}

/* === TIPOGRÁFIA === */
.font-orbitron { font-family: var(--font-display); }
.font-rajdhani { font-family: var(--font-body); }
.font-share { font-family: var(--font-mono); }

.glitch-text, .glitch-text-big { position: relative; color: white; display: inline-block; }
.glitch-text-big { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -2px; }

.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--color-bg); opacity: 0.8; display: none;
}
.glitch-text:hover::before, .glitch-text:hover::after { display: block; }

.glitch-text:hover::before {
    left: 2px; text-shadow: -2px 0 var(--color-pink);
    clip-path: inset(0 0 0 0);
    animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
}
.glitch-text:hover::after {
    left: -2px; text-shadow: -2px 0 var(--color-cyan);
    clip-path: inset(0 0 0 0);
    animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
}

.glitch-text-big::before, .glitch-text-big::after { display: block; }
.glitch-text-big::before {
    left: 2px; text-shadow: -2px 0 var(--color-pink);
    clip-path: inset(0 0 0 0);
    animation: glitch-anim-1 3s infinite linear alternate-reverse;
}
.glitch-text-big::after {
    left: -2px; text-shadow: -2px 0 var(--color-cyan);
    clip-path: inset(0 0 0 0);
    animation: glitch-anim-2 4s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 { 0% { clip-path: inset(20% 0 80% 0); } 100% { clip-path: inset(30% 0 30% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(10% 0 60% 0); } 100% { clip-path: inset(5% 0 80% 0); } }

/* === UI ELEMEK === */
.clip-corner-sm { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.clip-corner-lg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.clip-header { clip-path: polygon(0 0, 100% 0, 100% 85%, 98% 100%, 2% 100%, 0 85%); }
.clip-badge { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* Buttons */
.cyber-btn {
    position: relative; padding: 15px 40px;
    font-family: var(--font-display); font-weight: bold; letter-spacing: 2px; text-transform: uppercase;
    transition: all 0.2s;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    overflow: hidden; cursor: pointer;
}
.cyber-btn.primary {
    background: var(--color-cyan); color: black; border: none;
    box-shadow: 0 0 15px rgba(6,182,212,0.3);
}
.cyber-btn.primary:hover {
    background: white; box-shadow: 0 0 25px var(--color-cyan);
}
.cyber-btn.secondary {
    background: transparent; color: white; border: 1px solid rgba(255,255,255,0.2);
}
.cyber-btn.secondary:hover {
    border-color: var(--color-purple); color: var(--color-purple);
    box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.4);
}
.glitch-effect {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
    transform: skewX(-25deg); transition: 0.5s;
}
.cyber-btn:hover .glitch-effect { left: 200%; }

.cyber-btn-mini {
    padding: 5px 15px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: bold;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

/* Contact Buttons */
.contact-btn {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem; background: rgba(0,0,0,0.6);
    border: 1px solid #334155;
    transition: all 0.3s ease;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.contact-btn:hover { transform: translateX(5px); }
.contact-btn .icon-box { padding: 0.5rem; background: #000; border-radius: 4px; border: 1px solid #334155; transition: border-color 0.3s; }

/* Contact Colors */
.contact-btn.tiktok:hover { border-color: #ff0050; background: rgba(255, 0, 80, 0.1); }
.contact-btn.tiktok:hover .icon-box { border-color: #ff0050; color: #ff0050; }
.contact-btn.youtube:hover { border-color: #ff0000; background: rgba(255, 0, 0, 0.1); }
.contact-btn.youtube:hover .icon-box { border-color: #ff0000; color: #ff0000; }
.contact-btn.twitch:hover { border-color: #9146ff; background: rgba(145, 70, 255, 0.1); }
.contact-btn.twitch:hover .icon-box { border-color: #9146ff; color: #9146ff; }
.contact-btn.instagram:hover { border-color: #facc15; background: rgba(250, 204, 21, 0.1); }
.contact-btn.instagram:hover .icon-box { border-color: #facc15; color: #facc15; }
.contact-btn.facebook:hover { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.contact-btn.facebook:hover .icon-box { border-color: #3b82f6; color: #3b82f6; }
.contact-btn.email:hover { border-color: var(--color-cyan); background: rgba(6, 182, 212, 0.1); }
.contact-btn.email:hover .icon-box { border-color: var(--color-cyan); color: var(--color-cyan); }

/* === KÁRTYÁK === */
.cyber-card {
    background: #0f1016; 
    border: 1px solid #1e293b;
    position: relative; overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    will-change: transform; 
}
.cyber-card:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 10px 30px -10px rgba(6,182,212,0.3);
    transform: translateY(-5px);
}
.card-image-wrapper { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: #000; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.cyber-card:hover .card-img { transform: scale(1.1); filter: contrast(1.1); }
.card-content { padding: 1.5rem; position: relative; z-index: 10; background: #0f1016; }

/* Dekor elemek */
.corner-bracket {
    position: absolute; width: 10px; height: 10px;
    border: 2px solid var(--color-cyan); opacity: 0.7;
}
.corner-bracket.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner-bracket.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.corner-bracket.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.corner-bracket.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Stat Barok & Inputok */
.stat-bar-bg { width: 100%; height: 8px; background: #1e293b; position: relative; clip-path: skewX(-20deg); }
.stat-bar-fill { height: 100%; position: relative; }
.stat-bar-fill.cyan { background: var(--color-cyan); box-shadow: 0 0 5px var(--color-cyan); }
.stat-bar-fill.purple { background: var(--color-purple); box-shadow: 0 0 5px var(--color-purple); }
.stat-bar-fill.pink { background: var(--color-pink); box-shadow: 0 0 5px var(--color-pink); }
.stat-bar-fill.yellow { background: var(--color-yellow); box-shadow: 0 0 5px var(--color-yellow); }
.stripes { background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.8) 5px, rgba(0,0,0,0.8) 10px); }

.cyber-input { width: 100%; background: rgba(255,255,255,0.02); border: none; padding: 12px; color: var(--color-cyan); font-family: var(--font-mono); font-size: 1rem; border-left: 2px solid #334155; transition: 0.3s; }
.cyber-input:focus { outline: none; border-left-color: var(--color-cyan); background: rgba(6,182,212,0.05); }
.input-label { font-family: var(--font-mono); font-size: 0.75rem; color: #64748b; margin-bottom: 5px; display: block; }
.input-line { height: 1px; width: 0; background: var(--color-cyan); transition: 0.3s; }
.input-group:focus-within .input-line { width: 100%; box-shadow: 0 0 5px var(--color-cyan); }

@keyframes signal-loss {
    0% {
        opacity: 1;
        transform: scale(1);
        clip-path: inset(0 0 0 0);
        filter: hue-rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translate(-5px, 2px) skew(10deg);
        clip-path: inset(10% 0 40% 0);
        filter: hue-rotate(90deg) contrast(1.5);
    }
    30% {
        opacity: 0.8;
        transform: translate(5px, -2px) skew(-20deg) scaleX(1.2);
        clip-path: inset(40% 0 10% 0);
        filter: hue-rotate(180deg) invert(1);
    }
    50% {
        opacity: 0.5;
        transform: scaleY(0.1) scaleX(1.5); /* Kilapul */
        filter: blur(5px);
    }
    100% {
        opacity: 0;
        transform: scale(0);
        filter: blur(10px);
    }
}

/* Megjelenés (Signal Restore) - "Felépül" a jel */
@keyframes signal-restore {
    0% {
        opacity: 0;
        transform: scale(1.1) skew(20deg);
        filter: blur(10px) grayscale(100%);
        clip-path: inset(50% 0 50% 0); /* Vékony csíkból indul */
    }
    30% {
        opacity: 0.5;
        transform: skew(-10deg);
        clip-path: inset(10% 0 10% 0);
    }
    60% {
        opacity: 0.8;
        transform: translateX(-5px);
        filter: hue-rotate(45deg); /* Pici színhiba */
        clip-path: inset(0 0 0 0);
    }
    80% {
        transform: translateX(2px);
        filter: none;
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: inset(0 0 0 0);
    }
}


/* === 2. A KERET (HEADER) LOGIKÁJA === */

#main-header {
    /* ALAP (NYITOTT) ÁLLAPOT */
    transform: translateY(0);
    opacity: 1;

    /* TAG: FIXED [2026-01-05 V2] - A MEGOLDÁS: */
    /* Nem 'none'-t használunk, hanem 'inset'-et, de a 3. érték (bottom) */
    /* negatív, így lefelé "kilóg" a vágás, és látszik a menü! */
    /* Így megmarad a matek az animációhoz (inset-ből inset-be). */
    clip-path: inset(0 0 -100vh 0); 
    
    /* NYITÁS: Azonnal indul a keret nyitása */
    transition: 
        clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s,
        filter 0.3s ease 0s;
    will-change: clip-path;
}

#main-header.scrolled-down {
    /* ZÁRT ÁLLAPOT */
    clip-path: inset(0 50% 0 50%); /* Összecsukva */
    pointer-events: none;
    
    /* ZÁRÁS: Késleltetjük a keretet (0.3s), amíg a glitch lefut */
    transition: 
        clip-path 0.4s cubic-bezier(0.85, 0, 0.15, 1) 0.3s;
}

/* === 3. A TARTALOM (TEXT & LOGO) - ITT A FIX! === */

#main-header .header-content {
    /* Fontos: Alapból ne legyen animáció, csak ha triggereljük */
    will-change: opacity, transform;
}

/* KINYITÁS (Scroll UP) */
#main-header:not(.scrolled-down) .header-content {
    /* FIX: 'both' fill-mode! 
       Ez miatt a késleltetés (0.3s) alatt LÁTHATATLAN lesz (a 0% keyframe szerint),
       nem pedig látható alapállapotban. */
    animation: signal-restore 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* BEZÁRÁS (Scroll DOWN) */
#main-header.scrolled-down .header-content {
    /* Azonnal indul a glitch, steps(5) a darabosabb hatásért */
    animation: signal-loss 0.3s steps(8) forwards;
}


/* === 4. ENERGIA CSÍK (LINE) === */

#main-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--color-cyan);
    box-shadow: 0 0 20px var(--color-cyan), 0 0 40px white;
    transform: translateX(-50%);
    z-index: 100;
    transition: width 0.2s ease 0s;
}

#main-header.scrolled-down::after {
    width: 150px;
    /* Csak miután minden bezárult (0.3s glitch + 0.3s keret = 0.6s kb) */
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
}

/* Typing Loop */
.typing-loop { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--color-cyan); animation: typing 3s steps(30, end) infinite; width: 0; }
@keyframes typing { 0% { width: 0 } 50% { width: 100% } 90% { width: 100% } 100% { width: 0 } }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050508; }
::-webkit-scrollbar-thumb { background: #334155; border: 1px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--color-cyan); }

@media (hover: none) and (pointer: coarse) {
    #cursor, #cursor-follower { display: none; }
    body { cursor: auto; }
}

/* === OFFLINE SCREEN STYLES === */
.offline-placeholder {
    width: 100%; height: 100%; background-color: #000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative; overflow: hidden;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #1a0505 2px, #1a0505 4px);
    border: 1px solid #334155;
}
.offline-placeholder::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, #000 100%); z-index: 2;
}
.offline-icon {
    font-size: 4rem; color: #ef4444; margin-bottom: 1rem; opacity: 0.8;
    animation: pulse-red 2s infinite; z-index: 5;
}
@keyframes pulse-red {
    0% { opacity: 0.5; text-shadow: 0 0 10px #ef4444; }
    50% { opacity: 1; text-shadow: 0 0 20px #ef4444, 0 0 40px #ff0000; }
    100% { opacity: 0.5; text-shadow: 0 0 10px #ef4444; }
}
.offline-text {
    font-family: 'Orbitron', sans-serif; color: #ef4444; font-size: 2rem; font-weight: 900;
    letter-spacing: 0.2em; position: relative; z-index: 5; text-shadow: 2px 2px 0px rgba(255,0,0,0.2);
}
.offline-sub {
    font-family: 'Share Tech Mono', monospace; color: #7f1d1d; margin-top: 0.5rem; font-size: 1rem;
    z-index: 5; animation: blink 1s infinite;
}

.cyber-btn-icon {
    background: transparent;
    border: 1px solid rgba(51, 65, 85, 0.5);
    color: var(--color-cyan);
    padding: 8px; /* Legyen kiterjedése a gombnak! */
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 60; /* Legyen mind felett */
}

.cyber-btn-icon:hover {
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
    border-color: var(--color-cyan);
}