/* Premium Animations - Scroll Reveal & Transitions */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delay Utilities */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Micro-interactions – zdvih dlaždice: rovnaký pre galériu, služby, kontakty aj cenník */
.hover-lift,
.pricing-item-v2 {
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform var(--pxl-lift-time) var(--pxl-lift-ease),
        box-shadow var(--pxl-lift-time) var(--pxl-lift-ease),
        border-color 0.3s ease;
}

.hover-lift:hover,
.pricing-item-v2:hover,
.portfolio-grid .portfolio-item-v2:hover {
    transform: translateY(var(--pxl-lift-y));
    border-color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    box-shadow: var(--pxl-lift-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .hover-lift:hover,
    .pricing-item-v2:hover {
        transform: none;
    }
}

/* Specific Effects */
.italic {
    font-style: italic;
    font-family: serif; /* Modern contrast */
    font-weight: 400;
}

/* Link Underline Animation */
.nav-link {
    position: relative;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* Spinner Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ai-spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Prvá obrazovka (hero, hlavička podstránky): rovnaký nábeh ako .reveal, ale čisto v CSS
   a od prvého vykreslenia. Začína na opacity 0.01, nie 0, takže prehliadač nadpis hneď
   počíta ako najväčší prvok (LCP) a nečaká na JavaScript na konci stránky. */
@keyframes pxl-enter {
    from {
        opacity: 0.01;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pxl-enter {
    animation: pxl-enter 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pxl-enter.delay-1 { animation-delay: 0.1s; }
.pxl-enter.delay-2 { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    .pxl-enter {
        animation: none;
    }
}