WenWangxin/closing-2022-and-whishes.markdown

## closing-2022-and-whishes.markdown

      
    Raw
  

              closing-2022-and-whishes.markdown
            
          
    Closing 2022 and Whishes

Last codepen challenge of the year.
Mixxed some stuff here and there to stress the GPU.
Just for fun, not entend, nor suggested, to play with this on production.
Btw, Xmas is there, will Santa's comes to you?
A Pen by WenWangxin on CodePen.
License.

  
## index.html
<div id="snow" aria-hidden="true"></div>
<div id='particles' aria-hidden="true">
  <canvas id="fuori_artificio" width="550" height="500" aria-hidden="true"></canvas>
</div>
<div class="albero">
  <svg role="img" aria-label="A shining Christmas Tree animated" class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
    <defs>
      <circle id="circ" class="particle" cx="0" cy="0" r="1" />
      <polygon id="star" class="particle" points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 " />
      <polygon id="cross" class="particle" points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 " />
      <path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1
	C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z" />

      <radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse">
        <stop offset="0" style="stop-color:red" />
        <stop offset="0.4" style="stop-color:#334673" />
        <stop offset="0.6" style="stop-color:#EDDDC4" />
        <stop offset="0.9" style="stop-color:#FEE8C7" />
        <stop offset="1" style="stop-color:red" />
      </radialGradient>
      <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse">
        <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1" />
        <stop offset="0.1" style="stop-color:#0867C7;stop-opacity:0.6" />
        <stop offset="1" style="stop-color:#081029;stop-opacity:0" />
      </radialGradient>

      <mask id="treePathMask">
        <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6
    c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6
    c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3
    c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1" />
      </mask>
      <mask id="treeBottomMask">
        <path class="treeBottomMask" stroke="#FFF" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" />
      </mask>
      <mask id="treePotMask">
        <path class="treePotMask" stroke="#FFF" stroke-width="8" d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3" />
      </mask>

      <filter id="glow" x="-150%" y="-150%" width="280%" height="280%">
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
        <feGaussianBlur in="offOut" stdDeviation="16" result="blur" />

        <feComponentTransfer>
          <feFuncR type="discrete" tableValues="0.8" />
          <feFuncG type="discrete" tableValues="0.3" />
          <feFuncB type="discrete" tableValues="0.2" />
          <!--<feFuncA type="linear" slope="1" intercept="0" />-->
        </feComponentTransfer>

        <feComposite in="SourceGraphic" operator="over" />

      </filter>

    </defs>
    <g class="whole">

      <g class="pContainer"></g>

      <g class="tree" mask="url(#treePathMask)">
        <path d="M252.95,447.85a20.43,20.43,0,0,1-5.64-6.24,14,14,0,0,1-1.91-8.22,16.93,16.93,0,0,1,3.06-8,33.16,33.16,0,0,1,5.79-6.28A74.78,74.78,0,0,1,268.54,410a163.48,163.48,0,0,1,15.52-6.84c10.54-3.93,21-8.07,30.72-13.46a80.83,80.83,0,0,0,7-4.37,37.51,37.51,0,0,0,6.13-5.24c1.75-1.92,3.14-4.18,3.25-6.35s-1.12-4.18-3-5.81a25,25,0,0,0-6.72-3.91,61.25,61.25,0,0,0-7.8-2.42c-5.41-1.4-10.91-2.72-16.38-4.32a84.17,84.17,0,0,1-16.2-6.19,28.26,28.26,0,0,1-3.86-2.5,15.06,15.06,0,0,1-3.44-3.63,9,9,0,0,1-1.51-5.47,10.22,10.22,0,0,1,.61-2.78,12.88,12.88,0,0,1,1.2-2.34,26.73,26.73,0,0,1,6.58-6.56c2.35-1.76,4.76-3.33,7.19-4.84,4.87-3,9.82-5.75,14.77-8.46,9.91-5.4,19.88-10.59,29.63-16.08,4.87-2.75,9.68-5.56,14.33-8.56A81.88,81.88,0,0,0,359.45,280a23,23,0,0,0,2.41-2.79,8.36,8.36,0,0,0,1.35-2.65,2.13,2.13,0,0,0-.17-1.7,5.53,5.53,0,0,0-1.88-1.77,13.15,13.15,0,0,0-1.49-.83c-.52-.26-1.1-.49-1.76-.77-1.27-.53-2.55-1-3.83-1.53q-3.86-1.48-7.8-2.77c-5.26-1.74-10.6-3.23-16-4.79-2.72-.79-5.47-1.58-8.29-2.61a31.74,31.74,0,0,1-4.33-1.92,14.39,14.39,0,0,1-2.29-1.53,8.74,8.74,0,0,1-2.22-2.66,7.2,7.2,0,0,1-.78-4,9.09,9.09,0,0,1,1-3.24,18.93,18.93,0,0,1,3-4.21,44.88,44.88,0,0,1,3.29-3.19c.56-.5,1.12-1,1.68-1.45l1.61-1.33a84,84,0,0,0,10.88-11.88,326.2,326.2,0,0,0,18.79-27.53c5.88-9.5,11.48-19.19,16.89-29S380.1,146.16,385,136.13c1.22-2.51,2.42-5,3.57-7.54s2.29-5.09,3.14-7.45l.36-1c.14-.38.26-.75.42-1.12.29-.75.64-1.48,1-2.21a25.51,25.51,0,0,1,2.65-4.21,19.15,19.15,0,0,1,3.76-3.69,13.74,13.74,0,0,1,5.24-2.42,12.11,12.11,0,0,1,6.12.25,14.59,14.59,0,0,1,5,2.79,20.59,20.59,0,0,1,3.47,3.79,30.33,30.33,0,0,1,2.5,4.1c.35.7.7,1.39,1,2.1l.46,1.05.4,1,1.64,3.84,3.39,7.67q6.88,15.32,14.36,30.37c5,10,10.18,19.94,15.69,29.65a274.94,274.94,0,0,0,17.9,28A73.36,73.36,0,0,0,487.74,233c.49.4,1,.8,1.48,1.15l1.7,1.19a35,35,0,0,1,3.66,3,17.84,17.84,0,0,1,3.32,4.08,10.83,10.83,0,0,1,1.14,2.94,8.54,8.54,0,0,1,0,3.54,10.27,10.27,0,0,1-3.22,5.39,20.71,20.71,0,0,1-4.15,2.91,49,49,0,0,1-8.4,3.46,154,154,0,0,1-16.77,4.09l-4.15.81a9.18,9.18,0,0,0-2.87,1.08,9.51,9.51,0,0,0-4,4.7,12.55,12.55,0,0,0-.67,6.58,19.5,19.5,0,0,0,2.46,6.74A37.19,37.19,0,0,0,468,295.75a75,75,0,0,0,14.14,7.86,129.67,129.67,0,0,0,15.58,5.49A141.4,141.4,0,0,1,513.88,315a75,75,0,0,1,15.19,8.65,37.29,37.29,0,0,1,6.55,6.24,21.05,21.05,0,0,1,4.31,8.49,14.43,14.43,0,0,1-1.24,9.88,18.08,18.08,0,0,1-6.66,6.94,26.74,26.74,0,0,1-8.56,3.33c-2.84.61-5.65,1.06-8.44,1.49-5.58.86-11.13,1.61-16.52,2.77a53.48,53.48,0,0,0-7.81,2.22c-2.43.94-4.81,2.22-6,3.93a4.34,4.34,0,0,0-.77,2.82,8.45,8.45,0,0,0,1,3.29,28,28,0,0,0,4.82,6.25,80.74,80.74,0,0,0,12.81,10.4c9.29,6,19.72,10.29,30.24,14.17,5.27,1.95,10.59,3.79,15.85,5.86,2.63,1,5.24,2.14,7.79,3.39a37.94,37.94,0,0,1,7.28,4.51,11.9,11.9,0,0,1,3.63,15.57,34.68,34.68,0,0,1-4.53,7.16,77.45,77.45,0,0,1-5.64,6.29,77.31,77.31,0,0,0,5.41-6.46,34.27,34.27,0,0,0,4.22-7.21,12.64,12.64,0,0,0,.88-8,12.44,12.44,0,0,0-4.71-6.43,37.71,37.71,0,0,0-7.15-4.16c-2.53-1.16-5.13-2.18-7.76-3.14-5.26-1.91-10.62-3.62-16-5.44-10.65-3.63-21.34-7.64-31.11-13.64a83.84,83.84,0,0,1-13.61-10.49,31.27,31.27,0,0,1-5.6-6.94,12,12,0,0,1-1.55-4.68,8.17,8.17,0,0,1,.19-2.7,8.56,8.56,0,0,1,1.09-2.5,12.1,12.1,0,0,1,3.6-3.44,24.27,24.27,0,0,1,4.08-2.08,57.3,57.3,0,0,1,8.36-2.56c5.59-1.31,11.19-2.17,16.71-3.12,2.76-.48,5.5-1,8.15-1.59a22.1,22.1,0,0,0,7-2.87,13.3,13.3,0,0,0,4.82-5.15,9.42,9.42,0,0,0,.69-6.53,16,16,0,0,0-3.42-6.33,33.25,33.25,0,0,0-5.73-5.27,69.74,69.74,0,0,0-14.19-7.8,135.81,135.81,0,0,0-15.61-5.42,135.53,135.53,0,0,1-16.3-5.51,81,81,0,0,1-15.41-8.31,43.39,43.39,0,0,1-12.6-13,25.53,25.53,0,0,1-3.34-9,19.13,19.13,0,0,1,1-10,16.17,16.17,0,0,1,6.69-8,15.88,15.88,0,0,1,5-1.93l4.13-.84a147.75,147.75,0,0,0,16-4,42.41,42.41,0,0,0,7.17-3,14,14,0,0,0,2.74-1.92,3.42,3.42,0,0,0,1.12-1.68,2.41,2.41,0,0,0-.43-1.61,11.07,11.07,0,0,0-2-2.4,28,28,0,0,0-2.92-2.31l-1.76-1.22c-.65-.46-1.26-.94-1.86-1.43a59,59,0,0,1-6.43-6.27c-2-2.19-3.79-4.44-5.54-6.74a267,267,0,0,1-18.55-28.74c-5.63-9.85-10.89-19.86-16-30s-9.91-20.31-14.57-30.61l-3.45-7.76L417,124.48l-.42-1-.39-.88c-.25-.59-.54-1.15-.82-1.71a22.74,22.74,0,0,0-1.89-3.09,13,13,0,0,0-2.2-2.42,7,7,0,0,0-2.31-1.33,4.49,4.49,0,0,0-2.22-.09,8.55,8.55,0,0,0-4.59,3.32,17.85,17.85,0,0,0-1.84,2.92c-.26.54-.51,1.07-.73,1.64-.12.27-.22.56-.32.85l-.35,1c-1.06,2.93-2.23,5.47-3.42,8.1s-2.42,5.16-3.67,7.7c-5,10.18-10.29,20.16-15.77,30.05s-11.17,19.66-17.16,29.28a310.2,310.2,0,0,1-19.39,28.11,90.46,90.46,0,0,1-12,12.85l-1.65,1.35c-.52.43-1,.85-1.53,1.29a38,38,0,0,0-2.79,2.65,12.42,12.42,0,0,0-1.94,2.57,2.33,2.33,0,0,0-.28.76c0,.11,0,0,0,.09a4.57,4.57,0,0,0,1.7,1.35,25.15,25.15,0,0,0,3.36,1.51c2.46.92,5.11,1.72,7.79,2.52,5.36,1.58,10.84,3.16,16.25,5q4.06,1.37,8.08,2.94c1.34.53,2.67,1.07,4,1.63.64.27,1.36.57,2.1.94a19.66,19.66,0,0,1,2.18,1.24,11.85,11.85,0,0,1,4,4.13,8.64,8.64,0,0,1,1,3.24,9.11,9.11,0,0,1-.27,3.23,14.48,14.48,0,0,1-2.42,4.85,29.32,29.32,0,0,1-3.14,3.56,87.46,87.46,0,0,1-14,10.47c-4.85,3-9.79,5.84-14.76,8.55-9.94,5.42-20,10.49-29.91,15.72-5,2.62-9.88,5.28-14.63,8.12-2.37,1.42-4.7,2.89-6.88,4.46a22.06,22.06,0,0,0-5.45,5.14,8,8,0,0,0-.76,1.39,5.36,5.36,0,0,0-.33,1.32,4.1,4.1,0,0,0,.69,2.53,15.62,15.62,0,0,0,5.49,4.62A80.14,80.14,0,0,0,298.56,353c5.31,1.66,10.73,3.06,16.18,4.58a64.81,64.81,0,0,1,8.26,2.74,27.74,27.74,0,0,1,7.69,4.74,13.65,13.65,0,0,1,3,3.81,9.27,9.27,0,0,1,1,5,11.14,11.14,0,0,1-1.54,4.7,19.09,19.09,0,0,1-2.8,3.67,40.6,40.6,0,0,1-6.81,5.54,83.78,83.78,0,0,1-7.41,4.35c-10.11,5.26-20.76,9.16-31.39,12.82a161.69,161.69,0,0,0-15.52,6.37A74.57,74.57,0,0,0,255,420a32.17,32.17,0,0,0-5.82,5.89,16.21,16.21,0,0,0-3.19,7.52,13.61,13.61,0,0,0,1.59,8A20.29,20.29,0,0,0,252.95,447.85Z" fill="#cb9866" />
        <path d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866" />
        <path d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866" />

      </g>
      <path class="treeBottomPath" stroke="none" fill="none" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" />
      <path class="treePath" fill="none" stroke="none" stroke-miterlimit="10" d="M252.95,447.85s-30.81-21.57,33.89-44.68,46.22-37,33.89-41.6-59.32-11.56-42.37-28.5,114-52.38,81.66-66.25S301.48,256,324.59,237.55,390.84,135.87,395.46,122c4.41-13.24,16.95-18.49,24.65,0s44.68,100.14,67.79,115.55-10.78,21.57-26.19,24.65-20,33.89,33.89,49.3,47.76,40.06,27.73,44.68-63.17,4.62-27.73,32.35,98.6,21.57,61.63,60.09" />
      <path class="treeBottom" mask="url(#treeBottomMask)" d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866" />
      <path class="treePot" mask="url(#treePotMask)" d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866" />
      <g class="treeStar">
        <path class="treeStarOutline" opacity="0" d="M421,53.27c5,.83,10.08,1.52,15.15,2.13l3.8.45,1.9.21c.33,0,.6.06,1,.12a2.41,2.41,0,0,1,1.27.66,2.52,2.52,0,0,1,.56,2.76,3.42,3.42,0,0,1-.78,1.07l-.66.69-2.65,2.77c-1.78,1.83-3.54,3.68-5.35,5.48l-2.7,2.71L429.81,75l-.69.67-.34.33,0,0h0a.14.14,0,0,0,0-.08s0-.07,0,0l0,.24.07.47.57,3.78c.4,2.52.71,5,1.06,7.57l.94,7.59.22,1.9c0,.06,0,.19,0,.34a2.21,2.21,0,0,1,0,.43,2.72,2.72,0,0,1-.21.84,2.85,2.85,0,0,1-2.65,1.75,2.57,2.57,0,0,1-.82-.14,3.12,3.12,0,0,1-.65-.3l-1.64-1-6.58-3.91-6.63-3.81-3.34-1.86-.42-.23-.21-.12-.14-.07a1,1,0,0,0-.59,0,1.15,1.15,0,0,0-.31.12l-.43.22-.85.44c-2.27,1.17-4.54,2.31-6.79,3.52s-4.51,2.38-6.74,3.61l-3.36,1.83-.84.46a3.07,3.07,0,0,1-1.28.44,2.68,2.68,0,0,1-2.84-3l.15-1,.29-1.89.57-3.78,1.18-7.56,1.24-7.52a.13.13,0,0,0,0,.08l0,0-.1-.09-.17-.17-1.37-1.34-2.73-2.68-10.93-10.7-.34-.33a4,4,0,0,1-.64-.84,3.63,3.63,0,0,1-.43-2.12,3.68,3.68,0,0,1,2.64-3.17l.52-.11.25,0,.47-.06.95-.12,1.9-.25,7.58-1,7.6-.9,1.9-.23.95-.11c.24,0,.11,0,.09,0l-.09.05-.07.08,0,0,.09-.16.46-.84.91-1.68c2.41-4.5,4.95-8.92,7.51-13.34l1-1.66.48-.83.24-.41.13-.23a3.49,3.49,0,0,1,.22-.33,2.66,2.66,0,0,1,2.83-.9,2.52,2.52,0,0,1,1.26.84,2.85,2.85,0,0,1,.37.62l.18.44q1.45,3.54,3,7.06c1,2.36,2,4.68,3.06,7,.51,1.17,1.06,2.32,1.59,3.48l.8,1.74a2.12,2.12,0,0,0,.45.75A1.42,1.42,0,0,0,421,53.27Zm-.06.39a1.82,1.82,0,0,1-1-.46,2.52,2.52,0,0,1-.56-.86l-.84-1.72c-.56-1.14-1.11-2.3-1.69-3.43-1.17-2.27-2.29-4.56-3.5-6.81s-2.39-4.51-3.6-6.76l-.23-.42a.8.8,0,0,0-.14-.18.58.58,0,0,0-.33-.15.56.56,0,0,0-.57.28L407,36.48c-2.09,4.66-4.2,9.31-6.45,13.88l-.83,1.72-.42.86-.13.27a3.57,3.57,0,0,1-2,1.67,4.26,4.26,0,0,1-.84.18l-.95.13-1.89.27L386,56.53l-7.58,1-3.49.44a.45.45,0,0,0,.34-.4.51.51,0,0,0-.07-.28s-.06-.08-.07-.08l.33.34,10.65,11,2.66,2.75,1.33,1.37.4.42a3.41,3.41,0,0,1,.53.84,3.36,3.36,0,0,1,.24,1.95c-.53,2.56-1,5-1.57,7.52L388,90.85l-.83,3.73-.42,1.87-.2.9a.5.5,0,0,0,0,.3.58.58,0,0,0,.52.37,6.28,6.28,0,0,0,1.38-.58l3.46-1.62q3.47-1.61,6.9-3.3c2.3-1.1,4.57-2.26,6.85-3.39l.86-.43.43-.21a2.55,2.55,0,0,1,.57-.22,2.21,2.21,0,0,1,1.29.08l.29.13.21.11.42.23,3.37,1.81,6.8,3.51,6.85,3.41,1.71.85c.19.09.15.07.22.08a.25.25,0,0,0,.12,0,.42.42,0,0,0,.21-.1.33.33,0,0,0,.1-.19.2.2,0,0,0,0-.09.1.1,0,0,0,0,0l0-.13L428.74,96l-1.42-7.52c-.43-2.51-.9-5-1.29-7.54l-.6-3.78-.08-.47,0-.24a3.75,3.75,0,0,1,0-.45,3.37,3.37,0,0,1,.52-1.9,3.33,3.33,0,0,1,.3-.4,3.73,3.73,0,0,1,.3-.3l.35-.32.7-.65,2.81-2.59,2.86-2.54c1.9-1.71,3.84-3.36,5.77-5l2.91-2.49a12.91,12.91,0,0,0,1.15-1,.7.7,0,0,0-.06-.79.73.73,0,0,0-.37-.26c-.23-.06-.6-.13-.89-.2l-1.87-.4L436,56.39C431,55.39,426,54.45,420.95,53.66Z" fill="#FFFCF9" />
        <path d="M408.12,83.45l-17.78,8.94,3.72-19.55-14-14.15,19.74-2.5,9.13-17.68,8.48,18L437,59.73l-14.5,13.63,3,19.67Z" fill="#C89568" />
      </g>
      <circle class="sparkle" fill="url(#dotGrad)" cx="0" cy="0" r="50" />

    </g>
  </svg>
</div>
<div class='augurio'>
  What is Christmas?</div><br>
<div class='mask'> It is the tenderness of the past, courage for the present, and hope for the future.
</div>
</div>
<input id="audio" type="checkbox" class='play' />
<label for="audio" title="Toggle audio">
  <svg viewBox="0 0 24 24" class='audio_icon'>
    <path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
  </svg>
  <svg viewBox="0 0 24 24" class='audio_icon'>
    <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
  </svg>
</label>
<audio class="xmas" muted="muted" playsinline="playsinline" autoplay="autoplay" loop="loop"></audio>
<div class="container hidden_sharewrapper">
  <div class="box">
    <div class="content">
      <h2>Be kind, share the love</h2>
      <div class='sharers'>
        <div class="share_me">Share <span class="cnt-svg-sharing" role="img" aria-label="Condividi"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" style="width:4ch;height:4ch" class='svg_sharer'>
              <g>
                <g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)" style="
    fill: white;
">
                  <path d="M4552.9,4995.1c-50.9-4.6-219.6-30-376.8-55.5C2262.1,4622.9,697.2,3166.7,239.5,1278.1C-165-397.7,322.8-2145.2,1536.3-3356.5c716.6-718.9,1618.1-1185.8,2635.1-1366.1c390.6-69.3,1031-85.5,1433.2-32.4c2179.8,275.1,3874.1,1909.3,4244,4089.1c50.9,298.2,67.1,943.1,34.7,1264.4c-117.9,1141.9-612.6,2182.1-1417,2981.9c-802.1,797.5-1821.5,1282.9-2958.8,1405.4C5297.2,5009,4763.2,5013.6,4552.9,4995.1z M5630,4673.8c2057.3-286.6,3645.3-1874.7,3938.9-3943.5c69.3-492.3,37-1178.9-83.2-1689.7c-388.3-1664.3-1747.5-3025.8-3407.2-3414.1c-670.3-154.9-1479.4-157.2-2138.2-2.3C2599.6-4061.5,1439.2-3125.3,842.9-1870.2C533.1-1218.3,406-642.7,403.7,108.5c0,751.2,138.7,1361.5,462.3,2024.9c665.7,1370.7,1971.7,2318.5,3499.7,2542.7C4663.8,4717.7,5315.7,4717.7,5630,4673.8z" style="
"></path>
                  <path d="M5974.5,2944.8c-319-90.2-587.1-342.1-695.8-656.5c-53.2-147.9-64.7-446.1-23.1-582.5c18.5-60.1,18.5-85.5-4.6-106.3c-37-32.4-1527.9-864.5-1551.1-864.5c-11.6,0-74,48.6-138.7,110.9c-413.8,376.8-1017.1,367.5-1407.7-20.8c-559.4-559.4-305.1-1497.9,457.7-1696.7c349-90.1,686.5,2.3,966.2,261.2l108.6,104l122.5-64.7c64.7-37,420.7-235.8,790.5-443.8c520.1-291.2,668-383.7,663.4-416.1c-2.3-23.1-16.2-104-30.1-180.3c-27.7-159.5,2.3-379.1,74-538.6c286.6-654.2,1144.2-816,1648.1-314.4c427.6,429.9,381.4,1169.6-99.4,1523.3c-416.1,302.8-957,272.8-1319.9-76.3l-120.2-115.6L4619.9-689l-795.2,441.5l18.5,69.3c18.5,78.6,23.1,446.1,4.6,564l-11.6,78.6l774.4,434.6c425.3,240.4,783.6,434.6,795.2,436.9c9.3,0,74-50.9,143.3-113.3c705-644.9,1807.6-76.3,1694.4,873.8c-43.9,386-360.6,746.6-746.6,848.3C6353.6,2984,6115.5,2984,5974.5,2944.8z M6358.2,2674.3c351.4-62.4,591.8-349.1,596.4-705c4.6-649.6-813.7-970.8-1245.9-490C5576.9,1622.6,5526,1756.6,5526,1960c-2.3,208,64.7,374.5,208,515.5c131.8,129.5,224.2,173.4,473.9,221.9C6214.9,2699.7,6281.9,2688.2,6358.2,2674.3z M3198.3,746.5c503.9-275.1,503.9-996.3,0-1269c-353.7-194.2-829.8-30.1-994,337.5c-76.3,171.1-76.3,420.7,0,591.7c69.3,152.6,256.6,328.2,409.1,381.4C2789.2,848.2,3043.4,829.7,3198.3,746.5z M6450.6-1056.5c180.3-53.2,330.6-184.9,425.3-367.5c69.3-138.7,78.6-178,78.6-323.6c-7-638-774.4-957-1225.1-506.2c-178,175.7-254.3,469.2-184.9,702.7C5657.8-1160.5,6062.3-938.6,6450.6-1056.5z"></path>
                </g>
              </g>
            </svg></span></div>
        <div class='share_desktop'>
          <button id="facebook-button" class="confetti-button">Facebook</button>
          <button id="linkedin-button" class="confetti-button">LinkedIn</button>
          <button id="whatsapp-button" class="confetti-button">WhatsApp</button>
          <button id="email-button" class="confetti-button">Email</button>
        </div>
      </div>
    </div>
  </div>
</div>
<svg class='wavysvg'>
  <filter id="wavy">
    <feTurbulence x="0" y="0" baseFrequency="0.08" numOctaves="5" seed="2">
      <animate attributeName="baseFrequency" dur="60s" values="0.04; 0.08; 0.04" repeatCount="indefinite"></animate>
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="30">
    </feDisplacementMap>
  </filter>
</svg>

## script.js
let e =
  ((t = a(function* () {
    let e = document.querySelector('meta[name="description"]').content;
    if (
      (document.querySelector(".share_me"),
      document.getElementById("facebook-button"),
      document.getElementById("linkedin-button"),
      document.getElementById("whatsapp-button"),
      document.getElementById("email-button"),
      navigator.share)
    )
      yield navigator.share({
        title: document.title,
        url: window.location.href,
        text: e
      });
    else {
      const t = {
        "facebook-button": `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
          window.location.href
        )}`,
        "linkedin-button": `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
          window.location.href
        )}`,
        "whatsapp-button": `https://web.whatsapp.com/send?text=${encodeURIComponent(
          e + "\n\n" + window.location.href
        )}`,
        "email-button": `mailto:?subject=${encodeURIComponent(
          e
        )}&body=View this website: ${encodeURIComponent(window.location.href)}`
      };
      Object.entries(t).forEach(function ([e, t]) {
        document
          .querySelector(`button[id="${e}"]`)
          .addEventListener("click", function () {
            const e = screenLeft + (innerWidth - 800) / 2,
              a = window.screen.availHeight / 8 + (innerHeight - 500) / 2;
            window.open(t, "_blank", `height=500,width=800,left=${e},top=${a}`);
          });
      });
    }
  })),
  function () {
    return t.apply(this, arguments);
  });
var t;
function a(e) {
  return function () {
    var t = e.apply(this, arguments);
    return new Promise(function (e, a) {
      return (function n(o, i) {
        try {
          var r = t[o](i),
            s = r.value;
        } catch (e) {
          return void a(e);
        }
        if (!r.done)
          return Promise.resolve(s).then(
            function (e) {
              return n("next", e);
            },
            function (e) {
              return n("throw", e);
            }
          );
        e(s);
      })("next");
    });
  };
}
gsap.config({ trialWarn: !1 });
let n = document.querySelector("#snow"),
  o = {
    current: 0,
    force: 0.1,
    target: 0.1,
    min: 0.1,
    max: 0.25,
    easing: 0.005
  };
new ShaderProgram(n, {
  depthTest: !1,
  texture:
    'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="64" width="64"%3E%3Cfilter id="f1" x="-150%25" y="-150%25" width="300%25" height="300%25"%3E%3CfeGaussianBlur in="SourceGraphic" stdDeviation="7" /%3E%3C/filter%3E%3Cellipse cx="32" cy="32" rx="10" ry="15" style="fill:%23fff" filter="url(%23f1)" /%3E%3C/svg%3E',
  uniforms: {
    worldSize: { type: "vec3", value: [0, 0, 0] },
    gravity: { type: "float", value: 100 },
    wind: { type: "float", value: 0 }
  },
  buffers: {
    size: { size: 1, data: [] },
    rotation: { size: 3, data: [] },
    speed: { size: 3, data: [] }
  },
  vertex:
    "\n    precision highp float;\n\n    attribute vec4 a_position;\n    attribute vec4 a_color;\n    attribute vec3 a_rotation;\n    attribute vec3 a_speed;\n    attribute float a_size;\n\n    uniform float u_time;\n    uniform vec2 u_mousemove;\n    uniform vec2 u_resolution;\n    uniform mat4 u_projection;\n    uniform vec3 u_worldSize;\n    uniform float u_gravity;\n    uniform float u_wind;\n\n    varying vec4 v_color;\n    varying float v_rotation;\n\n    void main() {\n\n      v_color = a_color;\n      v_rotation = a_rotation.x + u_time * a_rotation.y;\n\n      vec3 pos = a_position.xyz;\n\n      pos.x = mod(pos.x + u_time + u_wind * a_speed.x, u_worldSize.x * 2.0) - u_worldSize.x;\n      pos.y = mod(pos.y - u_time * a_speed.y * u_gravity, u_worldSize.y * 2.0) - u_worldSize.y;\n\n      pos.x += sin(u_time * a_speed.z) * a_rotation.z;\n      pos.z += cos(u_time * a_speed.z) * a_rotation.z;\n\n      gl_Position = u_projection * vec4( pos.xyz, a_position.w );\n      gl_PointSize = ( a_size / gl_Position.w ) * 100.0;\n\n    }",
  fragment:
    "\n    precision highp float;\n\n    uniform sampler2D u_texture;\n\n    varying vec4 v_color;\n    varying float v_rotation;\n\n    void main() {\n\n      vec2 rotated = vec2(\n        cos(v_rotation) * (gl_PointCoord.x - 0.5) + sin(v_rotation) * (gl_PointCoord.y - 0.5) + 0.5,\n        cos(v_rotation) * (gl_PointCoord.y - 0.5) - sin(v_rotation) * (gl_PointCoord.x - 0.5) + 0.5\n      );\n\n      vec4 snowflake = texture2D(u_texture, rotated);\n\n      gl_FragColor = vec4(snowflake.rgb, snowflake.a * v_color.a);\n\n    }",
  onResize(e, t, a) {
    let n = [],
      o = [],
      i = [],
      r = [],
      s = [],
      l = (e / t) * 110;
    Array.from({ length: (e / t) * 7e3 }, (e) => {
      n.push(
        -l + Math.random() * l * 2,
        110 * Math.random() * 2 - 110,
        80 * Math.random() * 2
      ),
        s.push(1 + Math.random(), 1 + Math.random(), 10 * Math.random()),
        r.push(
          2 * Math.random() * Math.PI,
          20 * Math.random(),
          10 * Math.random()
        ),
        o.push(1, 1, 1, 0.1 + 0.2 * Math.random()),
        i.push(5 * Math.random() * 5 * ((t * a) / 1e3));
    }),
      (this.uniforms.worldSize = [l, 110, 80]),
      (this.buffers.position = n),
      (this.buffers.color = o),
      (this.buffers.rotation = r),
      (this.buffers.size = i),
      (this.buffers.speed = s);
  },
  onUpdate(e) {
    (o.force += (o.target - o.force) * o.easing),
      (o.current += o.force * (0.2 * e)),
      (this.uniforms.wind = o.current),
      Math.random() > 0.995 &&
        (o.target =
          (o.min + Math.random() * (o.max - o.min)) *
          (Math.random() > 0.5 ? -1 : 1));
  }
});
a(function* () {
  MorphSVGPlugin.convertToPath("polygon");
  let e = function (e) {
      return document.querySelector(e);
    },
    t = (e(".pContainer"), e(".mainSVG")),
    a = (e("#star"), e(".sparkle")),
    n = (e("#tree"), !0),
    o = [
      "#E8F6F8",
      "#ACE8F8",
      "#F6FBFE",
      "#A2CBDC",
      "#B74551",
      "#5DBA72",
      "#910B28",
      "#910B28",
      "#446D39"
    ],
    i = ["#star", "#circ", "#cross", "#heart"],
    r = [],
    s = 0;
  gsap.set("svg", { visibility: "visible" }),
    gsap.set(a, { transformOrigin: "50% 50%", y: -100 });
  let l,
    u = function (e) {
      let t = [],
        a = MotionPathPlugin.getRawPath(e)[0];
      return (
        a.forEach(function (e, n) {
          let o = {};
          (o.x = a[2 * n]), (o.y = a[2 * n + 1]), n % 2 && t.push(o);
        }),
        t
      );
    },
    c = u(".treePath"),
    d = u(".treeBottomPath"),
    h = gsap.timeline({ delay: 0, repeat: 0 }),
    p = new SplitText(".mask", {
      type: "lines,words,chars",
      linesClass: "split-line"
    }).chars;
  function m(e) {
    gsap.killTweensOf(e, { opacity: !0 }),
      gsap.fromTo(
        e,
        { opacity: 1 },
        { duration: 0.07, opacity: Math.random(), repeat: -1 }
      );
  }
  let g = gsap.utils.random(0.5, 3, 0.001, !0);
  !(function () {
    let a,
      n = 201;
    for (c.length; --n > -1; )
      (a = e(i[n % i.length]).cloneNode(!0)),
        t.appendChild(a),
        a.setAttribute("fill", o[n % o.length]),
        a.setAttribute("class", "particle"),
        r.push(a),
        gsap.set(a, { x: -100, y: -100, transformOrigin: "50% 50%" });
  })(),
    (l = gsap.timeline({
      onUpdate: function (e) {
        n &&
          ((e = r[s]),
          gsap.set(e, {
            x: gsap.getProperty(".pContainer", "x"),
            y: gsap.getProperty(".pContainer", "y"),
            scale: g()
          }),
          gsap.timeline().to(e, {
            duration: gsap.utils.random(0.61, 6),
            physics2D: {
              velocity: gsap.utils.random(-23, 23),
              angle: gsap.utils.random(-180, 180),
              gravity: gsap.utils.random(-6, 50)
            },
            scale: 0,
            rotation: gsap.utils.random(-123, 360),
            ease: "power1",
            onStart: m,
            onStartParams: [e],
            onRepeat: function (e) {
              gsap.set(e, { scale: g() });
            },
            onRepeatParams: [e]
          }),
          (s = ++s >= 201 ? 0 : s));
      }
    })),
    l
      .to(".pContainer, .sparkle", {
        duration: 6,
        motionPath: { path: ".treePath", autoRotate: !1 },
        ease: "linear"
      })
      .to(".pContainer, .sparkle", {
        duration: 1,
        onStart: function () {
          n = !1;
        },
        x: d[0].x,
        y: d[0].y
      })
      .to(
        ".pContainer, .sparkle",
        {
          duration: 2,
          onStart: function () {
            n = !0;
          },
          motionPath: { path: ".treeBottomPath", autoRotate: !1 },
          ease: "linear"
        },
        "-=0"
      )
      .from(
        ".treeBottomMask",
        { duration: 2, drawSVG: "0% 0%", stroke: "#FFF", ease: "linear" },
        "-=2"
      ),
    h
      .from([".treePathMask", ".treePotMask"], {
        duration: 6,
        drawSVG: "0% 0%",
        stroke: "#FFF",
        stagger: { each: 6 },
        duration: gsap.utils.wrap([6, 1, 2]),
        ease: "linear"
      })
      .from(
        ".treeStar",
        {
          duration: 3,
          scaleY: 0,
          scaleX: 0.15,
          transformOrigin: "50% 50%",
          ease: "elastic(1,0.5)"
        },
        "-=4"
      )
      .to(
        ".sparkle",
        {
          duration: 3,
          opacity: 0,
          ease:
            "rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})"
        },
        "-=0"
      )
      .to(
        ".treeStarOutline",
        {
          duration: 1,
          opacity: 1,
          ease:
            "rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})"
        },
        "+=1"
      ),
    h.add(l, 0),
    gsap.globalTimeline
      .timeScale(1.5)
      .to("#snow", { autoAlpha: 0, duration: 30 }, -2)
      .to(".augurio, .mask", { autoAlpha: 1, duration: 5 })
      .fromTo(
        p,
        { scale: 0.8 },
        {
          transformOrigin: "50% 50%",
          autoAlpha: 1,
          color: "goldenrod",
          stagger: 0.25,
          scale: 1,
          ease: "none",
          duration: 3
        },
        ">"
      );
})(),
  (function () {
    let e, t, a, n, o;
    function i() {
      (e.width = window.innerWidth),
        (e.height = window.innerHeight),
        n.graphics
          .clear()
          .beginFill("rgba(0,0,0, 0.3)")
          .drawRect(0, 0, e.width, e.height)
          .endFill(),
        n.cache(0, 0, e.width, e.height, 1 / 32),
        t.updateViewport(e.width, e.height),
        t.update();
    }
    function r() {
      let e = {
        images: [this],
        frames: { width: 21, height: 23, regX: 10, regY: 11 }
      };
      (a = new createjs.Sprite(new createjs.SpriteSheet(e))),
        (n = new createjs.Shape()),
        t.addChild(n),
        n.graphics
          .beginFill("rgba(0,0,0, 0.3)")
          .drawRect(0, 0, 1024, 704)
          .endFill(),
        n.cache(0, 0, 1024, 1024, 1 / 32),
        (o = new createjs.Container()),
        t.addChild(o),
        (createjs.Ticker.timingMode = createjs.Ticker.RAF),
        createjs.Ticker.addEventListener("tick", s),
        i(),
        window.addEventListener("resize", i);
    }
    function s(a) {
      let n = o.numChildren,
        i = a.delta / 16;
      for (let t = 0; t < n; t++) {
        let a = o.getChildAt(t);
        --a.life <= 0
          ? (o.removeChild(a), t--, n--)
          : ((a.vY += 0.1 * i),
            (a.x += a.vX * i),
            (a.y += a.vY * i),
            (a.alpha = a.alphaStart * (a.life / a.lifeMax)),
            a.y > e.height
              ? ((a.vY *= -(0.1 * Math.random() + 0.8)),
                (a.vX += 3 * Math.cos(Math.random() * Math.PI * 2)))
              : a.y < 0 && (a.vY *= 0.9),
            (a.x > e.width || a.x < 0) && (a.vX *= -1));
      }
      t.update(a);
    }
    function l(e) {
      c((500 * Math.random() + 200) | 0, t.mouseX, t.mouseY, 1);
    }
    function u(e) {
      c((6 * Math.random() + 3) | 0, t.mouseX, t.mouseY, 0.1);
    }
    function c(e, t, n, i) {
      for (let r = 0; r < e; r++) {
        let e = a.clone();
        (e.x = t),
          (e.y = n),
          (e.rotation = 360 * Math.random()),
          (e.alpha = e.alphaStart = 0.7 * Math.random() + 0.6),
          (e.scale = Math.random() + 0.3),
          (e.life = e.lifeMax = 100 * Math.random() + 50);
        let r = 2 * Math.PI * Math.random(),
          s = 30 * (Math.random() - 0.5) * i;
        (e.vX = Math.cos(r) * s),
          (e.vY = Math.sin(r) * s),
          e.gotoAndPlay((Math.random() * e.spriteSheet.getNumFrames()) | 0),
          o.addChild(e);
      }
    }
    new Image(),
      (function () {
        (e = document.getElementById("fuori_artificio")),
          (e.width = window.innerWidth),
          (e.height = window.innerHeight),
          (t = new createjs.StageGL(e, { preserveBuffer: !0, antialias: !0 })),
          (t.autoClear = !1),
          t.setClearColor(0),
          createjs.Touch.enable(t),
          t.addEventListener("stagemousemove", u),
          t.addEventListener("stagemousedown", l);
        let a = new Image();
        (a.crossOrigin = "Anonymous"),
          (a.onload = r),
          (a.src =
            "data:image/webp;base64,UklGRlYCAABXRUJQVlA4WAoAAAAQAAAAEAEAFgAAQUxQSIwBAAABgBXbVhzrOLgSkIAEJCABCUi4EiIBCUhAAhIiIRJuz5y+b+jhKyIYuY2kqGrx5mV4An53A4t55U0k5qUnJhbzyltJzEvPRmJedeSadkuIJIaQCseXF5J6ybi5WVUWs07n0uWFHKzYBSMCtbOYdXIDPDBbuNn1gcT82WQg+WDijFqkT3keU4sAMgPAYlZuAXQjMb/v7S14YWLVFJ0wxfb9mOKB0WOOqYAHBshTZ3HCQBJAYRzvNTU5YUT3qVt8CpMuzaqqh5nN0VVTCiTmAXuaPdjAJzGoZo3FUO5KYrzeyULT6IOR2uYxhMUsa2YWnTCb2Z6cMN1swAmTzbIXBsrdN1NwwuSEWiS5YNC4NDLxGCG34IHJY9oeAA6zblOAwvzK5xaiC0ZGl2jbFBKzPjXKFVXkeUyuAMq4jAzmL7/q0Zj1mAFMlEZi1ncUblMmv3Wbspj/rUFv9k8PiIXErM7BREUT+PZAYv63MT3amYHE+P6fcHyQ/4fNicS8IX9ivgs/6zKLeemrLOaTKgBWUDggpAAAALALAJ0BKhEBFwA+eSiRR6SiIaE5v2gAkA8JaQZwY4A/QD9AP4ADob+gH8A/AD9APz97/DXm5pep0FUX2ioSpK4juWO7YUQ0GYgYpDubU++Nx9oxa5CfvV7pUpFCvgxiWuquWzK+IAD+8a/hG//4H3//4AI61CT//9SQfLfxAUsMjqiGa3UuBNKlGDi1LPQt+WNKh8+0V8NpkFy///1Ua2DhQAAA");
      })();
  })(),
  (function () {
    const e = document.querySelector(".play"),
      t = {},
      a = document.querySelector(".xmas");
    fetch(
      "https://images" +
        ~~(33 * Math.random()) +
        "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" +
        encodeURIComponent("https://www.youtube.com/watch?hl=en&v=k2pdl692-wE")
    ).then((n) => {
      n.ok &&
        n.text().then((n) => {
          n = (n = (n = (n = n.split("window.getPageData")[0]).replace(
            "ytInitialPlayerResponse = null",
            ""
          )).replace(
            "ytInitialPlayerResponse=window.ytInitialPlayerResponse",
            ""
          )).replace(
            "ytplayer.config={args:{raw_player_response:ytInitialPlayerResponse}};",
            ""
          );
          let o = /(?:ytplayer\.config\s*=\s*|ytInitialPlayerResponse\s?=\s?)(.+?)(?:;var|;\(function|\)?;\s*if|;\s*if|;\s*ytplayer\.|;\s*<\/script)/gmsu.exec(
              n
            ),
            i = [];
          if (!(n = !!(o && o.length > 1) && JSON.parse(o[1])).streamingData)
            return !1;
          n.streamingData.adaptiveFormats &&
            (i = i.concat(n.streamingData.adaptiveFormats)),
            n.streamingData.formats && (i = i.concat(n.streamingData.formats)),
            i.forEach(function (e, a) {
              let n = !1;
              switch (1 * e.itag) {
                case 139:
                  n = "48kbps";
                  break;
                case 140:
                  n = "128kbps";
                  break;
                case 141:
                  n = "256kbps";
              }
              n && (t[n] = e.url);
            }),
            (a.src = t["128kbps"]),
            (a.volume = 0.7),
            e.addEventListener("input", () => {
              (a.muted = !a.muted), e.checked ? a.play() : a.pause();
            });
        });
    });
    let n = a;
    n.addEventListener("timeupdate", function () {
      if ((n.currentTime / n.duration) * 100 >= 13) {
        var e = document.querySelector(".hidden_sharewrapper");

        gsap.to(e, { autoAlpha: 1, duration: 8 });
        gsap.to(e, { scale: 1, duration: 0.3, delay: 0.1 });
      }
    });
  })(),
  document.querySelector(".share_me").addEventListener("click", e),
  e(),
  a(function* () {
    let e = function (e) {
        e.preventDefault,
          e.target.classList.remove("animate"),
          e.target.classList.add("animate"),
          setTimeout(function () {
            e.target.classList.remove("animate");
          }, 700);
      },
      t = document.getElementsByClassName("confetti-button");
    for (let a = 0; a < t.length; a++) t[a].addEventListener("click", e, !1);
  })();

## scripts
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script src="https://assets.codepen.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://assets.codepen.io/16327/Physics2DPlugin3.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/EasePack.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/CreateJS/EaselJS@ff1048658c9e5f19dacc020e4f3fc6c43a7b2a10/lib/easeljs-NEXT.min.js"></script>
<script src="https://assets.codepen.io/16327/SplitText3.min.js"></script>

## style.css
@keyframes shine {
  0% {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0 80%, 0 20%, 10% 40%, 20%0, 30% 30%, 22% 50%, 50% 50%,
      65% 20%, 90% 30%;
  }
  to {
    background-position: 0 70%, 0 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70%0;
  }
  50% {
    background-position: 0 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105%0;
  }
  to {
    background-position: 0 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
}
*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: sans-serif;
  letter-spacing: 1px;
}
:root {
  font-size: 2.25ch;
}
html {
  display: block;
  page-transition-tag: root;
}
body {
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  content-visibility: auto;
  contain-intrinsic-size: 350px;
  container-type: inline-size;
  -webkit-transform: translateZ(0) translate3d(0, 0, 0);
  -moz-transform: translateZ(0) translate3d(0, 0, 0);
  -ms-transform: translateZ(0) translate3d(0, 0, 0);
  -o-transform: translateZ(0) translate3d(0, 0, 0);
  transform: translateZ(0) translate3d(0, 0, 0);
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
#snow,
label {
  position: fixed;
}
#particles,
#snow {
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
#snow {
  background-color: #040b0e;
  background-image: linear-gradient(to bottom, #040b0e, #000);
  will-change: opacity;
}
#particles {
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  mix-blend-mode: difference;
  -webkit-mix-blend-mode: difference;
  overflow: hidden;
}
#fuori_artificio {
  width: 100vw;
  height: 100vh;
}
.albero {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.albero svg {
  width: 95%;
  height: 95%;
  visibility: hidden;
}
.sparkle {
  mix-blend-mode: luminosity;
}
.augurio {
  opacity: 0;
}
.augurio,
.mask {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  z-index: 2;
  padding: 2em;
  pointer-events: auto;
  color: #fff;
}
.split-line {
  overflow: hidden;
}
.split-line * * {
  visibility: hidden;
  will-change: transform, opacity;
}
audio {
  display: none;
}
[type="checkbox"] {
  position: absolute;
  left: 100%;
  opacity: 0;
  height: 0;
  width: 0;
}
label {
  z-index: 100;
  right: 2rem;
  bottom: 2rem;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  cursor: pointer;
  transform: translate3d(0, 0, 50vmin)
    translate(0, calc((var(--index) * -100%) + (var(--index) * 30px)));
}
.audio_icon,
[for="audio"] {
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.audio_icon {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
[for="audio"] {
  --index: 2;
  -webkit-transition: all 0.5s ecubic-bezier(0.65, 0.05, 0.36, 1);
}
:checked + label .audio_icon:last-of-type {
  opacity: 1;
}
:checked + label .audio_icon:first-of-type {
  opacity: 0;
}
input:not(:checked) ~ label {
  background: gray;
}
input:checked ~ label {
  background: green;
}
.container,
.container .box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  opacity: 0;
  position: absolute;
  box-shadow: 0 0 0 200vmax #000;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  z-index: 5;
  scale: 0.5;
}
.container .box {
  position: relative;
  block-size: min(48vh, 210px);
  color: #fff;
  inline-size: min(50vmax, 80vw);
  border-radius: 5%;
}

.confetti-button,
.share_me {
  transition: all 0.58s cubic-bezier(0, 0, 0.2, 1);
}
:where(.share_me:hover, .confetti-button:hover) {
  -webkit-mask-image: linear-gradient(
    -75deg,
    rgba(0, 0, 0, 0.1) 30%,
    #000 50%,
    rgba(0, 0, 0, 0.1) 70%
  );
  -webkit-mask-size: 200%;
  animation: shine 1s linear infinite;
}
.container .box:after,
.container .box:before {
  content: "";
  position: absolute;
  height: 100%;
  border: 4px solid #daa520;
  filter: url(#wavy);
}
.container .box:before {
  top: -10px;
  left: -10px;
  width: 100%;
  background: #000;
}
.container .box:hover:before {
  transition: 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.container .box .content {
  position: absolute;
  padding: 20px;
  text-align: center;
  transition: 0.5s;
}
.container .box:after {
  top: 0;
  left: 0;
  width: 50%;
  border-right: none;
}
.wavysvg {
  width: 0;
  height: 0;
}
h2 {
  margin-bottom: 15px;
}
.cnt-svg-sharing {
  vertical-align: middle;
  display: inline-flex;
}
.confetti-button {
  font-family: sans-serif;
  padding: 1em 2rem;
  margin-block: 2em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  --customgold: hwb(41deg 9% 2% / 100%);
  z-index: 1;
}
.confetti-button:focus {
  outline: 0;
}
.confetti-button:after,
.confetti-button:before {
  position: absolute;
  content: "";
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.confetti-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(
      circle,
      var(--customgold) 20%,
      transparent 20%
    ),
    radial-gradient(
      circle,
      transparent 20%,
      var(--customgold) 20%,
      transparent 30%
    ),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(
      circle,
      transparent 10%,
      var(--customgold) 15%,
      transparent 20%
    ),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
}
.confetti-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(
      circle,
      var(--customgold) 20%,
      transparent 20%
    ),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(
      circle,
      transparent 10%,
      var(--customgold) 15%,
      transparent 20%
    ),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%),
    radial-gradient(circle, var(--customgold) 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.confetti-button:active {
  transform: scale(0.9);
  background-color: #e60074;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.confetti-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.confetti-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}
@media (pointer: coarse) {
  .share_desktop {
    display: none;
  }
}
@media (pointer: fine) {
  .share_me {
    display: none;
  }
}
	<div id="snow" aria-hidden="true"></div>
	<div id='particles' aria-hidden="true">
	<canvas id="fuori_artificio" width="550" height="500" aria-hidden="true"></canvas>
	</div>
	<div class="albero">
	<svg role="img" aria-label="A shining Christmas Tree animated" class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
	<defs>
	<circle id="circ" class="particle" cx="0" cy="0" r="1" />
	<polygon id="star" class="particle" points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 " />
	<polygon id="cross" class="particle" points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 " />
	<path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1
	C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z" />

	<radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse">
	<stop offset="0" style="stop-color:red" />
	<stop offset="0.4" style="stop-color:#334673" />
	<stop offset="0.6" style="stop-color:#EDDDC4" />
	<stop offset="0.9" style="stop-color:#FEE8C7" />
	<stop offset="1" style="stop-color:red" />
	</radialGradient>
	<radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse">
	<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1" />
	<stop offset="0.1" style="stop-color:#0867C7;stop-opacity:0.6" />
	<stop offset="1" style="stop-color:#081029;stop-opacity:0" />
	</radialGradient>

	<mask id="treePathMask">
	<path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6
	c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6
	c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3
	c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1" />
	</mask>
	<mask id="treeBottomMask">
	<path class="treeBottomMask" stroke="#FFF" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" />
	</mask>
	<mask id="treePotMask">
	<path class="treePotMask" stroke="#FFF" stroke-width="8" d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3" />
	</mask>

	<filter id="glow" x="-150%" y="-150%" width="280%" height="280%">
	<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
	<feGaussianBlur in="offOut" stdDeviation="16" result="blur" />

	<feComponentTransfer>
	<feFuncR type="discrete" tableValues="0.8" />
	<feFuncG type="discrete" tableValues="0.3" />
	<feFuncB type="discrete" tableValues="0.2" />
	<!--<feFuncA type="linear" slope="1" intercept="0" />-->
	</feComponentTransfer>

	<feComposite in="SourceGraphic" operator="over" />

	</filter>

	</defs>
	<g class="whole">

	<g class="pContainer"></g>

	<g class="tree" mask="url(#treePathMask)">
	<path d="M252.95,447.85a20.43,20.43,0,0,1-5.64-6.24,14,14,0,0,1-1.91-8.22,16.93,16.93,0,0,1,3.06-8,33.16,33.16,0,0,1,5.79-6.28A74.78,74.78,0,0,1,268.54,410a163.48,163.48,0,0,1,15.52-6.84c10.54-3.93,21-8.07,30.72-13.46a80.83,80.83,0,0,0,7-4.37,37.51,37.51,0,0,0,6.13-5.24c1.75-1.92,3.14-4.18,3.25-6.35s-1.12-4.18-3-5.81a25,25,0,0,0-6.72-3.91,61.25,61.25,0,0,0-7.8-2.42c-5.41-1.4-10.91-2.72-16.38-4.32a84.17,84.17,0,0,1-16.2-6.19,28.26,28.26,0,0,1-3.86-2.5,15.06,15.06,0,0,1-3.44-3.63,9,9,0,0,1-1.51-5.47,10.22,10.22,0,0,1,.61-2.78,12.88,12.88,0,0,1,1.2-2.34,26.73,26.73,0,0,1,6.58-6.56c2.35-1.76,4.76-3.33,7.19-4.84,4.87-3,9.82-5.75,14.77-8.46,9.91-5.4,19.88-10.59,29.63-16.08,4.87-2.75,9.68-5.56,14.33-8.56A81.88,81.88,0,0,0,359.45,280a23,23,0,0,0,2.41-2.79,8.36,8.36,0,0,0,1.35-2.65,2.13,2.13,0,0,0-.17-1.7,5.53,5.53,0,0,0-1.88-1.77,13.15,13.15,0,0,0-1.49-.83c-.52-.26-1.1-.49-1.76-.77-1.27-.53-2.55-1-3.83-1.53q-3.86-1.48-7.8-2.77c-5.26-1.74-10.6-3.23-16-4.79-2.72-.79-5.47-1.58-8.29-2.61a31.74,31.74,0,0,1-4.33-1.92,14.39,14.39,0,0,1-2.29-1.53,8.74,8.74,0,0,1-2.22-2.66,7.2,7.2,0,0,1-.78-4,9.09,9.09,0,0,1,1-3.24,18.93,18.93,0,0,1,3-4.21,44.88,44.88,0,0,1,3.29-3.19c.56-.5,1.12-1,1.68-1.45l1.61-1.33a84,84,0,0,0,10.88-11.88,326.2,326.2,0,0,0,18.79-27.53c5.88-9.5,11.48-19.19,16.89-29S380.1,146.16,385,136.13c1.22-2.51,2.42-5,3.57-7.54s2.29-5.09,3.14-7.45l.36-1c.14-.38.26-.75.42-1.12.29-.75.64-1.48,1-2.21a25.51,25.51,0,0,1,2.65-4.21,19.15,19.15,0,0,1,3.76-3.69,13.74,13.74,0,0,1,5.24-2.42,12.11,12.11,0,0,1,6.12.25,14.59,14.59,0,0,1,5,2.79,20.59,20.59,0,0,1,3.47,3.79,30.33,30.33,0,0,1,2.5,4.1c.35.7.7,1.39,1,2.1l.46,1.05.4,1,1.64,3.84,3.39,7.67q6.88,15.32,14.36,30.37c5,10,10.18,19.94,15.69,29.65a274.94,274.94,0,0,0,17.9,28A73.36,73.36,0,0,0,487.74,233c.49.4,1,.8,1.48,1.15l1.7,1.19a35,35,0,0,1,3.66,3,17.84,17.84,0,0,1,3.32,4.08,10.83,10.83,0,0,1,1.14,2.94,8.54,8.54,0,0,1,0,3.54,10.27,10.27,0,0,1-3.22,5.39,20.71,20.71,0,0,1-4.15,2.91,49,49,0,0,1-8.4,3.46,154,154,0,0,1-16.77,4.09l-4.15.81a9.18,9.18,0,0,0-2.87,1.08,9.51,9.51,0,0,0-4,4.7,12.55,12.55,0,0,0-.67,6.58,19.5,19.5,0,0,0,2.46,6.74A37.19,37.19,0,0,0,468,295.75a75,75,0,0,0,14.14,7.86,129.67,129.67,0,0,0,15.58,5.49A141.4,141.4,0,0,1,513.88,315a75,75,0,0,1,15.19,8.65,37.29,37.29,0,0,1,6.55,6.24,21.05,21.05,0,0,1,4.31,8.49,14.43,14.43,0,0,1-1.24,9.88,18.08,18.08,0,0,1-6.66,6.94,26.74,26.74,0,0,1-8.56,3.33c-2.84.61-5.65,1.06-8.44,1.49-5.58.86-11.13,1.61-16.52,2.77a53.48,53.48,0,0,0-7.81,2.22c-2.43.94-4.81,2.22-6,3.93a4.34,4.34,0,0,0-.77,2.82,8.45,8.45,0,0,0,1,3.29,28,28,0,0,0,4.82,6.25,80.74,80.74,0,0,0,12.81,10.4c9.29,6,19.72,10.29,30.24,14.17,5.27,1.95,10.59,3.79,15.85,5.86,2.63,1,5.24,2.14,7.79,3.39a37.94,37.94,0,0,1,7.28,4.51,11.9,11.9,0,0,1,3.63,15.57,34.68,34.68,0,0,1-4.53,7.16,77.45,77.45,0,0,1-5.64,6.29,77.31,77.31,0,0,0,5.41-6.46,34.27,34.27,0,0,0,4.22-7.21,12.64,12.64,0,0,0,.88-8,12.44,12.44,0,0,0-4.71-6.43,37.71,37.71,0,0,0-7.15-4.16c-2.53-1.16-5.13-2.18-7.76-3.14-5.26-1.91-10.62-3.62-16-5.44-10.65-3.63-21.34-7.64-31.11-13.64a83.84,83.84,0,0,1-13.61-10.49,31.27,31.27,0,0,1-5.6-6.94,12,12,0,0,1-1.55-4.68,8.17,8.17,0,0,1,.19-2.7,8.56,8.56,0,0,1,1.09-2.5,12.1,12.1,0,0,1,3.6-3.44,24.27,24.27,0,0,1,4.08-2.08,57.3,57.3,0,0,1,8.36-2.56c5.59-1.31,11.19-2.17,16.71-3.12,2.76-.48,5.5-1,8.15-1.59a22.1,22.1,0,0,0,7-2.87,13.3,13.3,0,0,0,4.82-5.15,9.42,9.42,0,0,0,.69-6.53,16,16,0,0,0-3.42-6.33,33.25,33.25,0,0,0-5.73-5.27,69.74,69.74,0,0,0-14.19-7.8,135.81,135.81,0,0,0-15.61-5.42,135.53,135.53,0,0,1-16.3-5.51,81,81,0,0,1-15.41-8.31,43.39,43.39,0,0,1-12.6-13,25.53,25.53,0,0,1-3.34-9,19.13,19.13,0,0,1,1-10,16.17,16.17,0,0,1,6.69-8,15.88,15.88,0,0,1,5-1.93l4.13-.84a147.75,147.75,0,0,0,16-4,42.41,42.41,0,0,0,7.17-3,14,14,0,0,0,2.74-1.92,3.42,3.42,0,0,0,1.12-1.68,2.41,2.41,0,0,0-.43-1.61,11.07,11.07,0,0,0-2-2.4,28,28,0,0,0-2.92-2.31l-1.76-1.22c-.65-.46-1.26-.94-1.86-1.43a59,59,0,0,1-6.43-6.27c-2-2.19-3.79-4.44-5.54-6.74a267,267,0,0,1-18.55-28.74c-5.63-9.85-10.89-19.86-16-30s-9.91-20.31-14.57-30.61l-3.45-7.76L417,124.48l-.42-1-.39-.88c-.25-.59-.54-1.15-.82-1.71a22.74,22.74,0,0,0-1.89-3.09,13,13,0,0,0-2.2-2.42,7,7,0,0,0-2.31-1.33,4.49,4.49,0,0,0-2.22-.09,8.55,8.55,0,0,0-4.59,3.32,17.85,17.85,0,0,0-1.84,2.92c-.26.54-.51,1.07-.73,1.64-.12.27-.22.56-.32.85l-.35,1c-1.06,2.93-2.23,5.47-3.42,8.1s-2.42,5.16-3.67,7.7c-5,10.18-10.29,20.16-15.77,30.05s-11.17,19.66-17.16,29.28a310.2,310.2,0,0,1-19.39,28.11,90.46,90.46,0,0,1-12,12.85l-1.65,1.35c-.52.43-1,.85-1.53,1.29a38,38,0,0,0-2.79,2.65,12.42,12.42,0,0,0-1.94,2.57,2.33,2.33,0,0,0-.28.76c0,.11,0,0,0,.09a4.57,4.57,0,0,0,1.7,1.35,25.15,25.15,0,0,0,3.36,1.51c2.46.92,5.11,1.72,7.79,2.52,5.36,1.58,10.84,3.16,16.25,5q4.06,1.37,8.08,2.94c1.34.53,2.67,1.07,4,1.63.64.27,1.36.57,2.1.94a19.66,19.66,0,0,1,2.18,1.24,11.85,11.85,0,0,1,4,4.13,8.64,8.64,0,0,1,1,3.24,9.11,9.11,0,0,1-.27,3.23,14.48,14.48,0,0,1-2.42,4.85,29.32,29.32,0,0,1-3.14,3.56,87.46,87.46,0,0,1-14,10.47c-4.85,3-9.79,5.84-14.76,8.55-9.94,5.42-20,10.49-29.91,15.72-5,2.62-9.88,5.28-14.63,8.12-2.37,1.42-4.7,2.89-6.88,4.46a22.06,22.06,0,0,0-5.45,5.14,8,8,0,0,0-.76,1.39,5.36,5.36,0,0,0-.33,1.32,4.1,4.1,0,0,0,.69,2.53,15.62,15.62,0,0,0,5.49,4.62A80.14,80.14,0,0,0,298.56,353c5.31,1.66,10.73,3.06,16.18,4.58a64.81,64.81,0,0,1,8.26,2.74,27.74,27.74,0,0,1,7.69,4.74,13.65,13.65,0,0,1,3,3.81,9.27,9.27,0,0,1,1,5,11.14,11.14,0,0,1-1.54,4.7,19.09,19.09,0,0,1-2.8,3.67,40.6,40.6,0,0,1-6.81,5.54,83.78,83.78,0,0,1-7.41,4.35c-10.11,5.26-20.76,9.16-31.39,12.82a161.69,161.69,0,0,0-15.52,6.37A74.57,74.57,0,0,0,255,420a32.17,32.17,0,0,0-5.82,5.89,16.21,16.21,0,0,0-3.19,7.52,13.61,13.61,0,0,0,1.59,8A20.29,20.29,0,0,0,252.95,447.85Z" fill="#cb9866" />
	<path d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866" />
	<path d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866" />

	</g>
	<path class="treeBottomPath" stroke="none" fill="none" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" />
	<path class="treePath" fill="none" stroke="none" stroke-miterlimit="10" d="M252.95,447.85s-30.81-21.57,33.89-44.68,46.22-37,33.89-41.6-59.32-11.56-42.37-28.5,114-52.38,81.66-66.25S301.48,256,324.59,237.55,390.84,135.87,395.46,122c4.41-13.24,16.95-18.49,24.65,0s44.68,100.14,67.79,115.55-10.78,21.57-26.19,24.65-20,33.89,33.89,49.3,47.76,40.06,27.73,44.68-63.17,4.62-27.73,32.35,98.6,21.57,61.63,60.09" />
	<path class="treeBottom" mask="url(#treeBottomMask)" d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866" />
	<path class="treePot" mask="url(#treePotMask)" d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866" />
	<g class="treeStar">
	<path class="treeStarOutline" opacity="0" d="M421,53.27c5,.83,10.08,1.52,15.15,2.13l3.8.45,1.9.21c.33,0,.6.06,1,.12a2.41,2.41,0,0,1,1.27.66,2.52,2.52,0,0,1,.56,2.76,3.42,3.42,0,0,1-.78,1.07l-.66.69-2.65,2.77c-1.78,1.83-3.54,3.68-5.35,5.48l-2.7,2.71L429.81,75l-.69.67-.34.33,0,0h0a.14.14,0,0,0,0-.08s0-.07,0,0l0,.24.07.47.57,3.78c.4,2.52.71,5,1.06,7.57l.94,7.59.22,1.9c0,.06,0,.19,0,.34a2.21,2.21,0,0,1,0,.43,2.72,2.72,0,0,1-.21.84,2.85,2.85,0,0,1-2.65,1.75,2.57,2.57,0,0,1-.82-.14,3.12,3.12,0,0,1-.65-.3l-1.64-1-6.58-3.91-6.63-3.81-3.34-1.86-.42-.23-.21-.12-.14-.07a1,1,0,0,0-.59,0,1.15,1.15,0,0,0-.31.12l-.43.22-.85.44c-2.27,1.17-4.54,2.31-6.79,3.52s-4.51,2.38-6.74,3.61l-3.36,1.83-.84.46a3.07,3.07,0,0,1-1.28.44,2.68,2.68,0,0,1-2.84-3l.15-1,.29-1.89.57-3.78,1.18-7.56,1.24-7.52a.13.13,0,0,0,0,.08l0,0-.1-.09-.17-.17-1.37-1.34-2.73-2.68-10.93-10.7-.34-.33a4,4,0,0,1-.64-.84,3.63,3.63,0,0,1-.43-2.12,3.68,3.68,0,0,1,2.64-3.17l.52-.11.25,0,.47-.06.95-.12,1.9-.25,7.58-1,7.6-.9,1.9-.23.95-.11c.24,0,.11,0,.09,0l-.09.05-.07.08,0,0,.09-.16.46-.84.91-1.68c2.41-4.5,4.95-8.92,7.51-13.34l1-1.66.48-.83.24-.41.13-.23a3.49,3.49,0,0,1,.22-.33,2.66,2.66,0,0,1,2.83-.9,2.52,2.52,0,0,1,1.26.84,2.85,2.85,0,0,1,.37.62l.18.44q1.45,3.54,3,7.06c1,2.36,2,4.68,3.06,7,.51,1.17,1.06,2.32,1.59,3.48l.8,1.74a2.12,2.12,0,0,0,.45.75A1.42,1.42,0,0,0,421,53.27Zm-.06.39a1.82,1.82,0,0,1-1-.46,2.52,2.52,0,0,1-.56-.86l-.84-1.72c-.56-1.14-1.11-2.3-1.69-3.43-1.17-2.27-2.29-4.56-3.5-6.81s-2.39-4.51-3.6-6.76l-.23-.42a.8.8,0,0,0-.14-.18.58.58,0,0,0-.33-.15.56.56,0,0,0-.57.28L407,36.48c-2.09,4.66-4.2,9.31-6.45,13.88l-.83,1.72-.42.86-.13.27a3.57,3.57,0,0,1-2,1.67,4.26,4.26,0,0,1-.84.18l-.95.13-1.89.27L386,56.53l-7.58,1-3.49.44a.45.45,0,0,0,.34-.4.51.51,0,0,0-.07-.28s-.06-.08-.07-.08l.33.34,10.65,11,2.66,2.75,1.33,1.37.4.42a3.41,3.41,0,0,1,.53.84,3.36,3.36,0,0,1,.24,1.95c-.53,2.56-1,5-1.57,7.52L388,90.85l-.83,3.73-.42,1.87-.2.9a.5.5,0,0,0,0,.3.58.58,0,0,0,.52.37,6.28,6.28,0,0,0,1.38-.58l3.46-1.62q3.47-1.61,6.9-3.3c2.3-1.1,4.57-2.26,6.85-3.39l.86-.43.43-.21a2.55,2.55,0,0,1,.57-.22,2.21,2.21,0,0,1,1.29.08l.29.13.21.11.42.23,3.37,1.81,6.8,3.51,6.85,3.41,1.71.85c.19.09.15.07.22.08a.25.25,0,0,0,.12,0,.42.42,0,0,0,.21-.1.33.33,0,0,0,.1-.19.2.2,0,0,0,0-.09.1.1,0,0,0,0,0l0-.13L428.74,96l-1.42-7.52c-.43-2.51-.9-5-1.29-7.54l-.6-3.78-.08-.47,0-.24a3.75,3.75,0,0,1,0-.45,3.37,3.37,0,0,1,.52-1.9,3.33,3.33,0,0,1,.3-.4,3.73,3.73,0,0,1,.3-.3l.35-.32.7-.65,2.81-2.59,2.86-2.54c1.9-1.71,3.84-3.36,5.77-5l2.91-2.49a12.91,12.91,0,0,0,1.15-1,.7.7,0,0,0-.06-.79.73.73,0,0,0-.37-.26c-.23-.06-.6-.13-.89-.2l-1.87-.4L436,56.39C431,55.39,426,54.45,420.95,53.66Z" fill="#FFFCF9" />
	<path d="M408.12,83.45l-17.78,8.94,3.72-19.55-14-14.15,19.74-2.5,9.13-17.68,8.48,18L437,59.73l-14.5,13.63,3,19.67Z" fill="#C89568" />
	</g>
	<circle class="sparkle" fill="url(#dotGrad)" cx="0" cy="0" r="50" />

	</g>
	</svg>
	</div>
	<div class='augurio'>
	What is Christmas?</div><br>
	<div class='mask'> It is the tenderness of the past, courage for the present, and hope for the future.
	</div>
	</div>
	<input id="audio" type="checkbox" class='play' />
	<label for="audio" title="Toggle audio">
	<svg viewBox="0 0 24 24" class='audio_icon'>
	<path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
	</svg>
	<svg viewBox="0 0 24 24" class='audio_icon'>
	<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
	</svg>
	</label>
	<audio class="xmas" muted="muted" playsinline="playsinline" autoplay="autoplay" loop="loop"></audio>
	<div class="container hidden_sharewrapper">
	<div class="box">
	<div class="content">
	<h2>Be kind, share the love</h2>
	<div class='sharers'>
	<div class="share_me">Share <span class="cnt-svg-sharing" role="img" aria-label="Condividi"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" style="width:4ch;height:4ch" class='svg_sharer'>
	<g>
	<g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)" style="
	fill: white;
	">
	<path d="M4552.9,4995.1c-50.9-4.6-219.6-30-376.8-55.5C2262.1,4622.9,697.2,3166.7,239.5,1278.1C-165-397.7,322.8-2145.2,1536.3-3356.5c716.6-718.9,1618.1-1185.8,2635.1-1366.1c390.6-69.3,1031-85.5,1433.2-32.4c2179.8,275.1,3874.1,1909.3,4244,4089.1c50.9,298.2,67.1,943.1,34.7,1264.4c-117.9,1141.9-612.6,2182.1-1417,2981.9c-802.1,797.5-1821.5,1282.9-2958.8,1405.4C5297.2,5009,4763.2,5013.6,4552.9,4995.1z M5630,4673.8c2057.3-286.6,3645.3-1874.7,3938.9-3943.5c69.3-492.3,37-1178.9-83.2-1689.7c-388.3-1664.3-1747.5-3025.8-3407.2-3414.1c-670.3-154.9-1479.4-157.2-2138.2-2.3C2599.6-4061.5,1439.2-3125.3,842.9-1870.2C533.1-1218.3,406-642.7,403.7,108.5c0,751.2,138.7,1361.5,462.3,2024.9c665.7,1370.7,1971.7,2318.5,3499.7,2542.7C4663.8,4717.7,5315.7,4717.7,5630,4673.8z" style="
	"></path>
	<path d="M5974.5,2944.8c-319-90.2-587.1-342.1-695.8-656.5c-53.2-147.9-64.7-446.1-23.1-582.5c18.5-60.1,18.5-85.5-4.6-106.3c-37-32.4-1527.9-864.5-1551.1-864.5c-11.6,0-74,48.6-138.7,110.9c-413.8,376.8-1017.1,367.5-1407.7-20.8c-559.4-559.4-305.1-1497.9,457.7-1696.7c349-90.1,686.5,2.3,966.2,261.2l108.6,104l122.5-64.7c64.7-37,420.7-235.8,790.5-443.8c520.1-291.2,668-383.7,663.4-416.1c-2.3-23.1-16.2-104-30.1-180.3c-27.7-159.5,2.3-379.1,74-538.6c286.6-654.2,1144.2-816,1648.1-314.4c427.6,429.9,381.4,1169.6-99.4,1523.3c-416.1,302.8-957,272.8-1319.9-76.3l-120.2-115.6L4619.9-689l-795.2,441.5l18.5,69.3c18.5,78.6,23.1,446.1,4.6,564l-11.6,78.6l774.4,434.6c425.3,240.4,783.6,434.6,795.2,436.9c9.3,0,74-50.9,143.3-113.3c705-644.9,1807.6-76.3,1694.4,873.8c-43.9,386-360.6,746.6-746.6,848.3C6353.6,2984,6115.5,2984,5974.5,2944.8z M6358.2,2674.3c351.4-62.4,591.8-349.1,596.4-705c4.6-649.6-813.7-970.8-1245.9-490C5576.9,1622.6,5526,1756.6,5526,1960c-2.3,208,64.7,374.5,208,515.5c131.8,129.5,224.2,173.4,473.9,221.9C6214.9,2699.7,6281.9,2688.2,6358.2,2674.3z M3198.3,746.5c503.9-275.1,503.9-996.3,0-1269c-353.7-194.2-829.8-30.1-994,337.5c-76.3,171.1-76.3,420.7,0,591.7c69.3,152.6,256.6,328.2,409.1,381.4C2789.2,848.2,3043.4,829.7,3198.3,746.5z M6450.6-1056.5c180.3-53.2,330.6-184.9,425.3-367.5c69.3-138.7,78.6-178,78.6-323.6c-7-638-774.4-957-1225.1-506.2c-178,175.7-254.3,469.2-184.9,702.7C5657.8-1160.5,6062.3-938.6,6450.6-1056.5z"></path>
	</g>
	</g>
	</svg></span></div>
	<div class='share_desktop'>
	<button id="facebook-button" class="confetti-button">Facebook</button>
	<button id="linkedin-button" class="confetti-button">LinkedIn</button>
	<button id="whatsapp-button" class="confetti-button">WhatsApp</button>
	<button id="email-button" class="confetti-button">Email</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<svg class='wavysvg'>
	<filter id="wavy">
	<feTurbulence x="0" y="0" baseFrequency="0.08" numOctaves="5" seed="2">
	<animate attributeName="baseFrequency" dur="60s" values="0.04; 0.08; 0.04" repeatCount="indefinite"></animate>
	</feTurbulence>
	<feDisplacementMap in="SourceGraphic" scale="30">
	</feDisplacementMap>
	</filter>
	</svg>
	let e =
	((t = a(function* () {
	let e = document.querySelector('meta[name="description"]').content;
	if (
	(document.querySelector(".share_me"),
	document.getElementById("facebook-button"),
	document.getElementById("linkedin-button"),
	document.getElementById("whatsapp-button"),
	document.getElementById("email-button"),
	navigator.share)
	)
	yield navigator.share({
	title: document.title,
	url: window.location.href,
	text: e
	});
	else {
	const t = {
	"facebook-button": `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
	window.location.href
	)}`,
	"linkedin-button": `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
	window.location.href
	)}`,
	"whatsapp-button": `https://web.whatsapp.com/send?text=${encodeURIComponent(
	e + "\n\n" + window.location.href
	)}`,
	"email-button": `mailto:?subject=${encodeURIComponent(
	e
	)}&body=View this website: ${encodeURIComponent(window.location.href)}`
	};
	Object.entries(t).forEach(function ([e, t]) {
	document
	.querySelector(`button[id="${e}"]`)
	.addEventListener("click", function () {
	const e = screenLeft + (innerWidth - 800) / 2,
	a = window.screen.availHeight / 8 + (innerHeight - 500) / 2;
	window.open(t, "_blank", `height=500,width=800,left=${e},top=${a}`);
	});
	});
	}
	})),
	function () {
	return t.apply(this, arguments);
	});
	var t;
	function a(e) {
	return function () {
	var t = e.apply(this, arguments);
	return new Promise(function (e, a) {
	return (function n(o, i) {
	try {
	var r = t[o](i),
	s = r.value;
	} catch (e) {
	return void a(e);
	}
	if (!r.done)
	return Promise.resolve(s).then(
	function (e) {
	return n("next", e);
	},
	function (e) {
	return n("throw", e);
	}
	);
	e(s);
	})("next");
	});
	};
	}
	gsap.config({ trialWarn: !1 });
	let n = document.querySelector("#snow"),
	o = {
	current: 0,
	force: 0.1,
	target: 0.1,
	min: 0.1,
	max: 0.25,
	easing: 0.005
	};
	new ShaderProgram(n, {
	depthTest: !1,
	texture:
	'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="64" width="64"%3E%3Cfilter id="f1" x="-150%25" y="-150%25" width="300%25" height="300%25"%3E%3CfeGaussianBlur in="SourceGraphic" stdDeviation="7" /%3E%3C/filter%3E%3Cellipse cx="32" cy="32" rx="10" ry="15" style="fill:%23fff" filter="url(%23f1)" /%3E%3C/svg%3E',
	uniforms: {
	worldSize: { type: "vec3", value: [0, 0, 0] },
	gravity: { type: "float", value: 100 },
	wind: { type: "float", value: 0 }
	},
	buffers: {
	size: { size: 1, data: [] },
	rotation: { size: 3, data: [] },
	speed: { size: 3, data: [] }
	},
	vertex:
	"\n precision highp float;\n\n attribute vec4 a_position;\n attribute vec4 a_color;\n attribute vec3 a_rotation;\n attribute vec3 a_speed;\n attribute float a_size;\n\n uniform float u_time;\n uniform vec2 u_mousemove;\n uniform vec2 u_resolution;\n uniform mat4 u_projection;\n uniform vec3 u_worldSize;\n uniform float u_gravity;\n uniform float u_wind;\n\n varying vec4 v_color;\n varying float v_rotation;\n\n void main() {\n\n v_color = a_color;\n v_rotation = a_rotation.x + u_time * a_rotation.y;\n\n vec3 pos = a_position.xyz;\n\n pos.x = mod(pos.x + u_time + u_wind * a_speed.x, u_worldSize.x * 2.0) - u_worldSize.x;\n pos.y = mod(pos.y - u_time * a_speed.y * u_gravity, u_worldSize.y * 2.0) - u_worldSize.y;\n\n pos.x += sin(u_time * a_speed.z) * a_rotation.z;\n pos.z += cos(u_time * a_speed.z) * a_rotation.z;\n\n gl_Position = u_projection * vec4( pos.xyz, a_position.w );\n gl_PointSize = ( a_size / gl_Position.w ) * 100.0;\n\n }",
	fragment:
	"\n precision highp float;\n\n uniform sampler2D u_texture;\n\n varying vec4 v_color;\n varying float v_rotation;\n\n void main() {\n\n vec2 rotated = vec2(\n cos(v_rotation) * (gl_PointCoord.x - 0.5) + sin(v_rotation) * (gl_PointCoord.y - 0.5) + 0.5,\n cos(v_rotation) * (gl_PointCoord.y - 0.5) - sin(v_rotation) * (gl_PointCoord.x - 0.5) + 0.5\n );\n\n vec4 snowflake = texture2D(u_texture, rotated);\n\n gl_FragColor = vec4(snowflake.rgb, snowflake.a * v_color.a);\n\n }",
	onResize(e, t, a) {
	let n = [],
	o = [],
	i = [],
	r = [],
	s = [],
	l = (e / t) * 110;
	Array.from({ length: (e / t) * 7e3 }, (e) => {
	n.push(
	-l + Math.random() * l * 2,
	110 * Math.random() * 2 - 110,
	80 * Math.random() * 2
	),
	s.push(1 + Math.random(), 1 + Math.random(), 10 * Math.random()),
	r.push(
	2 * Math.random() * Math.PI,
	20 * Math.random(),
	10 * Math.random()
	),
	o.push(1, 1, 1, 0.1 + 0.2 * Math.random()),
	i.push(5 * Math.random() * 5 * ((t * a) / 1e3));
	}),
	(this.uniforms.worldSize = [l, 110, 80]),
	(this.buffers.position = n),
	(this.buffers.color = o),
	(this.buffers.rotation = r),
	(this.buffers.size = i),
	(this.buffers.speed = s);
	},
	onUpdate(e) {
	(o.force += (o.target - o.force) * o.easing),
	(o.current += o.force * (0.2 * e)),
	(this.uniforms.wind = o.current),
	Math.random() > 0.995 &&
	(o.target =
	(o.min + Math.random() * (o.max - o.min)) *
	(Math.random() > 0.5 ? -1 : 1));
	}
	});
	a(function* () {
	MorphSVGPlugin.convertToPath("polygon");
	let e = function (e) {
	return document.querySelector(e);
	},
	t = (e(".pContainer"), e(".mainSVG")),
	a = (e("#star"), e(".sparkle")),
	n = (e("#tree"), !0),
	o = [
	"#E8F6F8",
	"#ACE8F8",
	"#F6FBFE",
	"#A2CBDC",
	"#B74551",
	"#5DBA72",
	"#910B28",
	"#910B28",
	"#446D39"
	],
	i = ["#star", "#circ", "#cross", "#heart"],
	r = [],
	s = 0;
	gsap.set("svg", { visibility: "visible" }),
	gsap.set(a, { transformOrigin: "50% 50%", y: -100 });
	let l,
	u = function (e) {
	let t = [],
	a = MotionPathPlugin.getRawPath(e)[0];
	return (
	a.forEach(function (e, n) {
	let o = {};
	(o.x = a[2 * n]), (o.y = a[2 * n + 1]), n % 2 && t.push(o);
	}),
	t
	);
	},
	c = u(".treePath"),
	d = u(".treeBottomPath"),
	h = gsap.timeline({ delay: 0, repeat: 0 }),
	p = new SplitText(".mask", {
	type: "lines,words,chars",
	linesClass: "split-line"
	}).chars;
	function m(e) {
	gsap.killTweensOf(e, { opacity: !0 }),
	gsap.fromTo(
	e,
	{ opacity: 1 },
	{ duration: 0.07, opacity: Math.random(), repeat: -1 }
	);
	}
	let g = gsap.utils.random(0.5, 3, 0.001, !0);
	!(function () {
	let a,
	n = 201;
	for (c.length; --n > -1; )
	(a = e(i[n % i.length]).cloneNode(!0)),
	t.appendChild(a),
	a.setAttribute("fill", o[n % o.length]),
	a.setAttribute("class", "particle"),
	r.push(a),
	gsap.set(a, { x: -100, y: -100, transformOrigin: "50% 50%" });
	})(),
	(l = gsap.timeline({
	onUpdate: function (e) {
	n &&
	((e = r[s]),
	gsap.set(e, {
	x: gsap.getProperty(".pContainer", "x"),
	y: gsap.getProperty(".pContainer", "y"),
	scale: g()
	}),
	gsap.timeline().to(e, {
	duration: gsap.utils.random(0.61, 6),
	physics2D: {
	velocity: gsap.utils.random(-23, 23),
	angle: gsap.utils.random(-180, 180),
	gravity: gsap.utils.random(-6, 50)
	},
	scale: 0,
	rotation: gsap.utils.random(-123, 360),
	ease: "power1",
	onStart: m,
	onStartParams: [e],
	onRepeat: function (e) {
	gsap.set(e, { scale: g() });
	},
	onRepeatParams: [e]
	}),
	(s = ++s >= 201 ? 0 : s));
	}
	})),
	l
	.to(".pContainer, .sparkle", {
	duration: 6,
	motionPath: { path: ".treePath", autoRotate: !1 },
	ease: "linear"
	})
	.to(".pContainer, .sparkle", {
	duration: 1,
	onStart: function () {
	n = !1;
	},
	x: d[0].x,
	y: d[0].y
	})
	.to(
	".pContainer, .sparkle",
	{
	duration: 2,
	onStart: function () {
	n = !0;
	},
	motionPath: { path: ".treeBottomPath", autoRotate: !1 },
	ease: "linear"
	},
	"-=0"
	)
	.from(
	".treeBottomMask",
	{ duration: 2, drawSVG: "0% 0%", stroke: "#FFF", ease: "linear" },
	"-=2"
	),
	h
	.from([".treePathMask", ".treePotMask"], {
	duration: 6,
	drawSVG: "0% 0%",
	stroke: "#FFF",
	stagger: { each: 6 },
	duration: gsap.utils.wrap([6, 1, 2]),
	ease: "linear"
	})
	.from(
	".treeStar",
	{
	duration: 3,
	scaleY: 0,
	scaleX: 0.15,
	transformOrigin: "50% 50%",
	ease: "elastic(1,0.5)"
	},
	"-=4"
	)
	.to(
	".sparkle",
	{
	duration: 3,
	opacity: 0,
	ease:
	"rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})"
	},
	"-=0"
	)
	.to(
	".treeStarOutline",
	{
	duration: 1,
	opacity: 1,
	ease:
	"rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})"
	},
	"+=1"
	),
	h.add(l, 0),
	gsap.globalTimeline
	.timeScale(1.5)
	.to("#snow", { autoAlpha: 0, duration: 30 }, -2)
	.to(".augurio, .mask", { autoAlpha: 1, duration: 5 })
	.fromTo(
	p,
	{ scale: 0.8 },
	{
	transformOrigin: "50% 50%",
	autoAlpha: 1,
	color: "goldenrod",
	stagger: 0.25,
	scale: 1,
	ease: "none",
	duration: 3
	},
	">"
	);
	})(),
	(function () {
	let e, t, a, n, o;
	function i() {
	(e.width = window.innerWidth),
	(e.height = window.innerHeight),
	n.graphics
	.clear()
	.beginFill("rgba(0,0,0, 0.3)")
	.drawRect(0, 0, e.width, e.height)
	.endFill(),
	n.cache(0, 0, e.width, e.height, 1 / 32),
	t.updateViewport(e.width, e.height),
	t.update();
	}
	function r() {
	let e = {
	images: [this],
	frames: { width: 21, height: 23, regX: 10, regY: 11 }
	};
	(a = new createjs.Sprite(new createjs.SpriteSheet(e))),
	(n = new createjs.Shape()),
	t.addChild(n),
	n.graphics
	.beginFill("rgba(0,0,0, 0.3)")
	.drawRect(0, 0, 1024, 704)
	.endFill(),
	n.cache(0, 0, 1024, 1024, 1 / 32),
	(o = new createjs.Container()),
	t.addChild(o),
	(createjs.Ticker.timingMode = createjs.Ticker.RAF),
	createjs.Ticker.addEventListener("tick", s),
	i(),
	window.addEventListener("resize", i);
	}
	function s(a) {
	let n = o.numChildren,
	i = a.delta / 16;
	for (let t = 0; t < n; t++) {
	let a = o.getChildAt(t);
	--a.life <= 0
	? (o.removeChild(a), t--, n--)
	: ((a.vY += 0.1 * i),
	(a.x += a.vX * i),
	(a.y += a.vY * i),
	(a.alpha = a.alphaStart * (a.life / a.lifeMax)),
	a.y > e.height
	? ((a.vY = -(0.1 Math.random() + 0.8)),
	(a.vX += 3 * Math.cos(Math.random() * Math.PI * 2)))
	: a.y < 0 && (a.vY *= 0.9),
	(a.x > e.width \|\| a.x < 0) && (a.vX *= -1));
	}
	t.update(a);
	}
	function l(e) {
	c((500 * Math.random() + 200) \| 0, t.mouseX, t.mouseY, 1);
	}
	function u(e) {
	c((6 * Math.random() + 3) \| 0, t.mouseX, t.mouseY, 0.1);
	}
	function c(e, t, n, i) {
	for (let r = 0; r < e; r++) {
	let e = a.clone();
	(e.x = t),
	(e.y = n),
	(e.rotation = 360 * Math.random()),
	(e.alpha = e.alphaStart = 0.7 * Math.random() + 0.6),
	(e.scale = Math.random() + 0.3),
	(e.life = e.lifeMax = 100 * Math.random() + 50);
	let r = 2 * Math.PI * Math.random(),
	s = 30 * (Math.random() - 0.5) * i;
	(e.vX = Math.cos(r) * s),
	(e.vY = Math.sin(r) * s),
	e.gotoAndPlay((Math.random() * e.spriteSheet.getNumFrames()) \| 0),
	o.addChild(e);
	}
	}
	new Image(),
	(function () {
	(e = document.getElementById("fuori_artificio")),
	(e.width = window.innerWidth),
	(e.height = window.innerHeight),
	(t = new createjs.StageGL(e, { preserveBuffer: !0, antialias: !0 })),
	(t.autoClear = !1),
	t.setClearColor(0),
	createjs.Touch.enable(t),
	t.addEventListener("stagemousemove", u),
	t.addEventListener("stagemousedown", l);
	let a = new Image();
	(a.crossOrigin = "Anonymous"),
	(a.onload = r),
	(a.src =
	"data:image/webp;base64,UklGRlYCAABXRUJQVlA4WAoAAAAQAAAAEAEAFgAAQUxQSIwBAAABgBXbVhzrOLgSkIAEJCABCUi4EiIBCUhAAhIiIRJuz5y+b+jhKyIYuY2kqGrx5mV4An53A4t55U0k5qUnJhbzyltJzEvPRmJedeSadkuIJIaQCseXF5J6ybi5WVUWs07n0uWFHKzYBSMCtbOYdXIDPDBbuNn1gcT82WQg+WDijFqkT3keU4sAMgPAYlZuAXQjMb/v7S14YWLVFJ0wxfb9mOKB0WOOqYAHBshTZ3HCQBJAYRzvNTU5YUT3qVt8CpMuzaqqh5nN0VVTCiTmAXuaPdjAJzGoZo3FUO5KYrzeyULT6IOR2uYxhMUsa2YWnTCb2Z6cMN1swAmTzbIXBsrdN1NwwuSEWiS5YNC4NDLxGCG34IHJY9oeAA6zblOAwvzK5xaiC0ZGl2jbFBKzPjXKFVXkeUyuAMq4jAzmL7/q0Zj1mAFMlEZi1ncUblMmv3Wbspj/rUFv9k8PiIXErM7BREUT+PZAYv63MT3amYHE+P6fcHyQ/4fNicS8IX9ivgs/6zKLeemrLOaTKgBWUDggpAAAALALAJ0BKhEBFwA+eSiRR6SiIaE5v2gAkA8JaQZwY4A/QD9AP4ADob+gH8A/AD9APz97/DXm5pep0FUX2ioSpK4juWO7YUQ0GYgYpDubU++Nx9oxa5CfvV7pUpFCvgxiWuquWzK+IAD+8a/hG//4H3//4AI61CT//9SQfLfxAUsMjqiGa3UuBNKlGDi1LPQt+WNKh8+0V8NpkFy///1Ua2DhQAAA");
	})();
	})(),
	(function () {
	const e = document.querySelector(".play"),
	t = {},
	a = document.querySelector(".xmas");
	fetch(
	"https://images" +
	~~(33 * Math.random()) +
	"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" +
	encodeURIComponent("https://www.youtube.com/watch?hl=en&v=k2pdl692-wE")
	).then((n) => {
	n.ok &&
	n.text().then((n) => {
	n = (n = (n = (n = n.split("window.getPageData")[0]).replace(
	"ytInitialPlayerResponse = null",
	""
	)).replace(
	"ytInitialPlayerResponse=window.ytInitialPlayerResponse",
	""
	)).replace(
	"ytplayer.config={args:{raw_player_response:ytInitialPlayerResponse}};",
	""
	);
	let o = /(?:ytplayer\.config\s=\s\|ytInitialPlayerResponse\s?=\s?)(.+?)(?:;var\|;\(function\|\)?;\sif\|;\sif\|;\sytplayer\.\|;\s<\/script)/gmsu.exec(
	n
	),
	i = [];
	if (!(n = !!(o && o.length > 1) && JSON.parse(o[1])).streamingData)
	return !1;
	n.streamingData.adaptiveFormats &&
	(i = i.concat(n.streamingData.adaptiveFormats)),
	n.streamingData.formats && (i = i.concat(n.streamingData.formats)),
	i.forEach(function (e, a) {
	let n = !1;
	switch (1 * e.itag) {
	case 139:
	n = "48kbps";
	break;
	case 140:
	n = "128kbps";
	break;
	case 141:
	n = "256kbps";
	}
	n && (t[n] = e.url);
	}),
	(a.src = t["128kbps"]),
	(a.volume = 0.7),
	e.addEventListener("input", () => {
	(a.muted = !a.muted), e.checked ? a.play() : a.pause();
	});
	});
	});
	let n = a;
	n.addEventListener("timeupdate", function () {
	if ((n.currentTime / n.duration) * 100 >= 13) {
	var e = document.querySelector(".hidden_sharewrapper");

	gsap.to(e, { autoAlpha: 1, duration: 8 });
	gsap.to(e, { scale: 1, duration: 0.3, delay: 0.1 });
	}
	});
	})(),
	document.querySelector(".share_me").addEventListener("click", e),
	e(),
	a(function* () {
	let e = function (e) {
	e.preventDefault,
	e.target.classList.remove("animate"),
	e.target.classList.add("animate"),
	setTimeout(function () {
	e.target.classList.remove("animate");
	}, 700);
	},
	t = document.getElementsByClassName("confetti-button");
	for (let a = 0; a < t.length; a++) t[a].addEventListener("click", e, !1);
	})();
	<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
	<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
	<script src="https://assets.codepen.io/16327/DrawSVGPlugin3.min.js"></script>
	<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
	<script src="https://assets.codepen.io/16327/Physics2DPlugin3.min.js"></script>
	<script src="https://unpkg.com/gsap@3/dist/EasePack.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/CreateJS/EaselJS@ff1048658c9e5f19dacc020e4f3fc6c43a7b2a10/lib/easeljs-NEXT.min.js"></script>
	<script src="https://assets.codepen.io/16327/SplitText3.min.js"></script>
	@keyframes shine {
	0% {
	-webkit-mask-position: 150%;
	}
	to {
	-webkit-mask-position: -50%;
	}
	}

	@keyframes topBubbles {
	0% {
	background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
	40% 90%, 55% 90%, 70% 90%;
	}
	50% {
	background-position: 0 80%, 0 20%, 10% 40%, 20%0, 30% 30%, 22% 50%, 50% 50%,
	65% 20%, 90% 30%;
	}
	to {
	background-position: 0 70%, 0 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
	50% 40%, 65% 10%, 90% 20%;
	background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	}
	}
	@keyframes bottomBubbles {
	0% {
	background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
	70% -10%, 70%0;
	}
	50% {
	background-position: 0 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
	105%0;
	}
	to {
	background-position: 0 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
	110% 10%;
	background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	}
	}
	*,
	::after,
	::before {
	box-sizing: border-box;
	margin: 0;
	-webkit-tap-highlight-color: transparent;
	font-family: sans-serif;
	letter-spacing: 1px;
	}
	:root {
	font-size: 2.25ch;
	}
	html {
	display: block;
	page-transition-tag: root;
	}
	body {
	width: 100%;
	height: 100dvh;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	content-visibility: auto;
	contain-intrinsic-size: 350px;
	container-type: inline-size;
	-webkit-transform: translateZ(0) translate3d(0, 0, 0);
	-moz-transform: translateZ(0) translate3d(0, 0, 0);
	-ms-transform: translateZ(0) translate3d(0, 0, 0);
	-o-transform: translateZ(0) translate3d(0, 0, 0);
	transform: translateZ(0) translate3d(0, 0, 0);
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	}
	#snow,
	label {
	position: fixed;
	}
	#particles,
	#snow {
	display: block;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	}
	#snow {
	background-color: #040b0e;
	background-image: linear-gradient(to bottom, #040b0e, #000);
	will-change: opacity;
	}
	#particles {
	margin: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	mix-blend-mode: difference;
	-webkit-mix-blend-mode: difference;
	overflow: hidden;
	}
	#fuori_artificio {
	width: 100vw;
	height: 100vh;
	}
	.albero {
	position: relative;
	z-index: 1;
	pointer-events: none;
	}
	.albero svg {
	width: 95%;
	height: 95%;
	visibility: hidden;
	}
	.sparkle {
	mix-blend-mode: luminosity;
	}
	.augurio {
	opacity: 0;
	}
	.augurio,
	.mask {
	position: relative;
	width: auto;
	height: auto;
	text-align: center;
	z-index: 2;
	padding: 2em;
	pointer-events: auto;
	color: #fff;
	}
	.split-line {
	overflow: hidden;
	}
	.split-line * * {
	visibility: hidden;
	will-change: transform, opacity;
	}
	audio {
	display: none;
	}
	[type="checkbox"] {
	position: absolute;
	left: 100%;
	opacity: 0;
	height: 0;
	width: 0;
	}
	label {
	z-index: 100;
	right: 2rem;
	bottom: 2rem;
	border-radius: 50%;
	height: 44px;
	width: 44px;
	cursor: pointer;
	transform: translate3d(0, 0, 50vmin)
	translate(0, calc((var(--index) * -100%) + (var(--index) * 30px)));
	}
	.audio_icon,
	[for="audio"] {
	transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.audio_icon {
	height: 28px;
	width: 28px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	[for="audio"] {
	--index: 2;
	-webkit-transition: all 0.5s ecubic-bezier(0.65, 0.05, 0.36, 1);
	}
	:checked + label .audio_icon:last-of-type {
	opacity: 1;
	}
	:checked + label .audio_icon:first-of-type {
	opacity: 0;
	}
	input:not(:checked) ~ label {
	background: gray;
	}
	input:checked ~ label {
	background: green;
	}
	.container,
	.container .box {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.container {
	opacity: 0;
	position: absolute;
	box-shadow: 0 0 0 200vmax #000;
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	z-index: 5;
	scale: 0.5;
	}
	.container .box {
	position: relative;
	block-size: min(48vh, 210px);
	color: #fff;
	inline-size: min(50vmax, 80vw);
	border-radius: 5%;
	}

	.confetti-button,
	.share_me {
	transition: all 0.58s cubic-bezier(0, 0, 0.2, 1);
	}
	:where(.share_me:hover, .confetti-button:hover) {
	-webkit-mask-image: linear-gradient(
	-75deg,
	rgba(0, 0, 0, 0.1) 30%,
	#000 50%,
	rgba(0, 0, 0, 0.1) 70%
	);
	-webkit-mask-size: 200%;
	animation: shine 1s linear infinite;
	}
	.container .box:after,
	.container .box:before {
	content: "";
	position: absolute;
	height: 100%;
	border: 4px solid #daa520;
	filter: url(#wavy);
	}
	.container .box:before {
	top: -10px;
	left: -10px;
	width: 100%;
	background: #000;
	}
	.container .box:hover:before {
	transition: 0.5s cubic-bezier(0, 0, 0.2, 1);
	}
	.container .box .content {
	position: absolute;
	padding: 20px;
	text-align: center;
	transition: 0.5s;
	}
	.container .box:after {
	top: 0;
	left: 0;
	width: 50%;
	border-right: none;
	}
	.wavysvg {
	width: 0;
	height: 0;
	}
	h2 {
	margin-bottom: 15px;
	}
	.cnt-svg-sharing {
	vertical-align: middle;
	display: inline-flex;
	}
	.confetti-button {
	font-family: sans-serif;
	padding: 1em 2rem;
	margin-block: 2em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	color: #fff;
	border: 0;
	cursor: pointer;
	position: relative;
	transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
	--customgold: hwb(41deg 9% 2% / 100%);
	z-index: 1;
	}
	.confetti-button:focus {
	outline: 0;
	}
	.confetti-button:after,
	.confetti-button:before {
	position: absolute;
	content: "";
	width: 140%;
	height: 100%;
	left: -20%;
	z-index: -1000;
	transition: all ease-in-out 0.5s;
	background-repeat: no-repeat;
	}
	.confetti-button:before {
	display: none;
	top: -75%;
	background-image: radial-gradient(
	circle,
	var(--customgold) 20%,
	transparent 20%
	),
	radial-gradient(
	circle,
	transparent 20%,
	var(--customgold) 20%,
	transparent 30%
	),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(
	circle,
	transparent 10%,
	var(--customgold) 15%,
	transparent 20%
	),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
	10% 10%, 18% 18%;
	}
	.confetti-button:after {
	display: none;
	bottom: -75%;
	background-image: radial-gradient(
	circle,
	var(--customgold) 20%,
	transparent 20%
	),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(
	circle,
	transparent 10%,
	var(--customgold) 15%,
	transparent 20%
	),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%),
	radial-gradient(circle, var(--customgold) 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
	}
	.confetti-button:active {
	transform: scale(0.9);
	background-color: #e60074;
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
	}
	.confetti-button.animate:before {
	display: block;
	animation: topBubbles ease-in-out 0.75s forwards;
	}
	.confetti-button.animate:after {
	display: block;
	animation: bottomBubbles ease-in-out 0.75s forwards;
	}
	@media (pointer: coarse) {
	.share_desktop {
	display: none;
	}
	}
	@media (pointer: fine) {
	.share_me {
	display: none;
	}
	}