/* 
 * Animations CSS - The Choreographer of Our Digital Ballet
 * Where movement meets meaning, and transitions tell stories
 * Like a BBC period drama, but with more CSS transforms and fewer carriages
 */

/* Background gradient animation - The slow-moving foundation of our visual symphony */
@keyframes subtleGradientMove {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
    /* A complete cycle, like British weather in a single day */
}

/* Floating particles animation - The ethereal dance of digital dust motes */
@keyframes float {
    0%, 100% { 
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0; /* Start invisible at the bottom */
    }
    10%, 90% { 
        opacity: 1; /* Fade in and out gracefully */
    }
    50% { 
        transform: translateY(-20px) translateX(20px) rotate(180deg);
        opacity: 0.8; /* Peak visibility midway */
    }
    /* A gentle drift upward, like hope during a team meeting */
}

/* Parallax Background Overlay - The dramatic backdrop system */
.parallax-overlay {
    position: fixed; /* Fixed to viewport for parallax effect */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Look but don't touch */
    z-index: -1; /* Behind everything else */
    opacity: 0.5; /* Subtle presence */
    will-change: transform; /* Optimize for smooth movement */
    overflow: hidden; /* Restore to backup setting - hide excess image */
    --transition-progress: 0; /* CSS custom property for dynamic effects */
}

/* Reduce effects during loading to prevent jank */
body.loading .parallax-overlay {
    opacity: 0.3; /* Lighter during load */
    filter: none; /* No fancy filters while loading - keep it simple */
}

/* Full effects once loaded */
body.loaded .parallax-overlay {
    opacity: 0.5;
    transition: opacity 0.5s ease-out;
}

/* Base dark overlay that provides mood without completely obscuring the image */
.parallax-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        rgba(calc(30 - var(--transition-progress, 0) * 30), 
             calc(15 - var(--transition-progress, 0) * 15), 
             calc(45 - var(--transition-progress, 0) * 45), 
             calc(0.3 + var(--transition-progress, 0) * 0.2)); /* REDUCED opacity - was blocking the image */
    pointer-events: none;
    z-index: 1;
    transition: all 0.1s ease-out; /* Smooth color transitions */
}

/* Subtle vibrant color patches overlay - The artistic flourishes */
.parallax-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Multiple radial gradients for dynamic color patches */
        radial-gradient(circle at 15% 25%, 
            rgba(255, 20, 147, calc(var(--transition-progress, 0) * 0.08)) 0%,
            transparent 12%),
        radial-gradient(circle at 85% 75%, 
            rgba(0, 255, 127, calc(var(--transition-progress, 0) * 0.06)) 0%,
            transparent 15%),
        radial-gradient(circle at 70% 20%, 
            rgba(255, 20, 147, calc(var(--transition-progress, 0) * 0.05)) 0%,
            transparent 8%),
        radial-gradient(circle at 25% 80%, 
            rgba(0, 255, 127, calc(var(--transition-progress, 0) * 0.07)) 0%,
            transparent 10%),
        radial-gradient(circle at 60% 60%, 
            rgba(255, 20, 147, calc(var(--transition-progress, 0) * 0.04)) 0%,
            transparent 6%);
    pointer-events: none;
    z-index: 2;
    transition: all 0.1s ease-out;
}

/* Parallax image styling - The hero background (restored from backup) */
.parallax-image {
    width: 100vw;
    height: auto; /* Let the image maintain its natural proportions */
    object-fit: cover; /* Maintain aspect ratio while covering */
    object-position: center top; /* Position from the top */
    transition: transform 0.1s ease-out; /* Smooth parallax movement */
    
    /* Dynamic filter effects that respond to scroll position (backup version) */
    filter: blur(calc(1px + var(--transition-progress, 0) * 2px)) 
           brightness(calc(1.1 + var(--transition-progress, 0) * 0.7)) 
           saturate(calc(1.3 - var(--transition-progress, 0) * 1.3)) 
           contrast(calc(1 + var(--transition-progress, 0) * 1.8))
           opacity(calc(1 - var(--transition-progress, 0) * 0.5));
}

/* Floating Particles Container - The ethereal atmosphere */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Non-interactive decoration */
    z-index: 1; /* Above background, below content */
    opacity: calc(var(--global-transition-progress, 0) * 0.4); /* Fade in during transition */
    transition: opacity 0.3s ease-out;
}

/* Individual particle styling - Each a tiny performer */
.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6); /* Subtle white dots */
    border-radius: 50%; /* Perfect circles */
    animation: float 20s infinite ease-in-out; /* Continuous floating */
}

/* Particle positioning and timing - Staggered for natural randomness */
.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 25s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 22s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 28s; }
.particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 24s; }
.particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 26s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 23s; }
.particle:nth-child(7) { left: 70%; animation-delay: 2s; animation-duration: 27s; }
.particle:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 25s; }
.particle:nth-child(9) { left: 90%; animation-delay: 1s; animation-duration: 29s; }
.particle:nth-child(10) { left: 15%; animation-delay: 6s; animation-duration: 21s; }

/* Button animations - Interactive feedback systems */

/* Interactive Demo Button - The gateway to revelation */
.demo-button {
    background: rgba(255, 0, 98, 0.1); /* Translucent hot pink */
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 0, 98, 0.3);
    padding: calc(0.4vw + 4px) calc(0.8vw + 8px);
    border-radius: 50px; /* Pill-shaped for friendliness */
    font-family: 'Bodoni Moda', serif;
    font-size: calc(0.6rem + 0.2vw);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth state changes */
    margin: calc(1vw + 15px) auto;
    display: block;
    opacity: 0.8; /* Subtle presence until hovered */
}

.demo-button:hover {
    opacity: 1; /* Full intensity on hover */
    transform: scale(1.05); /* Slight enlargement */
    border-color: rgba(255, 0, 98, 0.6); /* Brighter border */
    background: rgba(255, 0, 98, 0.2); /* More opaque background */
}

/* Back Button - The return journey */
.back-button {
    position: fixed;
    top: calc(1vw + 20px);
    left: calc(1vw + 20px);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(45, 25, 65, 0.8);
    padding: calc(0.4vw + 4px) calc(0.8vw + 8px);
    border-radius: 50px;
    font-family: 'Bodoni Moda', serif;
    font-size: calc(0.6rem + 0.2vw);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000; /* Above everything */
    opacity: 0.8;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
    transform: scale(1.05);
    border-color: rgba(45, 25, 65, 1);
}

/* Calculator Button - The action trigger */
.calc-button {
    background: rgba(255, 0, 98, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 0, 98, 0.3);
    padding: calc(0.4vw + 4px) calc(0.8vw + 8px);
    border-radius: 50px;
    font-family: 'Bodoni Moda', serif;
    font-size: calc(0.6rem + 0.2vw);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%; /* Full width for form consistency */
    margin-top: calc(1vw + 15px);
    opacity: 0.8;
}

.calc-button:hover {
    opacity: 1;
    transform: scale(1.05);
    border-color: rgba(255, 0, 98, 0.6);
    background: rgba(255, 0, 98, 0.2);
}

/* Results Panel Animation - The grand reveal */
.results-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    border-radius: 4px;
    padding: calc(1.5vw + 20px);
    border: 1px solid rgba(45, 25, 65, 0.8);
    margin-top: calc(1.5vw + 20px);
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
    transition: all 0.5s ease; /* Smooth entrance */
    display: none; /* Initially hidden */
}

.results-panel.visible {
    opacity: 1;
    transform: translateY(0); /* Slide up into position */
}

/* Clinical Action Styling - The diagnostic conclusion */
.clinical-action {
    background: rgba(255, 0, 98, 0.1);
    border: 1px solid rgba(255, 0, 98, 0.3);
    border-radius: 4px;
    padding: calc(0.8vw + 12px);
    margin-top: calc(1vw + 15px);
    font-weight: bold;
    transition: all 0.3s ease; /* Smooth color transitions */
}

.clinical-action.alert {
    background: rgba(255, 165, 0, 0.1); /* Orange for caution */
    border-color: rgba(255, 165, 0, 0.3);
    color: #ffb84d;
}

.clinical-action.urgent {
    background: rgba(255, 0, 0, 0.1); /* Red for urgency */
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff6b6b;
}

/* Copy button animations - For code interaction */
.code-container button {
    transition: all 0.3s ease; /* Smooth interaction feedback */
}

.code-container button:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* Transition effects for dynamic content changes */
.content-fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}