/* ===================================
   ANIMAZIONI COMUNI DEL SITO
   =================================== */

/* Animazioni di entrata per i titoli delle pagine */
.page-title-animation {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.page-subtitle-animation {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

/* Animazioni specifiche per la gift card - Uniformate con fade verso l'alto */
.gift-image-animation {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
}

.gift-form-animation {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out 0.7s, transform 1s ease-out 0.7s;
}

/* Animazioni uniformi per i form elements della gift card */
.gift-form-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.8s;
}

/* Animazioni hover per i form elements */
.form-control,
.form-select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #333;
}

.form-control:focus,
.form-select:focus {
    border-color: #FFC300;
    box-shadow: 0 0 0 0.2rem rgba(255, 195, 0, 0.25);
    transform: translateY(-2px);
}

/* Animazioni per i radio button */
.form-check-input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-check-input:checked {
    background-color: #FFC300;
    border-color: #FFC300;
    transform: scale(1.1);
}

/* Animazioni per il total box */
.total-box {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 195, 0, 0.1);
    border: 1px solid transparent;
}

.total-box:hover {
    background: rgba(255, 195, 0, 0.2);
    border-color: #FFC300;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 195, 0, 0.2);
}

/* Animazioni per il bottone PayPal */
.btn-paypal-placeholder {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-paypal-placeholder:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 196, 57, 0.4);
    filter: brightness(1.1);
}

/* ===================================
   ANIMAZIONI PER GLI ELEMENTI DEL PORTFOLIO
   =================================== */

/* Animazioni fade verso l'alto per gli elementi del portfolio */
.portfolio-item-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.portfolio-item-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animazioni hover per gli elementi del portfolio */
.portfolio-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.portfolio-img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .portfolio-img {
    filter: brightness(1.1) contrast(1.1);
}

/* Scroll Reveal Animation - Standardizzata */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1), transform 1.2s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: none;
}

/* ===================================
   ANIMAZIONI UNIFORMI PER TUTTE LE CARD
   =================================== */

/* Stile base per tutte le card del sito */
.unique-card-base {
    background: linear-gradient(145deg, #1a1a1a, #222);
    border: 1px solid #333;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Effetto bordo superiore animato */
.unique-card-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #FFC300;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* Hover effect uniforme per tutte le card */
.unique-card-base:hover::before {
    transform: scaleX(1);
}

.unique-card-base:hover {
    border-color: #FFC300;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 195, 0, 0.1);
    z-index: 10;
}

/* Applicazione delle animazioni uniformi alle card specifiche */
.contact-card,
.faq-card,
.unique-price-card,
.unique-feature,
.eventi-card {
    background: linear-gradient(145deg, #1a1a1a, #222);
    border: 1px solid #333;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.contact-card::before,
.faq-card::before,
.unique-price-card::before,
.unique-feature::before,
.eventi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #FFC300;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.contact-card:hover::before,
.faq-card:hover::before,
.unique-price-card:hover::before,
.unique-feature:hover::before,
.eventi-card:hover::before {
    transform: scaleX(1);
}

.contact-card:hover,
.faq-card:hover,
.unique-price-card:hover,
.unique-feature:hover,
.eventi-card:hover {
    border-color: #FFC300;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 195, 0, 0.1);
    z-index: 10;
}

/* Animazioni uniformi per tutte le slide */
.unique-hero-slide-vertical.active .unique-hero-slide-content {
    animation: slideContentIn 1s ease-out 0.3s forwards;
}

.unique-hero-slide-vertical.active .unique-hero-slide-img {
    animation: slideImageIn 1s ease-out 0.5s forwards;
}

/* Animazione fade verso l'alto per l'intera slide - gestita da transizione CSS */

@keyframes slideContentIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideImageIn {
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes slideFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animazioni uniformi per tutte le slide su mobile */
@media (max-width: 900px) {
    .unique-hero-slide-vertical.active .unique-hero-slide-content {
        animation: slideContentInMobile 1s ease-out 0.3s forwards;
    }

    .unique-hero-slide-vertical.active .unique-hero-slide-img {
        animation: slideImageInMobile 1s ease-out 0.5s forwards;
    }

    /* Animazione fade verso l'alto per l'intera slide su mobile - gestita da transizione CSS */

    @keyframes slideContentInMobile {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideImageInMobile {
        to {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
    }

    @keyframes slideFadeUpMobile {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Animazioni di sfondo per la home page */
.unique-hero-slide:first-child {
    animation: slideBgIn 1.2s ease-out 0.3s forwards;
}

/* Animazioni per tutte le slide orizzontali quando diventano attive */
.unique-hero-slide.active {
    animation: slideBgIn 1.2s ease-out 0.3s forwards;
}

/* Animazioni specifiche per la prima slide orizzontale attiva al caricamento */
.unique-hero-slide:first-child.active {
    animation: slideBgIn 1.2s ease-out 0.3s forwards;
}

@keyframes slideBgIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Timing delle animazioni standardizzate */
.animation-delay-1 {
    animation-delay: 0.1s;
}

.animation-delay-2 {
    animation-delay: 0.2s;
}

.animation-delay-3 {
    animation-delay: 0.3s;
}

.animation-delay-4 {
    animation-delay: 0.4s;
}

.animation-delay-5 {
    animation-delay: 0.5s;
}

.animation-delay-6 {
    animation-delay: 0.6s;
}

.animation-delay-7 {
    animation-delay: 0.7s;
}

.animation-delay-8 {
    animation-delay: 0.8s;
}

.animation-delay-9 {
    animation-delay: 0.9s;
}

.animation-delay-10 {
    animation-delay: 1.0s;
}

/* Durate delle animazioni standardizzate */
.animation-duration-fast {
    transition-duration: 0.3s;
}

.animation-duration-normal {
    transition-duration: 0.6s;
}

.animation-duration-slow {
    transition-duration: 1.0s;
}

.animation-duration-slower {
    transition-duration: 1.5s;
}

/* Easing delle animazioni standardizzate */
.animation-ease-smooth {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-ease-bounce {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animation-ease-elastic {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animazione forzata solo al primo caricamento */
.unique-hero-slide-vertical.animate-initial .unique-hero-slide-img {
    animation: slideImageIn 1s ease-out 0.7s forwards !important;
}

.unique-hero-slide-vertical.animate-initial .unique-hero-slide-content {
    animation: slideContentIn 1s ease-out 0.5s forwards !important;
}

@media (max-width: 900px) {
    .unique-hero-slide-vertical.animate-initial .unique-hero-slide-img {
        animation: slideImageInMobile 1s ease-out 0.7s forwards !important;
    }

    .unique-hero-slide-vertical.animate-initial .unique-hero-slide-content {
        animation: slideContentInMobile 1s ease-out 0.5s forwards !important;
    }
}

/* ===== OTTIMIZZAZIONI ANIMAZIONI MOBILE ===== */

/* Riduci animazioni su dispositivi mobili per performance */
@media (max-width: 768px) {

    /* Riduci durate animazioni */
    .page-title-animation,
    .page-subtitle-animation {
        transition-duration: 0.6s;
    }

    .gift-image-animation,
    .gift-form-animation {
        transition-duration: 0.5s;
    }

    .portfolio-item-animation {
        transition-duration: 0.4s;
    }

    .scroll-reveal {
        transition-duration: 0.8s;
        transform: translateY(20px);
    }

    /* Riduci hover effects su mobile */
    .portfolio-item:hover,
    .contact-card:hover,
    .faq-card:hover,
    .unique-price-card:hover,
    .unique-feature:hover,
    .eventi-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* Semplifica animazioni hero su mobile */
    .unique-hero-slide-vertical.active .unique-hero-slide-content {
        animation: slideContentInMobile 0.6s ease-out 0.2s forwards;
    }

    .unique-hero-slide-vertical.active .unique-hero-slide-img {
        animation: slideImageInMobile 0.6s ease-out 0.3s forwards;
    }

    /* Riduci animazioni form su mobile */
    .form-control:focus,
    .form-select:focus {
        transform: none;
        transition-duration: 0.2s;
    }

    .form-check-input:checked {
        transform: none;
    }

    .total-box:hover {
        transform: none;
        box-shadow: none;
    }

    .btn-paypal-placeholder:not(:disabled):hover {
        transform: none;
        box-shadow: none;
    }
}

/* Disabilita animazioni su dispositivi con preferenza ridotta */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .page-title-animation,
    .page-subtitle-animation,
    .gift-image-animation,
    .gift-form-animation,
    .portfolio-item-animation,
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .unique-hero-slide-vertical.active .unique-hero-slide-content,
    .unique-hero-slide-vertical.active .unique-hero-slide-img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Ottimizzazioni per dispositivi touch */
@media (hover: none) and (pointer: coarse) {

    /* Rimuovi hover effects su dispositivi touch */
    .portfolio-item:hover,
    .contact-card:hover,
    .faq-card:hover,
    .unique-price-card:hover,
    .unique-feature:hover,
    .eventi-card:hover,
    .form-control:hover,
    .form-select:hover,
    .total-box:hover,
    .btn-paypal-placeholder:hover {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Mantieni solo focus states per accessibilità */
    .form-control:focus,
    .form-select:focus {
        border-color: #FFC300;
        box-shadow: 0 0 0 0.2rem rgba(255, 195, 0, 0.25);
        transform: none;
    }
}

/* Ottimizzazioni per schermi molto piccoli */
@media (max-width: 480px) {

    /* Riduci ulteriormente le animazioni */
    .page-title-animation,
    .page-subtitle-animation {
        transition-duration: 0.4s;
    }

    .gift-image-animation,
    .gift-form-animation {
        transition-duration: 0.3s;
    }

    .portfolio-item-animation {
        transition-duration: 0.3s;
    }

    .scroll-reveal {
        transition-duration: 0.6s;
        transform: translateY(15px);
    }

    /* Semplifica animazioni hero */
    .unique-hero-slide-vertical.active .unique-hero-slide-content {
        animation: slideContentInMobile 0.4s ease-out 0.1s forwards;
    }

    .unique-hero-slide-vertical.active .unique-hero-slide-img {
        animation: slideImageInMobile 0.4s ease-out 0.2s forwards;
    }
}

/* Ottimizzazioni per orientamento landscape su mobile */
@media (orientation: landscape) and (max-height: 500px) {

    /* Riduci animazioni in landscape per performance */
    .page-title-animation,
    .page-subtitle-animation,
    .gift-image-animation,
    .gift-form-animation,
    .portfolio-item-animation,
    .scroll-reveal {
        transition-duration: 0.3s;
    }

    .unique-hero-slide-vertical.active .unique-hero-slide-content {
        animation: slideContentInMobile 0.3s ease-out 0.1s forwards;
    }

    .unique-hero-slide-vertical.active .unique-hero-slide-img {
        animation: slideImageInMobile 0.3s ease-out 0.2s forwards;
    }
}

/* Animazioni ottimizzate per mobile */
@keyframes slideContentInMobile {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideImageInMobile {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Variabili CSS per animazioni responsive */
:root {
    --animation-duration-fast: 0.3s;
    --animation-duration-normal: 0.6s;
    --animation-duration-slow: 1.0s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    :root {
        --animation-duration-fast: 0.2s;
        --animation-duration-normal: 0.4s;
        --animation-duration-slow: 0.6s;
    }
}

@media (max-width: 480px) {
    :root {
        --animation-duration-fast: 0.15s;
        --animation-duration-normal: 0.3s;
        --animation-duration-slow: 0.4s;
    }
}

/* Applica variabili CSS alle animazioni esistenti */
.page-title-animation,
.page-subtitle-animation {
    transition-duration: var(--animation-duration-normal);
    transition-timing-function: var(--animation-easing);
}

.gift-image-animation,
.gift-form-animation {
    transition-duration: var(--animation-duration-normal);
    transition-timing-function: var(--animation-easing);
}

.portfolio-item-animation {
    transition-duration: var(--animation-duration-fast);
    transition-timing-function: var(--animation-easing);
}

.scroll-reveal {
    transition-duration: var(--animation-duration-slow);
    transition-timing-function: var(--animation-easing);
}