/* Анімації для кнопок */
.hero-button, 
.cta-button,
button.hero-button:not(.floating-contact-btn):not(.floating-top-btn), 
a.hero-button,
input[type="submit"].hero-button,
input[type="button"].hero-button {
    display: inline-block !important;
    padding: 10px 20px !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    color: #fff !important;
    position: relative !important;
    z-index: 100 !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(33, 150, 83, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    background: linear-gradient(45deg, #219653, #2c3e50) !important; /* Зелений до графітового */
    min-width: 160px !important;
}

/* Анімація переливання для кнопок */
.hero-button::before, 
.cta-button::before,
button.hero-button:not(.floating-contact-btn):not(.floating-top-btn)::before, 
a.hero-button::before,
input[type="submit"].hero-button::before,
input[type="button"].hero-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    ) !important;
    animation: shimmer 3s infinite linear !important;
    z-index: 101 !important;
}

/* Анімація блиску */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Ефект наведення */
.hero-button:hover, 
.cta-button:hover,
button.hero-button:not(.floating-contact-btn):not(.floating-top-btn):hover, 
a.hero-button:hover,
input[type="submit"].hero-button:hover,
input[type="button"].hero-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(33, 150, 83, 0.4) !important;
    background: linear-gradient(45deg, #2c3e50, #219653) !important; /* Інверсія градієнту при наведенні */
    z-index: 2 !important;
}

/* Прискорена анімація при наведенні */
.hero-button:hover::before, 
.cta-button:hover::before,
button.hero-button:not(.floating-contact-btn):not(.floating-top-btn):hover::before, 
a.hero-button:hover::before,
input[type="submit"].hero-button:hover::before,
input[type="button"].hero-button:hover::before {
    animation: shimmer 2s infinite linear !important;
}

/* Адаптивні стилі */
@media (max-width: 768px) {
    .hero-button, 
    .cta-button,
    button.hero-button:not(.floating-contact-btn):not(.floating-top-btn), 
    a.hero-button,
    input[type="submit"].hero-button,
    input[type="button"].hero-button {
        font-size: 0.95rem !important;
        padding: 8px 16px !important;
        min-width: unset !important;
    }
}

@media (max-width: 480px) {
    .hero-button, 
    .cta-button,
    button.hero-button:not(.floating-contact-btn):not(.floating-top-btn), 
    a.hero-button,
    input[type="submit"].hero-button,
    input[type="button"].hero-button {
        font-size: 0.9rem !important;
        padding: 8px 14px !important;
    }
}

/* Анімації для hero секцій */
.news-hero,
.contacts-hero,
.services-hero,
.news-detail-hero,
.projects-hero,
.products-hero,
.pavement-tiles-hero,
.materials-hero {
    background: linear-gradient(135deg, #219653 0%, #2c3e50 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Анімація зміни градієнту */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Анімація для заголовків */
.news-hero h1,
.contacts-hero h1,
.services-hero h1,
.news-detail-hero h1,
.projects-hero h1,
.products-hero h1,
.pavement-tiles-hero h1,
.materials-hero h1 {
    animation: titleGlow 3s ease-in-out infinite alternate;
}

/* Анімація світіння заголовків */
@keyframes titleGlow {
    0% {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(33, 150, 83, 0.3);
    }
    100% {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 30px rgba(33, 150, 83, 0.6), 0 0 40px rgba(33, 150, 83, 0.4);
    }
}

/* Анімація для іконок в hero секціях */
.news-hero i,
.contacts-hero i,
.services-hero i,
.news-detail-hero i,
.projects-hero i,
.products-hero i,
.pavement-tiles-hero i,
.materials-hero i {
    animation: iconBounce 2s ease-in-out infinite;
}

/* Анімація підстрибування іконок */
@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Анімації появи при завантаженні сторінки */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анімації для різних елементів при завантаженні */
.news-hero,
.contacts-hero,
.services-hero,
.news-detail-hero,
.projects-hero,
.products-hero,
.pavement-tiles-hero,
.materials-hero {
    animation: fadeInUp 1s ease-out, gradientShift 8s ease infinite 1s;
}

.news-hero h1,
.contacts-hero h1,
.services-hero h1,
.news-detail-hero h1,
.projects-hero h1,
.products-hero h1,
.pavement-tiles-hero h1,
.materials-hero h1 {
    animation: slideInFromTop 1.2s ease-out 0.3s both, titleGlow 3s ease-in-out infinite alternate 1.5s;
}

.news-hero p,
.contacts-hero p,
.services-hero p,
.news-detail-hero p,
.projects-hero p,
.products-hero p,
.pavement-tiles-hero p,
.materials-hero p {
    animation: fadeInUp 1.4s ease-out 0.6s both;
}

/* Анімації для карток продуктів/новин/проектів */
.news-grid,
.projects-grid,
.products-grid,
.materials-grid {
    animation: fadeInUp 1s ease-out 0.8s both;
}

.news-card,
.project-card,
.product-card,
.material-card {
    animation: scaleIn 0.8s ease-out both;
}

.news-card:nth-child(1) { animation-delay: 1s; }
.news-card:nth-child(2) { animation-delay: 1.1s; }
.news-card:nth-child(3) { animation-delay: 1.2s; }
.news-card:nth-child(4) { animation-delay: 1.3s; }
.news-card:nth-child(5) { animation-delay: 1.4s; }
.news-card:nth-child(6) { animation-delay: 1.5s; }

.project-card:nth-child(1) { animation-delay: 1s; }
.project-card:nth-child(2) { animation-delay: 1.1s; }
.project-card:nth-child(3) { animation-delay: 1.2s; }
.project-card:nth-child(4) { animation-delay: 1.3s; }
.project-card:nth-child(5) { animation-delay: 1.4s; }
.project-card:nth-child(6) { animation-delay: 1.5s; }

.product-card:nth-child(1) { animation-delay: 1s; }
.product-card:nth-child(2) { animation-delay: 1.1s; }
.product-card:nth-child(3) { animation-delay: 1.2s; }
.product-card:nth-child(4) { animation-delay: 1.3s; }
.product-card:nth-child(5) { animation-delay: 1.4s; }
.product-card:nth-child(6) { animation-delay: 1.5s; }

.material-card:nth-child(1) { animation-delay: 1s; }
.material-card:nth-child(2) { animation-delay: 1.1s; }
.material-card:nth-child(3) { animation-delay: 1.2s; }
.material-card:nth-child(4) { animation-delay: 1.3s; }
.material-card:nth-child(5) { animation-delay: 1.4s; }
.material-card:nth-child(6) { animation-delay: 1.5s; }

/* Анімації для контейнерів */
.news-container,
.projects-container,
.products-container,
.materials-container,
.contacts-container,
.services-container {
    animation: fadeInUp 1.2s ease-out 0.5s both;
}

/* Анімації для заголовків секцій */
.news-container h1,
.projects-container h1,
.products-container h1,
.materials-container h1,
.contacts-container h1,
.services-container h1 {
    animation: slideInFromTop 1s ease-out 0.7s both;
}

/* Анімації для описів */
.news-container p,
.projects-container p,
.products-container p,
.materials-container p,
.contacts-container p,
.services-container p {
    animation: fadeInUp 1.3s ease-out 0.9s both;
}

/* Анімації для кнопок */
.hero-button,
.cta-button {
    animation: scaleIn 0.8s ease-out 1.2s both;
}

/* Анімації для іконок */
.news-hero i,
.contacts-hero i,
.services-hero i,
.news-detail-hero i,
.projects-hero i,
.products-hero i,
.pavement-tiles-hero i,
.materials-hero i {
    animation: iconBounce 2s ease-in-out infinite 1.5s;
}

/* Анімації для зображень */
.news-image,
.project-image,
.product-image,
.material-image {
    animation: scaleIn 1s ease-out 1.1s both;
}

/* Анімації для форми контактів */
.contact-form {
    animation: fadeInLeft 1.2s ease-out 0.8s both;
}

.contact-info {
    animation: fadeInRight 1.2s ease-out 0.8s both;
}

/* Анімації для сервісів */
.service-item {
    animation: fadeInUp 0.8s ease-out both;
}

.service-item:nth-child(1) { animation-delay: 1s; }
.service-item:nth-child(2) { animation-delay: 1.1s; }
.service-item:nth-child(3) { animation-delay: 1.2s; }
.service-item:nth-child(4) { animation-delay: 1.3s; }
.service-item:nth-child(5) { animation-delay: 1.4s; }
.service-item:nth-child(6) { animation-delay: 1.5s; }

/* Анімації для footer */
footer {
    animation: fadeInUp 1s ease-out 1.5s both;
}

/* Анімації для header */
body.home header,
body.services header,
body.products header,
body.projects header,
body.contacts header,
body.materials header {
    animation: slideInFromTop 0.8s ease-out both;
    transition: all 0.3s ease !important;
    /* header positioning and background are controlled in main style.css */
}

/* Анімації для навігації */
nav {
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* Анімації для логотипу */
.logo {
    animation: scaleIn 0.8s ease-out 0.5s both;
}

/* Анімації для плаваючих кнопок */
.floating-contact-btn,
.floating-top-btn {
    animation: scaleIn 0.6s ease-out 2s both;
}

/* Анімації для шапки сайту */

body.home header.scrolled,
body.services header.scrolled,
body.products header.scrolled,
body.projects header.scrolled,
body.contacts header.scrolled,
body.materials header.scrolled {
    background-color: rgba(51, 51, 51, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
}

header.hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
}

/* Анімація для логотипу в шапці */
.logo {
    transition: all 0.3s ease;
}

header:hover .logo {
    transform: scale(1.05);
}

/* Анімація для навігаційних посилань */
nav a {
    transition: all 0.3s ease;
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, #219653, #2c3e50);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

nav a:hover {
    color: #219653 !important;
    transform: translateY(-2px);
}

/* Анімація для кнопок в шапці */
header button,
header .btn {
    transition: all 0.3s ease;
}

header button:hover,
header .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(33, 150, 83, 0.3);
}

/* Version: 3.8 - Updated header animations with smooth fading */