/* ============================
   VINAY PAI - LUXURY BRAND STYLES
   Colors: Gold (#D4AF37) & Obsidian (#050505)
   ============================ */

:root {
    --gold: #D4AF37;
    --gold-light: #FCF6BA;
    --gold-dark: #8B6914;
    --obsidian: #050505;
    --charcoal: #0a0a0a;
}

body {
    background-color: var(--obsidian);
    color: white;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

/* Gold Gradient Text */
.text-gold-gradient {
    background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hidden {
    display: none;
}

/* Smooth fade in */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fixed Background for Parallax Effect */
.fixed-bg {
    background-attachment: fixed;
}
@media (max-width: 768px) {
    .fixed-bg {
        background-attachment: scroll;
    }
}

/* ============================
   ANIMATIONS
   ============================ */

@keyframes fog-flow {
    0% { transform: translateX(-10%) translateY(-10%) scale(1); opacity: 0.5; }
    50% { transform: translateX(5%) translateY(5%) scale(1.1); opacity: 0.8; }
    100% { transform: translateX(-10%) translateY(-10%) scale(1); opacity: 0.5; }
}

.hero-fog {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 105, 20, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(252, 246, 186, 0.03) 0%, transparent 40%);
    filter: blur(80px);
    animation: fog-flow 25s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 0;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 60s linear infinite;
}

.animate-spin-slow-reverse {
    animation: spin-slow 80s linear infinite reverse;
}

/* Cosmic Blob Animation */
@keyframes blob {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6;
    }
    25% { 
        transform: translate(30px, -50px) scale(1.1); 
        opacity: 0.8;
    }
    50% { 
        transform: translate(-20px, 20px) scale(0.95); 
        opacity: 0.5;
    }
    75% { 
        transform: translate(40px, 30px) scale(1.05); 
        opacity: 0.7;
    }
}

.animate-blob {
    animation: blob 20s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
}

/* Animation Delays */
.animation-delay-2000 {
    animation-delay: 2s;
}
.animation-delay-3000 {
    animation-delay: 3s;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

/* Cosmic Flowing Lines */
@keyframes cosmic-flow {
    0% {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        stroke-dashoffset: -1000;
        opacity: 0;
    }
}

@keyframes cosmic-drift {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-15px) translateX(10px);
    }
    50% {
        transform: translateY(10px) translateX(-5px);
    }
    75% {
        transform: translateY(-5px) translateX(15px);
    }
}

.cosmic-line {
    stroke-dasharray: 200 800;
    stroke-dashoffset: 1000;
    animation: cosmic-flow 12s ease-in-out infinite, cosmic-drift 20s ease-in-out infinite;
}

.cosmic-line-1 {
    animation-delay: 0s;
}

.cosmic-line-2 {
    animation-delay: 2.5s;
    stroke-dasharray: 150 700;
}

.cosmic-line-3 {
    animation-delay: 5s;
    stroke-dasharray: 100 600;
}

.cosmic-line-4 {
    animation-delay: 7.5s;
    stroke-dasharray: 180 750;
}

.cosmic-line-5 {
    animation-delay: 10s;
    stroke-dasharray: 120 650;
}

/* Aurora Waves */
.aurora-wave {
    position: absolute;
    width: 200%;
    height: 300px;
    left: -50%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.03) 10%,
        rgba(255, 215, 0, 0.15) 30%,
        rgba(253, 185, 49, 0.2) 50%,
        rgba(255, 215, 0, 0.15) 70%,
        rgba(212, 175, 55, 0.03) 90%,
        transparent 100%
    );
    filter: blur(40px);
    border-radius: 50%;
    opacity: 0.6;
}

.aurora-wave-1 {
    top: 10%;
    animation: aurora-float 15s ease-in-out infinite, aurora-shift 8s ease-in-out infinite;
}

.aurora-wave-2 {
    top: 40%;
    animation: aurora-float 18s ease-in-out infinite reverse, aurora-shift 10s ease-in-out infinite;
    animation-delay: 3s;
    opacity: 0.4;
}

.aurora-wave-3 {
    top: 70%;
    animation: aurora-float 20s ease-in-out infinite, aurora-shift 12s ease-in-out infinite reverse;
    animation-delay: 6s;
    opacity: 0.5;
}

@keyframes aurora-float {
    0%, 100% {
        transform: translateX(-10%) rotate(-3deg) scaleY(1);
    }
    25% {
        transform: translateX(5%) rotate(2deg) scaleY(1.2);
    }
    50% {
        transform: translateX(10%) rotate(-2deg) scaleY(0.9);
    }
    75% {
        transform: translateX(-5%) rotate(3deg) scaleY(1.1);
    }
}

@keyframes aurora-shift {
    0%, 100% {
        opacity: 0.4;
        filter: blur(40px) hue-rotate(0deg);
    }
    50% {
        opacity: 0.7;
        filter: blur(50px) hue-rotate(10deg);
    }
}

/* Floating Particles */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #FFD700 0%, rgba(212, 175, 55, 0.5) 50%, transparent 100%);
    border-radius: 50%;
    animation: particle-float 20s ease-in-out infinite;
}

.particle-1 { left: 10%; top: 20%; animation-delay: 0s; width: 6px; height: 6px; }
.particle-2 { left: 25%; top: 60%; animation-delay: 2s; width: 3px; height: 3px; }
.particle-3 { left: 40%; top: 30%; animation-delay: 4s; width: 5px; height: 5px; }
.particle-4 { left: 55%; top: 70%; animation-delay: 6s; width: 4px; height: 4px; }
.particle-5 { left: 70%; top: 25%; animation-delay: 8s; width: 3px; height: 3px; }
.particle-6 { left: 85%; top: 55%; animation-delay: 10s; width: 5px; height: 5px; }
.particle-7 { left: 15%; top: 80%; animation-delay: 12s; width: 4px; height: 4px; }
.particle-8 { left: 90%; top: 15%; animation-delay: 14s; width: 6px; height: 6px; }

@keyframes particle-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-100px) translateX(30px) scale(1.5);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-50px) translateX(-20px) scale(1);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-150px) translateX(50px) scale(1.3);
        opacity: 0.9;
    }
}

/* ============================
   ABSTRACT ART BACKGROUNDS (CSS-Based)
   ============================ */

/* Hero Abstract - Gold Fluid Art Effect */
.abstract-hero {
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 80% 60%, rgba(139, 105, 20, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 50% 20%, rgba(252, 246, 186, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(212, 175, 55, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
}

/* Bronze/Amber Abstract (Replaces Purple) */
.abstract-bronze {
    background: 
        radial-gradient(circle at 80% 20%, rgba(180, 83, 9, 0.3) 0%, transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(217, 119, 6, 0.15) 0%, transparent 70%),
        linear-gradient(180deg, #1a0a05 0%, #050505 100%);
}

/* Gold Celestial Abstract */
.abstract-gold {
    background: 
        radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.3) 0%, transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(139, 105, 20, 0.15) 0%, transparent 70%),
        linear-gradient(180deg, #1a1205 0%, #050505 100%);
}

/* Platinum/Silver Abstract (Replaces Blue) */
.abstract-platinum {
    background: 
        radial-gradient(circle at 80% 20%, rgba(229, 231, 235, 0.15) 0%, transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(156, 163, 175, 0.1) 0%, transparent 70%),
        linear-gradient(180deg, #101010 0%, #050505 100%);
}

/* Progressive Gold Gradients (Home Page Cards) */
.gold-step-1 {
    background: 
        radial-gradient(circle at 80% 20%, rgba(252, 246, 186, 0.2) 0%, transparent 70%), /* Pale Gold */
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 70%), /* Gold */
        linear-gradient(180deg, #1a1a15 0%, #050505 100%);
}

.gold-step-2 {
    background: 
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.2) 0%, transparent 70%), /* Gold */
        radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 70%), /* Metallic Gold */
        linear-gradient(180deg, #1a1505 0%, #050505 100%);
}

.gold-step-3 {
    background: 
        radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.25) 0%, transparent 70%), /* Metallic Gold */
        radial-gradient(circle at 20% 80%, rgba(184, 134, 11, 0.15) 0%, transparent 70%), /* Dark Goldenrod */
        linear-gradient(180deg, #1a1005 0%, #050505 100%);
}

.gold-step-4 {
    background: 
        radial-gradient(circle at 80% 20%, rgba(184, 134, 11, 0.25) 0%, transparent 70%), /* Dark Goldenrod */
        radial-gradient(circle at 20% 80%, rgba(139, 105, 20, 0.15) 0%, transparent 70%), /* Dark Gold */
        linear-gradient(180deg, #1a0a05 0%, #050505 100%);
}

/* Flowing Lines Pattern */
.abstract-flow {
    background: var(--obsidian);
    position: relative;
    overflow: hidden;
}
.abstract-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            -30deg,
            transparent 0px,
            transparent 40px,
            rgba(212, 175, 55, 0.03) 40px,
            rgba(212, 175, 55, 0.03) 41px
        ),
        repeating-linear-gradient(
            30deg,
            transparent 0px,
            transparent 40px,
            rgba(212, 175, 55, 0.02) 40px,
            rgba(212, 175, 55, 0.02) 41px
        );
    pointer-events: none;
}

/* ============================
   TEXTURED BACKGROUNDS
   ============================ */

/* Noise Texture Overlay */
.bg-noise {
    position: relative;
}
.bg-noise::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Radial Gold Glow */
.bg-gold-glow {
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
}

/* Diagonal Lines Pattern */
.bg-diagonal-lines {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 1px,
        rgba(212, 175, 55, 0.03) 1px,
        rgba(212, 175, 55, 0.03) 2px
    );
}

/* Grid Pattern */
.bg-grid {
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Gradient Mesh Background */
.bg-mesh {
    background: 
        radial-gradient(at 40% 20%, rgba(212, 175, 55, 0.12) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(255, 255, 255, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(212, 175, 55, 0.06) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(180, 83, 9, 0.06) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(212, 175, 55, 0.1) 0px, transparent 50%);
}

/* ============================
   ABSTRACT ILLUSTRATION BOXES
   ============================ */

.abstract-art-box {
    position: relative;
    overflow: hidden;
}

/* Geometric Gold Pattern */
.geo-gold {
    background: linear-gradient(135deg, #0a0a0a 0%, #050505 100%);
}
.geo-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.15) 45%, transparent 55%),
        linear-gradient(-135deg, transparent 40%, rgba(212, 175, 55, 0.1) 45%, transparent 55%),
        repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 30deg, rgba(212, 175, 55, 0.02) 30deg 60deg);
    pointer-events: none;
}
.geo-gold::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 60%;
    height: 60%;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Fluid Wave Pattern */
.fluid-wave {
    background: linear-gradient(180deg, #0a0508 0%, #050505 100%);
}
.fluid-wave::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 50% at 60% 0%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 20% 100%, rgba(139, 105, 20, 0.15) 0%, transparent 50%),
        radial-gradient(circle 50% at 90% 50%, rgba(252, 246, 186, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* Prism Light Effect */
.prism-light {
    background: linear-gradient(135deg, #050505 0%, #0a0a0a 100%);
}
.prism-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 45deg at 70% 30%, 
            transparent 0deg, 
            rgba(212, 175, 55, 0.15) 30deg, 
            transparent 60deg,
            rgba(139, 92, 246, 0.1) 90deg,
            transparent 120deg,
            rgba(59, 130, 246, 0.08) 150deg,
            transparent 180deg
        );
    pointer-events: none;
}

/* ============================
   DECORATIVE ELEMENTS
   ============================ */

/* Gold Corner Accent */
.gold-corner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, transparent 50%, rgba(212, 175, 55, 0.08) 50%);
    pointer-events: none;
}

/* Gold Border Glow */
.gold-border-glow {
    box-shadow: 
        0 0 0 1px rgba(212, 175, 55, 0.25),
        0 0 40px rgba(212, 175, 55, 0.15),
        inset 0 0 40px rgba(0, 0, 0, 0.4);
}

/* Floating Gold Orb */
.gold-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.35) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

/* Animated Gold Shimmer */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-shimmer {
    animation: shimmer 4s ease-in-out infinite;
}

.gold-shimmer {
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0) 0%,
        rgba(212, 175, 55, 0.4) 50%,
        rgba(212, 175, 55, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

/* ============================
   SECTION BACKGROUNDS
   ============================ */

.section-dark {
    background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
}

.section-elevated {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
}

/* ============================
   CARD ENHANCEMENTS
   ============================ */

.card-premium {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(5, 5, 5, 0.95));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-premium:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 
        0 0 60px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(212, 175, 55, 0.08),
        inset 0 1px 0 rgba(212, 175, 55, 0.1);
    transform: translateY(-5px);
}

.card-glass {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================
   ABSTRACT ICON CONTAINERS
   ============================ */

.icon-container-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(139, 105, 20, 0.1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
}

.icon-container-bronze {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.15) 0%, rgba(146, 64, 14, 0.1) 100%);
    border: 1px solid rgba(180, 83, 9, 0.3);
    box-shadow: 0 0 30px rgba(180, 83, 9, 0.1);
}

.icon-container-platinum {
    background: linear-gradient(135deg, rgba(229, 231, 235, 0.1) 0%, rgba(156, 163, 175, 0.05) 100%);
    border: 1px solid rgba(229, 231, 235, 0.2);
    box-shadow: 0 0 30px rgba(229, 231, 235, 0.05);
}

/* ============================
   TYPOGRAPHY ENHANCEMENTS
   ============================ */

.text-shadow-gold {
    text-shadow: 0 0 60px rgba(212, 175, 55, 0.4);
}

.text-shadow-deep {
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(0, 0, 0, 0.8);
}

/* Premium Gold Text - Clean & Elegant */
.text-gold-premium {
    color: #D4AF37;
    text-shadow: 
        0 0 40px rgba(212, 175, 55, 0.3),
        0 0 80px rgba(212, 175, 55, 0.15);
}

/* Subtle Gold Shimmer - Horizontal gradient */
.text-gold-shimmer {
    background: linear-gradient(
        90deg, 
        #B8860B 0%, 
        #D4AF37 25%, 
        #FFD700 50%, 
        #D4AF37 75%, 
        #B8860B 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 8s ease-in-out infinite;
}

@keyframes shimmer-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.text-outline-gold {
    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.3);
}

/* ============================
   BUTTON ENHANCEMENTS
   ============================ */

.btn-gold-glow {
    box-shadow: 
        0 0 25px rgba(212, 175, 55, 0.35),
        0 0 50px rgba(212, 175, 55, 0.15);
    transition: all 0.3s ease;
}

.btn-gold-glow:hover {
    box-shadow: 
        0 0 40px rgba(212, 175, 55, 0.6),
        0 0 80px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

/* ============================
   DIVIDERS & ACCENTS
   ============================ */

.divider-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.divider-vertical {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* ============================
   SCROLLBAR STYLING
   ============================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--obsidian);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-dark), var(--gold));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ============================
   SELECTION STYLING
   ============================ */

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

/* ============================
   LOGO GOLD TINT
   ============================ */

.logo-gold-tint {
    /* Convert black to gold using filters */
    filter: 
        invert(78%) 
        sepia(50%) 
        saturate(600%) 
        hue-rotate(5deg) 
        brightness(0.95) 
        contrast(1.1);
    /* Adds a subtle glow effect */
    drop-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.logo-gold-tint:hover {
    /* Only keeping the glow, removing color shift */
    drop-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* ============================
   GRADIENT MASK LOGO
   ============================ */

.logo-gradient-mask {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #8B6914 100%);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* Animation for the gradient to look alive */
    background-size: 200% 200%;
    animation: shimmer 4s ease infinite;
}

/* ============================
   FONTS
   ============================ */

.font-handwriting {
    font-family: 'Dancing Script', cursive;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

/* ============================
   MODAL ANIMATIONS & STYLES
   ============================ */
   
@keyframes scale-up {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-scale-up {
    animation: scale-up 0.3s ease-out forwards;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

/* ============================
   PRINT STYLES (PDF Generation)
   ============================ */

@media print {
    /* Hide Navigation, Footer, Modals, Buttons */
    nav, footer, .modal, button, .print\:hidden {
        display: none !important;
    }

    /* Force background graphics to print */
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background-color: #050505 !important;
        color: black !important;
    }

    /* Ensure text is readable on white paper if users print that way, 
       but for PDF generation we want to keep the dark mode look if possible.
       Standard browsers default to white background for print. 
       To keep dark mode, we rely on -webkit-print-color-adjust. 
    */

    .page-section {
        display: block !important; /* Ensure the active section prints */
        position: static !important;
        overflow: visible !important;
    }

    /* Hide other sections */
    .page-section.hidden {
        display: none !important;
    }

    /* Show Print-Only Elements */
    .print\:block {
        display: block !important;
    }
    
    .print\:flex {
        display: flex !important;
    }

    /* Reset spacing for print */
    .min-h-screen {
        min-height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .max-w-4xl {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure white text if background prints dark */
    p, h1, h2, h3, h4, h5, h6, li {
        color: black !important; /* Fallback for standard print */
        text-shadow: none !important;
    }
}