/* Puja Archana Custom Styles & Alpona Background System */

:root {
    --color-cream: #FFFDD0;
    --color-saffron: #FF9933;
    --color-marigold: #F2A900;
    --color-maroon: #800020;
    --color-lotus: #FC8EAC;
    --color-ivory: #FFFFF0;
}

body {
    background-color: transparent;
    color: #333333;
    position: relative;
    overflow-x: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* -----------------------------------------
   Phase 4: Redesigned Global Background System
   ----------------------------------------- */

.site-global-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFF9F1;
    transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.5s ease;
}

/* Desktop global background */
@media (min-width: 768px) {
    .site-global-background {
        background-image:
            linear-gradient(
                rgba(255, 250, 242, 0.08),
                rgba(255, 250, 242, 0.08)
            ),
            url('../images/backgrounds/puja-archana-alpana-desktop.jpg?v=3.0');
    }
}

/* Mobile global background */
@media (max-width: 767px) {
    .site-global-background {
        background-image:
            linear-gradient(
                rgba(255, 250, 242, 0.08),
                rgba(255, 250, 242, 0.08)
            ),
            url('../images/backgrounds/puja-archana-alpana-mobile.jpg?v=3.0');
    }
}

header {
    position: sticky !important;
    top: 15px !important;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1200px;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 40;
}

header.scrolled {
    background-color: rgba(255, 250, 245, 0.94) !important;
    border: 1px solid rgba(217, 161, 93, 0.18) !important;
    box-shadow: 0 10px 30px rgba(128, 0, 32, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}

header nav {
    border-top: 1px solid transparent !important;
    transition: border-color 0.4s ease;
}

header.scrolled nav {
    border-top: 1px solid rgba(217, 161, 93, 0.12) !important;
}

@media (max-width: 768px) {
    header {
        width: 95%;
        top: 8px !important;
        border-radius: 20px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

/* Animations definitions for Alpona background */
@keyframes desktopAlpanaDrift {
    0%, 100% {
        transform: scale(1.02) translate3d(0, 0, 0);
        opacity: 0.96;
    }
    50% {
        transform: scale(1.035) translate3d(0, -4px, 0);
        opacity: 1;
    }
}

.alpana-animated {
    animation: desktopAlpanaDrift 45s ease-in-out infinite;
}

/* Different page opacity styling modifiers */
.alpana-style-medium {
    opacity: 0.85;
}

.alpana-style-light {
    opacity: 0.60;
}

.alpana-style-very-light {
    opacity: 0.35;
}

.alpana-style-minimal {
    opacity: 0.15;
    background-image: none !important; /* solid color only */
}

/* Responsive configurations */
@media (max-width: 1024px) {
    /* For smaller desktop / tablet screens, center center cover is standard */
    .site-global-background {
        background-position: center center;
    }
}

/* Mobile subtle animation for 360px+ screens */
@keyframes mobileAlpanaDrift {
    0%, 100% {
        transform: scale(1.01) translate3d(0, 0, 0);
        opacity: 0.97;
    }
    50% {
        transform: scale(1.02) translate3d(0, -2px, 0);
        opacity: 1;
    }
}

@media (max-width: 767px) {
    /* For 360px+ screens, run very subtle light animation */
    @media (min-width: 360px) {
        .alpana-animated {
            animation: mobileAlpanaDrift 45s ease-in-out infinite !important;
        }
    }
    
    /* Under 360px (e.g. 320px screens), keep it static for performance */
    @media (max-width: 359px) {
        .alpana-animated {
            animation: none !important;
            transform: none !important;
        }
    }
}

/* OS Reduced Motion accessibility support */
@media (prefers-reduced-motion: reduce) {
    .alpana-animated {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Diya glow animation */
@keyframes diya-flicker {
    0%, 100% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 4px var(--color-saffron)); }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 10px var(--color-marigold)); }
}

.diya-flame {
    animation: diya-flicker 3s ease-in-out infinite;
    transform-origin: bottom center;
}


/* -----------------------------------------
   Carousel Slider System (Phase 5)
   ----------------------------------------- */

.carousel-viewport {
    position: relative;
    aspect-ratio: 21 / 9; /* standard wide format */
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 10;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 20;
}

/* -----------------------------------------
   Layout Component Stylings
   ----------------------------------------- */

.gradient-card-ford {
    background: linear-gradient(135deg, #FFFDD0 0%, #FFF7E6 100%);
}

.border-devotional {
    border: 1px solid rgba(128, 0, 32, 0.15);
}

.text-temple-maroon {
    color: var(--color-maroon);
}

.bg-temple-maroon {
    background-color: var(--color-maroon);
}

.hover-elevation {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-elevation:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(128, 0, 32, 0.08);
}