/* GLOBAL RESET & BASICS */
:root {
    --neon: #00FFA3;
    --void: #050505;
    --charcoal: #0F0F0F;
}

html.lenis {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}

/* Pasy animacji (Digital Shutters) */
.transition-bar {
    height: 100%;
    flex: 1;
    background-color: var(--void);
    transform: translateY(0%);
    position: relative;
    margin-right: -2px;
}
.transition-bar::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background-color: var(--neon); box-shadow: 0 0 15px var(--neon);
}
.transition-bar::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background-color: var(--neon); box-shadow: 0 0 15px var(--neon); z-index: 10;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
@media (min-width: 768px) { ::-webkit-scrollbar { width: 8px; } }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon); }

/* CURSOR STYLES */
@media (hover: hover) and (pointer: fine) {
    .cursor-dot, .cursor-outline {
        position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
        border-radius: 50%; z-index: 9999999; pointer-events: none;
    }
    .cursor-dot { width: 8px; height: 8px; background-color: var(--neon); }
    .cursor-outline {
        width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.4);
        transition: width 0.2s, height 0.2s, background-color 0.2s;
    }
    body.hovering .cursor-outline {
        width: 60px; height: 60px; background-color: rgba(0, 255, 163, 0.1); border-color: var(--neon);
    }
}
@media (hover: none) {
    .cursor-dot, .cursor-outline { display: none !important; }
}

/* NOISE FILTER */
.noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

/* GLITCH EFFECT */
.glitch-wrapper { 
    position: relative; 
    display: inline-block; 
}
.glitch-wrapper::before, 
.glitch-wrapper::after {
    content: attr(data-text); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: var(--void);
    color: white;
}

.glitch-wrapper::before {
    left: -2px; 
    text-shadow: 2px 0 #00fff9;
    animation: glitch-anim-1 9s infinite linear alternate-reverse;
}

.glitch-wrapper::after {
    left: 2px; 
    text-shadow: -2px 0 #ff00c1;
    animation: glitch-anim-2 10.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0%   { clip: rect(20px, 9999px, 22px, 0); transform: translate(1px, 0); }
    10%  { clip: rect(80px, 9999px, 82px, 0); transform: translate(-1px, 0); }
    20%  { clip: rect(40px, 9999px, 42px, 0); transform: translate(1px, 0); }
    30%  { clip: rect(10px, 9999px, 12px, 0); transform: translate(-1px, 0); }
    40%  { clip: rect(60px, 9999px, 62px, 0); transform: translate(1px, 0); }
    50%  { clip: rect(90px, 9999px, 92px, 0); transform: translate(-1px, 0); }
    60%  { clip: rect(30px, 9999px, 32px, 0); transform: translate(1px, 0); }
    70%  { clip: rect(70px, 9999px, 72px, 0); transform: translate(-1px, 0); }
    80%  { clip: rect(50px, 9999px, 52px, 0); transform: translate(1px, 0); }
    82%  { clip: rect(10px, 9999px, 60px, 0); transform: translate(-4px, 2px) skewX(10deg); }
    84%  { clip: rect(70px, 9999px, 100px, 0); transform: translate(4px, -2px) skewX(-15deg); }
    86%  { clip: rect(20px, 9999px, 40px, 0); transform: translate(-5px, 0) scale(1.02); }
    88%  { clip: rect(80px, 9999px, 90px, 0); transform: translate(3px, 0); }
    90%  { clip: rect(15px, 9999px, 17px, 0); transform: translate(-1px, 0); }
    100% { clip: rect(45px, 9999px, 47px, 0); transform: translate(1px, 0); }
}

@keyframes glitch-anim-2 {
    0%   { clip: rect(50px, 9999px, 52px, 0); transform: translate(-1px, 0); }
    10%  { clip: rect(10px, 9999px, 12px, 0); transform: translate(1px, 0); }
    20%  { clip: rect(80px, 9999px, 82px, 0); transform: translate(-1px, 0); }
    22%  { clip: rect(40px, 9999px, 90px, 0); transform: translate(4px, -1px) skewX(-10deg); }
    24%  { clip: rect(10px, 9999px, 40px, 0); transform: translate(-4px, 2px) skewX(15deg); }
    26%  { clip: rect(70px, 9999px, 80px, 0); transform: translate(5px, 0) scale(1.02); }
    28%  { clip: rect(20px, 9999px, 30px, 0); transform: translate(-3px, 0); }
    30%  { clip: rect(30px, 9999px, 32px, 0); transform: translate(1px, 0); }
    40%  { clip: rect(90px, 9999px, 92px, 0); transform: translate(-1px, 0); }
    50%  { clip: rect(20px, 9999px, 22px, 0); transform: translate(1px, 0); }
    60%  { clip: rect(60px, 9999px, 62px, 0); transform: translate(-1px, 0); }
    70%  { clip: rect(40px, 9999px, 42px, 0); transform: translate(1px, 0); }
    80%  { clip: rect(70px, 9999px, 72px, 0); transform: translate(-1px, 0); }
    90%  { clip: rect(15px, 9999px, 17px, 0); transform: translate(1px, 0); }
    100% { clip: rect(85px, 9999px, 87px, 0); transform: translate(-1px, 0); }
}

/* MARQUEE */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.stroke-text { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); }
.reveal-text { opacity: 0; transform: translateY(20px); }

/* TOASTS & GLASS */
.toast-msg {
    padding: 16px 20px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: bold;
    color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.8); display: flex; align-items: center; gap: 12px;
    animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; background: rgba(15,15,15,0.95); backdrop-filter: blur(8px);
}
.toast-msg.success { border-left: 3px solid var(--neon); color: #fff; }
.toast-msg.success i { color: var(--neon); }
.toast-msg.error { border-left: 3px solid #ff3366; }
.toast-msg.error i { color: #ff3366; }
.toast-msg.fade-out { animation: fadeOutDown 0.4s ease forwards; }

@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }

/* FOCUS UTILS */
:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; }
input:focus-visible, textarea:focus-visible { outline: none; }

/* TIMER PROGRESS BAR & DRAG GUIDE DLA KOŁA NAWIGACJI */
.timer-progress-container {
    width: 100px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 8px auto 0 auto;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dial-node.active .timer-progress-container {
    opacity: 1;
}

.timer-progress-bar {
    height: 100%;
    width: 0%;
    background: #00FFA3;
    box-shadow: 0 0 10px #00FFA3;
}

#drag-guide {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#drag-guide.hidden-guide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events: none;
}

/* ==========================================
   POPRAWKA DLA KOŁA NAWIGACJI (ROTARY MENU)
   ========================================== */

#dial-wheel {
    position: absolute;
    left: 50%;
    bottom: -50vh;
    width: 0; 
    height: 0;
    transform: rotate(calc(var(--wheel-rot) * 1deg));
}

.dial-ring {
    position: absolute;
    left: -75vh; 
    top: -75vh; 
    width: 150vh; 
    height: 150vh;
    border-radius: 50%;
    border-top: 1px solid rgba(0, 255, 163, 0.4);
    box-shadow: 0 -15px 50px rgba(0,255,163,0.08);
    pointer-events: none;
}

.dial-node {
    position: absolute;
    top: 0; 
    left: 0;
    transform: rotate(calc(var(--base-angle) * 1deg));
}

.dial-counter {
    position: absolute;
    top: -79vh; 
    left: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dial-text {
    transform: translateY(0);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 5vw;
    color: rgba(255,255,255,0.15);
    white-space: nowrap;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                font-size 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                color 0.3s, text-shadow 0.3s;
    pointer-events: none;
}

.dial-node.active .dial-text {
    color: #00FFA3;
    font-size: 8.5vw;
    text-shadow: 0 0 30px rgba(0, 255, 163, 0.5);
    transform: translateY(-20vh); 
}

@media (min-width: 768px) {
    .dial-text { font-size: 2vw; }
    .dial-node.active .dial-text { font-size: 4.5vw; transform: translateY(-25vh); }
}
/* ==========================================
   POPRAWIONA ANIMACJA PASKI MARQUEE & STABILIZACJA
   ========================================== */
img, video {
    max-width: 100%;
    height: auto;
}

.glitch-wrapper {
    contain: layout;
}

.marquee-track {
    display: flex !important;
    width: max-content !important;
    animation: marquee 25s linear infinite !important;
    will-change: transform !important;
    contain: layout !important;
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}