/* ===================================================================
   PENNISI & PARTNERS - CSS OPTIMIZATIONS FOR GSAP ANIMATIONS
   Version: 3.0 - Synchronized with script.js v4.0
   Da includere DOPO style.css
   =================================================================== */

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU Acceleration per elementi animati */
.zoom-image,
.bg-article,
.title-line,
.hero-subtitle,
.youtube-box,
.service-svg,
.formation-item img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Will-change gestito dinamicamente da GSAP - solo stati iniziali */
.zoom-image {
    will-change: transform, opacity;
}

.bg-article {
    will-change: transform, opacity;
}

.service-svg {
    will-change: transform;
}

/* ===== DARK MODE TRANSITION ===== */

body {
    /* REMOVED: transition: background-color 0.6s ease, color 0.6s ease; */
    /* CSS transitions conflict with GSAP ScrollTrigger scrubbed animations */
    /* GSAP handles body background/color changes with scrub: 1 for smooth scrolling */
}

.mission {
    transition: border-bottom-color 0.6s ease;
}

.svg-text {
    transition: fill 0.6s ease;
}

.formation-column {
    transition: border-color 0.6s ease;
}

.section-title,
.section-title-large,
.contact-title {
    /* REMOVED: transition: color 0.6s ease; */
    /* CSS transitions conflict with GSAP ScrollTrigger color animations */
    /* GSAP handles all color transitions via inline styles */
}

.services-description,
.mission-left p,
.formation-text-column p {
    /* REMOVED: transition: color 0.6s ease; - conflicts with GSAP */
    /* GSAP handles color transitions via ScrollTrigger timeline */
}

.formation-text-column {
    /* REMOVED: transition: background-color - conflicts with GSAP */
    /* GSAP handles background-color transition for dark mode */
}

/* ===== SERVICE SVG ENHANCEMENTS ===== */

.service-item {
    cursor: pointer;
    position: relative;
    /* GSAP gestisce box-shadow, non usare transition qui */
}

.service-svg {
    overflow: visible;
    /* Rimuovi filter CSS - GSAP gestisce tutto */
}

/* RIMOSSO: hover CSS su service-svg - conflitto con GSAP */
/* .service-item:hover .service-svg - gestito da GSAP */

/* Path animation setup - nessuna transition CSS */
.service-svg path,
.service-svg ellipse,
.service-svg rect,
.service-svg polygon {
    /* stroke-dasharray e offset gestiti da GSAP */
    vector-effect: non-scaling-stroke;
}

/* Text animation setup - nessuna transition CSS */
.svg-text tspan {
    /* fill gestito da GSAP */
}

/* ===== ZOOM IMAGE OPTIMIZATION ===== */

.zoom-image-section {
    overflow: visible;
}

.zoom-container {
    overflow: visible;
    perspective: 1000px;
}

.zoom-image {
    transform-origin: center center;
    max-width: none;
    object-fit: cover;
}

/* ===== BUTTON ENHANCEMENTS ===== */

.btn-arrow,
.btn-primary,
.btn-secondary,
.btn-submit {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Ripple effect su click */
.btn-arrow::after,
.btn-primary::after,
.btn-secondary::after,
.btn-submit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}

.btn-arrow:active::after,
.btn-primary:active::after,
.btn-secondary:active::after,
.btn-submit:active::after {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
}

/* ===== ARROW ICON OPTIMIZATION ===== */

.arrow-icon {
    transform-origin: center center;
    transform: translateZ(0);
}

/* ===== SUCCESS STORIES OPTIMIZATION ===== */

.success-stories {
    transform: translateZ(0);
    perspective: 1000px;
}

.stories-bg-images {
    transform: translateZ(0);
}

.bg-article {
    transform-origin: center center;
}

/* ===== FORMATION HOVER EFFECT ===== */

.formation-item {
    overflow: hidden;
    position: relative;
}

.formation-item img {
    transform-origin: center center;
    transition: transform 0.4s ease;
}

/* Border glow effect su hover */
.formation-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(147, 41, 38, 0.1) 0%, transparent 50%, rgba(147, 41, 38, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.formation-item:hover::before {
    opacity: 1;
}

/* ===== CONTACT FORM ENHANCEMENTS ===== */

.contact-form input,
.contact-form textarea {
    /* REMOVED: transition: all 0.6s ease; - conflicts with GSAP color animations */
    /* Only transition properties GSAP doesn't control */
    transition: border-color 0.3s ease, transform 0.3s ease;
    transform: translateZ(0);
}

.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-2px);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    /* REMOVED: transition: color 0.6s ease; - placeholder transitions should not conflict */
    /* Placeholders don't need transitions as they disappear on focus */
}

/* Dark mode placeholder */
body.dark-mode .contact-form input::placeholder,
body.dark-mode .contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* ===== HEADER OPTIMIZATION ===== */

.header {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */

@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;
    }

    .scroll-content {
        animation: none !important;
    }

    .service-svg path {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ===== SMOOTH SCROLLBAR ===== */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: auto; /* GSAP gestirà lo scroll smooth */
    }
}

/* ===== LOADING STATE ===== */

body.loading {
    opacity: 0;
}

/* ===== YOUTUBE BOX ENHANCEMENT ===== */

.youtube-box {
    transition: all 0.3s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Subtle glow effect */
.youtube-box::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle at center, rgba(166, 44, 42, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
    border-radius: 10px;
}

.youtube-box:hover::after {
    opacity: 1;
}

/* ===== RESPONSIVE OPTIMIZATIONS ===== */

@media (max-width: 1024px) {
    /* Riduce complessità animazioni su tablet */
    .bg-article {
        will-change: transform;
    }

    .service-svg {
        filter: none;
    }
}

@media (max-width: 768px) {
    /* Semplifica animazioni su mobile */
    .zoom-image,
    .bg-article,
    .service-svg {
        will-change: auto;
    }

    .formation-item::before {
        display: none;
    }

    .btn-arrow::after,
    .btn-primary::after,
    .btn-secondary::after,
    .btn-submit::after {
        display: none;
    }
}

/* ===== CURSOR INTERACTIONS ===== */

@media (hover: hover) and (pointer: fine) {
    .service-item,
    .formation-item,
    .youtube-box,
    .btn-arrow,
    .btn-primary,
    .btn-secondary,
    .btn-submit {
        cursor: pointer;
    }
}

/* ===== FOCUS STATES FOR ACCESSIBILITY ===== */

.btn-arrow:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-submit:focus-visible {
    outline: 3px solid rgba(166, 44, 42, 0.5);
    outline-offset: 4px;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 2px solid rgba(166, 44, 42, 0.5);
    outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */

@media print {
    .header,
    .scroll-text,
    .btn-arrow,
    .btn-primary,
    .btn-secondary,
    .btn-submit,
    .hamburger {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .zoom-image,
    .service-svg,
    .formation-item img {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ===== SERVICE ITEMS SPECIFIC ANIMATIONS ===== */

/* RIMOSSO: Effetto magnetico CSS - conflitto con GSAP hover */
/* GSAP gestisce hover effects su .service-item */

/* Focus state per accessibilita keyboard */
.service-item:focus-within .service-svg {
    outline: 2px solid rgba(147, 41, 38, 0.5);
    outline-offset: 8px;
}

/* ===== CONTACT IMAGE OPTIMIZATION ===== */

.contact-image {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== FOOTER OPTIMIZATION ===== */

.footer-content > div {
    transform: translateZ(0);
}

/* ===== SCROLLBAR STYLING (OPTIONAL) ===== */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: #932926;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A62C2A;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #932926 #f0f0f0;
}

/* Dark mode scrollbar */
body.dark-mode::-webkit-scrollbar-track {
    background: #932926;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #f0f0f0;
}

body.dark-mode * {
    scrollbar-color: #f0f0f0 #932926;
}