/* ====================================
   CHIPO TORN PAPER V2 - VRAIES DÉCHIRURES
   ==================================== */

/* ====================================
   WRAPPER AVEC DÉCHIRURES CLIP-PATH
   ==================================== */

.chipo-torn-wrapper {
    position: relative;
    width: 100%;
    margin: 4rem 0;
}

/* ====================================
   SECTION PRINCIPALE AVEC DÉCHIRURES
   ==================================== */

.chipo-torn-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* DÉCHIRURE PAR CLIP-PATH */
    clip-path: polygon(
        /* Haut déchiré */
        0% 8%,
        2% 6%,
        4% 9%,
        6% 5%,
        8% 7%,
        10% 4%,
        12% 8%,
        14% 5%,
        16% 9%,
        18% 6%,
        20% 8%,
        22% 5%,
        24% 7%,
        26% 4%,
        28% 9%,
        30% 6%,
        32% 8%,
        34% 5%,
        36% 7%,
        38% 9%,
        40% 6%,
        42% 8%,
        44% 5%,
        46% 7%,
        48% 9%,
        50% 6%,
        52% 8%,
        54% 5%,
        56% 7%,
        58% 9%,
        60% 6%,
        62% 8%,
        64% 5%,
        66% 7%,
        68% 9%,
        70% 6%,
        72% 8%,
        74% 5%,
        76% 7%,
        78% 9%,
        80% 6%,
        82% 8%,
        84% 5%,
        86% 7%,
        88% 9%,
        90% 6%,
        92% 8%,
        94% 5%,
        96% 7%,
        98% 9%,
        100% 6%,
        
        /* Côté droit */
        100% 100%,
        
        /* Bas déchiré (miroir inversé) */
        98% 91%,
        96% 93%,
        94% 95%,
        92% 92%,
        90% 94%,
        88% 91%,
        86% 93%,
        84% 95%,
        82% 92%,
        80% 94%,
        78% 91%,
        76% 93%,
        74% 95%,
        72% 92%,
        70% 94%,
        68% 91%,
        66% 93%,
        64% 95%,
        62% 92%,
        60% 94%,
        58% 91%,
        56% 93%,
        54% 95%,
        52% 92%,
        50% 94%,
        48% 91%,
        46% 93%,
        44% 95%,
        42% 92%,
        40% 94%,
        38% 91%,
        36% 93%,
        34% 95%,
        32% 92%,
        30% 94%,
        28% 91%,
        26% 96%,
        24% 93%,
        22% 95%,
        20% 92%,
        18% 94%,
        16% 91%,
        14% 95%,
        12% 92%,
        10% 96%,
        8% 93%,
        6% 95%,
        4% 91%,
        2% 94%,
        0% 92%
    );
}

/* Intensité Légère */
.chipo-tear-light .chipo-torn-section {
    clip-path: polygon(
        0% 4%, 5% 3%, 10% 5%, 15% 3%, 20% 4%, 25% 3%, 30% 5%, 
        35% 3%, 40% 4%, 45% 3%, 50% 5%, 55% 3%, 60% 4%, 65% 3%, 
        70% 5%, 75% 3%, 80% 4%, 85% 3%, 90% 5%, 95% 3%, 100% 4%,
        100% 100%,
        95% 97%, 90% 95%, 85% 97%, 80% 96%, 75% 97%, 70% 95%, 
        65% 97%, 60% 96%, 55% 97%, 50% 95%, 45% 97%, 40% 96%, 
        35% 97%, 30% 95%, 25% 97%, 20% 96%, 15% 97%, 10% 95%, 
        5% 97%, 0% 96%
    );
}

/* Intensité Intense */
.chipo-tear-heavy .chipo-torn-section {
    clip-path: polygon(
        0% 12%, 2% 8%, 4% 15%, 6% 7%, 8% 13%, 10% 6%, 12% 14%, 
        14% 8%, 16% 16%, 18% 9%, 20% 13%, 22% 7%, 24% 15%, 26% 8%, 
        28% 14%, 30% 9%, 32% 16%, 34% 7%, 36% 13%, 38% 15%, 40% 9%, 
        42% 14%, 44% 8%, 46% 16%, 48% 15%, 50% 9%, 52% 14%, 54% 7%, 
        56% 13%, 58% 16%, 60% 9%, 62% 14%, 64% 8%, 66% 13%, 68% 15%, 
        70% 9%, 72% 14%, 74% 8%, 76% 13%, 78% 16%, 80% 9%, 82% 14%, 
        84% 8%, 86% 13%, 88% 16%, 90% 9%, 92% 14%, 94% 8%, 96% 13%, 
        98% 16%, 100% 9%,
        100% 100%,
        98% 84%, 96% 87%, 94% 92%, 92% 86%, 90% 91%, 88% 84%, 86% 87%, 
        84% 92%, 82% 86%, 80% 91%, 78% 84%, 76% 87%, 74% 92%, 72% 86%, 
        70% 91%, 68% 84%, 66% 87%, 64% 92%, 62% 86%, 60% 91%, 58% 84%, 
        56% 87%, 54% 93%, 52% 86%, 50% 91%, 48% 85%, 46% 87%, 44% 92%, 
        42% 86%, 40% 91%, 38% 85%, 36% 87%, 34% 93%, 32% 86%, 30% 91%, 
        28% 86%, 26% 92%, 24% 85%, 22% 93%, 20% 87%, 18% 91%, 16% 84%, 
        14% 92%, 12% 88%, 10% 94%, 8% 87%, 6% 93%, 4% 85%, 2% 91%, 0% 88%
    );
}

/* ====================================
   CONTAINER MARQUEE
   ==================================== */

.chipo-marquee-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ====================================
   TRACK DÉFILANT
   ==================================== */

.chipo-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    white-space: nowrap;
    animation: marquee-scroll linear infinite;
    will-change: transform;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-33.33%); /* 1/3 car on duplique 3 fois */
    }
}

/* ====================================
   TEXTE AVEC EFFET GLASS
   ==================================== */

.chipo-marquee-text {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    
    /* GLASS EFFECT DIRECT SUR LE TEXTE */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.2);
    
    /* Ombre portée pour profondeur */
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.1);
    
    /* Bordure subtile */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.1);
    
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Transition douce */
    transition: all 0.3s ease;
}

.chipo-marquee-text:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.15);
}

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

@media (max-width: 1024px) {
    .chipo-marquee-text {
        font-size: 1.75rem;
        padding: 0.65rem 1.75rem;
    }
    
    .chipo-marquee-track {
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .chipo-marquee-text {
        font-size: 1.5rem;
        padding: 0.6rem 1.5rem;
    }
    
    .chipo-marquee-track {
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    .chipo-marquee-text {
        font-size: 1.25rem;
        padding: 0.5rem 1.25rem;
    }
    
    .chipo-marquee-track {
        gap: 2rem;
    }
}

/* ====================================
   OPTIMISATIONS PERFORMANCE
   ==================================== */

.chipo-marquee-track {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.chipo-torn-section {
    contain: layout style paint;
}

/* ====================================
   ACCESSIBILITÉ
   ==================================== */

@media (prefers-reduced-motion: reduce) {
    .chipo-marquee-track {
        animation-duration: 120s !important;
    }
}

@media (prefers-contrast: high) {
    .chipo-marquee-text {
        border: 2px solid currentColor;
        background-color: rgba(255, 255, 255, 0.4);
    }
}

/* ====================================
   FALLBACK NAVIGATEURS ANCIENS
   ==================================== */

@supports not (clip-path: polygon(0 0)) {
    .chipo-torn-section {
        clip-path: none;
        border-top: 3px dashed rgba(255, 255, 255, 0.3);
        border-bottom: 3px dashed rgba(255, 255, 255, 0.3);
    }
}

@supports not (backdrop-filter: blur(1px)) {
    .chipo-marquee-text {
        background-color: rgba(255, 255, 255, 0.8);
    }
}