/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =========================================================
   VOX - DESIGN TOKENS
========================================================= */
:root {
    --vox-purple-deep: #53118F;
    --vox-purple-main: #6E1FA7;
    --vox-purple-accent: #933DC9;
    --vox-purple-soft: #B57EDC;
    --vox-purple-pale: #E7D4F6;
}

/* =========================================================
   BASE SITE
========================================================= */
body {
    background: #ffffff;
}

/* On s'assure que le contenu passe au-dessus du layer de bulles */
.site,
#main-container,
[data-footer*="type"],
[data-header*="type"],
.ct-container,
.ct-content,
.site-content,
.content-area,
.hero-section,
.entry-content,
.wp-site-blocks {
    position: relative;
    z-index: 1;
}

/* =========================================================
   GLOBAL SITE BUBBLES
========================================================= */
.vox-site-bubbles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.vox-bubble {
    position: absolute;
    display: block;
    border-radius: 50%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* =========================================
   BUBBLE COMPOSITION
========================================= */

/* Grande bulle coupée haut droite */
.vox-site-bubbles .bubble-1 {
    width: 340px;
    height: 340px;
    top: 5vh;
    right: -120px;
    background: var(--vox-purple-accent);
    opacity: 0.18;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Moyenne gauche */
.vox-site-bubbles .bubble-2 {
    width: 180px;
    height: 180px;
    top: 32vh;
    left: 4vw;
    background: var(--vox-purple-deep);
    opacity: 0.16;
    box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.06);
}

/* Petite haute claire */
.vox-site-bubbles .bubble-3 {
    width: 92px;
    height: 92px;
    top: 14vh;
    left: 46vw;
    background: var(--vox-purple-soft);
    opacity: 0.22;
}

/* Moyenne bas droite */
.vox-site-bubbles .bubble-4 {
    width: 160px;
    height: 160px;
    top: 62vh;
    right: 10vw;
    background: var(--vox-purple-main);
    opacity: 0.17;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Petite très claire */
.vox-site-bubbles .bubble-5 {
    width: 72px;
    height: 72px;
    top: 78vh;
    left: 16vw;
    background: var(--vox-purple-pale);
    opacity: 0.34;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.08);
}

/* Grosse sous le fold */
.vox-site-bubbles .bubble-6 {
    width: 250px;
    height: 250px;
    top: 108vh;
    right: 24vw;
    background: var(--vox-purple-deep);
    opacity: 0.13;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Moyenne basse gauche coupée */
.vox-site-bubbles .bubble-7 {
    width: 140px;
    height: 140px;
    top: 144vh;
    left: -40px;
    background: var(--vox-purple-accent);
    opacity: 0.16;
}

/* =========================================
   ORGANIC DETAILS
   Bulles imbriquées
========================================= */
.vox-site-bubbles .bubble-2::after,
.vox-site-bubbles .bubble-4::after,
.vox-site-bubbles .bubble-6::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

/* bulle 2 */
.vox-site-bubbles .bubble-2::after {
    inset: 20%;
    background: rgba(147, 61, 201, 0.38);
    transform: translate(14px, 10px);
}

/* bulle 4 */
.vox-site-bubbles .bubble-4::after {
    inset: 18%;
    background: rgba(181, 126, 220, 0.34);
    transform: translate(-10px, 12px);
}

/* bulle 6 */
.vox-site-bubbles .bubble-6::after {
    inset: 24%;
    background: rgba(147, 61, 201, 0.26);
    transform: translate(16px, -12px);
}

/* =========================================================
   GLASSMORPHISM UTILITAIRE
========================================================= */
.vox-glass {
    position: relative;
    z-index: 2;
    border-radius: 28px;
    padding: clamp(1.5rem, 2.5vw, 3rem);
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.06),
        0 4px 10px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(14px) saturate(155%);
    -webkit-backdrop-filter: blur(14px) saturate(155%);
}

.vox-glass--strong {
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
}

/* =========================================================
   GLASSMORPHISM POUR LES COLONNES GUTENBERG
========================================================= */
.vox-glass-col {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 2.5vw, 3rem);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.vox-glass-col::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 32%,
        rgba(255, 255, 255, 0) 62%
    );
}

.vox-glass-col > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   REVEAL AU SCROLL
========================================================= */
html.js .vox-reveal {
    opacity: 0;
    transform: translateY(70px) scale(0.96);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .vox-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
    .vox-site-bubbles .bubble-1 {
        width: 270px;
        height: 270px;
        right: -90px;
    }

    .vox-site-bubbles .bubble-2 {
        width: 140px;
        height: 140px;
    }

    .vox-site-bubbles .bubble-4 {
        width: 125px;
        height: 125px;
    }

    .vox-site-bubbles .bubble-6 {
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 781px) {
    .vox-site-bubbles .bubble-1 {
        width: 180px;
        height: 180px;
        top: 8vh;
        right: -48px;
        opacity: 0.14;
    }

    .vox-site-bubbles .bubble-2 {
        width: 100px;
        height: 100px;
        top: 30vh;
        left: -18px;
        opacity: 0.13;
    }

    .vox-site-bubbles .bubble-3 {
        width: 52px;
        height: 52px;
        top: 18vh;
        left: 66vw;
        opacity: 0.20;
    }

    .vox-site-bubbles .bubble-4 {
        width: 94px;
        height: 94px;
        top: 56vh;
        right: 4vw;
        opacity: 0.14;
    }

    .vox-site-bubbles .bubble-5 {
        width: 40px;
        height: 40px;
        top: 72vh;
        left: 10vw;
        opacity: 0.24;
    }

    .vox-site-bubbles .bubble-6 {
        width: 132px;
        height: 132px;
        top: 102vh;
        right: 14vw;
        opacity: 0.10;
    }

    .vox-site-bubbles .bubble-7 {
        width: 84px;
        height: 84px;
        top: 126vh;
        left: -20px;
        opacity: 0.13;
    }

    .vox-glass,
    .vox-glass--strong,
    .vox-glass-col {
        border-radius: 22px;
    }
}

/* =========================================================
   ACCESSIBILITE
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .vox-bubble {
        transform: none !important;
    }

    html.js .vox-reveal,
    html.js .vox-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}