/* Studsande pil med roterande text */

.bouncing-arrow-wrapper{
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.6rem;
  height: 6.6rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.bouncing-arrow{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background-color: var(--orange);
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .2s ease;
}
.bouncing-arrow:hover{ background-color: var(--ink); }
.bouncing-arrow svg{
  width: 1.1rem;
  height: 1.1rem;
  stroke: #fff;
  animation: bounce 2s infinite;
}
@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{ transform: translateY(0); }
  40%{ transform: translateY(-10px); }
  60%{ transform: translateY(-3px); }
}
.arrow-animate{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spinRing 16s linear infinite;
  /* Dold tills man stått still i 10 sekunder (.show-ring sätts i js/main.js) */
  opacity: 0;
  transition: opacity .8s ease;
}
.show-ring .arrow-animate{ opacity: 1; }
.arrow-animate text{
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  fill: var(--ink);
}
@keyframes spinRing{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media only screen and (max-width: 640px){
  .arrow-animate{ display: none; }
}