/* Event page scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Section Animations */
.hero-section.animate-on-scroll {
    transform: translateY(30px) scale(0.95);
}

.hero-section.animate-on-scroll.is-visible {
    transform: translateY(0) scale(1);
}

.hero-content.animate-on-scroll,
.event-badge.animate-on-scroll {
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-title.animate-on-scroll {
    transform: translateY(40px) scale(0.9);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-race-card.animate-on-scroll {
    transform: translateY(30px) rotateY(10deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.countdown-item.animate-on-scroll {
    transform: scale(0.8) translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card.animate-on-scroll {
    transform: translateY(30px) rotateX(15deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Section Headers */
.section-header.animate-on-scroll,
.section-title.animate-on-scroll {
    transform: translateY(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-header.animate-on-scroll {
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overview Section - Fixed for grid symmetry */
.detail-card.animate-on-scroll {
    transform: translateY(40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove asymmetric horizontal transforms that break grid layout */
.event-details-grid .detail-card.animate-on-scroll {
    transform: translateY(40px) scale(0.95);
}

.event-details-grid .detail-card:nth-child(1).animate-on-scroll,
.event-details-grid .detail-card:nth-child(2).animate-on-scroll {
    transition-delay: 0.1s;
}

.event-details-grid .detail-card:nth-child(3).animate-on-scroll,
.event-details-grid .detail-card:nth-child(4).animate-on-scroll {
    transition-delay: 0.2s;
}

.event-details-grid .detail-card:nth-child(5).animate-on-scroll,
.event-details-grid .detail-card:nth-child(6).animate-on-scroll {
    transition-delay: 0.3s;
}

/* Program Section - Enhanced Timeline Animation */
.program-timeline {
    position: relative;
}

.program-item.animate-on-scroll {
    transform: translateY(30px) scale(0.95);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Timeline time indicators - Keep centered positioning intact */
.program-time.animate-on-scroll {
    transform: translateX(-50%) scale(0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.program-time.animate-on-scroll.is-visible {
    transform: translateX(-50%) scale(1);
}

/* Hover state fix */
.program-time:hover {
    transform: translateX(-50%) scale(1.1) rotate(5deg) !important;
}

/* Mobile time positioning fix */
@media screen and (max-width: 768px) {
    .program-time.animate-on-scroll {
        transform: scale(0.8);
        position: relative;
        left: 0;
    }
    
    .program-time.animate-on-scroll.is-visible {
        transform: scale(1);
    }
    
    .program-time:hover {
        transform: scale(1.1) rotate(5deg) !important;
    }
}

/* Timeline content */
.program-content.animate-on-scroll {
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Program notes */
.program-notes .notes-card.animate-on-scroll {
    transform: translateY(40px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-list li.animate-on-scroll {
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kit Section */
.kit-item-card.animate-on-scroll,
.feature-card.animate-on-scroll {
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.kit-image-container.animate-on-scroll {
    transform: scale(0.9) rotate(-2deg);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.collection-card.animate-on-scroll {
    transform: translateY(30px) rotateX(10deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Route Section */
.modern-card.animate-on-scroll {
    transform: translateY(30px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Punti di Interesse sul Percorso (POI) Animations */
.modern-timeline.animate-on-scroll {
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-timeline-item.animate-on-scroll {
    transform: translateY(40px) scale(0.95);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-timeline-item:nth-child(odd).animate-on-scroll {
    transform: translateX(-30px) translateY(40px) scale(0.95);
}

.modern-timeline-item:nth-child(even).animate-on-scroll {
    transform: translateX(30px) translateY(40px) scale(0.95);
}

/* Timeline dots with enhanced animations */
.modern-timeline-dot.animate-on-scroll {
    transform: scale(0.7) rotate(-10deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-timeline-dot.animate-on-scroll.is-visible {
    transform: scale(1) rotate(0deg);
}

/* POI content cards with speech bubble effect */
.modern-timeline-content.animate-on-scroll {
    transform: translateY(30px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.modern-timeline-content.animate-on-scroll.is-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Enhanced route map animation */
.route-map-full-width.animate-on-scroll {
    transform: scale(0.95) translateY(20px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Route description section */
.route-description-section.animate-on-scroll {
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern info items in route details */
.route-details-horizontal-card .modern-info-item.animate-on-scroll {
    transform: translateX(-20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-details-horizontal-card .modern-info-item:nth-child(even).animate-on-scroll {
    transform: translateX(20px) scale(0.95);
}

/* Registration Section */
.registration-card.animate-on-scroll {
    transform: translateY(30px) scale(0.98);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.race-card.animate-on-scroll {
    transform: translateY(40px) rotateY(5deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-option.animate-on-scroll {
    transform: scale(0.9) translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.early-bird-notice.animate-on-scroll {
    transform: translateX(-30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rules Section */
.rules-accordion-item.animate-on-scroll {
    transform: translateX(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rules-accordion-item:nth-child(even).animate-on-scroll {
    transform: translateX(-30px);
}

.rule-item.animate-on-scroll {
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Safety Section */
.safety-card.animate-on-scroll {
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.emergency-contact.animate-on-scroll {
    transform: translateX(-40px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gallery Section */
.gallery-item.animate-on-scroll {
    transform: scale(0.8) rotate(3deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:nth-child(3n).animate-on-scroll {
    transform: scale(0.8) rotate(-3deg);
}

.filter-btn.animate-on-scroll {
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sponsors Section */
.sponsor-item.animate-on-scroll {
    transform: scale(0.8) translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.become-sponsor-card.animate-on-scroll {
    transform: translateY(40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sponsor-logo-container.animate-on-scroll {
    transform: scale(0.9);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Notice and Special Content */
.notice-content.animate-on-scroll {
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.planimetry img.animate-on-scroll {
    transform: scale(0.95) rotate(1deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Sections */
.info-card.animate-on-scroll,
.feature-highlight.animate-on-scroll {
    transform: translateY(30px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.race-info-section.animate-on-scroll,
.text-block-section.animate-on-scroll {
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.callout-box.animate-on-scroll {
    transform: translateX(-40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-grid.animate-on-scroll {
    transform: scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.animate-on-scroll {
    transform: translateX(-50px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive Elements */
.btn.animate-on-scroll {
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* List Items */
.detail-item.animate-on-scroll,
.collection-item.animate-on-scroll,
.benefit-item.animate-on-scroll {
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-info-item.animate-on-scroll {
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure all visible states reset transforms */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) rotateY(0) rotateX(0) rotate(0);
}

/* Improved layout preservation for grid and flex containers */
.event-details-grid.animate-on-scroll,
.sponsors-grid.animate-on-scroll,
.kit-items-grid.animate-on-scroll {
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure consistent spacing during animations */
.section-padding.animate-on-scroll {
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero section refinements */
.hero-races-container.animate-on-scroll {
    transform: translateY(30px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Registration section improvements */
.registration-details.animate-on-scroll {
    transform: translateY(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.race-cards-grid.animate-on-scroll {
    transform: translateY(30px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 0;
        transform: none;
        transition: opacity 0.3s ease;
    }
    
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: none;
    }
}