/*
 * Czystość Theme — Professional Animations
 * Drop into your child theme at /css/czystosc-animations.css
 * Enqueue via functions.php after style.css
 *
 * Contents:
 *   1. Keyframes
 *   2. Scroll-reveal base states
 *   3. Hero animations (page load)
 *   4. Header / nav micro-interactions
 *   5. Buttons
 *   6. Service & kontakt cards
 *   7. Gallery items (realizacje page)
 *   8. PDF thumbnail grid (referencje)
 *   9. Carousel (references front page)
 *  10. Footer & credit bar
 *  11. Page transitions
 *  12. Mobile menu
 *  13. Reduced-motion safety
 */

/* =============================================
   1. KEYFRAMES
   ============================================= */

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

@keyframes czFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes czSlideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes czScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes czLineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes czHeroBgZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

@keyframes czPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(238, 29, 35, 0.35); }
    50%       { box-shadow: 0 0 0 10px rgba(238, 29, 35, 0); }
}

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

/* =============================================
   2. SCROLL-REVEAL BASE STATES
   Toggled via IntersectionObserver in czystosc-animations.js
   ============================================= */

.cz-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.cz-reveal.cz-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children group */
.cz-reveal-group > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cz-reveal-group.cz-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.cz-reveal-group.cz-visible > *:nth-child(2)  { transition-delay: 0.13s; }
.cz-reveal-group.cz-visible > *:nth-child(3)  { transition-delay: 0.21s; }
.cz-reveal-group.cz-visible > *:nth-child(4)  { transition-delay: 0.29s; }
.cz-reveal-group.cz-visible > *:nth-child(5)  { transition-delay: 0.37s; }
.cz-reveal-group.cz-visible > *:nth-child(6)  { transition-delay: 0.45s; }
.cz-reveal-group.cz-visible > *:nth-child(7)  { transition-delay: 0.53s; }

.cz-reveal-group.cz-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Slide variants */
.cz-reveal-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.cz-reveal-left.cz-visible {
    opacity: 1;
    transform: translateX(0);
}

.cz-reveal-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.cz-reveal-right.cz-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =============================================
   3. HERO ANIMATIONS — page load
   ============================================= */

.home-hero,
.page-hero {
    overflow: hidden;
}

/* Subtle background zoom on load */
.home-hero::after,
.page-hero::after {
    content: '';
    position: absolute;
    inset: -6%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: czHeroBgZoom 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Home hero text cascade */
.home-hero .eyebrow {
    animation: czFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.20s both;
}
.home-hero h1 {
    animation: czFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}
.home-hero .hero-description {
    animation: czFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}
.home-hero .hero-actions {
    animation: czFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both;
}

/* Page hero (realizacje, referencje, oferta…) */
.page-hero .page-label {
    animation: czFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.page-hero h1 {
    animation: czFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
.page-hero .hero-subtitle {
    animation: czFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

/* =============================================
   4. HEADER / NAV MICRO-INTERACTIONS
   ============================================= */

.site-header {
    animation: czFadeIn 0.5s ease 0s both;
}

.main-nav a::after {
    transform-origin: left center;
}

.site-logo {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-logo:hover {
    opacity: 0.82;
    transform: scale(0.97);
}

/* =============================================
   5. BUTTONS
   ============================================= */

.btn {
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.18s ease;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover::before {
    transform: scaleX(1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(238, 29, 35, 0.28);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* =============================================
   6. SERVICE & KONTAKT CARDS
   ============================================= */

.oferta-service-item,
.service-card {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease;
}

.oferta-service-item:hover,
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

.oferta-service-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.oferta-service-item:hover .oferta-service-icon {
    transform: scale(1.12);
}

.kontakt-card {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease,
                border-color 0.25s ease;
}
.kontakt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.09);
    border-color: var(--cz-red-soft);
}

.card-icon img {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kontakt-card:hover .card-icon img {
    transform: scale(1.1) rotate(-3deg);
}

.testimonial-card {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

/* =============================================
   7. GALLERY ITEMS — realizacje page
   ============================================= */

/* Each grid item lifts & zooms */
.czystosc-gallery-item {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}
.czystosc-gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* Background image pan on hover */
.czystosc-gallery-bg {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.czystosc-gallery-item:hover .czystosc-gallery-bg {
    transform: scale(1.06);
}

/* Zoom icon */
.czystosc-gallery-zoom {
    transition: opacity 0.28s ease,
                transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0.7);
}
.czystosc-gallery-item:hover .czystosc-gallery-zoom {
    opacity: 1 !important;
    transform: scale(1);
}

/* Realizacje section header stagger on load */
.realizacje-header .section-label {
    animation: czFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
.realizacje-header .section-title {
    animation: czFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

/* Gallery grid: each item fades in with a stagger on page load */
.czystosc-gallery-grid .czystosc-gallery-item {
    animation: czScaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger the first 16 items; beyond that they just appear */
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(1)  { animation-delay: 0.05s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(2)  { animation-delay: 0.10s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(3)  { animation-delay: 0.15s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(4)  { animation-delay: 0.20s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(5)  { animation-delay: 0.25s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(6)  { animation-delay: 0.30s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(7)  { animation-delay: 0.35s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(8)  { animation-delay: 0.40s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(9)  { animation-delay: 0.45s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(10) { animation-delay: 0.50s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(11) { animation-delay: 0.55s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(12) { animation-delay: 0.60s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(13) { animation-delay: 0.65s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(14) { animation-delay: 0.70s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(15) { animation-delay: 0.75s; }
.czystosc-gallery-grid .czystosc-gallery-item:nth-child(16) { animation-delay: 0.80s; }

/* CTA button at the bottom of realizacje */
.realizacje-cta {
    animation: czFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* =============================================
   8. PDF THUMBNAIL GRID — referencje page
   ============================================= */

.pdf-thumb {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease;
}
.pdf-thumb:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.pdf-overlay {
    transition: opacity 0.28s ease;
}
.pdf-thumb:hover .pdf-overlay {
    opacity: 1 !important;
}

/* Year groups stagger in on page load */
.year-group {
    animation: czFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.year-group:nth-child(1) { animation-delay: 0.05s; }
.year-group:nth-child(2) { animation-delay: 0.15s; }
.year-group:nth-child(3) { animation-delay: 0.25s; }
.year-group:nth-child(4) { animation-delay: 0.35s; }
.year-group:nth-child(5) { animation-delay: 0.45s; }
.year-group:nth-child(6) { animation-delay: 0.55s; }
.year-group:nth-child(7) { animation-delay: 0.65s; }

/* =============================================
   9. CAROUSEL — references front page
   ============================================= */

.ref-carousel-card {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease,
                border-color 0.22s ease;
}

/* Controls fade in after hero */
.ref-carousel-wrap {
    animation: czFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.ref-carousel-btn {
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, transform 0.18s ease;
}
.ref-carousel-btn:hover:not(:disabled) {
    transform: scale(1.08);
}

/* =============================================
   10. FOOTER & SITE CREDIT BAR
   ============================================= */

/* Footer columns fade up when scrolled into view */
.footer-columns {
    /* Handled by the JS scroll-reveal observer */
}

/* Footer nav links slide right on hover */
.footer-col a {
    position: relative;
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
}
.footer-col a:hover {
    color: var(--cz-red-dark);
    transform: translateX(4px);
}

/* Credit bar — slides up very subtly on page load, after everything else */
.site-credit-bar {
    animation: czCreditSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

/* Agency name shimmer on hover over the link */
.site-credit-bar-link {
    transition: opacity 0.25s ease;
}

.site-credit-bar-name {
    position: relative;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.site-credit-bar-link:hover .site-credit-bar-name {
    letter-spacing: 0.20em;
}

/* =============================================
   11. PAGE TRANSITIONS
   ============================================= */

body {
    animation: czFadeIn 0.35s ease both;
}

body.cz-leaving {
    animation: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* =============================================
   12. MOBILE MENU
   ============================================= */

/* CSS max-height transition instead of JS display toggle */
.mobile-nav {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.mobile-nav.open {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
}

/* Stagger nav links */
.mobile-nav a {
    transform: translateX(-12px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                color 0.2s ease,
                background 0.2s ease;
}

.mobile-nav.open a:nth-child(1) { transform: translateX(0); opacity: 1; transition-delay: 0.05s; }
.mobile-nav.open a:nth-child(2) { transform: translateX(0); opacity: 1; transition-delay: 0.10s; }
.mobile-nav.open a:nth-child(3) { transform: translateX(0); opacity: 1; transition-delay: 0.15s; }
.mobile-nav.open a:nth-child(4) { transform: translateX(0); opacity: 1; transition-delay: 0.20s; }
.mobile-nav.open a:nth-child(5) { transform: translateX(0); opacity: 1; transition-delay: 0.25s; }
.mobile-nav.open a:nth-child(6) { transform: translateX(0); opacity: 1; transition-delay: 0.30s; }

/* Hamburger → X morph */
.menu-toggle span {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease;
}
.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
   13. REDUCED-MOTION SAFETY
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .cz-reveal,
    .cz-reveal-left,
    .cz-reveal-right,
    .cz-reveal-group > * {
        opacity: 1;
        transform: none;
    }

    .czystosc-gallery-grid .czystosc-gallery-item {
        animation: none;
        opacity: 1;
    }
}