/* ═══════════════════════════════════════════════════════════════
   UGADI — THE DAWN OF CREATION
   Premium Storytelling Website Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
    /* Primary Palette */
    --cosmic-deep: #050a1a;
    --cosmic-blue: #0a0e27;
    --cosmic-purple: #1a1040;
    --midnight: #0d1b3e;

    /* Accent Colors */
    --gold: #f4a020;
    --gold-bright: #ffd54f;
    --gold-pale: #fff9c4;
    --saffron: #ff8f00;
    --saffron-deep: #e65100;
    --lotus-pink: #e91e63;
    --lotus-light: #f8bbd0;
    --danger-red: #ff1744;
    --ocean-teal: #00838f;
    --ocean-deep: #004d61;
    --forest-green: #2e7d32;
    --leaf-light: #aed581;
    --warm-brown: #5d4037;

    /* Neutrals */
    --white: #ffffff;
    --white-90: rgba(255, 255, 255, 0.9);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-05: rgba(255, 255, 255, 0.05);

    /* Typography */
    --font-display: 'Cinzel Decorative', 'Cinzel', serif;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
    --font-sanskrit: 'Noto Sans Devanagari', sans-serif;

    /* Spacing */
    --section-pad: clamp(3rem, 8vw, 6rem);
    --content-max: 1100px;

    /* Transitions */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--cosmic-deep);
}

body {
    font-family: var(--font-body);
    color: var(--white-90);
    background: var(--cosmic-deep);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--gold);
    color: var(--cosmic-deep);
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ── INVITATION SPLASH SCREEN ── */
.invitation-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(180deg, #1a0a00 0%, #0a0e27 30%, #050a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.8s ease;
    overflow: hidden;
}

.invitation-splash.slide-up {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.invitation-splash.hidden {
    display: none;
}

.garland-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.garland-svg {
    width: 100%;
    height: 80px;
    filter: drop-shadow(0 4px 15px rgba(255, 152, 0, 0.3));
    animation: garlandSway 4s ease-in-out infinite;
}

@keyframes garlandSway {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.mango-leaves {
    position: absolute;
    z-index: 2;
    width: 80px;
    opacity: 0.85;
}

.mango-left {
    top: 60px;
    left: 2rem;
    animation: leafSway 5s ease-in-out infinite;
}

.mango-right {
    top: 60px;
    right: 2rem;
    animation: leafSway 5s ease-in-out infinite reverse;
}

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

.invitation-card {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 550px;
    padding: 3rem 2.5rem;
    border: 1px solid rgba(244, 160, 32, 0.25);
    border-radius: 24px;
    background: rgba(10, 14, 39, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 0 80px rgba(244, 160, 32, 0.08), inset 0 0 40px rgba(244, 160, 32, 0.03);
    animation: cardAppear 1.5s ease-out both;
    animation-delay: 0.3s;
}

@keyframes cardAppear {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.invitation-om {
    font-size: 2.5rem;
    color: var(--gold-bright);
    text-shadow: 0 0 30px rgba(255, 213, 79, 0.4);
    margin-bottom: 1rem;
    animation: loaderPulse 2s ease-in-out infinite;
}

.invitation-title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 400;
    color: var(--white-70);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.invitation-festival {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 4rem);
    line-height: 1.15;
    background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright), var(--saffron));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(244, 160, 32, 0.2));
}

.invitation-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    color: var(--gold);
    font-size: 0.8rem;
}

.invitation-divider span:first-child,
.invitation-divider span:last-child {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.invitation-by {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--white-70);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.invitation-note {
    font-size: 0.8rem;
    color: var(--white-50);
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    display: inline-block;
}

.banana-tree {
    width: 120px;
    margin: 0.5rem auto 1.5rem;
    opacity: 0.75;
    animation: treeSway 6s ease-in-out infinite;
}

@keyframes treeSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.5deg); }
}

.invitation-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    border: 1px solid var(--gold);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(244, 160, 32, 0.15), rgba(255, 213, 79, 0.08));
    color: var(--gold-bright);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-smooth);
    animation: ctaPulse 2.5s ease-in-out infinite;
}

.invitation-cta:hover {
    background: linear-gradient(135deg, rgba(244, 160, 32, 0.3), rgba(255, 213, 79, 0.15));
    box-shadow: 0 0 30px rgba(244, 160, 32, 0.25);
    transform: translateY(-2px);
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(244, 160, 32, 0); }
    50% { box-shadow: 0 0 20px rgba(244, 160, 32, 0.15); }
}

/* ── LOADER ── */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--cosmic-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-smooth), visibility 0.8s;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid transparent;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: loaderSpin 1.5s linear infinite;
}

.loader-ring.ring-2 {
    width: 130px;
    height: 130px;
    border-top-color: var(--lotus-pink);
    animation-duration: 2s;
    animation-direction: reverse;
}

.loader-ring.ring-3 {
    width: 160px;
    height: 160px;
    border-top-color: var(--saffron);
    animation-duration: 2.5s;
}

.loader-symbol {
    font-size: 2.5rem;
    color: var(--gold-bright);
    animation: loaderPulse 1.5s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(244, 160, 32, 0.5);
}

.loader-text {
    margin-top: 2rem;
    font-family: var(--font-heading);
    color: var(--white-50);
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderPulse {

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

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

/* ── SCROLL PROGRESS ── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--lotus-pink), var(--gold), var(--saffron));
    z-index: 1000;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--gold);
}

/* ── FLOATING NAVIGATION ── */
.floating-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.5s var(--ease-smooth);
}

.floating-nav.visible {
    opacity: 1;
}

.nav-dot {
    position: relative;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-dot span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white-20);
    border: 1px solid var(--white-50);
    transition: all 0.3s var(--ease-smooth);
    display: block;
}

.nav-dot:hover span,
.nav-dot.active span {
    width: 12px;
    height: 12px;
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--gold);
}

.nav-dot::before {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 12px);
    white-space: nowrap;
    font-size: 0.7rem;
    font-family: var(--font-heading);
    color: var(--white-70);
    background: rgba(10, 14, 39, 0.85);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 4px;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.3s var(--ease-smooth);
    pointer-events: none;
    border: 1px solid var(--white-10);
}

.nav-dot:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ── STORY SECTIONS — COMMON ── */
.story-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-pad) 2rem;
    overflow: hidden;
}

.intro-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 8;
    /* Above stars/waves, below content */
    pointer-events: none;
}

.bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.story-content {
    position: relative;
    z-index: 10;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}

.chapter-number {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 4px 16px;
    border-radius: 2px;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
}

.lead-text {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* ── GLASS PANELS ── */
.glass-panel {
    background: rgba(10, 14, 39, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-10);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

.glass-panel-dark {
    background: rgba(30, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 23, 68, 0.2);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

.glass-panel-ocean {
    background: rgba(0, 77, 97, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 131, 143, 0.3);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

.glass-panel-gold {
    background: rgba(244, 160, 32, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244, 160, 32, 0.25);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

.glass-panel-nature {
    background: rgba(46, 125, 50, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

.glass-panel-meaning {
    background: rgba(100, 50, 150, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(150, 100, 200, 0.25);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

.glass-panel-warm {
    background: rgba(244, 160, 32, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244, 160, 32, 0.2);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 1.5rem 0;
}

/* ── HIGHLIGHT CLASSES ── */
.highlight-gold {
    color: var(--gold-bright);
    text-shadow: 0 0 20px rgba(255, 213, 79, 0.3);
}

.highlight-saffron {
    color: var(--saffron);
    font-weight: 600;
}

.highlight-green {
    color: var(--leaf-light);
    text-shadow: 0 0 15px rgba(174, 213, 129, 0.3);
}

.danger-text {
    color: var(--danger-red);
    text-shadow: 0 0 15px rgba(255, 23, 68, 0.3);
}

.ocean-text {
    color: var(--ocean-teal);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 1: COSMIC OCEAN
   ═══════════════════════════════════════════════════════════════ */
.section-cosmic {
    background: linear-gradient(180deg,
            #000010 0%,
            #050a2d 30%,
            #0a1045 60%,
            #0d1550 80%,
            #10185a 100%);
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 4rem;
    min-height: 120vh;
}

/* Cosmic Background Video */
.cosmic-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 2s ease;
}

.cosmic-bg-video.playing {
    opacity: 0.6;
}

/* Fullscreen Video Overlay (Krishna) */
.video-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.video-fullscreen-overlay.active {
    opacity: 1;
    visibility: visible;
}

.video-fullscreen-overlay video {
    width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 0 80px rgba(156, 39, 176, 0.3);
}

.video-fullscreen-overlay .fullscreen-caption {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white-50);
    text-align: center;
}

.cosmic-ocean-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
}

.wave-1 {
    animation: waveFloat 8s ease-in-out infinite;
}

.wave-2 {
    animation: waveFloat 6s ease-in-out infinite reverse;
    bottom: -10px;
}

.wave-3 {
    animation: waveFloat 10s ease-in-out infinite;
    bottom: -20px;
}

@keyframes waveFloat {

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

    50% {
        transform: translateX(-15px) translateY(-8px);
    }
}

/* Vishnu Scene */
.vishnu-scene {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: min(80vw, 800px);
    z-index: 6;
    opacity: 0;
}

.adishesha-svg {
    width: 100%;
    filter: drop-shadow(0 0 30px rgba(63, 81, 181, 0.3));
    animation: vishnuFloat 6s ease-in-out infinite;
}

.serpent-hoods {
    animation: hoodSway 4s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes vishnuFloat {

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

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

@keyframes hoodSway {

    0%,
    100% {
        transform: translate(720px, 120px) rotate(0deg);
    }

    50% {
        transform: translate(720px, 120px) rotate(2deg);
    }
}

/* Lotus */
.lotus-container {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 150px;
    z-index: 7;
    opacity: 0;
}

.lotus-svg {
    width: 100%;
    filter: drop-shadow(0 0 20px rgba(233, 30, 99, 0.4));
}

.lotus-glow {
    animation: lotusGlow 3s ease-in-out infinite;
}

.lotus-petals-outer {
    animation: lotusRotate 20s linear infinite;
    transform-origin: 100px 120px;
}

.lotus-petals-inner {
    animation: lotusRotate 30s linear infinite reverse;
    transform-origin: 100px 120px;
}

@keyframes lotusGlow {

    0%,
    100% {
        opacity: 0.4;
        r: 60;
    }

    50% {
        opacity: 0.8;
        r: 70;
    }
}

@keyframes lotusRotate {
    to {
        transform: rotate(360deg);
    }
}

/* Cosmic Title */
.cosmic-title {
    background: linear-gradient(135deg, var(--gold-pale), var(--gold), var(--saffron));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.subtitle-banner {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.1), rgba(244, 160, 32, 0.1));
    border: 1px solid rgba(244, 160, 32, 0.3);
    border-radius: 12px;
    padding: 1.2rem 2rem;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.subtitle-text {
    font-size: 1.05rem;
    font-family: var(--font-body);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    text-align: center;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator span {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white-50);
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg);
    margin: 8px auto 0;
    opacity: 0.6;
}

@keyframes scrollBounce {

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

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

/* ═══════════════════════════════════════════════════════════════
   SECTION 2: VEDAS STOLEN
   ═══════════════════════════════════════════════════════════════ */
.section-danger {
    background: linear-gradient(180deg,
            #10185a 0%,
            #1a0020 30%,
            #2a0010 60%,
            #1a0000 100%);
}

.danger-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.demon-svg {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    height: 60vh;
    max-height: 500px;
    opacity: 0;
    filter: drop-shadow(0 0 30px rgba(255, 23, 68, 0.3));
}

.demon-figure {
    animation: demonFloat 5s ease-in-out infinite;
}

.demon-eye {
    animation: eyePulse 2s ease-in-out infinite;
}

.veda-scroll {
    animation: scrollGlow 1.5s ease-in-out infinite alternate;
}

@keyframes demonFloat {

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

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

@keyframes eyePulse {

    0%,
    100% {
        r: 5;
        fill: #ff5252;
    }

    50% {
        r: 7;
        fill: #ff1744;
    }
}

@keyframes scrollGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 213, 79, 0.3));
    }

    100% {
        filter: drop-shadow(0 0 15px rgba(255, 213, 79, 0.8));
    }
}

.danger-title {
    color: var(--danger-red);
    text-shadow: 0 0 40px rgba(255, 23, 68, 0.3);
}

.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 23, 68, 0.08);
    border: 1px solid rgba(255, 23, 68, 0.3);
    border-left: 4px solid var(--danger-red);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: alertPulse 3s ease-in-out infinite;
}

.alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

@keyframes alertPulse {

    0%,
    100% {
        border-color: rgba(255, 23, 68, 0.3);
    }

    50% {
        border-color: rgba(255, 23, 68, 0.7);
        box-shadow: 0 0 20px rgba(255, 23, 68, 0.1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3: MATSYA AVATAR
   ═══════════════════════════════════════════════════════════════ */
.section-ocean {
    background: linear-gradient(180deg,
            #1a0000 0%,
            #001a2e 20%,
            #00283f 40%,
            #003545 60%,
            #002030 100%);
}

.light-rays {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 60%;
    background: radial-gradient(ellipse at top center,
            rgba(0, 200, 255, 0.08) 0%,
            transparent 70%);
    pointer-events: none;
}

.underwater-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.matsya-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 550px);
    opacity: 0;
    filter: drop-shadow(0 0 30px rgba(255, 213, 79, 0.3));
}

.matsya-figure {
    animation: fishSwim 4s ease-in-out infinite;
}

.veda-glow {
    animation: scrollGlow 1.2s ease-in-out infinite alternate;
}

@keyframes fishSwim {

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

    25% {
        transform: translateX(8px) translateY(-5px) rotate(1deg);
    }

    75% {
        transform: translateX(-8px) translateY(5px) rotate(-1deg);
    }
}

.ocean-title {
    background: linear-gradient(135deg, #4dd0e1, #00bcd4, #0097a7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.victory-banner {
    background: linear-gradient(135deg, rgba(0, 131, 143, 0.15), rgba(255, 213, 79, 0.1));
    border: 1px solid rgba(255, 213, 79, 0.3);
    border-radius: 12px;
    padding: 1.2rem 2rem;
    margin-top: 1.5rem;
    font-size: 1.05rem;
    opacity: 0;
    transform: translateY(20px);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4: CREATION BEGINS
   ═══════════════════════════════════════════════════════════════ */
.section-creation {
    background: linear-gradient(180deg,
            #002030 0%,
            #1a1000 25%,
            #2d1a00 50%,
            #3d2200 75%,
            #201000 100%);
    text-align: center;
}

.creation-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 213, 79, 0.4), rgba(244, 160, 32, 0.1), transparent);
    pointer-events: none;
    transition: all 1.5s var(--ease-smooth);
}

.creation-burst.active {
    width: 150vmax;
    height: 150vmax;
}

.creation-title {
    text-align: center;
}

.title-line {
    display: block;
    background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright), var(--saffron));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-large {
    font-size: clamp(3rem, 7vw, 5rem);
}

.creation-text {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
}

.ugadi-declaration {
    margin-top: 2.5rem;
    opacity: 0;
    transform: scale(0.8);
}

.declaration-border {
    border: 2px solid var(--gold);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    position: relative;
    background: rgba(244, 160, 32, 0.05);
    box-shadow: 0 0 60px rgba(244, 160, 32, 0.1), inset 0 0 60px rgba(244, 160, 32, 0.05);
}

.declaration-border h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white-70);
    margin-bottom: 0.5rem;
}

.ugadi-name {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 8rem);
    background: linear-gradient(135deg, var(--gold-pale), var(--gold-bright), var(--saffron), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin: 0.5rem 0;
    filter: drop-shadow(0 0 30px rgba(244, 160, 32, 0.3));
}

.ugadi-name .letter {
    display: inline-block;
    animation: letterReveal 0.6s var(--ease-bounce) both;
    animation-delay: calc(var(--i) * 0.12s + 0.5s);
}

@keyframes letterReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.5);
    }

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

.ugadi-alt {
    font-family: var(--font-sanskrit);
    font-size: 1.3rem;
    color: var(--white-70);
    margin-top: 0.5rem;
}

.ugadi-subtitle {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION X: THE COSMIC WHEEL
   ═══════════════════════════════════════════════════════════════ */
.section-wheel {
    background: linear-gradient(180deg, #201000 0%, #150800 50%, var(--cosmic-deep) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Push text to right */
    padding: 4rem 10% 4rem 4rem;
    min-height: 100vh;
}

.wheel-container {
    position: absolute;
    top: 50%;
    left: -5%;
    transform: translateY(-50%);
    width: 65vh;
    height: 65vh;
    max-width: 600px;
    max-height: 600px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.kaala-chakra {
    width: 100%;
    height: 100%;
    animation: slowSpin 60s linear infinite;
    transform-origin: center center;
}

.wheel-spokes {
    transform-origin: center center;
    animation: slowSpin 30s linear infinite reverse;
}

@keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.section-wheel .text-overlay {
    position: relative;
    z-index: 10;
    max-width: 600px;
    margin-right: -2rem; /* Pull slightly right */
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5: THE YUGAS
   ═══════════════════════════════════════════════════════════════ */
.section-yugas {
    background: var(--cosmic-deep);
    flex-direction: column;
    padding: 2rem;
    min-height: auto;
}

.yugas-header {
    text-align: center;
    padding-bottom: 2rem;
}

.yugas-timeline {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.yuga-panel {
    position: relative;
    padding: 3rem;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(40px);
}

/* Rama Panel */
.rama-panel {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.rama-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
}

.cosmic-alignment {
    position: absolute;
    right: 3rem;
    top: 2rem;
    width: 100px;
    height: 100px;
}

.celestial-body {
    position: absolute;
    font-size: 2rem;
    animation: orbitBody 8s linear infinite;
}

.sun-body {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.moon-body {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -4s;
}

.orbit-ring {
    position: absolute;
    inset: 10%;
    border: 1px solid var(--white-10);
    border-radius: 50%;
}

@keyframes orbitBody {
    from {
        transform: rotate(0deg) translateX(40px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
}

.crown-svg {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    width: 80px;
    opacity: 0.4;
}

.yuga-era {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 3px 12px;
    border-radius: 3px;
    margin-bottom: 0.75rem;
}

.era-twilight {
    color: var(--danger-red);
    border-color: var(--danger-red);
}

.yuga-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--gold-pale), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.krishna-title {
    background: linear-gradient(135deg, #ce93d8, #9c27b0, #7b1fa2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.yuga-detail {
    font-style: italic;
    color: var(--white-50);
    margin-top: 0.5rem;
}

/* Divider */
.yuga-divider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--white-20), transparent);
}

.divider-text {
    font-family: var(--font-heading);
    font-size: 1.8rem; /* Increased font size */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-bright); /* Made it stand out more */
    white-space: nowrap;
    position: relative;
    display: inline-block;
    min-width: 250px; /* Give it space to type */
    text-align: center;
}

/* Typing cursor */
.divider-text::after {
    content: '|';
    position: absolute;
    right: -15px;
    opacity: 1;
    animation: blink 0.8s step-end infinite;
    display: none; /* Hidden by default until JS unhides it */
}

.divider-text.typing::after {
    display: inline-block;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Krishna Panel */
.krishna-panel {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(30, 0, 0, 0.2));
    border: 1px solid rgba(156, 39, 176, 0.2);
}

.krishna-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 70%, rgba(156, 39, 176, 0.08) 0%, transparent 50%);
}

/* Krishna Video Scene */
.krishna-video-scene {
    margin: 1.5rem 0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.krishna-video {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.video-overlay {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, transparent 60%, rgba(30, 0, 40, 0.6) 100%);
    pointer-events: none;
}

.deer-legs {
    animation: legMove 3s ease-in-out infinite;
}

.arrow-flight line:first-child {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: arrowFly 3s linear infinite;
}

@keyframes legMove {

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

    50% {
        transform: translateX(3px);
    }
}

@keyframes arrowFly {
    0% {
        stroke-dashoffset: 300;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.hunter-pov-text {
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--white-50);
    padding: 0.75rem;
}

.kali-yuga-banner {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(244, 67, 54, 0.1));
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-top: 1rem;
    opacity: 0;
}

.kali-text {
    color: #ef5350;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(244, 67, 54, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 6: MEANING
   ═══════════════════════════════════════════════════════════════ */
.section-meaning {
    background: linear-gradient(180deg,
            var(--cosmic-deep) 0%,
            #1a1040 50%,
            #150830 100%);
    text-align: center;
}

.meaning-bg-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(156, 39, 176, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(244, 160, 32, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.meaning-title {
    background: linear-gradient(135deg, #ce93d8, #ab47bc, var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.meaning-label {
    color: #ce93d8;
    border-color: #ce93d8;
}

.etymology-display {
    margin: 3rem 0;
    opacity: 0;
    transform: translateY(30px);
}

.word-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}

.word-part,
.word-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.word-part .sanskrit,
.word-result .sanskrit {
    font-family: var(--font-sanskrit);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--gold-bright);
}

.result-sanskrit {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    text-shadow: 0 0 30px rgba(255, 213, 79, 0.4);
}

.transliteration {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--white-70);
    font-style: italic;
}

.result-trans {
    font-size: 1.3rem !important;
    color: var(--gold) !important;
}

.meaning {
    font-size: 0.8rem;
    color: var(--white-50);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.result-meaning {
    color: var(--gold) !important;
    font-size: 0.9rem !important;
    font-weight: 600;
}

.word-plus,
.word-equals {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--white-20);
}

/* Mandala Rings */
.transition-art {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mandala-ring {
    position: absolute;
    border: 1px solid var(--white-05);
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

.mandala-ring.ring-1 {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    animation: mandalaRotate 30s linear infinite;
    border-style: dashed;
}

.mandala-ring.ring-2 {
    width: 450px;
    height: 450px;
    margin: -225px 0 0 -225px;
    animation: mandalaRotate 45s linear infinite reverse;
}

.mandala-ring.ring-3 {
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
    animation: mandalaRotate 60s linear infinite;
    border-style: dotted;
}

@keyframes mandalaRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 7: NATURE'S RENEWAL
   ═══════════════════════════════════════════════════════════════ */
.section-nature {
    background: linear-gradient(180deg,
            #150830 0%,
            #0a1a0a 20%,
            #0d260d 50%,
            #102010 80%,
            #0a1a0a 100%);
}

.nature-scene {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(50vw, 500px);
    height: 80%;
    z-index: 5;
    opacity: 0;
}

.mango-tree-svg {
    position: absolute;
    bottom: 0;
    right: 5%;
    height: 90%;
    filter: drop-shadow(0 0 20px rgba(46, 125, 50, 0.2));
}

.new-leaf {
    opacity: 0;
    animation: leafGrow 2s ease-out forwards;
    animation-delay: calc(var(--delay) * 0.4s + 1s);
}

@keyframes leafGrow {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.flower {
    opacity: 0;
    animation: flowerBloom 1.5s ease-out forwards;
    animation-delay: calc(var(--delay) * 0.5s + 2s);
}

@keyframes flowerBloom {
    from {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.nature-title {
    background: linear-gradient(135deg, var(--leaf-light), var(--forest-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nature-label {
    color: var(--forest-green);
    border-color: var(--forest-green);
}

.nature-story {
    max-width: 550px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 8: UGADI PACHADI
   ═══════════════════════════════════════════════════════════════ */
.section-pachadi {
    background: linear-gradient(180deg,
            #0a1a0a 0%,
            #1a1000 30%,
            #201500 60%,
            #1a1000 100%);
    min-height: auto;
    padding: 4rem 2rem;
}

.pachadi-title {
    text-align: center;
    background: linear-gradient(135deg, var(--gold-pale), var(--saffron));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pachadi-label {
    color: var(--saffron);
    border-color: var(--saffron);
    display: block;
    text-align: center;
}

.pachadi-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    color: var(--white-70);
}

.pachadi-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

/* Bowl */
.pachadi-bowl {
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
}

.bowl-svg {
    width: 150px;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
    animation: bowlFloat 4s ease-in-out infinite;
}

@keyframes bowlFloat {

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

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

.bowl-label {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Ingredients Grid */
.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    width: 100%;
    max-width: 800px;
}

.ingredient-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--white-10);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s var(--ease-smooth);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.ingredient-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.4s;
}

.ingredient-card[data-taste="sweet"]::before {
    background: radial-gradient(circle at center, rgba(255, 193, 7, 0.12), transparent 70%);
}

.ingredient-card[data-taste="sour"]::before {
    background: radial-gradient(circle at center, rgba(76, 175, 80, 0.12), transparent 70%);
}

.ingredient-card[data-taste="bitter"]::before {
    background: radial-gradient(circle at center, rgba(139, 195, 74, 0.12), transparent 70%);
}

.ingredient-card[data-taste="spicy"]::before {
    background: radial-gradient(circle at center, rgba(244, 67, 54, 0.12), transparent 70%);
}

.ingredient-card[data-taste="salty"]::before {
    background: radial-gradient(circle at center, rgba(158, 158, 158, 0.12), transparent 70%);
}

.ingredient-card[data-taste="tangy"]::before {
    background: radial-gradient(circle at center, rgba(255, 152, 0, 0.12), transparent 70%);
}

.ingredient-card:hover {
    transform: translateY(-5px) scale(1.03) !important;
    border-color: var(--gold);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.ingredient-card:hover::before {
    opacity: 1;
}

.ingredient-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.ingredient-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.taste-label {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.ingredient-card[data-taste="sweet"] .taste-label {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd54f;
}

.ingredient-card[data-taste="sour"] .taste-label {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.ingredient-card[data-taste="bitter"] .taste-label {
    background: rgba(139, 195, 74, 0.2);
    color: #aed581;
}

.ingredient-card[data-taste="spicy"] .taste-label {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
}

.ingredient-card[data-taste="salty"] .taste-label {
    background: rgba(158, 158, 158, 0.2);
    color: #bdbdbd;
}

.ingredient-card[data-taste="tangy"] .taste-label {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

.emotion {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.detail {
    font-size: 0.8rem;
    color: var(--white-50);
    line-height: 1.5;
}

.pachadi-wisdom {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.05rem;
    opacity: 0;
    transform: translateY(20px);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 9: EVENTS GATEWAY
   ═══════════════════════════════════════════════════════════════ */
.section-events {
    background: linear-gradient(180deg,
            #1a1000 0%,
            var(--cosmic-purple) 40%,
            var(--cosmic-deep) 100%);
    flex-direction: column;
}

.confetti-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.events-title {
    text-align: center;
    background: linear-gradient(135deg, var(--gold-pale), var(--gold), var(--lotus-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.events-label {
    display: block;
    text-align: center;
    color: var(--lotus-pink);
    border-color: var(--lotus-pink);
}

.events-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--white-70);
    margin-bottom: 2.5rem;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto 2.5rem;
}

.event-card {
    position: relative;
    padding: 2rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--white-10);
    text-align: center;
    transition: all 0.4s var(--ease-smooth);
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
}

.event-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, var(--gold), var(--lotus-pink), var(--saffron));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.event-card:hover {
    transform: translateY(-8px) !important;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 60px rgba(244, 160, 32, 0.05);
}

.event-card:hover::before {
    opacity: 1;
}

.event-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.event-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.event-card p {
    font-size: 0.85rem;
    color: var(--white-50);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.event-link {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    transition: color 0.3s;
}

.event-card:hover .event-link {
    color: var(--gold-bright);
}

/* CTA Button */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.1em;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--gold), var(--saffron));
    color: var(--cosmic-deep);
    font-weight: 700;
    transition: all 0.4s var(--ease-smooth);
    box-shadow: 0 4px 20px rgba(244, 160, 32, 0.3);
    margin: 0 auto;
    text-align: center;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(244, 160, 32, 0.5);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}

.events-content {
    text-align: center;
}

/* Footer */
.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--white-05);
}

.site-footer p {
    font-size: 0.85rem;
    color: var(--white-50);
}

.footer-small {
    font-size: 0.7rem !important;
    margin-top: 0.3rem;
    color: var(--white-20) !important;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .cosmic-bg-video,
    .krishna-video,
    #fullscreen-video {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TOUCH-FRIENDLY INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices: replace hover with active states */
    .ingredient-card:active {
        transform: translateY(-3px) scale(1.02) !important;
        border-color: var(--gold);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    .ingredient-card:active::before {
        opacity: 1;
    }

    .event-card:active {
        transform: translateY(-4px) !important;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .event-card:active::before {
        opacity: 1;
    }

    .invitation-cta:active {
        background: linear-gradient(135deg, rgba(244, 160, 32, 0.3), rgba(255, 213, 79, 0.15));
        box-shadow: 0 0 30px rgba(244, 160, 32, 0.25);
    }

    .cta-button:active {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(244, 160, 32, 0.4);
    }

    /* Make touch targets at least 44px */
    .nav-dot {
        width: 44px;
        height: 44px;
    }

    .invitation-cta,
    .cta-button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        min-height: 48px;
    }

    .event-card,
    .ingredient-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — TABLETS (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root {
        --section-pad: clamp(2rem, 6vw, 4rem);
    }

    .section-wheel {
        padding: 4rem 5% 4rem 3rem;
    }

    .wheel-container {
        width: 50vh;
        height: 50vh;
        left: -10%;
    }

    .section-wheel .text-overlay {
        max-width: 500px;
    }

    .yuga-panel {
        padding: 2rem;
    }

    .declaration-border {
        padding: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — LARGE PHONES (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ─── Global ─── */
    body {
        line-height: 1.6;
    }

    .story-section {
        padding: var(--section-pad) 1rem;
        min-height: auto;
        min-height: -webkit-fill-available;
    }

    .story-content {
        max-width: 100%;
    }

    .section-title {
        font-size: clamp(1.6rem, 5vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .lead-text {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* ─── Glass Panels ─── */
    .glass-panel,
    .glass-panel-dark,
    .glass-panel-ocean,
    .glass-panel-gold,
    .glass-panel-nature,
    .glass-panel-meaning,
    .glass-panel-warm {
        padding: 1.25rem 1rem;
        border-radius: 12px;
        margin: 1rem 0;
    }

    /* ─── Floating Nav ─── */
    .floating-nav {
        right: 0.4rem;
        gap: 0.5rem;
    }

    .nav-dot::before {
        display: none;
    }

    .nav-dot span {
        width: 6px;
        height: 6px;
    }

    .nav-dot:hover span,
    .nav-dot.active span {
        width: 10px;
        height: 10px;
    }

    /* ─── Invitation Splash ─── */
    .invitation-card {
        max-width: 90vw;
        padding: 2rem 1.5rem;
        border-radius: 18px;
        margin: 0 1rem;
    }

    .invitation-festival {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .invitation-title {
        font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    }

    .invitation-om {
        font-size: 2rem;
    }

    .mango-leaves {
        width: 50px;
    }

    .mango-left {
        left: 0.5rem;
    }

    .mango-right {
        right: 0.5rem;
    }

    .garland-svg {
        height: 50px;
    }

    /* ─── Section 1: Cosmic Ocean ─── */
    .section-cosmic {
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 2rem;
    }

    .cosmic-bg-video {
        display: none;
    }

    .vishnu-scene {
        width: 95vw;
        bottom: 20%;
    }

    .lotus-container {
        width: 100px;
    }

    .subtitle-banner {
        padding: 0.8rem 1rem;
    }

    .subtitle-text {
        font-size: 0.9rem;
    }

    /* ─── Section 2: Vedas Stolen ─── */
    .section-danger {
        flex-direction: column;
    }

    .demon-svg {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        height: 180px;
        margin: 0 auto 1rem;
        display: block;
    }

    .alert-banner {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* ─── Section 3: Matsya Avatar ─── */
    .section-ocean {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .section-ocean .section-bg-art {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
        z-index: 10;
        order: -1;
    }

    .matsya-svg {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 80vw;
        max-width: 320px;
        margin: 0 auto;
        display: block;
    }

    .section-ocean .story-content {
        order: 1;
    }

    .ocean-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
        line-height: 1.3;
    }

    .light-rays {
        width: 100%;
        height: 40%;
    }

    .victory-banner {
        padding: 1rem;
        font-size: 0.95rem;
    }

    /* ─── Section 4: Creation ─── */
    .declaration-border {
        padding: 1.5rem 1rem;
        border-radius: 14px;
    }

    .ugadi-name {
        font-size: clamp(3rem, 14vw, 5rem) !important;
    }

    .ugadi-alt {
        font-size: 1.1rem;
    }

    .ugadi-subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }

    /* ─── Section X: Cosmic Wheel ─── */
    .section-wheel {
        flex-direction: column;
        justify-content: center;
        padding: 3rem 1rem;
        text-align: center;
    }

    .wheel-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 50vw;
        height: 50vw;
        max-width: 250px;
        max-height: 250px;
        margin: 0 auto 2rem;
        opacity: 0.25;
    }

    .section-wheel .text-overlay {
        max-width: 100%;
        margin-right: 0;
        text-align: center;
    }

    .wheel-title {
        text-align: center;
    }

    /* ─── Section 5: Yugas ─── */
    .section-yugas {
        padding: 1.5rem 1rem;
    }

    .yuga-panel {
        padding: 1.5rem 1rem;
        border-radius: 14px;
    }

    .cosmic-alignment {
        position: relative;
        right: auto;
        top: auto;
        width: 80px;
        height: 80px;
        margin: 0 auto 1rem;
    }

    .crown-svg {
        display: none;
    }

    .yuga-title {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }

    .yuga-era {
        font-size: 0.65rem;
    }

    .divider-text {
        font-size: 1.2rem;
        min-width: 150px;
    }

    /* Krishna Video */
    .krishna-video-scene {
        margin: 1rem 0;
    }

    .krishna-video {
        max-height: 250px;
        border-radius: 12px;
    }

    .kali-yuga-banner {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }

    /* ─── Section 6: Meaning ─── */
    .etymology-display {
        margin: 2rem 0;
    }

    .word-split {
        flex-direction: column;
        gap: 0.8rem;
    }

    .word-plus,
    .word-equals {
        font-size: 1.5rem;
    }

    .word-part,
    .word-result {
        gap: 0.2rem;
    }

    .word-part .sanskrit,
    .word-result .sanskrit {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .result-sanskrit {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
    }

    .transliteration {
        font-size: 0.95rem;
    }

    /* ─── Section 7: Nature ─── */
    .section-nature {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .nature-scene {
        position: relative;
        width: 100%;
        height: 280px;
        margin-bottom: 1.5rem;
        right: auto;
        bottom: auto;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .nature-story {
        max-width: 100%;
    }

    .mango-tree-svg {
        position: relative;
        right: auto;
        bottom: auto;
        height: 100%;
        margin: 0 auto;
    }

    .nature-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    /* ─── Section 8: Pachadi ─── */
    .section-pachadi {
        padding: 3rem 1rem;
    }

    .pachadi-intro {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .ingredients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .ingredient-card {
        padding: 1rem 0.75rem;
        border-radius: 12px;
    }

    .ingredient-icon {
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
    }

    .ingredient-card h3 {
        font-size: 0.85rem;
    }

    .emotion {
        font-size: 0.8rem;
    }

    .detail {
        font-size: 0.7rem;
        line-height: 1.4;
    }

    .bowl-svg {
        width: 120px;
    }

    .pachadi-wisdom {
        font-size: 0.95rem;
    }

    /* ─── Section 9: Events ─── */
    .events-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
    }

    .event-card {
        padding: 1.5rem 1rem;
        border-radius: 14px;
    }

    .event-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .event-card h3 {
        font-size: 1rem;
    }

    .events-intro {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .cta-button {
        padding: 0.85rem 2rem;
        font-size: 0.9rem;
    }

    /* ─── Footer ─── */
    .site-footer {
        position: relative;
        padding: 1.5rem 1rem;
    }

    /* ─── Fullscreen Video Overlay ─── */
    .video-fullscreen-overlay video {
        width: 98vw;
        max-height: 70vh;
        border-radius: 8px;
    }

    .video-fullscreen-overlay .fullscreen-caption {
        bottom: 1.5rem;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    /* ─── Mandala Rings ─── */
    .mandala-ring.ring-1 {
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
    }

    .mandala-ring.ring-2 {
        width: 300px;
        height: 300px;
        margin: -150px 0 0 -150px;
    }

    .mandala-ring.ring-3 {
        width: 400px;
        height: 400px;
        margin: -200px 0 0 -200px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — SMALL PHONES (max-width: 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .section-title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }

    .invitation-card {
        padding: 1.5rem 1rem;
    }

    .invitation-festival {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }

    .invitation-cta {
        padding: 0.8rem 1.5rem;
        font-size: 0.75rem;
    }

    .ingredients-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ingredient-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
        text-align: left;
        padding: 0.8rem 1rem;
    }

    .ingredient-icon {
        font-size: 2rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .ingredient-card h3 {
        font-size: 0.9rem;
        margin-bottom: 0.1rem;
    }

    .ingredient-card .detail {
        display: none;
    }

    .ugadi-name {
        font-size: clamp(2.5rem, 15vw, 4rem) !important;
    }

    .declaration-border {
        padding: 1.2rem 0.8rem;
    }

    .declaration-border h2 {
        font-size: 0.9rem;
        letter-spacing: 0.1em;
    }

    .cosmic-title {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }

    /* ─── Section 3: Matsya Avatar (small phones) ─── */
    .matsya-svg {
        width: 75vw;
        max-width: 260px;
    }

    .ocean-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .victory-banner {
        padding: 0.8rem;
        font-size: 0.85rem;
    }

    /* ─── Section 7: Nature (small phones) ─── */
    .nature-scene {
        height: 220px;
        margin-bottom: 1rem;
    }

    .nature-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .chapter-number {
        font-size: 0.65rem;
        padding: 3px 10px;
    }

    .story-section {
        padding: 2rem 0.8rem;
    }

    .yuga-panel {
        padding: 1.2rem 0.8rem;
    }

    .yuga-title {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }

    .krishna-video {
        max-height: 200px;
    }

    .wheel-container {
        width: 40vw;
        height: 40vw;
        max-width: 180px;
        max-height: 180px;
    }

    .divider-text {
        font-size: 1rem;
        min-width: 120px;
    }

    .loader-text {
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — VERY SMALL PHONES (max-width: 360px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .invitation-festival {
        font-size: 1.6rem;
    }

    .invitation-card {
        padding: 1.2rem 0.8rem;
        border-radius: 14px;
    }

    .ugadi-name {
        font-size: 2.2rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .invitation-card {
        padding: 1rem 2rem;
    }

    .invitation-om {
        font-size: 1.5rem;
        margin-bottom: 0.3rem;
    }

    .invitation-festival {
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
    }

    .invitation-divider {
        margin: 0.3rem 0;
    }

    .invitation-note {
        margin-bottom: 0.5rem;
        padding: 0.3rem 0.8rem;
    }

    .invitation-cta {
        padding: 0.5rem 1.5rem;
    }

    .story-section {
        min-height: auto;
        padding: 2rem 1rem;
    }

    .section-cosmic {
        min-height: 100vh;
    }

    .loader-ring {
        width: 60px;
        height: 60px;
    }

    .loader-ring.ring-2 {
        width: 80px;
        height: 80px;
    }

    .loader-ring.ring-3 {
        width: 100px;
        height: 100px;
    }
}