/* CSS */
:root {
  --spin-size: 48px;           /* diameter */
  --spin-thickness: 4px;       /* ring thickness */
  --spin-color: yellow;       /* accent color */
  --spin-bg: rgba(255,255,0,.15);  /* track color */
  --spin-speed: 1s;	
}
/*ANIMATIONS*/

/*-----------------------------------*/
/*ANIM _ TEXT FADE IN AND FLOAT DOWN */

.floatDown {
  animation: downIGo 2s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes downIGo {
  0% {
    padding-bottom: 30px;
    opacity: 0
  }
  50% {
    opacity: 1.0;
  }
  100% {
    padding-bottom: 0px;
    opacity: 1.0
  }
}

/*  animation: upIGo 2s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
  -webkit-animation: upIGo 2s;
  -webkit-animation-play-state: running;
  -webkit-animation-delay: 0;
  -webkit-animation-timing-function: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: upIGo 2s;
  -moz-animation-play-state: running;
  -moz-animation-delay: 0;
  -moz-animation-timing-function: 1;
  -moz-animation-fill-mode: forwards;
  -o-animation: upIGo 2s;
  -o-animation-play-state: running;
  -o-animation-delay: 0;
  -o-animation-timing-function: 1;
  -o-animation-fill-mode: forwards;*/


/*---------------------------------*/
/*ANIM _ TEXT FADE IN AND FLOAT UP */

.floatUp {
  animation: upIGo 2s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes upIGo {
  0% {
    padding-top: 30px;
    opacity: 0
  }
  50% {
    opacity: 1.0;
  }
  100% {
    padding-top: 0px;
    opacity: 1.0
  }
}

/*---------------------*/
/*ANIM _ MENU FADES IN */
.menuOn,.menuOff {
	display: flex;
}
.menuOn {
  animation: fadeIn 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1.0
  }
}

/*---------------------*/
/*ANIM _ MENU FADES OUT */

.menuOff {
  animation: fadeOut 0.5s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 1.0
  }
  100% {
    opacity: 0
  }
}

/*---------------------*/
/*ANIM _ PARTIAL PIC ENLARGE */

.picZoom {
  animation: picBig 15s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes picBig {
  0% {
    transform: scale(1.0)
  }
  100% {
    transform: scale(1.2)
  }
}

/*---------------------*/
/*ANIM _ MARGIN ANIMTION */

.marginAniU {
  animation: marGoU 1s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes marGoU {
  0% {
    padding:20px 0 0 0;
    opacity:0;
  }
  100% {
    padding:0 0 20px 0;
    opacity:1.0;
  }
}

.marginAniD {
  animation: marGoD 1s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes marGoD {
  0% {
    padding:0 0 20px 0;
    opacity:0;      
  }
  100% {
    padding:20px 0 0 0;
    opacity:1.0;
  }
}

/*---------------------*/
/*ANIM _ MARGIN ANIMTION */

.colUp {
  animation: cU 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes cU {
  0% {
    background-color:#24202d;
    color:white;
    }
  100% {
    background-color:white;
    color:black;
  }
}

.colDown {
  animation: cD 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes cD {
  0% {
    background-color:white;
    color:#08542b;
    }
  100% {
	background-color:#24202d;
    color:white;
  }
}

/*---------------------*/

.socColUp {
  animation: sCU 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
}
@keyframes sCU {
  100% {
    fill: black;
  }
}

.socColDown {
  animation: sCD 0.25s;
  animation-play-state: running;
  animation-delay: 0;
  animation-timing-function: 1;
  animation-fill-mode: forwards;
  animation-direction:reverse;
}
@keyframes sCD {
  100% {
    fill: black;
  }
}

.spinner {
  width: var(--spin-size);
  height: var(--spin-size);
  border-radius: 50%;
  border: var(--spin-thickness) solid var(--spin-bg);
  border-top-color: var(--spin-color);
  animation: spin var(--spin-speed) linear infinite;
  /* optional centering */
  display: inline-block;
}

/* reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner.dual {
  width: var(--spin-size);
  height: var(--spin-size);
  border: var(--spin-thickness) solid transparent;
  border-top-color: var(--spin-color);
  border-right-color: var(--spin-color);
  border-radius: 50%;
  animation: spin var(--spin-speed) linear infinite;
  display: inline-block;
}

.spinner.dots {
  width: calc(var(--spin-size) * 1.6);
  height: var(--spin-thickness);
  border: none;
  background: none;
  animation: none;
  display: inline-flex;
  gap: calc(var(--spin-thickness));
}
.spinner.dots::before,
.spinner.dots::after,
.spinner.dots span {
  content: "";
  width: var(--spin-thickness);
  height: var(--spin-thickness);
  border-radius: 50%;
  background: var(--spin-color);
  animation: pulse 0.9s ease-in-out infinite;
}
.spinner.dots::after { animation-delay: 0.15s; }
.spinner.dots span   { animation-delay: 0.3s; }

@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}