/*
HUJAN PANAH API SUSANOO — ringan untuk desktop & mobile
Tempelkan tepat setelah tag :
Pastikan konten utama memiliki posisi di atas efek:
...
*/
:root {
--susanoo-red: #ff1838;
--susanoo-core: #fff0c2;
--susanoo-glow: rgba(255, 15, 48, 0.65);
}
.susanoo-arrow-rain {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
contain: strict;
isolation: isolate;
}
.site-content {
position: relative;
z-index: 1;
}
.susanoo-arrow-rain > i {
--x: 10vw;
--delay: 0s;
--duration: 5s;
--scale: 1;
--drift: 17vw;
position: absolute;
top: -18vh;
left: var(--x);
width: 7px;
height: 145px;
border-radius: 99px;
opacity: 0;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 24, 56, 0.15) 16%,
var(--susanoo-red) 62%,
var(--susanoo-core) 100%
);
box-shadow:
0 0 9px rgba(255, 238, 184, 0.9),
0 0 18px var(--susanoo-glow),
0 0 34px rgba(255, 0, 34, 0.38);
transform: translate3d(0, -20vh, 0) rotate(-24deg) scale(var(--scale));
transform-origin: 50% 100%;
will-change: transform, opacity;
animation: susanoo-arrow-fall var(--duration) linear var(--delay) infinite;
}
/* Mata panah */
.susanoo-arrow-rain > i::after {
content: "";
position: absolute;
left: 50%;
bottom: -24px;
width: 32px;
height: 42px;
background: linear-gradient(145deg, #fff7db 5%, #ff9a32 32%, #ff1538 74%);
clip-path: polygon(50% 100%, 0 0, 50% 25%, 100% 0);
transform: translateX(-50%);
filter:
drop-shadow(0 0 5px #fff0b0)
drop-shadow(0 0 12px rgba(255, 24, 56, 0.95));
animation: susanoo-arrow-pulse .22s ease-in-out infinite alternate;
}
/* Lidah api yang terus bergerak di sepanjang ekor panah */
.susanoo-arrow-rain > i::before {
content: "";
position: absolute;
top: -28px;
left: 50%;
width: 38px;
height: 132px;
background: linear-gradient(
to top,
rgba(255, 242, 174, 0.95) 0%,
rgba(255, 151, 34, 0.9) 22%,
rgba(255, 15, 48, 0.75) 58%,
transparent 100%
);
clip-path: polygon(
50% 100%, 22% 83%, 40% 71%, 8% 56%, 38% 47%,
17% 29%, 48% 37%, 61% 5%, 72% 35%, 96% 23%,
79% 56%, 100% 68%, 69% 75%
);
transform: translateX(-50%) scaleY(1);
transform-origin: 50% 100%;
filter: blur(.35px) drop-shadow(0 0 13px rgba(255, 17, 48, 0.9));
animation: susanoo-flame-wave .32s ease-in-out infinite alternate;
}
@keyframes susanoo-flame-wave {
0% {
opacity: .68;
transform: translateX(-50%) skewX(-7deg) scale(.86, .82);
}
55% {
opacity: 1;
transform: translateX(-50%) skewX(8deg) scale(1.12, 1.08);
}
100% {
opacity: .78;
transform: translateX(-50%) skewX(-3deg) scale(.96, 1.2);
}
}
@keyframes susanoo-arrow-pulse {
from { transform: translateX(-50%) scale(.9); }
to { transform: translateX(-50%) scale(1.13); }
}
@keyframes susanoo-arrow-fall {
0% {
opacity: 0;
transform: translate3d(0, -20vh, 0) rotate(-24deg) scale(var(--scale));
}
8% { opacity: 0.82; }
86% { opacity: 0.72; }
100% {
opacity: 0;
transform: translate3d(var(--drift), 130vh, 0) rotate(-24deg) scale(var(--scale));
}
}
.susanoo-arrow-rain > i:nth-child(1) { --x: 2vw; --delay: -1.2s; --duration: 5.4s; --scale: .72; }
.susanoo-arrow-rain > i:nth-child(2) { --x: 12vw; --delay: -4.1s; --duration: 6.1s; --scale: 1.05; }
.susanoo-arrow-rain > i:nth-child(3) { --x: 23vw; --delay: -2.8s; --duration: 4.8s; --scale: .86; }
.susanoo-arrow-rain > i:nth-child(4) { --x: 34vw; --delay: -.5s; --duration: 6.5s; --scale: .65; }
.susanoo-arrow-rain > i:nth-child(5) { --x: 44vw; --delay: -5.4s; --duration: 5.7s; --scale: .95; }
.susanoo-arrow-rain > i:nth-child(6) { --x: 53vw; --delay: -2.1s; --duration: 6.8s; --scale: .7; }
.susanoo-arrow-rain > i:nth-child(7) { --x: 62vw; --delay: -3.7s; --duration: 5.1s; --scale: 1.08; }
.susanoo-arrow-rain > i:nth-child(8) { --x: 70vw; --delay: -.9s; --duration: 6.3s; --scale: .8; }
.susanoo-arrow-rain > i:nth-child(9) { --x: 78vw; --delay: -4.8s; --duration: 5.5s; --scale: .68; }
.susanoo-arrow-rain > i:nth-child(10) { --x: 85vw; --delay: -2.5s; --duration: 6.7s; --scale: 1; }
.susanoo-arrow-rain > i:nth-child(11) { --x: 91vw; --delay: -5.9s; --duration: 5.9s; --scale: .76; }
.susanoo-arrow-rain > i:nth-child(12) { --x: 97vw; --delay: -1.7s; --duration: 6.4s; --scale: .9; }
/* Mobile: kurangi partikel, glow, dan panjang panah */
@media (max-width: 768px) {
.susanoo-arrow-rain > i {
width: 5px;
height: 96px;
box-shadow:
0 0 7px rgba(255, 238, 184, 0.75),
0 0 14px rgba(255, 15, 48, 0.58);
}
.susanoo-arrow-rain > i:nth-child(n + 8) {
display: none;
}
.susanoo-arrow-rain > i::after {
bottom: -18px;
width: 24px;
height: 32px;
filter: drop-shadow(0 0 7px rgba(255, 24, 56, 0.8));
}
.susanoo-arrow-rain > i::before {
top: -19px;
width: 28px;
height: 88px;
filter: drop-shadow(0 0 8px rgba(255, 17, 48, 0.72));
}
}
/* Hormati pengaturan aksesibilitas pengguna */
@media (prefers-reduced-motion: reduce) {
.susanoo-arrow-rain {
display: none;
}
}