/* ================================================
   ClimaArte Italia – Animations Stylesheet
   ================================================ */

/* --- Float Up-Down --- */
@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- Wavy Drift --- */
@keyframes wavyDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* --- Count Up (handled in JS, just fade in) --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Spin (for loading) --- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Draw Underline --- */
@keyframes drawUnderline {
    from { width: 0; }
    to { width: 100%; }
}

/* --- Pulse for CTA button --- */
@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.3); }
    50% { box-shadow: 0 0 0 10px rgba(212, 168, 67, 0); }
}

.btn-primary {
    animation: subtlePulse 3s ease-in-out infinite;
}

.btn-primary:hover {
    animation: none;
}

/* --- Decorative floating icons --- */
.deco-icon-1 { animation: floatUpDown 4s ease-in-out infinite; }
.deco-icon-2 { animation: floatUpDown 4s ease-in-out infinite 1.5s; }
.deco-icon-3 { animation: floatUpDown 4s ease-in-out infinite 2.5s; }

/* --- Scroll Reveal Stagger --- */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 500ms; }

/* --- Mobile menu link stagger --- */
.mobile-menu.open .nav-link:nth-child(1) { transition-delay: 0ms; }
.mobile-menu.open .nav-link:nth-child(2) { transition-delay: 80ms; }
.mobile-menu.open .nav-link:nth-child(3) { transition-delay: 160ms; }
.mobile-menu.open .nav-link:nth-child(4) { transition-delay: 240ms; }
.mobile-menu.open .nav-link:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.open .btn-sm { transition-delay: 400ms; }

/* --- Wavy dividers animation --- */
.wavy-divider svg path {
    animation: wavyDrift 8s ease-in-out infinite;
}

/* --- Hero illustration parallax layers --- */
.parallax-layer {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* --- Product card pin rotation on entry --- */
.product-card.visible:nth-child(odd) {
    transform: rotate(-1deg);
}

.product-card.visible:nth-child(even) {
    transform: rotate(1deg);
}

/* --- Category tab hover fill --- */
.category-tab {
    position: relative;
    overflow: hidden;
}

.category-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(59, 107, 130, 0.08);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 0;
}

.category-tab:hover::before,
.category-tab.active::before {
    transform: scaleX(1);
}

.category-tab > * {
    position: relative;
    z-index: 1;
}

/* --- Form field focus animation --- */
.form-group {
    position: relative;
}

.form-control:focus ~ .form-focus-bar {
    transform: scaleX(1);
}

.form-focus-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* --- Success/error message entry --- */
.form-success,
.form-error-general {
    animation: fadeIn 0.4s ease;
}

/* --- Number counter animation (via JS) --- */
.number-value {
    display: block;
}

/* --- Hover on illustrations --- */
.hero-illustration:hover .parallax-layer:nth-child(1) {
    transform: translate(2px, -2px);
}

.hero-illustration:hover .parallax-layer:nth-child(2) {
    transform: translate(-3px, 3px);
}

.hero-illustration:hover .parallax-layer:nth-child(3) {
    transform: translate(1px, -1px);
}