/**
 * Background ondulant WebGL
 */

:root {
    --wave-canvas-size: max(120vw, 120vh);
    --wave-canvas-size-large: max(160vw, 160vh);
}

.wave-trigger-container{
    position: relative;
    width: calc(100vw - 20px);
    left: 50%;
    translate: -50%;
    pointer-events: none;
}

.wave-trigger{
    width: 100%;
    left: 50%;
    translate: -50%;
    position: absolute;
    top: 0;
    aspect-ratio: 1728 / 865;
}

/* Align waves vertically closer to titles sur les pages produit */
.commitment-section .wave-trigger-container {
    top: -40vh;
}


.tailor-container > .wave-trigger-container {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(100vw - 20px);
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.tailor-container > .wave-trigger-container > .wave-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    translate: none;
}

.wave-trigger .wave-curtains-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1728 / 865;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.commitment-section .wave-trigger .wave-curtains-container {
    --wave-canvas-size: var(--wave-canvas-size-large);
    top: -60%;
}

.tailor-made-section .wave-trigger .wave-curtains-container {
    --wave-canvas-size: var(--wave-canvas-size-large);
}

.wave-trigger .wave-curtains-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.wave-trigger .wave-curtains-container.wave-curtains-container--local {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    z-index: 0;
}

.wave-trigger .wave-curtains-container.wave-curtains-container--local canvas {
    width: 100% !important;
    height: 100% !important;
}

.wave-trigger .wave-curtains-container.wave-curtains-container--local .wave-curtains-plane--local {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#background-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}