@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Quicksand:wght@300..700&display=swap');

:root {
    --primary: #fca311;
    --secondary: #8338ec;
    --accent: #00f5d4;
    --dark: #1d1a39;
    --cream: #ebe4df; /* Dopasowane do tła logo */
    --white: #ffffff;
}

/* Główne style dokumentu */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* offset for sticky header */
}

body {
    font-family: 'Quicksand', sans-serif;
    background-color: var(--cream);
    color: var(--dark);
    overflow-x: hidden;
}

.font-abril {
    font-family: 'Abril Fatface', serif;
}

/* Animacje i efekty wizualne (EFEKT WOW) */

/* Pływające cząsteczki chemiczne / atomy w tle */
@keyframes floatAround {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-25px) rotate(180deg) scale(1.05);
    }
    100% {
        transform: translateY(0px) rotate(360deg) scale(1);
    }
}

.animate-float-slow {
    animation: floatAround 18s infinite ease-in-out;
}

.animate-float-medium {
    animation: floatAround 12s infinite ease-in-out;
}

.animate-float-fast {
    animation: floatAround 8s infinite ease-in-out;
}

/* Unoszące się bąbelki wygenerowane przez JS */
@keyframes floatUp {
    0% {
        transform: translateY(100px) scale(0.3);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-105vh) scale(1.1);
        opacity: 0;
    }
}

.bubble-particle {
    position: absolute;
    bottom: -60px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(0, 245, 212, 0.35));
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8), 0 0 12px rgba(0, 245, 212, 0.2);
    animation: floatUp 10s infinite linear;
    z-index: 1;
}

/* Pulsowanie beki / kolby chemicznej */
@keyframes beakerPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.3)) drop-shadow(0 4px 12px rgba(29, 26, 57, 0.08));
        transform: translateY(0) rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(0, 245, 212, 0.75)) drop-shadow(0 12px 24px rgba(29, 26, 57, 0.15));
        transform: translateY(-8px) rotate(1.5deg);
    }
}

.animate-beaker-glow {
    animation: beakerPulse 6s infinite ease-in-out;
}

/* Tło szklane (Glassmorphism) dopasowane do tła logo (#ebe4df) */
.glass-nav {
    background: rgba(235, 228, 223, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 3px solid rgba(252, 163, 17, 0.18);
}

.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.7);
}

/* Zaawansowane przejścia i hover na kartach */
.transition-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.transition-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 30px rgba(131, 56, 236, 0.08);
    border-color: rgba(131, 56, 236, 0.25);
}

/* Stylizacja pól formularza */
.form-input {
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(131, 56, 236, 0.15);
    outline: none;
}

/* Układ burgera */
.burger-line {
    transition: all 0.3s ease;
}

.burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.burger.toggle .line2 {
    opacity: 0;
}

.burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Upiększenie listy wyliczeniowej */
.custom-list-item::before {
    content: "🧪";
    margin-right: 8px;
    display: inline-block;
    animation: floatAround 3s infinite ease-in-out;
}