/* GAG Recipes - Advanced Depth & Hierarchy Effects */

/* Enhanced Shadow System */
:root {
    /* Layered Shadow System */
    --shadow-level-1: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-level-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Colored Shadows */
    --shadow-primary: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
    --shadow-secondary: 0 10px 25px -5px rgba(16, 185, 129, 0.2);
    --shadow-accent: 0 10px 25px -5px rgba(245, 158, 11, 0.2);
    
    /* Depth Gradients */
    --gradient-depth-1: linear-gradient(145deg, #ffffff 0%, #ffffff 100%);
    --gradient-depth-2: linear-gradient(145deg, #ffffff 0%, #f9f9f9 100%);
    --gradient-depth-3: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
    
    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* Neumorphism */
    --neuro-light: #ffffff;
    --neuro-dark: #d1d5db;
    --neuro-inset: inset 5px 5px 10px #d1d5db, inset -5px -5px 10px #ffffff;
    --neuro-outset: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff;
}

/* Enhanced Card System with Depth */
.card-depth-1 {
    background: var(--gradient-depth-1);
    box-shadow: var(--shadow-level-2);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-depth-1:hover {
    box-shadow: var(--shadow-level-3);
    transform: translateY(-2px);
}

.card-depth-2 {
    background: var(--gradient-depth-2);
    box-shadow: var(--shadow-level-3);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-depth-2:hover {
    box-shadow: var(--shadow-level-4);
    transform: translateY(-4px);
}

.card-depth-3 {
    background: var(--gradient-depth-3);
    box-shadow: var(--shadow-level-4);
    border: 1px solid rgba(203, 213, 225, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-depth-3:hover {
    box-shadow: var(--shadow-level-5);
    transform: translateY(-6px);
}

/* Glass Morphism Cards */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

.card-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Neumorphism Cards */
.card-neuro {
    background: var(--neuro-light);
    box-shadow: var(--neuro-outset);
    border: none;
    transition: all 0.3s ease;
}

.card-neuro:hover {
    box-shadow: var(--neuro-inset);
}

.card-neuro.pressed {
    box-shadow: var(--neuro-inset);
}

/* Enhanced Hero Section with Depth */
.hero-section-enhanced {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
    z-index: -1;
}

.hero-content-enhanced {
    position: relative;
    z-index: 1;
}

/* Floating Elements */
.floating-element {
    animation: float 6s ease-in-out infinite;
}

.floating-element-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: -2s;
}

.floating-element-slow {
    animation: float 8s ease-in-out infinite;
    animation-delay: -4s;
}

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

/* Parallax Layers */
.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.parallax-bg {
    transform: translateZ(-1px) scale(2);
}

.parallax-mid {
    transform: translateZ(-0.5px) scale(1.5);
}

.parallax-front {
    transform: translateZ(0);
}

/* Enhanced Typography Hierarchy */
.text-hierarchy-1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.text-hierarchy-2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-800);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

.text-hierarchy-3 {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
}

.text-hierarchy-4 {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

/* Enhanced Button Hierarchy */
.btn-enhanced {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-enhanced:hover::before {
    left: 100%;
}

.btn-primary-enhanced {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    box-shadow: var(--shadow-primary);
    border: none;
}

.btn-primary-enhanced:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    box-shadow: var(--shadow-level-4), var(--shadow-primary);
    transform: translateY(-2px);
}

.btn-secondary-enhanced {
    background: linear-gradient(135deg, var(--secondary-500), var(--secondary-600));
    box-shadow: var(--shadow-secondary);
    border: none;
}

.btn-secondary-enhanced:hover {
    background: linear-gradient(135deg, var(--secondary-600), var(--secondary-700));
    box-shadow: var(--shadow-level-4), var(--shadow-secondary);
    transform: translateY(-2px);
}

/* Enhanced Navigation with Depth */
.navbar-enhanced {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-level-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-enhanced.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-level-3);
}

/* Content Sections with Layered Depth */
.section-layered {
    position: relative;
    z-index: 1;
}

.section-layered::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    z-index: -1;
}

.section-elevated {
    background: var(--gradient-depth-1);
    box-shadow: var(--shadow-level-2);
    border-radius: 2rem;
    margin: 2rem 0;
    position: relative;
    z-index: 2;
}

/* Enhanced Grid with Staggered Animation */
.grid-staggered .card {
    opacity: 0;
    transform: translateY(30px);
    animation: staggerIn 0.6s ease forwards;
}

.grid-staggered .card:nth-child(1) { animation-delay: 0.1s; }
.grid-staggered .card:nth-child(2) { animation-delay: 0.2s; }
.grid-staggered .card:nth-child(3) { animation-delay: 0.3s; }
.grid-staggered .card:nth-child(4) { animation-delay: 0.4s; }
.grid-staggered .card:nth-child(5) { animation-delay: 0.5s; }
.grid-staggered .card:nth-child(6) { animation-delay: 0.6s; }

@keyframes staggerIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Form Elements with Depth */
.form-enhanced .form-input {
    background: var(--gradient-depth-1);
    border: 2px solid transparent;
    box-shadow: var(--shadow-level-1);
    transition: all 0.3s ease;
}

.form-enhanced .form-input:focus {
    background: white;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-level-2), 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

/* Scroll-triggered Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Interactive Hover Effects */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-level-5);
}

.hover-glow {
    transition: all 0.3s ease;
    position: relative;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.hover-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-500), var(--secondary-500), var(--accent-500));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hover-glow:hover::after {
    opacity: 0.7;
}

/* Responsive Depth Adjustments */
@media (max-width: 768px) {
    .card-depth-1,
    .card-depth-2,
    .card-depth-3 {
        box-shadow: var(--shadow-level-2);
    }
    
    .card-depth-1:hover,
    .card-depth-2:hover,
    .card-depth-3:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-level-3);
    }
    
    .hover-lift:hover {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Print Styles - Remove Depth Effects */
@media print {
    .card-depth-1,
    .card-depth-2,
    .card-depth-3,
    .card-glass,
    .card-neuro,
    .section-elevated {
        box-shadow: none !important;
        background: white !important;
        border: 1px solid #ccc !important;
    }
    
    .hover-lift,
    .hover-glow {
        transform: none !important;
    }
}