:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --accent: #ffffff;
    --accent-dim: rgba(255, 255, 255, 0.05);
    --accent-glow: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --text-muted: #555555;
    --border: #1a1a1a;
    --gold-accent: #d4af37;
    --gold-dim: rgba(212, 175, 55, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Hidden iframe for preloading */
.preload-frame {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
}

/* Animated Background - Sacred Geometry Pattern */
.bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: patternFloat 30s linear infinite;
    z-index: 0;
}

@keyframes patternFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(30px, 30px) rotate(5deg);
    }
}

/* Radial Light Rays */
.light-rays {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.02) 10deg, transparent 20deg, transparent 30deg, rgba(255, 255, 255, 0.02) 40deg, transparent 50deg, transparent 60deg, rgba(255, 255, 255, 0.02) 70deg, transparent 80deg, transparent 90deg, rgba(255, 255, 255, 0.02) 100deg, transparent 110deg, transparent 120deg, rgba(255, 255, 255, 0.02) 130deg, transparent 140deg, transparent 150deg, rgba(255, 255, 255, 0.02) 160deg, transparent 170deg, transparent 180deg, rgba(255, 255, 255, 0.02) 190deg, transparent 200deg, transparent 210deg, rgba(255, 255, 255, 0.02) 220deg, transparent 230deg, transparent 240deg, rgba(255, 255, 255, 0.02) 250deg, transparent 260deg, transparent 270deg, rgba(255, 255, 255, 0.02) 280deg, transparent 290deg, transparent 300deg, rgba(255, 255, 255, 0.02) 310deg, transparent 320deg, transparent 330deg, rgba(255, 255, 255, 0.02) 340deg, transparent 350deg, transparent 360deg);
    animation: rotateRays 60s linear infinite;
    z-index: 1;
}

@keyframes rotateRays {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Floating Particles - Om symbols */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    font-family: 'Noto Sans Devanagari', serif;
    color: rgba(255, 255, 255, 0.08);
    animation: floatParticle 20s infinite ease-in-out;
}

.particle:nth-child(1) {
    font-size: 20px;
    left: 5%;
    top: 15%;
    animation-delay: 0s;
    animation-duration: 18s;
}

.particle:nth-child(2) {
    font-size: 16px;
    left: 15%;
    top: 75%;
    animation-delay: 2s;
    animation-duration: 22s;
}

.particle:nth-child(3) {
    font-size: 24px;
    left: 25%;
    top: 35%;
    animation-delay: 4s;
    animation-duration: 16s;
}

.particle:nth-child(4) {
    font-size: 14px;
    left: 45%;
    top: 5%;
    animation-delay: 1s;
    animation-duration: 24s;
}

.particle:nth-child(5) {
    font-size: 18px;
    left: 65%;
    top: 55%;
    animation-delay: 3s;
    animation-duration: 20s;
}

.particle:nth-child(6) {
    font-size: 22px;
    left: 75%;
    top: 20%;
    animation-delay: 5s;
    animation-duration: 17s;
}

.particle:nth-child(7) {
    font-size: 15px;
    left: 85%;
    top: 65%;
    animation-delay: 2s;
    animation-duration: 21s;
}

.particle:nth-child(8) {
    font-size: 20px;
    left: 90%;
    top: 40%;
    animation-delay: 6s;
    animation-duration: 19s;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.05;
    }

    25% {
        transform: translateY(-40px) translateX(20px) rotate(10deg);
        opacity: 0.12;
    }

    50% {
        transform: translateY(-20px) translateX(-15px) rotate(-5deg);
        opacity: 0.08;
    }

    75% {
        transform: translateY(-50px) translateX(10px) rotate(5deg);
        opacity: 0.1;
    }
}

/* Main Container */
.loader-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

/* Ganesh Image with Aura */
.ganesh-wrapper {
    position: relative;
    animation: revealGanesh 1.5s ease-out forwards;
}

@keyframes revealGanesh {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ganesh-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70%);
    animation: auraPulse 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes auraPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* Outer Ring */
.ganesh-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: ringRotate 30s linear infinite;
    z-index: -1;
}

.ganesh-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.ganesh-ring::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@keyframes ringRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.ganesh-image {
    width: 200px;
    height: auto;
    filter: brightness(2) contrast(1.3) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 80px rgba(255, 255, 255, 0.2));
    animation: gentleFloat 6s ease-in-out infinite;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Mantra Text */
.mantra-container {
    animation: fadeInUp 1s ease-out 0.5s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mantra {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 4px;
    margin-bottom: 12px;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
    animation: mantraGlow 3s ease-in-out infinite;
}

@keyframes mantraGlow {

    0%,
    100% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }

    50% {
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.25), 0 0 60px rgba(255, 255, 255, 0.1);
    }
}

.mantra-english {
    font-size: 0.875rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
}

/* Progress Section */
.progress-section {
    width: 300px;
    animation: fadeInUp 1s ease-out 0.8s both;
}

.progress-container {
    width: 100%;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, transparent, var(--text-primary), transparent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-bar.loading {
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0% {
        width: 0%;
        margin-left: 0%;
    }

    50% {
        width: 60%;
        margin-left: 20%;
    }

    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* Loading Text */
.loading-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.loading-text span {
    animation: blink 1.5s ease-in-out infinite;
}

.loading-text span:nth-child(1) {
    animation-delay: 0s;
}

.loading-text span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-text span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Corner Decorations */
.corner {
    position: fixed;
    width: 80px;
    height: 80px;
    z-index: 5;
}

.corner::before,
.corner::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
}

.corner.top-left {
    top: 30px;
    left: 30px;
}

.corner.top-left::before {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
}

.corner.top-left::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
}

.corner.top-right {
    top: 30px;
    right: 30px;
}

.corner.top-right::before {
    width: 100%;
    height: 1px;
    top: 0;
    right: 0;
}

.corner.top-right::after {
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
}

.corner.bottom-left {
    bottom: 30px;
    left: 30px;
}

.corner.bottom-left::before {
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
}

.corner.bottom-left::after {
    width: 1px;
    height: 100%;
    bottom: 0;
    left: 0;
}

.corner.bottom-right {
    bottom: 30px;
    right: 30px;
}

.corner.bottom-right::before {
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
}

.corner.bottom-right::after {
    width: 1px;
    height: 100%;
    bottom: 0;
    right: 0;
}

/* Footer */
.footer-text {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    z-index: 10;
}

/* Fade out animation */
.fade-out {
    animation: fadeOut 0.8s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .ganesh-image {
        width: 160px;
    }

    .ganesh-aura {
        width: 220px;
        height: 220px;
    }

    .ganesh-ring {
        width: 200px;
        height: 200px;
    }

    .mantra {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .mantra-english {
        font-size: 0.75rem;
    }

    .progress-section {
        width: 250px;
    }

    .corner {
        width: 50px;
        height: 50px;
    }

    .corner.top-left,
    .corner.top-right {
        top: 20px;
    }

    .corner.bottom-left,
    .corner.bottom-right {
        bottom: 20px;
    }

    .corner.top-left,
    .corner.bottom-left {
        left: 20px;
    }

    .corner.top-right,
    .corner.bottom-right {
        right: 20px;
    }
}