/* Plik stylów /css/style.css */

/* Custom Font Icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Custom Block Styles */
.formula-block {
    background-color: rgba(254, 226, 3, 0.1);
    border-left: 4px solid #FEE203;
}

/* Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Glassmorphism Navigation */
.glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Ukrywanie darmowego znaku wodnego Elfsight */
a[href*="elfsight"], 
a[href*="elfsig.ht"],
[class*="eapps-link"],
[class*="BadgeContainer"],
[class*="Badge__BadgeContainer"],
[class*="Badge__Container"],
[class*="Badge__BadgeComponent"],
div[style*="z-index: 9999999"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Custom animation for map pin */
@keyframes bounce-in-place {
    0%, 100% {
        transform: scaleY(1) scaleX(1);
    }
    50% {
        transform: scaleY(1.1) scaleX(0.95);
    }
}
.animate-bounce-in-place {
    animation: bounce-in-place 1.5s infinite ease-in-out;
    transform-origin: bottom center;
}

/* Subtle bounce that limits vertical height to perfectly mask background elements */
@keyframes bounce-subtle {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    50% {
        transform: translateY(-12px); /* Snappy 12px bounce */
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
}
.animate-subtle-bounce {
    animation: bounce-subtle 1.2s infinite;
}

/* Animacje wejścia dla Hero Section (staggered entrance) */
@keyframes hero-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-fade-in-scale {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fade-in-up {
    opacity: 0;
    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-scale {
    opacity: 0;
    animation: hero-fade-in-scale 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
    animation-delay: 100ms;
}
.delay-200 {
    animation-delay: 200ms;
}
.delay-300 {
    animation-delay: 300ms;
}
.delay-400 {
    animation-delay: 400ms;
}