/*!

    Généré: Dimanche le 12 avril 2026 à 13 h 14
    Auteur: Maxime Larrivée-Roy <mlarriveeroy@gmail.com>
    Github: https://github.com/ZmotriN/adp-visualiser

*/
.particle-flow{--image-1:url('../images/sardine2.svg');--image-2:url('../images/hotdog2.svg');--image:var(--image-1);position:absolute;left:0;top:0;background:var(--image) center/contain no-repeat;offset-path:var(--path);offset-rotate:auto;animation:particle-move var(--duration) cubic-bezier(.2,.6,.3,1) forwards;pointer-events:none;will-change:transform,opacity;z-index:10}@keyframes particle-move{0%{offset-distance:0;opacity:0;filter:blur(0)}10%,50%{opacity:1}to{offset-distance:100%;opacity:0;filter:blur(.2vmin)}}:root{--bass:0.1;--mid:0.5;--treble:0.1;--volume:0.1;--ray:0.0;--playing:"Click to play";--speed:5s;--white:antiquewhite;--black:black}*{margin:0;box-sizing:border-box}body{height:100vh;overflow:hidden;display:flex;width:100%}body>div:nth-child(-n+2){flex:1;background-color:var(--color1);background-size:10vmin 10vmin;background-position:0 0,5vmin 5vmin;background-image:radial-gradient(var(--color2) calc(2% + 40%*var(--bass)),transparent calc(2% + 40%*var(--bass))),radial-gradient(var(--color2) calc(2% + 40%*var(--treble)),transparent calc(2% + 40%*var(--treble)))}body>div:nth-child(1){--color1:var(--black);--color2:var(--white)}body>div:nth-child(2){--color1:var(--white);--color2:var(--black)}body>div:nth-child(3){position:absolute;width:30vmin;height:30vmin;margin:0 auto;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(1 + var(--volume)*.8));perspective:calc(40vmin + var(--volume)*20vmin);perspective-origin:50% 30%;filter:saturate(calc(200%*var(--mid))) hue-rotate(calc(-45deg*var(--ray)));z-index:100}body>div:nth-child(3)>div{position:absolute;width:0;height:0;border-left:15vmin solid transparent;border-right:15vmin solid transparent;border-bottom:30vmin solid #ccc;transform-origin:50%0;animation:spin var(--speed) infinite linear}body>div:nth-child(3)>div::after{content:var(--playing);position:absolute;top:50%;left:50%;width:10vmin;height:10vmin;transform:translate(-50%,150%);display:flex;text-align:center;justify-content:center;align-items:center;font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;font-weight:900;font-size:2vmin}body>div:nth-child(3)>div:nth-child(1){animation-delay:calc(0s - var(--speed)*.75)}body>div:nth-child(3)>div:nth-child(3){animation-delay:calc(0s - var(--speed)/4)}body>div:nth-child(3)>div:nth-child(4){animation-delay:calc(0s - var(--speed)/2)}@keyframes spin{0%{transform:rotateY(0deg) rotateX(30deg);border-bottom-color:rgba(248,224,14,.9294117647)}25%{transform:rotateY(90deg) rotateX(30deg);border-bottom-color:rgba(217,196,6,.9294117647);opacity:1}25.1%{opacity:0}50%{transform:rotateY(180deg) rotateX(30deg);border-bottom-color:rgba(183,164,5,.9294117647)}74.9%{opacity:0}75%{transform:rotateY(270deg) rotateX(30deg);border-bottom-color:rgba(168,151,5,.9294117647);opacity:1}to{transform:rotateY(360deg) rotateX(30deg);border-bottom-color:rgba(248,224,14,.9294117647)}}