/* Pulsierender Iframe */
@keyframes pulse {
  0% {
    box-shadow: 0 0 10px 5px rgba(236, 41, 174, 0.3);
  }
  10% {
    box-shadow: 0 0 10px 6px rgba(236, 41, 174, 0.4);
  }
  25% {
    box-shadow: 0 0 10px 7px rgba(236, 41, 174, 0.5);
  }
  50% {
    box-shadow: 0 0 10px 8px rgba(236, 41, 174, 0.8);
  }
  75% {
    box-shadow: 0 0 10px 7px rgba(236, 41, 174, 0.5);
  }
  90% {
    box-shadow: 0 0 10px 6px rgba(236, 41, 174, 0.4);
  }
  100% {
    box-shadow: 0 0 10px 5px rgba(236, 41, 174, 0.3);
  }
}

.pulsing-iframe {
  animation: pulse 2s ease-in-out infinite;
  border-radius: 10px;
}

iframe {
  border-radius: 15px; /* Wenn Sie einen einheitlichen Stil möchten */
}



/* Regenbogeneffekt */
@keyframes rainbow-border {
    0% {
        box-shadow: 0 0 10px red;
        border-radius: 15px;
        border: 1px solid red;
    }
    14% {
        box-shadow: 0 0 10px orange;
        border-radius: 15px;
        border: 1px solid orange;
    }
    28% {
        box-shadow: 0 0 10px yellow;
        border-radius: 15px;
        border: 1px solid yellow;
    }
    42% {
        box-shadow: 0 0 10px green;
        border-radius: 15px;
        border: 1px solid green;
    }
    57% {
        box-shadow: 0 0 10px blue;
        border-radius: 15px;
        border: 1px solid blue;
    }
    71% {
        box-shadow: 0 0 10px indigo;
        border-radius: 15px;
        border: 1px solid indigo;
    }
    85% {
        box-shadow: 0 0 10px violet;
        border-radius: 15px;
        border: 1px solid violet;
    }
    100% {
        box-shadow: 0 0 10px red;
        border-radius: 15px;
        border: 1px solid red;
    }
}

/* Quests Progress */
@keyframes smoothGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Schneeflocken */
#snow {
  position: fixed; /* Fixiert den Container an der Stelle */
  top: 0;
  left: 0;
  width: 100%; /* Der Container soll die gesamte Breite des Bildschirms einnehmen */
  height: 100%; /* Der Container soll die gesamte Höhe des Bildschirms einnehmen */
  pointer-events: none; /* Verhindert, dass der Schneeflocken-Effekt Benutzerinteraktionen blockiert */
  z-index: 9999; /* Stellt sicher, dass die Schneeflocken immer oben sind */
  overflow: hidden; /* Verhindert, dass Schneeflocken außerhalb des Containers sichtbar sind */
}

.snowflake {
  position: absolute;
  top: -10px;
  font-size: 1rem; /* Standardgröße der Schneeflocken */
  user-select: none;
  opacity: 1;
  animation: fall 20s linear infinite, drift 5s ease-in-out infinite, fade 20s linear infinite;
}

@keyframes drift {
  0% {
    left: var(--start-left); /* Startposition der Schneeflocke */
  }
  50% {
    left: calc(var(--start-left) + var(--end-left)); /* Drift von der Startposition */
  }
  100% {
    left: var(--start-left); /* Zurück zur Startposition */
  }
}

@keyframes fall {
  0% {
    top: -10px;
  }
  100% {
    top: 100%;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0; /* Schneeflocken werden am Ende vollständig unsichtbar */
  }
}



@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, 0); /* Ausgangsposition */
    }
    50% {
        transform: translate(-50%, 10px); /* Nach oben springen */
    }
}




/* Schwebe-Animation */
@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-dialog { animation: none; }
}

@media (max-width: 480px) {
    .scroll-dialog {
        font-size: 14px;
        padding: 10px 14px;
        gap: 10px;
        bottom: 28px;
    }
    .scroll-dialog img {
        width: 44px;
        height: 44px;
    }
}


/* Cursor-Effekt */
:root {
  --dot-size: 10px;
  --dot-blur: 14px;
  --trail-color1: #29a7ec;
  --trail-color2: #ec29ae;
  --cursor-size: 22px;
}

html, body, button, a, input, textarea, select, label {
  cursor: url('/static/img/cursor.png') 8 8, auto !important;
}

/* Eingabefelder im Textmodus */
input[type="text"],
textarea {
  cursor: url('/static/img/cursor.png') 8 8, text !important;
}

/* Links und Buttons */
a,
button,
input[type="button"],
input[type="submit"],
select {
  cursor: url('/static/img/cursor.png') 8 8, pointer !important;
}

/* Dropdown-Menüs */
select option {
  cursor: url('/static/img/cursor.png') 8 8, auto !important;
}

.trail-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  background: radial-gradient(circle at center, var(--trail-color1), var(--trail-color2));
  filter: blur(0.5px) drop-shadow(0 0 var(--dot-blur) var(--trail-color1));
  z-index: 9998;
}

@media (prefers-reduced-motion: reduce) {
  .trail-dot { display: none !important; }
}