/**
 * ============================================
 * CELESTIAL STYLING
 * SVG texture overlays, vignettes, and
 * subtle motion effects for the hero section
 * ============================================
 * 
 * Design approach:
 * - Organic, flowing linework suggesting cosmic motion
 * - Varied stroke weights for editorial, hand-drawn feel
 * - Stars used sparingly as punctuation
 * - Texture guides eye toward names, never competes
 * - Fades gently into subsequent sections
 */

/* ----------------------------------------
 * CELESTIAL SVG LAYER
 * Positioned within hero background stack
 * ---------------------------------------- */

.hero__celestial {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    /* Blend with gradient background */
    mix-blend-mode: screen;
    opacity: 0.85;
    
    /* Subtle initial animation on load */
    animation: celestialFadeIn 2s ease-out forwards;
}

@keyframes celestialFadeIn {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 0.85;
        transform: scale(1);
    }
}

/* ----------------------------------------
 * CELESTIAL GROUP ANIMATIONS
 * Very subtle floating motion for depth
 * Each group moves independently
 * ---------------------------------------- */

.celestial-group {
    /* Base transition for parallax JS */
    transition: transform 0.1s ease-out;
}

/* Subtle ambient motion - extremely restrained */
.celestial-group--1 {
    animation: celestialFloat1 25s ease-in-out infinite;
}

.celestial-group--2 {
    animation: celestialFloat2 30s ease-in-out infinite;
}

.celestial-group--3 {
    animation: celestialFloat3 28s ease-in-out infinite;
}

.celestial-group--4 {
    animation: celestialFloat4 32s ease-in-out infinite;
}

/* Central framing - no motion, stability */
.celestial-group--5 {
    /* Intentionally static for visual anchor */
}

/* 
 * Float animations - barely perceptible movement
 * Creates living, breathing atmosphere
 */
@keyframes celestialFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -2px); }
}

@keyframes celestialFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-2px, 2px); }
}

@keyframes celestialFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, 1px); }
}

@keyframes celestialFloat4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-3px, -1px); }
}

/* ----------------------------------------
 * STAR ANIMATIONS
 * Calm, cosmic twinkle - very slow, subtle
 * ---------------------------------------- */

.celestial-stars circle {
    animation: starTwinkle var(--twinkle-duration, 20s) ease-in-out infinite;
    animation-delay: var(--twinkle-delay, 0s);
    transform-origin: center;
}

/* Stagger twinkle timing - slow durations (16-28s) */
.celestial-stars circle:nth-child(1) { --twinkle-duration: 18s; --twinkle-delay: 0s; }
.celestial-stars circle:nth-child(2) { --twinkle-duration: 22s; --twinkle-delay: 3s; }
.celestial-stars circle:nth-child(3) { --twinkle-duration: 20s; --twinkle-delay: 6s; }
.celestial-stars circle:nth-child(4) { --twinkle-duration: 25s; --twinkle-delay: 2s; }
.celestial-stars circle:nth-child(5) { --twinkle-duration: 19s; --twinkle-delay: 8s; }
.celestial-stars circle:nth-child(6) { --twinkle-duration: 23s; --twinkle-delay: 4s; }
.celestial-stars circle:nth-child(7) { --twinkle-duration: 28s; --twinkle-delay: 10s; }
.celestial-stars circle:nth-child(8) { --twinkle-duration: 21s; --twinkle-delay: 1s; }
.celestial-stars circle:nth-child(9) { --twinkle-duration: 24s; --twinkle-delay: 7s; }
.celestial-stars circle:nth-child(10) { --twinkle-duration: 17s; --twinkle-delay: 5s; }
.celestial-stars circle:nth-child(11) { --twinkle-duration: 26s; --twinkle-delay: 9s; }
.celestial-stars circle:nth-child(12) { --twinkle-duration: 20s; --twinkle-delay: 2s; }
.celestial-stars circle:nth-child(13) { --twinkle-duration: 22s; --twinkle-delay: 11s; }
.celestial-stars circle:nth-child(14) { --twinkle-duration: 19s; --twinkle-delay: 4s; }
.celestial-stars circle:nth-child(15) { --twinkle-duration: 27s; --twinkle-delay: 6s; }
.celestial-stars circle:nth-child(16) { --twinkle-duration: 21s; --twinkle-delay: 8s; }
.celestial-stars circle:nth-child(17) { --twinkle-duration: 24s; --twinkle-delay: 1s; }
.celestial-stars circle:nth-child(18) { --twinkle-duration: 18s; --twinkle-delay: 12s; }
.celestial-stars circle:nth-child(19) { --twinkle-duration: 23s; --twinkle-delay: 3s; }
.celestial-stars circle:nth-child(20) { --twinkle-duration: 26s; --twinkle-delay: 7s; }
/* Additional stars */
.celestial-stars circle:nth-child(n+21) { --twinkle-duration: 22s; --twinkle-delay: 5s; }

/* Twinkle animation using transform scale and filter for visibility */
@keyframes starTwinkle {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.3);
        filter: brightness(1.5);
    }
}

/* ----------------------------------------
 * VIGNETTE OVERLAY
 * Fades celestial texture at edges
 * Creates cinematic framing
 * ---------------------------------------- */

.hero__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    
    /* Multi-layered vignette for depth */
    background: 
        /* Top fade - softer */
        linear-gradient(
            to bottom,
            rgba(13, 10, 14, 0.3) 0%,
            transparent 15%
        ),
        /* Bottom fade - stronger for section transition */
        linear-gradient(
            to top,
            var(--bg-primary) 0%,
            rgba(13, 10, 14, 0.8) 8%,
            rgba(13, 10, 14, 0.3) 20%,
            transparent 35%
        ),
        /* Left edge fade */
        linear-gradient(
            to right,
            rgba(13, 10, 14, 0.4) 0%,
            transparent 10%
        ),
        /* Right edge fade */
        linear-gradient(
            to left,
            rgba(13, 10, 14, 0.4) 0%,
            transparent 10%
        ),
        /* Radial center spotlight - draws eye to names */
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            transparent 0%,
            transparent 40%,
            rgba(13, 10, 14, 0.15) 70%,
            rgba(13, 10, 14, 0.3) 100%
        );
}

/* ----------------------------------------
 * SECTION CELESTIAL ECHO
 * Very faint continuation into Story section
 * Creates cohesive visual flow
 * ---------------------------------------- */

.section__celestial-echo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    pointer-events: none;
    opacity: 0.04;
    
    /* Subtle hint of the celestial pattern - purple and cabernet */
    background: 
        radial-gradient(
            ellipse 40% 20% at 20% 0%,
            var(--color-orchid-purple) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 30% 15% at 80% 0%,
            var(--color-bordeaux) 0%,
            transparent 60%
        );
    
    /* Fade out as you scroll down */
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 100%
    );
}

/* ----------------------------------------
 * REDUCED MOTION PREFERENCES
 * Disable all motion for accessibility
 * ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero__celestial {
        animation: none;
        opacity: 0.85;
    }
    
    .celestial-group,
    .celestial-group--1,
    .celestial-group--2,
    .celestial-group--3,
    .celestial-group--4 {
        animation: none !important;
        transform: none !important;
    }
    
    .celestial-stars circle {
        animation: none !important;
    }
}

/* ----------------------------------------
 * RESPONSIVE ADJUSTMENTS
 * Scale SVG effects for different viewports
 * ---------------------------------------- */

@media (max-width: 768px) {
    .hero__celestial {
        /* Slightly more prominent on mobile */
        opacity: 0.75;
    }
    
    /* Reduce vignette intensity on smaller screens */
    .hero__vignette {
        background: 
            linear-gradient(
                to bottom,
                rgba(13, 10, 14, 0.2) 0%,
                transparent 10%
            ),
            linear-gradient(
                to top,
                var(--bg-primary) 0%,
                rgba(13, 10, 14, 0.7) 5%,
                transparent 25%
            ),
            radial-gradient(
                ellipse 80% 60% at 50% 45%,
                transparent 0%,
                transparent 50%,
                rgba(13, 10, 14, 0.2) 100%
            );
    }
    
    .section__celestial-echo {
        height: 200px;
        opacity: 0.03;
    }
}

@media (min-width: 1400px) {
    .hero__celestial {
        /* Subtle on large screens - more space to breathe */
        opacity: 0.9;
    }
}

/* ----------------------------------------
 * PARALLAX-READY CLASSES
 * Applied via JavaScript for scroll effect
 * ---------------------------------------- */

.celestial-parallax-active .celestial-group--1 {
    will-change: transform;
}

.celestial-parallax-active .celestial-group--2 {
    will-change: transform;
}

.celestial-parallax-active .celestial-group--3 {
    will-change: transform;
}

.celestial-parallax-active .celestial-group--4 {
    will-change: transform;
}