/* ══════════════════════════════════════════════════
   UNIVERSAL BACKGROUND IMAGE - APPLIES TO ALL PAGES
   Beautiful traditional Sikh background with gold embroidery
   ══════════════════════════════════════════════════ */

/* Background Orbs - Dynamic scroll effects */
.bg-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0; /* Default: hidden — user can enable via settings slider */
    transition: opacity 0.4s ease;
}

/* Subtle noise texture */
.bg-orbs::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
    opacity: 0.4;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 25s ease-in-out infinite;
    transition: background 1.5s ease, transform 0.5s ease-out, opacity 0.5s ease;
}

.orb-1 {
    width: 280px;
    height: 280px;
    background: conic-gradient(from 0deg, #D4AF37, #FFD700, #FFA500, #D4AF37);
    top: -100px;
    right: -60px;
    opacity: 0.25;
    filter: blur(60px);
}

.orb-2 {
    width: 220px;
    height: 220px;
    background: conic-gradient(from 180deg, #FF2D55, #FF375F, #FF9500, #FF2D55);
    bottom: 20%;
    left: -80px;
    animation-delay: -12s;
    opacity: 0.2;
    filter: blur(60px);
}

.orb-3 {
    width: 180px;
    height: 180px;
    background: conic-gradient(from 90deg, #AF52DE, #BF5AF2, #007AFF, #AF52DE);
    bottom: -40px;
    right: 15%;
    opacity: 0.2;
    filter: blur(60px);
    animation-delay: -18s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

/* Main Background Image - Traditional Sikh Attire */
.ikonkar-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease;
}

.ikonkar-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Theme-based opacity */
[data-theme="light"] .ikonkar-background {
    opacity: var(--ikonkar-opacity, 0);
}

[data-theme="dark"] .ikonkar-background {
    opacity: var(--ikonkar-opacity, 0);
}

html.dark-mode .ikonkar-background {
    opacity: var(--ikonkar-opacity, 0);
}

.ikonkar-background.hidden {
    opacity: 0;
}

/* Ensure content stays above background */
body {
    position: relative;
    z-index: 1;
}

/* Main content wrapper */
.main-content {
    position: relative;
    z-index: 1;
}