diff --git a/sites/orakil.de/index.html b/sites/orakil.de/index.html index ca7758f..8b7c483 100644 --- a/sites/orakil.de/index.html +++ b/sites/orakil.de/index.html @@ -213,11 +213,61 @@ position: absolute; opacity: 0; transition: opacity 1.2s ease; + pointer-events: none; } .prophecy.active { opacity: 1; - position: relative; + pointer-events: auto; + } + + /* 8-ball answer */ + .answer-container { + margin-top: 60px; + min-height: 80px; + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn 1.5s ease 1.8s forwards; + opacity: 0; + } + + .answer-text { + font-family: 'Cinzel', serif; + font-size: clamp(1rem, 2.5vw, 1.3rem); + color: var(--gold); + font-style: italic; + letter-spacing: 0.04em; + line-height: 1.7; + max-width: 540px; + text-align: center; + opacity: 0; + transform: translateY(10px); + transition: opacity 0.8s ease, transform 0.8s ease; + } + + .answer-text.visible { + opacity: 1; + transform: translateY(0); + } + + .answer-text.fading { + opacity: 0; + transform: translateY(-10px); + } + + /* Shake animation for the orb */ + @keyframes shake { + 0%, 100% { transform: translateX(0); } + 15% { transform: translateX(-4px) rotate(-1deg); } + 30% { transform: translateX(3px) rotate(1deg); } + 45% { transform: translateX(-2px); } + 60% { transform: translateX(2px); } + 75% { transform: translateX(-1px); } + } + + .oracle-title.shaking { + animation: shake 0.6s ease; } /* Decorative elements */ @@ -286,7 +336,7 @@
Das Orakel weiß. Frag.
Das Orakel sieht alles. Auch deine Cookies.
Nicht jede Frage verdient einen Token.
+ +