/* Podstawowe style dla całej strony */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #111827; /* dark-bg */
    color: #f3f4f6; /* light-text */
}

/* Konfiguracja Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Niestandardowe kolory dla Tailwind */
:root {
    --color-primary: #f97316;
    --color-primary-hover: #ea580c;
    --color-dark-bg: #111827;
    --color-light-bg: #1f2937;
    --color-light-text: #f3f4f6;
    --color-medium-text: #9ca3af;
}

/* Style dla kontenera wideo i nakładki */
.video-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2;
}

#youtube-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 100/56.25 = 1.77 -> 16:9 aspect ratio */
    min-height: calc(100vh - 80px); /* Dostosowane do wysokości sekcji hero */
    min-width: 177.77vh; /* 100/56.25 = 1.77 -> 16:9 aspect ratio */
    transform: translate(-50%, -50%);
    pointer-events: none; /* Umożliwia klikanie w elementy pod spodem */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.7); /* Ciemna nakładka w kolorze tła */
    z-index: -1;
}

/* Style dla tła z cząsteczkami */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

/* Style dla animowanego gradientu w tle */
.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(-45deg, #1f2937, #f97316, #111827, #4f46e5);
    background-size: 400% 400%;
    animation: gradient-flow 15s ease infinite;
}

/* Style dla sekcji CTA z tłem paralaksy */
#cta-kalendarz {
    position: relative;
    background: transparent;
    overflow: hidden;
}

.parallax-bg {
    background-image: url('../src/calendar_bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.85);
    z-index: 2;
}

/* Style dla sekcji kontaktowej z tłem paralaksy */
#kontakt {
    position: relative;
    background: transparent;
    overflow: hidden;
}

.parallax-bg-contact {
    background-image: url('../src/contact_bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.parallax-overlay-contact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.75);
    z-index: 2;
}