/* ================================================================
   DYNAMIC ENHANCEMENTS CSS — Instant Beauté
   Effets ultra-dynamiques : Morphing · Spotlight · Typewriter
   Aurora · Floating · Magnetic · Glitch · 3D Depth
   ================================================================ */

/* ── 1. HERO AURORA BACKGROUND ────────────────────────────── */

.hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-aurora::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 58, 76, 0.35) 0%, transparent 70%);
    animation: auroraDrift1 12s ease-in-out infinite alternate;
    top: -100px;
    left: -100px;
}

.hero-aurora::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 164, 132, 0.28) 0%, transparent 70%);
    animation: auroraDrift2 9s ease-in-out infinite alternate;
    bottom: -80px;
    right: -80px;
}

@keyframes auroraDrift1 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50%  { transform: translate(60px, 40px) scale(1.15); opacity: 1; }
    100% { transform: translate(20px, 80px) scale(0.9); opacity: 0.7; }
}

@keyframes auroraDrift2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50%  { transform: translate(-40px, -30px) scale(1.1); opacity: 0.9; }
    100% { transform: translate(-70px, 20px) scale(0.95); opacity: 0.6; }
}

/* ── 2. HERO TYPING CURSOR ─────────────────────────────────── */

.typewriter-word {
    display: inline;
    color: #f5cfd6;
    font-style: italic;
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: rgba(255, 255, 255, 0.85);
    margin-left: 2px;
    vertical-align: middle;
    animation: twBlink 0.75s step-end infinite;
}

@keyframes twBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── 3. SPOTLIGHT EFFECT ──────────────────────────────────── */

.spotlight-section {
    position: relative;
    overflow: hidden;
}

.spotlight-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        600px circle at var(--mx, 50%) var(--my, 50%),
        rgba(196, 164, 132, 0.08) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.spotlight-section:hover .spotlight-layer {
    opacity: 1;
}

/* ── 4. MORPHING BLOB SVG ─────────────────────────────────── */

.morphing-blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    animation: blobMorph 18s ease-in-out infinite;
}

@keyframes blobMorph {
     0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg) scale(1.05); }
    50% { border-radius: 50% 60% 30% 60% / 40% 50% 60% 50%; transform: rotate(180deg) scale(0.95); }
    75% { border-radius: 40% 60% 60% 30% / 60% 30% 70% 40%; transform: rotate(270deg) scale(1.08); }
   100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg) scale(1); }
}

/* ── 5. SECTION "COMMENT ÇA MARCHE" – PROGRESS ANIMATION ─── */

.hiw-step-v3 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hiw-step-v3.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

.hiw-step-v3:nth-child(2) { transition-delay: 0.12s; }
.hiw-step-v3:nth-child(3) { transition-delay: 0.24s; }
.hiw-step-v3:nth-child(4) { transition-delay: 0.36s; }

/* Cercle icon hover glow */
.hiw-step-v3:hover > div:first-child {
    transform: translateY(-6px) scale(1.08) !important;
    box-shadow: 0 16px 40px rgba(170, 58, 76, 0.4) !important;
}

.hiw-step-v3 > div:first-child {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s ease !important;
}

/* Progress line animated fill */
.hiw-progress-line {
    position: absolute;
    top: 40px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: rgba(170, 58, 76, 0.08);
    z-index: 0;
    overflow: hidden;
}

.hiw-progress-line-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #aa3a4c, #c4a484);
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px rgba(170, 58, 76, 0.4);
}

.hiw-progress-line-fill.filled {
    width: 100%;
}

/* ── 6. FAQ ITEMS — Hover Glow ────────────────────────────── */

.elite-faq-item {
    transition: background 0.3s ease, padding-left 0.3s ease;
    border-radius: 4px;
    padding: 0 4px;
}

.elite-faq-item:hover {
    background: rgba(196, 164, 132, 0.04);
}

.elite-faq-item.open .elite-faq-q-text {
    color: #aa3a4c;
    transition: color 0.3s ease;
}

/* ── 7. REEL CARDS — 3D FLIP EFFECT ──────────────────────── */

.reel-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── 8. FLOATING ELEMENTS ─────────────────────────────────── */

.float-element {
    animation: floatUpDown 4s ease-in-out infinite;
}

.float-element:nth-child(2n) {
    animation-delay: 0.5s;
    animation-duration: 5s;
}

.float-element:nth-child(3n) {
    animation-delay: 1s;
    animation-duration: 3.5s;
}

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25%       { transform: translateY(-8px) rotate(1deg); }
    75%       { transform: translateY(4px) rotate(-1deg); }
}

/* ── 9. NAV GIFT BUTTON — Pulsating Attention ────────────── */

.nav-item-gift a {
    animation: giftPulse 2.5s ease-in-out infinite;
}

@keyframes giftPulse {
    0%, 100% { filter: drop-shadow(0 0 0px rgba(196, 164, 132, 0)); }
    50%       { filter: drop-shadow(0 0 6px rgba(196, 164, 132, 0.5)); }
}

/* ── 10. WHATSAPP FAB — Enhanced Pulse ───────────────────── */

.fab-whatsapp {
    animation: waPulse 2.8s ease-in-out infinite !important;
}

@keyframes waPulse {
    0%   { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.4); }
    50%  { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35), 0 0 0 12px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0); }
}

.fab-whatsapp:hover {
    animation: none !important;
}

/* ── 11. TESTIMONIALS — INFINITE SCROLL SMOOTH ───────────── */

.testimonial-carousel {
    overflow: hidden;
    position: relative;
}

.testimonial-track {
    display: flex;
    gap: 24px;
    animation: testimonialScroll 35s linear infinite;
    will-change: transform;
}

.testimonial-track:hover {
    animation-play-state: paused;
}

@keyframes testimonialScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── 12. SCROLL PROGRESS BAR — Gradient Animated ─────────── */

#scroll-progress {
    background: linear-gradient(
        90deg,
        #aa3a4c 0%,
        #ab737c 30%,
        #c4a484 60%,
        #ab737c 80%,
        #aa3a4c 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: progressGradient 3s linear infinite !important;
    height: 3px !important;
    box-shadow: 0 0 12px rgba(170, 58, 76, 0.5) !important;
}

@keyframes progressGradient {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ── 13. INTRO IMAGE — Floating Ornaments ─────────────────── */

.intro-image-wrapper {
    position: relative;
}

.intro-ornament {
    position: absolute;
    font-size: 2rem;
    opacity: 0.15;
    pointer-events: none;
    animation: ornamentFloat 6s ease-in-out infinite;
}

.intro-ornament.ornament-1 {
    top: -15px;
    right: -15px;
    animation-delay: 0s;
    font-size: 1.5rem;
    color: #c4a484;
    opacity: 0.4;
}

.intro-ornament.ornament-2 {
    bottom: 30px;
    left: -20px;
    animation-delay: 1.5s;
    font-size: 1.2rem;
    color: #aa3a4c;
    opacity: 0.3;
}

@keyframes ornamentFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-12px) rotate(15deg); }
}

/* ── 14. SERVICE CARDS — STAGGER ENTRANCE ────────────────── */

.services-grid .service-card:nth-child(1) { animation-delay: 0s; }
.services-grid .service-card:nth-child(2) { animation-delay: 0.15s; }
.services-grid .service-card:nth-child(3) { animation-delay: 0.3s; }

/* ── 15. CURSOR TRAIL EFFECT ──────────────────────────────── */

.cursor-trail {
    position: fixed;
    pointer-events: none;
    z-index: 99990;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background: rgba(170, 58, 76, 0.5);
    transform: translate(-50%, -50%);
    animation: trailFade 0.8s ease forwards;
}

@keyframes trailFade {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

/* ── 16. SECTION TITLE — GRADIENT TEXT EFFECT ────────────── */

.gradient-title {
    background: linear-gradient(135deg, #aa3a4c 0%, #ab737c 40%, #c4a484 70%, #aa3a4c 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 4s linear infinite;
}

@keyframes gradientTextShift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ── 17. SCROLL REVEAL — ENHANCED ────────────────────────── */

.reveal-slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* ── 18. NEWSLETTER FORM — Shimmer on Focus ───────────────── */

.newsletter-form:focus-within {
    animation: formGlow 2s ease-in-out infinite;
}

@keyframes formGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }
    50%       { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1); }
}

/* ── 19. LOADING SHIMMER for Images ───────────────────────── */

.img-shimmer {
    position: relative;
    overflow: hidden;
}

.img-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: shimmerSweep 2.5s ease-in-out infinite;
}

@keyframes shimmerSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── 20. BOTTOM EASTER EGG — Subtle Sparkle ──────────────── */

.footer-easter-egg {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.footer-easter-egg:hover {
    transform: scale(1.15) rotate(5deg);
}

/* ── 21. MOBILE RESPONSIVE ────────────────────────────────── */

@media (max-width: 768px) {
    .hero-aurora::before,
    .hero-aurora::after {
        width: 250px;
        height: 250px;
    }

    .testimonial-track {
        animation-duration: 20s;
    }

    .hiw-progress-line {
        display: none;
    }

    .cursor-trail {
        display: none;
    }
}

/* ── 22. REVERT infinite scroll pour carousel fixes ──────── */
/* Si la JS réactive le carousel natif: désactiver l'auto-scroll CSS */
.testimonial-track.js-carousel {
    animation: none !important;
}

/* ── 23. MICRO INTERACTION: Contact Buttons ───────────────── */

.elite-btn-phone,
.elite-btn-wa,
.elite-btn-instagram {
    position: relative;
    overflow: hidden;
}

.elite-btn-phone::after,
.elite-btn-wa::after,
.elite-btn-instagram::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.elite-btn-phone:hover::after,
.elite-btn-wa:hover::after,
.elite-btn-instagram:hover::after {
    transform: scaleX(1);
}

/* ── 24. TOP BAR — Animated Stars ────────────────────────── */

.top-bar-stars {
    display: inline-block;
    animation: starsTwinkle 2s ease-in-out infinite;
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.8;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.15); }
}

/* ── 25. SECTION DIVIDERS — Organic Waves ────────────────── */

.section-wave {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.section-wave svg {
    display: block;
    width: 100%;
}