<div id="sugar-moon-crystal-ball">
<div class="crystal-ball">
<!-- Magical mist -->
<div class="mist mist-one"></div>
<div class="mist mist-two"></div>
<div class="mist mist-three"></div>
<!-- Tiny stars -->
<span class="star star-one">✦</span>
<span class="star star-two">✧</span>
<span class="star star-three">·</span>
<span class="star star-four">✦</span>
<span class="star star-five">✧</span>
<span class="star star-six">·</span>
<!-- Main glow -->
<div class="inner-glow"></div>
<!-- Fortune -->
<div class="fortune-text" id="fortuneText">
Ask the crystal...
</div>
<!-- Glass reflections -->
<div class="glass-shine"></div>
<div class="small-shine"></div>
<!-- Sparkles -->
<span class="sparkle sparkle-one">✦</span>
<span class="sparkle sparkle-two">✦</span>
<span class="sparkle sparkle-three">✧</span>
</div>
</div>
<style>
/* =====================================
OUTSIDE — COMPLETELY TRANSPARENT
===================================== */
#sugar-moon-crystal-ball {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: transparent !important;
padding: 25px 0;
}
/* =====================================
CRYSTAL BALL
===================================== */
.crystal-ball {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
background:
/* bright glass reflection */
radial-gradient(
circle at 29% 22%,
rgba(255,255,255,.58) 0%,
rgba(255,255,255,.20) 5%,
rgba(255,255,255,.05) 15%,
transparent 28%
),
/* purple center */
radial-gradient(
circle at 58% 58%,
rgba(178,70,255,.95) 0%,
rgba(115,25,170,.95) 38%,
rgba(55,8,90,1) 72%,
rgba(22,3,38,1) 100%
);
box-shadow:
0 0 12px rgba(220,150,255,.95),
0 0 30px rgba(180,80,255,.85),
0 0 65px rgba(135,35,220,.65),
0 0 110px rgba(100,20,170,.35),
inset 12px 12px 28px rgba(255,255,255,.20),
inset -22px -25px 45px rgba(0,0,0,.55);
transition:
transform .4s ease,
box-shadow .4s ease;
}
/* Hover */
.crystal-ball:hover {
transform: scale(1.045);
box-shadow:
0 0 18px rgba(235,180,255,1),
0 0 40px rgba(195,100,255,.95),
0 0 80px rgba(150,50,240,.75),
0 0 120px rgba(100,25,190,.4),
inset 12px 12px 28px rgba(255,255,255,.25),
inset -22px -25px 45px rgba(0,0,0,.55);
}
/* =====================================
INNER MAGICAL GLOW
===================================== */
.inner-glow {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.16) 0%,
rgba(220,120,255,.14) 22%,
rgba(150,50,220,.10) 45%,
transparent 72%
);
filter: blur(10px);
animation: innerPulse 5s infinite ease-in-out;
pointer-events: none;
}
@keyframes innerPulse {
0%, 100% {
opacity: .65;
transform: translate(-50%, -50%) scale(.95);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.08);
}
}
/* =====================================
SWIRLING MIST
===================================== */
.mist {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(9px);
opacity: .38;
}
/* Mist 1 */
.mist-one {
width: 150px;
height: 20px;
left: -15px;
top: 105px;
background:
radial-gradient(
ellipse,
rgba(239,190,255,.55),
rgba(166,67,240,.15),
transparent 70%
);
transform: rotate(-18deg);
animation: mistMoveOne 7s infinite ease-in-out;
}
/* Mist 2 */
.mist-two {
width: 210px;
height: 70px;
right: -35px;
top: 145px;
background:
radial-gradient(
ellipse,
rgba(207,135,255,.45),
rgba(110,25,180,.15),
transparent 70%
);
transform: rotate(22deg);
animation: mistMoveTwo 9s infinite ease-in-out;
}
/* Mist 3 */
.mist-three {
width: 170px;
height: 55px;
left: 55px;
bottom: 40px;
background:
radial-gradient(
ellipse,
rgba(255,215,255,.35),
transparent 70%
);
transform: rotate(-8deg);
animation: mistMoveThree 8s infinite ease-in-out;
}
@keyframes mistMoveOne {
0%, 100% {
transform: translateX(-12px) rotate(-18deg);
}
50% {
transform: translateX(30px) rotate(-5deg);
}
}
@keyframes mistMoveTwo {
0%, 100% {
transform: translateX(20px) rotate(22deg);
}
50% {
transform: translateX(-30px) rotate(8deg);
}
}
@keyframes mistMoveThree {
0%, 100% {
transform: translateX(15px) rotate(-8deg);
}
50% {
transform: translateX(-25px) rotate(8deg);
}
}
/* =====================================
FORTUNE
===================================== */
.fortune-text {
position: absolute;
width: 67%;
left: 16.5%;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: #fff8ff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 15px;
line-height: 1.4;
letter-spacing: .2px;
text-shadow:
0 0 4px white,
0 0 10px #e5b5ff,
0 0 20px #ad55ff,
0 0 30px rgba(180,70,255,.8);
z-index: 20;
pointer-events: none;
transition:
opacity .35s ease,
transform .35s ease;
}
/* =====================================
GLASS REFLECTION
===================================== */
.glass-shine {
position: absolute;
width: 90px;
height: 120px;
top: 22px;
left: 38px;
border-radius: 50%;
background:
linear-gradient(
135deg,
rgba(255,255,255,.50),
rgba(255,255,255,.18) 30%,
rgba(255,255,255,.04) 55%,
transparent 75%
);
transform: rotate(-27deg);
filter: blur(1px);
opacity: .72;
z-index: 25;
pointer-events: none;
}
/* Smaller reflection */
.small-shine {
position: absolute;
width: 30px;
height: 55px;
top: 38px;
left: 110px;
border-radius: 50%;
background: rgba(255,255,255,.35);
transform: rotate(-28deg);
filter: blur(3px);
opacity: .55;
z-index: 26;
pointer-events: none;
}
/* =====================================
STARS
===================================== */
.star {
position: absolute;
color: rgba(255,240,255,.9);
text-shadow:
0 0 5px white,
0 0 12px #d98cff,
0 0 20px #a43dff;
z-index: 12;
pointer-events: none;
animation: starTwinkle 3s infinite ease-in-out;
}
.star-one {
top: 80px;
right: 70px;
font-size: 14px;
}
.star-two {
top: 110px;
left: 65px;
font-size: 11px;
animation-delay: .7s;
}
.star-three {
top: 150px;
right: 58px;
font-size: 17px;
animation-delay: 1.4s;
}
.star-four {
bottom: 78px;
left: 78px;
font-size: 12px;
animation-delay: 2s;
}
.star-five {
bottom: 55px;
right: 85px;
font-size: 10px;
animation-delay: 1s;
}
.star-six {
top: 170px;
left: 53px;
font-size: 8px;
animation-delay: 2.3s;
}
@keyframes starTwinkle {
0%, 100% {
opacity: .25;
transform: scale(.6);
}
50% {
opacity: 1;
transform: scale(1.35);
}
}
/* =====================================
LARGE SPARKLES
===================================== */
.sparkle {
position: absolute;
color: white;
z-index: 30;
pointer-events: none;
text-shadow:
0 0 5px white,
0 0 12px #e8b8ff,
0 0 25px #b84dff;
animation: sparkleGlow 2.8s infinite ease-in-out;
}
.sparkle-one {
top: 48px;
right: 48px;
font-size: 20px;
}
.sparkle-two {
bottom: 70px;
left: 42px;
font-size: 15px;
animation-delay: 1.2s;
}
.sparkle-three {
top: 105px;
left: 43px;
font-size: 10px;
animation-delay: 2s;
}
@keyframes sparkleGlow {
0%, 100% {
opacity: .2;
transform:
scale(.6)
rotate(0deg);
}
50% {
opacity: 1;
transform:
scale(1.35)
rotate(20deg);
}
}
/* =====================================
MOBILE
===================================== */
@media (max-width: 600px) {
.crystal-ball {
width: 230px;
height: 230px;
}
.fortune-text {
font-size: 16px;
}
}
</style>
<script>
const fortunes = [
"Something beautiful is coming your way...",
"Trust your intuition.",
"A secret will soon be revealed.",
"Your next chapter will surprise you.",
"Someone is thinking about you.",
"Follow the path that feels right.",
"Good fortune is closer than you think.",
"A wish you made long ago is beginning to unfold.",
"The answer you seek is already within you.",
"An unexpected opportunity is approaching.",
"Let go of what no longer serves you.",
"Your patience will soon be rewarded.",
"A new beginning is waiting for you.",
"The universe is nudging you forward.",
"Something magical is about to happen.",
"Listen carefully to your dreams.",
"A change is coming — and it will be for the better.",
"You are closer to your goal than you realize.",
"Someone from your past may return.",
"Tonight, pay attention to the signs.",
"Your intuition already knows the answer.",
"A little mystery will soon become clear.",
"The stars are pointing you toward something new.",
"An unexpected moment may become a beautiful memory."
];
const crystalBall =
document.querySelector(".crystal-ball");
const fortuneText =
document.getElementById("fortuneText");
crystalBall.addEventListener("click", function() {
fortuneText.style.opacity = "0";
fortuneText.style.transform =
"translateY(-50%) scale(.7)";
setTimeout(function() {
const randomFortune =
fortunes[
Math.floor(
Math.random() * fortunes.length
)
];
fortuneText.textContent =
randomFortune;
fortuneText.style.opacity = "1";
fortuneText.style.transform =
"translateY(-50%) scale(1)";
}, 350);
});
</script>
<div id="halloftarot-tarot-widget"
data-bg="#312002"
data-color="#fff4e5">
</div>
<script src="https://www.halloftarot.com/widget/tarot-v1.js?deck=0&lang=en"></script>
.gif)
.gif)
