/*
Theme Name: YakoTako Design
Author: YakoTako
Description: Motyw portfolio z efektami neon i Tailwind CSS.
Version: 2.7
*/

:root {
    --neon-core: #fffbe6;
    --neon-yellow: #ffcc00;
    --neon-orange: #ff5500;
    --neon-glow: #991100;
    
    --logo-spotlight-radius: 150px;
    --logo-spotlight-opacity: 0.8;
    
    --bg-dark: #050505;
    --bg-panel: #111111;
}

/* === BLOKADA SCROLLOWANIA NA BOKI (GLOBALNA) === */
html, body {
    max-width: 100vw; /* Zmienione na viewport width */
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: #e5e5e5;
    cursor: default; 
}

.font-chinese {
    font-family: 'Ma Shan Zheng', cursive;
}

/* === EFEKT LATARKI === */
#spotlight {
    background: radial-gradient(
        circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 200, 0, 0.3),
        rgba(255, 85, 0, 0.15) 30%, 
        transparent 60%
    );
    mix-blend-mode: color-dodge; 
    will-change: background;
    pointer-events: none;
}

/* === ŚWIATŁO NA LOGO === */
.logo-spotlight-overlay {
    background: radial-gradient(
        circle var(--logo-spotlight-radius) at var(--logo-x, 50%) var(--logo-y, 50%), 
        rgba(255, 255, 255, var(--logo-spotlight-opacity)),
        transparent 100%
    );
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    will-change: background;
}

#hero-logo-container:hover .logo-spotlight-overlay {
    opacity: 1;
}

/* === NEON === */
.neon-text {
    color: #fff;
    text-shadow: 
        0 0 2px #fff,
        0 0 5px var(--neon-core),
        0 0 10px var(--neon-yellow),
        0 0 20px var(--neon-orange),
        0 0 40px var(--neon-orange),
        0 0 80px var(--neon-glow);
}

/* FIX: Dodano prefiksy webkit dla mobile */
.neon-svg {
    filter: drop-shadow(0 0 1px #fff)
            drop-shadow(0 0 3px var(--neon-yellow))
            drop-shadow(0 0 8px var(--neon-orange))
            drop-shadow(0 0 25px var(--neon-orange))
            drop-shadow(0 0 45px var(--neon-glow));
    -webkit-filter: drop-shadow(0 0 1px #fff)
            drop-shadow(0 0 3px var(--neon-yellow))
            drop-shadow(0 0 8px var(--neon-orange))
            drop-shadow(0 0 25px var(--neon-orange));
}

.neon-text-subtle {
    color: var(--neon-yellow);
    text-shadow: 0 0 10px var(--neon-orange);
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: 0 0 2px #fff, 0 0 5px var(--neon-core), 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-orange), 0 0 40px var(--neon-orange), 0 0 80px var(--neon-glow); }
    20%, 24%, 55% { opacity: 0.4; text-shadow: none; }
}
.animate-flicker { animation: flicker 4s infinite alternate; }

@keyframes flicker-svg {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px var(--neon-yellow)) drop-shadow(0 0 8px var(--neon-orange)) drop-shadow(0 0 25px var(--neon-orange)) drop-shadow(0 0 45px var(--neon-glow)); }
    20%, 24%, 55% { opacity: 0.1; filter: drop-shadow(0 0 2px var(--neon-glow)); }
}

/* FIX: Wymuszona akceleracja sprzętowa (GPU) dla animacji na mobile */
.animate-flicker-svg { 
    animation: flicker-svg 4s infinite alternate !important; 
    will-change: opacity, filter; 
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
}

@keyframes blob-float-1 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-float-2 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 30px) scale(1.2); }
    66% { transform: translate(20px, -20px) scale(0.8); }
    100% { transform: translate(0, 0) scale(1); }
}
.animate-float-1 { animation: blob-float-1 20s infinite ease-in-out; }
.animate-float-2 { animation: blob-float-2 25s infinite ease-in-out reverse; }

/* === TŁO SIATKI (POPRAWIONE DLA MOBILE) === */
.bg-grid-pattern {
    background-image: linear-gradient(to right, #1a1a1a 1px, transparent 1px),
    linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    opacity: 0.4;
}

@media (max-width: 768px) {
    .bg-grid-pattern {
        opacity: 0.5; 
        background-size: 30px 30px; 
    }
}

.vertical-text { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.5em; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--neon-glow); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-orange); }

.glass-panel {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 136, 0, 0.15);
}

.logo-glow { filter: drop-shadow(0 0 8px rgba(255, 85, 0, 0.6)); }
.play-pulse { box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.7); animation: pulse-orange 2s infinite; }
@keyframes pulse-orange { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 85, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 85, 0, 0); } }

/* === MARQUEE ANIMATION === */
@keyframes marquee { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-50%, 0, 0); } 
}

/* FIX: translate3d wymusza GPU na mobile, naprawiając zacinanie się paska */
.animate-marquee { 
    display: flex;
    width: max-content; 
    will-change: transform;
    animation: marquee 20s linear infinite;
    transform: translate3d(0, 0, 0);
}