/* ==========================================================================
   FLIPBOOK 3D EFFECTS - EFFET DE FEUILLETAGE PREMIUM
   ========================================================================== */

/* ==========================================================================
   VARIABLES SPÉCIFIQUES FLIPBOOK
   ========================================================================== */

:root {
    /* Timing des animations */
    --flip-duration: 1.2s;
    --flip-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Perspectives et transformations 3D */
    --flip-perspective: 2500px;
    --flip-depth: 50px;
    --page-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --page-shadow-flipping: 0 20px 50px rgba(0, 0, 0, 0.5);
    
    /* Effets visuels */
    --page-bend-radius: 20px;
    --shine-gradient: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
}

/* ==========================================================================
   STYLES DE BASE POUR L'EFFET 3D
   ========================================================================== */

.flipbook-container {
    perspective: var(--flip-perspective);
    perspective-origin: center center;
}

.flipbook {
    transform-style: preserve-3d;
    position: relative;
}

/* ==========================================================================
   STYLES DES PAGES POUR L'EFFET 3D
   ========================================================================== */

.page {
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: 
        transform var(--flip-duration) var(--flip-easing),
        box-shadow var(--flip-duration) var(--flip-easing),
        z-index 0s var(--flip-duration);
    box-shadow: var(--page-shadow);
    position: absolute;
    backface-visibility: hidden;
}

/* Effet de brillance sur les pages */
.page::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--shine-gradient);
    transition: left var(--flip-duration) var(--flip-easing);
    pointer-events: none;
    z-index: 10;
}

/* ==========================================================================
   ÉTATS DES PAGES PENDANT LE FEUILLETAGE
   ========================================================================== */

/* Page active (visible au premier plan) */
.page.current {
    z-index: 100;
    transform: rotateY(0deg) translateZ(0px);
}

/* Page en cours de retournement vers la droite */
.page.flipping-right {
    z-index: 200;
    animation: flipToRight var(--flip-duration) var(--flip-easing) forwards;
    box-shadow: var(--page-shadow-flipping);
}

/* Page en cours de retournement vers la gauche */
.page.flipping-left {
    z-index: 200;
    animation: flipToLeft var(--flip-duration) var(--flip-easing) forwards;
    box-shadow: var(--page-shadow-flipping);
}

/* Page retournée (cachée) */
.page.flipped {
    z-index: 10;
    transform: rotateY(-180deg) translateZ(-var(--flip-depth));
}

/* Page derrière la page actuelle */
.page.behind {
    z-index: 50;
    transform: rotateY(0deg) translateZ(-5px);
    opacity: 0.95;
}

/* Page très en arrière */
.page.far-behind {
    z-index: 20;
    transform: rotateY(0deg) translateZ(-10px);
    opacity: 0.9;
}

/* ==========================================================================
   ANIMATIONS DE FEUILLETAGE
   ========================================================================== */

@keyframes flipToRight {
    0% {
        transform: rotateY(0deg) translateZ(0px);
    }
    25% {
        transform: rotateY(-45deg) translateZ(var(--flip-depth));
    }
    50% {
        transform: rotateY(-90deg) translateZ(var(--flip-depth));
    }
    75% {
        transform: rotateY(-135deg) translateZ(var(--flip-depth));
    }
    100% {
        transform: rotateY(-180deg) translateZ(-var(--flip-depth));
    }
}

@keyframes flipToLeft {
    0% {
        transform: rotateY(-180deg) translateZ(-var(--flip-depth));
    }
    25% {
        transform: rotateY(-135deg) translateZ(var(--flip-depth));
    }
    50% {
        transform: rotateY(-90deg) translateZ(var(--flip-depth));
    }
    75% {
        transform: rotateY(-45deg) translateZ(var(--flip-depth));
    }
    100% {
        transform: rotateY(0deg) translateZ(0px);
    }
}

/* ==========================================================================
   EFFET DE BRILLANCE PENDANT LE FEUILLETAGE
   ========================================================================== */

.page.flipping-right::after,
.page.flipping-left::after {
    animation: shine var(--flip-duration) var(--flip-easing);
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

/* ==========================================================================
   EFFETS DE COURBURE POUR RÉALISME
   ========================================================================== */

.page.flipping-right .page-content,
.page.flipping-left .page-content {
    transform-style: preserve-3d;
    animation: pageBend var(--flip-duration) var(--flip-easing);
}

@keyframes pageBend {
    0% {
        transform: rotateX(0deg);
    }
    25% {
        transform: rotateX(2deg);
    }
    50% {
        transform: rotateX(4deg);
    }
    75% {
        transform: rotateX(2deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

/* ==========================================================================
   EFFETS DE SURVOL POUR L'INTERACTIVITÉ
   ========================================================================== */

.page:not(.flipping-right):not(.flipping-left):hover {
    transform: rotateY(0deg) translateZ(5px);
    box-shadow: 
        var(--page-shadow),
        0 5px 15px rgba(255, 215, 0, 0.2);
    transition: 
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* ==========================================================================
   INDICATEURS VISUELS DE NAVIGATION
   ========================================================================== */

/* Coin de page pliable pour indication visuelle */
.page-corner {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, transparent 50%, rgba(255, 215, 0, 0.3) 50%);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.page:hover .page-corner {
    opacity: 1;
}

/* ==========================================================================
   EFFETS SPÉCIAUX POUR LES PAGES DE COUVERTURE
   ========================================================================== */

.page-cover {
    background: var(--gradient-luxury);
}

.page-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 102, 204, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.page-cover .page-content {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   AMÉLIORATION DES OMBRES PROGRESSIVES
   ========================================================================== */

.page {
    filter: drop-shadow(0 0 0 transparent);
    transition: 
        transform var(--flip-duration) var(--flip-easing),
        filter var(--flip-duration) var(--flip-easing);
}

.page.current {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.page.flipping-right,
.page.flipping-left {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

.page.behind {
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
}

.page.far-behind {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   EFFETS DE PARTICULES POUR LE FEUILLETAGE (OPTIONNEL)
   ========================================================================== */

.flip-particles {
    position: absolute;
    top: 50%;
    right: 0;
    width: 2px;
    height: 100px;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

.page.flipping-right .flip-particles,
.page.flipping-left .flip-particles {
    animation: particles var(--flip-duration) var(--flip-easing);
}

@keyframes particles {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1);
    }
}

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

.flipbook * {
    will-change: transform;
}

.page {
    contain: layout style paint;
}

/* Désactivation des effets sur les appareils avec performance réduite */
@media (prefers-reduced-motion: reduce) {
    .page,
    .page::after,
    .page .page-content {
        animation: none !important;
        transition: none !important;
    }
    
    .page.flipping-right,
    .page.flipping-left {
        transform: rotateY(-180deg) translateZ(-var(--flip-depth));
    }
}

/* ==========================================================================
   AJUSTEMENTS RESPONSIVE POUR L'EFFET 3D
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --flip-duration: 1s;
        --flip-depth: 30px;
        --flip-perspective: 2000px;
    }
}

@media (max-width: 768px) {
    :root {
        --flip-duration: 0.8s;
        --flip-depth: 20px;
        --flip-perspective: 1500px;
    }
    
    .page:hover {
        transform: none !important;
    }
}

@media (max-width: 480px) {
    :root {
        --flip-duration: 0.6s;
        --flip-depth: 10px;
        --flip-perspective: 1000px;
    }
    
    /* Simplification pour mobile */
    .page {
        box-shadow: var(--shadow-light) !important;
    }
    
    .page::after {
        display: none;
    }
}