/* --- GLOBAL THEME & RESET --- */
html { 
    background-color: #030303; /* Prevents the white/void at the bottom */
    height: 100%; 
}

body { 
    background-color: transparent; 
    color: white; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
    width: 100%; 
    min-height: 100vh;
    margin: 0;
    position: relative; 
}

/* --- PAGE LOAD REVEAL ANIMATION --- */
@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.reveal { animation: fadeInUp 0.8s ease-out forwards; }

/* --- BACKGROUND ORBS & STARS (FIXED POSITIONING) --- */
.color-orb { 
    position: fixed !important; 
    width: 800px; 
    height: 800px;
    border-radius: 50%; 
    filter: blur(150px); 
    z-index: -2; 
    opacity: 0.08; /* Subtle, non-overpowered brightness */
    pointer-events: none; 
    transition: background-color 3s ease-in-out, transform 0.2s ease-out; /* Smooth color fades */
    will-change: transform, background-color;
}

#orb1 { top: -250px; left: -250px; }
#orb2 { bottom: -250px; right: -250px; }

#star-field { 
    position: fixed !important; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: -1; 
    pointer-events: none; 
    background-color: transparent;
}

.star { 
    position: absolute; 
    background: white; 
    pointer-events: none; 
    border-radius: 50%; 
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8); 
    animation: galaxyTwinkle var(--duration) ease-in-out infinite; 
}

@keyframes galaxyTwinkle { 
    0%, 100% { opacity: 0; transform: scale(0.3); } 
    50% { opacity: 0.8; transform: scale(1); } 
}

/* --- FROSTED GLASS BOXES --- */
.glass { 
    background: rgba(10, 10, 10, 0.65); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12); 
    border-radius: 2.5rem; 
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    z-index: 10;
}

.glass::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 8px;
    background: var(--glow-color);
    box-shadow: 0 0 20px var(--glow-color);
    z-index: 20;
}

.glass:hover { 
    transform: translateY(-8px) scale(1.015) !important; 
    border-color: var(--glow-color); 
    box-shadow: 0 15px 35px rgba(var(--glow-rgb), 0.25); 
    z-index: 50;
}

/* --- UNIVERSAL NEON COLORS --- */
.neon-green { --glow-color: #77ff00; --glow-rgb: 119, 255, 0; }
.neon-blue { --glow-color: #001aff; --glow-rgb: 0, 26, 255; }
.neon-purple { --glow-color: #9d00ff; --glow-rgb: 157, 0, 255; }
.neon-dank-purple { --glow-color: #5d00ff; --glow-rgb: 93, 0, 255; }
.neon-hot-pink { --glow-color: #fe2858; --glow-rgb: 254, 40, 88; }
.neon-cyan { --glow-color: #00ffff; --glow-rgb: 0, 255, 255; }
.neon-yellow { --glow-color: #ecfc03; --glow-rgb: 236, 252, 3; }
.neon-pink { --glow-color: #fc00e3; --glow-rgb: 252, 0, 227; }
.neon-orange { --glow-color: #ff8800; --glow-rgb: 255, 136, 0; }
.neon-mint { --glow-color: #00ff91; --glow-rgb: 0, 255, 145; }
.neon-red { --glow-color: #ff0000; --glow-rgb: 255, 0, 0; }
.neon-white { --glow-color: #ffffff; --glow-rgb: 255, 255, 255; }

/* --- FLOATING ANIMATION --- */
@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-12px); } 
}
.float-wrapper { animation: float 5s ease-in-out infinite; }

/* --- MOTIVATIONAL QUOTE & SCRIPTURE --- */
.inspiration-container {
    margin-top: 6rem;
    margin-bottom: 2rem;
    text-align: center;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
    width: 100%;
}

.inspiration-wrapper {
    max-width: 36rem;
    margin: 0 auto;
}

.divider-line {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    margin-bottom: 2rem;
}

.divider-line-bottom {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    margin-top: 2rem;
}

#daily-quote { font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; font-style: italic; color: white; margin-bottom: 1rem; }
#daily-scripture { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: #6b7280; font-style: italic; }
.idea-tag { font-size: 8px; color: #1f2937; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5em; margin-top: 1rem; opacity: 0.5; }

/* --- CUSTOM SCROLLBARS --- */
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }