/*
**********************************************
Bouncing ball
**********************************************
*/

/*********************
  Code html associé:
**********************
<div class="uds-under_building_area uds-shadow uds-border">
    <div class="uds-under_building_ball">
      <div class="uds-under_building_smash_ball">
        <div class="uds-under_building_bouncing_ball_shadow">
          <div class="uds-under_building_bouncing_ball_light"></div>
          <div class="uds-under_building_bouncing_ball_rotation"></div>
        </div>
      </div>
    </div>
    <div class="uds-under_building_text">
      <h2>Page en preparation...</h2>
      <p>Suivez-nous sur les reseaux sociaux.</p>
    </div>
    <div class="uds-social_network">
<a href="https://www.facebook.com/udsbasket" rel="noopener nofollow" target="_blank" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a>
<a href="https://www.instagram.com/uniondechysinguesnain" rel="noopener nofollow" target="_blank" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Instagram</span></a>
    </div
</div>
*/

:root {
  --animation-duration: 1.2s;
  --bounce-height: -75px; /* calc(205px - 25vh) */
  --bounce-width: -25px; /* calc(205px - 25vh) */
}
.uds-under_building_text {
	position: absolute;
	width: fit-content;
	height: fit-content;
	padding-left: calc(45px + 10vh);
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-family: 'nanumpenscript';
    font-size: 22px;
    line-height: 0.8;
}
.uds-under_building_text h2 {
	margin: 0;
	font-family: 'nanumpenscript';
    font-size: 1.7em;  /* 46px; */
    font-weight: bold;
}
.uds-social_network {
	position: absolute;
	padding-right: 5px;
	right: 0;
	bottom: 0;
}
.uds-under_building_area { 
	background-image: linear-gradient(
    75deg,
    white,
    lightgray 5%,
    white 15%,
    lightgray 55%,
    lightgray 90%,
    white
  );
  background-size: 100%;
  background-attachment: fixed;
  min-height: 300px;
  font-family: arial, sans-serif;
  font-size: 16px;
  overflow: hidden;
  margin: 0;
  
  position: relative;
}
h1 {
  line-height: 24px;
  margin: 0;
  font-weight: normal;
}
.uds-under_building_ball {
  position: absolute;
/*  bottom: 0;*/
  bottom: 110px;
  left: 4%; /*width: 20%;*/
  
  text-align: center;
}
.uds-under_building_smash_ball {
  animation-name: uds-smashing_ball;
  animation-duration: var(--animation-duration);
/*  animation-direction: alternate;*/
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: bottom;
}
.uds-under_building_bouncing_ball_shadow,
.uds-under_building_bouncing_ball_rotation,
.uds-under_building_bouncing_ball_light {
  border-radius: 50%;
  display: inline-block;
  width: calc(60px + 4.2vh);  /* 100px */
  height: calc(60px + 4.2vh);
}
.uds-under_building_bouncing_ball_light {
  background-image: radial-gradient(
    circle at 20% 20%,
    rgba(255, 221, 179, 0.7),
    rgba(255, 221, 179, 0.5) 10%,
    transparent 30%,
    rgba(83, 42, 0, 0.8) 85%
  );
  position: absolute;
  z-index: 1;
}
.uds-under_building_bouncing_ball_shadow {
  animation-name: uds-shadow_ball;
  animation-duration: var(--animation-duration);
/*  animation-direction: alternate;*/
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; /* ease-out */
}

.uds-under_building_bouncing_ball_rotation {
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3	c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0	c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 	C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 	c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 	c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 	c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 	l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 	c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 	C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 	c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 	c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z 	 M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 	l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 	c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 	c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
  background-color: #af660e; /*#b36609; darkorange;*/
  background-size: 100%;
  animation-name: uds-rotation_ball;
  animation-duration: calc(var(--animation-duration) * 5.3);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes uds-shadow_ball {
  0% {
    transform: translateX(0) translateY(0);
    box-shadow: 40px 40px 10px #444466;
  }
  50% {
    transform: translateX(var(--bounce-width)) translateY(var(--bounce-height));
    box-shadow: 40px 350px 250px #444466;
  }
  100% {
    transform: translateX(0) translateY(0);
    box-shadow: 40px 40px 10px #444466;
  }
}
@keyframes uds-smashing_ball { /* 0% => 0.8 15% => 1 */
  0% {
    transform: scaleX(1.12) scaleY(0.8);
  }
  13% {
    transform: scaleX(1) scaleY(1);
  }
  87% {
    transform: scaleX(1) scaleY(1);
  }
  100% {
    transform: scaleX(1.12) scaleY(0.8);
  }
}
@keyframes uds-rotation_ball {
  100% {
    transform: rotate(360deg);
  }
}

/*
@keyframes uds-shadow_ball {
  0% {
    transform: translateX(0) translateY(0);
    box-shadow: 40px 40px 10px #444466;
  }
  100% {
    transform: translateX(var(--bounce-width)) translateY(var(--bounce-height));
    box-shadow: 40px 350px 250px #444466;
  }
}
@keyframes uds-smashing_ball { / 0% => 0.8 15% => 1 /
  0% {
    transform: scaleY(0.8);
  }
  15% {
    transform: scaleY(1);
  }
}
@keyframes uds-rotation_ball {
  100% {
    transform: rotate(360deg);
  }
}
*/