:root {
    --bg: #050505;
    --text: #F2F2F2;
    --accent: #D4AF37; 
    --font-head: 'Cinzel', serif;
    --font-body: 'Manrope', sans-serif;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    overflow: hidden; 
    cursor: none;
}

/* --- CANVAS & FX --- */
canvas#fluid-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.5;
}
.noise {
    position: fixed; inset: 0; pointer-events: none; z-index: 99;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.05; mix-blend-mode: overlay;
}

/* --- CURSOR --- */
.cursor-dot {
    width: 8px; height: 8px; background: var(--accent);
    position: fixed; top: 0; left: 0; border-radius: 50%;
    pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
}
.cursor-circle { 
    width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.2);
    position: fixed; top: 0; left: 0; border-radius: 50%;
    pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background 0.3s;
}

/* --- GATE & MAGNETIC BUTTON --- */
.overlay-gate {
    position: fixed; inset: 0; background: #000; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.gate-content { text-align: center; }
.gate-title { font-size: 4rem; margin-bottom: 1rem; color: var(--accent); letter-spacing: 5px; }

.magnetic-wrap { display: inline-block; margin-top: 40px; }
.enter-btn {
    position: relative;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text);
    padding: 20px 60px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s;
    border-radius: 100px; /* Pill shape */
}
.btn-text { position: relative; z-index: 2; pointer-events: none; }
.btn-fill {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--accent);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}
.enter-btn:hover { border-color: var(--accent); color: #000; }
.enter-btn:hover .btn-fill { transform: scaleY(1); }

/* --- HERO ANIMATIONS --- */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-content { position: relative; z-index: 2; }

/* The Blur-In Effect for Namaste */
.hero-sanskrit {
    font-family: 'Noto Serif Devanagari'; font-size: 15vw;
    color: var(--text);
    opacity: 0; filter: blur(20px); transform: scale(1.2);
}

.hero-eng { margin-top: -2vw; font-size: 1.5rem; letter-spacing: 5px; font-weight: 300; }
.line-mask { overflow: hidden; display: block; }
.gold-text { color: var(--accent); font-weight: 500; }

/* --- SECTIONS --- */
.section.deity {
    min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; padding: 0 5vw;
}
.visual-col { height: 80vh; display: flex; align-items: center; justify-content: center; }
.img-mask {
    width: 100%; height: 100%; overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.img-mask img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0) contrast(1.1); transition: 0.5s;
}
.section:hover img { filter: saturate(1); }

.text-col { padding: 0 4vw; mix-blend-mode: exclusion; }
.god-name { font-size: 6vw; line-height: 1; margin-bottom: 20px; color: var(--text); overflow: hidden; }
.sanskrit-verse { font-size: 2rem; color: var(--accent); margin-bottom: 30px; font-family: 'Noto Serif Devanagari'; }
.minimal-desc {
    font-size: 0.8rem; letter-spacing: 0.4em;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px; display: inline-block;
}

.invert-layout .visual-col { order: 2; }
.invert-layout .text-col { order: 1; text-align: right; }

.footer { height: 50vh; display: flex; align-items: center; justify-content: center; }
.peace { font-size: 8vw; color: var(--accent); opacity: 0; letter-spacing: 10px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .section.deity { grid-template-columns: 1fr; padding: 100px 20px; text-align: center; }
    .invert-layout .visual-col { order: 0; }
    .invert-layout .text-col { order: 1; text-align: center; }
    .visual-col { height: 50vh; margin-bottom: 30px; }
    .gate-title { font-size: 2.5rem; }
    .hero-sanskrit { font-size: 20vw; }
}

/* --- AUTHOR WATERMARK --- */
.author-watermark {
    position: fixed;
    bottom: 20px;
    right: 24px;
    z-index: 999;

    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.35);

    pointer-events: none;
    user-select: none;

    mix-blend-mode: difference;
    opacity: 0.6;

    animation: watermark-breath 6s ease-in-out infinite;
}

@keyframes watermark-breath {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.65;
    }
}