/* Strict Typographic Definitions */
.font-serif {
    font-family: 'Cinzel', Georgia, serif !important;
}

.font-sans {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FAF9F5;
}

/* Custom smooth easing for luxury editorial feel */
.premium-transition {
    transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* Strict Custom Font Mapping */
.font-serif {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.font-sans {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Ambient Background & Premium Elements Animations */
@keyframes gentle-float-up {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(0.5deg);
    }
}

@keyframes gentle-float-down {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(12px) rotate(-0.5deg);
    }
}

@keyframes mist-drift {
    0% {
        transform: translateX(-5%) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translateX(5%) scale(1.05);
        opacity: 0.4;
    }

    100% {
        transform: translateX(-5%) scale(1);
        opacity: 0.2;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.08);
    }
}

@keyframes orbit-slow {
    0% {
        transform: rotate(0deg) translateX(40px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
}

/* Premium Floating Bubble Dynamics */
@keyframes premium-bubble-rise {
    0% {
        transform: translateY(115vh) translateX(0) scale(0.6);
        opacity: 0;
    }

    15% {
        opacity: var(--bubble-target-opacity, 0.6);
    }

    50% {
        transform: translateY(50vh) translateX(45px) scale(1.1);
    }

    85% {
        opacity: var(--bubble-target-opacity, 0.6);
    }

    100% {
        transform: translateY(-20vh) translateX(-20px) scale(0.7);
        opacity: 0;
    }
}

@keyframes line-draw {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* Hardware accelerated global animations */
.animate-float-up {
    animation: gentle-float-up 10s ease-in-out infinite;
}

.animate-float-down {
    animation: gentle-float-down 12s ease-in-out infinite;
}

.animate-mist {
    animation: mist-drift 22s ease-in-out infinite;
    mix-blend-mode: overlay;
}

.animate-glow {
    animation: pulse-glow 10s ease-in-out infinite;
}

.animate-orbit {
    animation: orbit-slow 25s linear infinite;
}

.animate-line {
    animation: line-draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.text-gradient-saffron {
    background: linear-gradient(135deg, #1A1A1A 20%, #C4561A 75%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* High-End Glassmorphic Devotional Bubble Structural Base */
.premium-bubble {
    position: absolute;
    bottom: -60px;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6),
        0 8px 24px rgba(196, 86, 26, 0.06);
    transition: opacity 0.5s ease;
}


/* Smooth reveal animation */
.reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Cinematic Parallax Effect */
.parallax-layer {
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Custom Soft Glow */
.gold-bloom {
    filter: blur(80px);
    background: radial-gradient(circle, rgba(197, 163, 103, 0.15) 0%, transparent 70%);
}

.masonry-grid {
    column-count: 1;
    column-gap: 2rem;
}

@media (min-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 3;
    }
}

/* Modern Image Masking */
.image-container {
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08);
}

.glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 2rem;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.saffron-glow {
    box-shadow: 0 0 40px -10px rgba(255, 153, 51, 0.2);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle texture for a premium feel */
.bg-texture {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f1e9da' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.book-card-shadow {
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.03), -5px -5px 15px rgba(255, 255, 255, 0.8);
}

.saffron-line {
    width: 0;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.group:hover .saffron-line {
    width: 100%;
}

.premium-transition {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Intensely radiant light glow */
.gold-glow:hover {
    color: #FFFDF9 !important;
    text-shadow: 0 0 15px rgba(244, 178, 81, 0.8);
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 0.5;
    }
}

.spark {
    animation: floatSlow 7s ease-in-out infinite;
}