/**
 * Kumako Visual Effects - Styles CSS
 * Effets visuels avancés et animations
 */

/* Variables CSS Kumako */
:root {
    --kumako-primary: #1d352f;
    --kumako-secondary: #c5bfa2;
    --kumako-accent: #8b9d83;
    --kumako-light: #f5f5f0;
    --kumako-dark: #0f1a17;
    --kumako-text: #2a3f38;
    --kumako-text-light: #6b7a6f;
    
    --kumako-gradient-primary: linear-gradient(135deg, #1d352f 0%, #2a4a3f 100%);
    --kumako-gradient-secondary: linear-gradient(135deg, #c5bfa2 0%, #d4cfb8 100%);
    --kumako-gradient-aurora: linear-gradient(45deg, #1d352f, #8b9d83, #c5bfa2, #1d352f);
    
    --kumako-font-title: 'Bricolage Grotesque', sans-serif;
    --kumako-font-body: 'Source Sans 3', sans-serif;
    
    --kumako-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== EFFET AURORA ===== */
/* Styles de base pour l'effet Aurora */
.kumako-aurora-text {
    display: inline-block;
    font-weight: 700;
    position: relative;
    color: transparent;
    background: linear-gradient(45deg, #173128, #000000);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: kumako-aurora-base 12s ease-in-out infinite;
}

@keyframes kumako-aurora-base {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 75%; }
    100% { background-position: 0% 50%; }
}

/* Variations Aurora */
.kumako-aurora-text.slow {
    animation-duration: 12s;
}

.kumako-aurora-text.fast {
    animation-duration: 4s;
}

.kumako-aurora-text.intense {
    animation-duration: 6s;
    filter: brightness(1.2) contrast(1.1);
}

/* ===== SCROLL REVEAL ===== */
.kumako-scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--kumako-transition);
    will-change: transform, opacity;
}

.kumako-scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Variations Scroll Reveal */
.kumako-scroll-reveal.from-left {
    transform: translateX(-50px);
}

.kumako-scroll-reveal.from-right {
    transform: translateX(50px);
}

.kumako-scroll-reveal.from-bottom {
    transform: translateY(50px);
}

.kumako-scroll-reveal.scale {
    transform: scale(0.8) translateY(30px);
}

.kumako-scroll-reveal.scale.revealed {
    transform: scale(1) translateY(0);
}

.kumako-scroll-reveal.rotate {
    transform: rotate(-5deg) translateY(30px);
}

.kumako-scroll-reveal.rotate.revealed {
    transform: rotate(0deg) translateY(0);
}

.kumako-scroll-reveal.blur {
    filter: blur(10px);
}

.kumako-scroll-reveal.blur.revealed {
    filter: blur(0px);
}

/* ===== ANIMATIONS AVANCÉES ===== */
.kumako-animation {
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--kumako-transition);
}

.kumako-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(197, 191, 162, 0.3), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.kumako-animation:hover::before {
    left: 100%;
}

/* Animation Typewriter */
.kumako-typewriter {
    overflow: hidden;
    border-right: 2px solid var(--kumako-accent);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--kumako-accent); }
}

/* Animation Morphing */
.kumako-morph {
    transition: all 0.5s var(--kumako-transition);
}

.kumako-morph:hover {
    transform: scale(1.05) rotate(2deg);
    border-radius: 20px;
}

/* Animation Word by Word */
.kumako-word-animation span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s var(--kumako-transition);
}

.kumako-word-animation span.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== EFFETS PARALLAX ===== */
.kumako-parallax {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== TEXTURE GRAIN ===== */
.kumako-grain {
    position: relative;
}

.kumako-grain::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* ===== EFFETS DE SURVOL ===== */
.kumako-hover-lift {
    transition: transform 0.3s var(--kumako-transition);
}

.kumako-hover-lift:hover {
    transform: translateY(-5px);
}

.kumako-hover-glow {
    transition: all 0.3s var(--kumako-transition);
}

.kumako-hover-glow:hover {
    box-shadow: 0 10px 30px rgba(29, 53, 47, 0.3);
    transform: translateY(-2px);
}

/* ===== ANIMATIONS DE CHARGEMENT ===== */
.kumako-loading-pulse {
    animation: kumako-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes kumako-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.kumako-loading-bounce {
    animation: kumako-bounce 1s infinite;
}

@keyframes kumako-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .kumako-scroll-reveal {
        transform: translateY(20px);
    }
    
    .kumako-aurora-text {
        animation-duration: 6s;
    }
    
    .kumako-typewriter {
        animation-duration: 2.5s;
    }
}

/* ===== EFFET DE CONSTRUCTION DE PHRASE (VERSION OPTIMISÉE) ===== */
.kumako-sentence2 {
    overflow: hidden;
    position: relative;
}

.sentence2-word {
    display: inline-block;
    opacity: 0.1;
    transform: translateY(20px);
    filter: blur(4px);
    transition: all 0.25s ease-out;
}

.sentence2-word.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* ===== ACCESSIBILITÉ ===== */
@media (prefers-reduced-motion: reduce) {
    .kumako-aurora-text,
    .kumako-scroll-reveal,
    .kumako-animation,
    .kumako-typewriter,
    .kumako-morph,
    .kumako-loading-pulse,
    .kumako-loading-bounce,
    .kumako-sentence-construction {
        animation: none;
        transition: none;
    }
    
    .kumako-scroll-reveal {
        opacity: 1;
        transform: none;
    }
    
    .sentence-word {
        opacity: 1;
        transform: none;
        filter: none;
    }
}