/**
 * My Hero Theme
 * Bright teal to blue gradient theme - fresh and hopeful
 * Uses CSS variables for easy customization
 */

:root {
    /* Gradient colors */
    --gradient-start: #20c997;
    --gradient-end: #0ea5e9;

    /* Primary colors */
    --primary-color: #20c997;
    --primary-color-dark: #1ba383;

    /* Text colors */
    --text-color: #2d3748;
    --text-muted: #718096;

    /* Background */
    --bg-card: rgba(255, 255, 255, 0.95);

    /* Hover effects */
    --btn-hover-transform: translateY(-2px);

    /* Shadows */
    --shadow-lg: 0 20px 60px rgba(32, 201, 151, 0.3);
    --shadow-md: 0 10px 25px rgba(32, 201, 151, 0.2);
}

/* Body gradient background */
body {
    background: linear-gradient(135deg, #20c997 0%, #0ea5e9 100%);
}

/* Enhanced orb animations with theme colors */
.orbs::before {
    background: radial-gradient(circle, rgba(32, 201, 151, 0.3) 0%, transparent 70%);
}

.orbs::after {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.3) 0%, transparent 70%);
}

/* Progress bar theme */
.progress-fill {
    background: linear-gradient(90deg, #20c997, #0ea5e9);
}

/* Card styling */
.card {
    position: relative;
    padding-top: 80px;
    box-shadow: 0 20px 60px rgba(32, 201, 151, 0.3);
}

/* Peek container for head image */
.peek-container {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

/* Head peeking over card */
.head-peek {
    width: 180px;
    height: auto;
    display: block;
    transition: opacity 0.8s ease-in-out;
}

.results-card {
    box-shadow: 0 20px 60px rgba(32, 201, 151, 0.3);
}

/* Button hover effects with theme colors */
.option-btn:hover {
    box-shadow: 0 8px 20px rgba(32, 201, 151, 0.3);
}

.option-btn.selected {
    box-shadow: 0 8px 20px rgba(32, 201, 151, 0.4);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 10px 25px rgba(32, 201, 151, 0.4);
}

/* CTA button with gradient */
.cta-btn {
    background: linear-gradient(135deg, #20c997 0%, #0ea5e9 100%);
    box-shadow: 0 10px 30px rgba(32, 201, 151, 0.4);
}

.cta-btn:hover {
    box-shadow: 0 15px 40px rgba(32, 201, 151, 0.5);
}

/* Result bars with gradient */
.bar-fill {
    background: linear-gradient(90deg, #20c997, #0ea5e9);
}

/* Focus states with theme color */
.option-btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.cta-btn:focus-visible {
    outline-color: #20c997;
}

/* Scale slider thumb color */
.scale-slider::-webkit-slider-thumb {
    background: #20c997;
}

.scale-slider::-moz-range-thumb {
    background: #20c997;
}

/* Input focus with theme color */
.answer-input-text:focus,
.answer-input-textarea:focus,
.answer-select:focus {
    border-color: #20c997;
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.15);
}

/* Scale value color */
.scale-value {
    color: #20c997;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .card,
    .results-card {
        box-shadow: 0 15px 40px rgba(32, 201, 151, 0.25);
    }
}