/* ===== CERIABELAJAR - Main Stylesheet (static, no build) =====
 * File ini adalah sumber styling utama. Edit langsung, tidak perlu build.
 * Utility classes Tailwind di-load via Play CDN (lihat partials/assets.blade.php).
 * ============================================================ */

/* ===== Base Styles ===== */
body {
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .display {
    font-family: 'Fredoka', 'Nunito', sans-serif;
}

/* ===== Fun Animations ===== */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(-15px); }
    50% { transform: translateY(5px); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.8), 0 0 60px rgba(236, 72, 153, 0.3); }
}

@keyframes shimmer-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounce-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes rainbow {
    0% { color: #ef4444; }
    16% { color: #f97316; }
    33% { color: #eab308; }
    50% { color: #22c55e; }
    66% { color: #3b82f6; }
    83% { color: #8b5cf6; }
    100% { color: #ef4444; }
}

@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(var(--orbit-r, 60px)) rotate(0deg); }
    to { transform: rotate(360deg) translateX(var(--orbit-r, 60px)) rotate(-360deg); }
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pop {
    0% { transform: scale(0.6); opacity: 0; }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes shimmer-line {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== Animation Utility Classes ===== */
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
.animate-float-reverse { animation: float-reverse 6s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 2s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-slide-up { animation: slide-up 0.8s ease-out forwards; }
.animate-slide-down { animation: slide-down 0.6s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.5s ease-out forwards; }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.animate-bounce-in { animation: bounce-in 0.6s ease-out forwards; }
.animate-rainbow { animation: rainbow 3s linear infinite; }
.animate-gradient { animation: gradient-shift 8s ease infinite; }
.animate-bob { animation: bob 3s ease-in-out infinite; }
.animate-pop { animation: pop 0.5s ease-out forwards; }
.animate-sparkle { animation: sparkle 2.5s ease-in-out infinite; }
.animate-orbit { animation: orbit var(--orbit-d, 12s) linear infinite; }

/* ===== Animation Delay ===== */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }

/* ===== Gradient Backgrounds ===== */
.gradient-hero {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #ec4899 50%, #f97316 75%, #eab308 100%);
    background-size: 400% 400%;
    animation: gradient-shift 8s ease infinite;
}

.gradient-login {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #c084fc 100%);
}

.gradient-card-purple { background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); }
.gradient-card-pink { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
.gradient-card-blue { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.gradient-card-green { background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%); }
.gradient-card-orange { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); }
.gradient-card-cyan { background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%); }

.gradient-paud { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-tk { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.gradient-sd { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.gradient-admin { background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%); }

/* ===== Fun Card Hover ===== */
.card-fun {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 1.25rem;
}
.card-fun:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card-hover { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.card-hover:hover { transform: translateY(-6px) scale(1.02); }

/* ===== Fun Button ===== */
.btn-fun {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 9999px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-fun:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.btn-fun:active {
    transform: translateY(0px) scale(0.98);
}

/* ===== Fun Input ===== */
.input-fun {
    border-radius: 1rem;
    border: 3px solid #e5e7eb;
    transition: all 0.3s ease;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}
.input-fun:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15);
    outline: none;
}
.input-fun:hover {
    border-color: #c084fc;
}

/* ===== Glassmorphism ===== */
.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== Blob Shapes ===== */
.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    filter: blur(40px);
}

/* ===== Stars Background ===== */
.stars-bg {
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 300px 80px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 400px 150px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 500px 30px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 600px 100px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 700px 70px, rgba(255,255,255,0.5), transparent);
    background-size: 800px 200px;
}

/* ===== Fun Scrollbar ===== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a855f7, #ec4899);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9333ea, #db2777);
}

/* ===== Text Gradient ===== */
.text-gradient {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Utility Overrides ===== */
.overflow-x-hidden { overflow-x: hidden; }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }

/* ===== Alpine cloak ===== */
[x-cloak] { display: none !important; }

/* ===== Navbar links ===== */
.nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
}
.nav-link:hover { background: rgba(255,255,255,0.2); }
.nav-link-active { background: rgba(255,255,255,0.25); }

/* ===== World Map / Dunia Belajar ===== */
.world-map {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}

.world-node {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.world-node:hover { transform: translateY(-6px) scale(1.04); }
.world-node:hover .world-node-emoji { animation: wiggle 0.6s ease-in-out infinite; }

.world-node-locked { filter: grayscale(0.7); opacity: 0.65; }

.world-path {
    stroke-dasharray: 10 8;
    animation: dash-move 1.2s linear infinite;
}
@keyframes dash-move {
    to { stroke-dashoffset: -36; }
}

/* Confetti piece */
.confetti-piece {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 14px;
    z-index: 9999;
    pointer-events: none;
    animation: confetti-fall linear forwards;
}