/* ============================================
   WALNUT MAINTENANCE - COSMIC EXPERIENCE
   Simplified animations version
   ============================================ */

/* Variables */
:root {
    --walnut-gold: #F7B500;
    --walnut-gold-light: #FFD54F;
    --walnut-gold-glow: rgba(247, 181, 0, 0.5);
    --cosmic-purple: #8B5CF6;
    --cosmic-pink: #EC4899;
    --cosmic-blue: #3B82F6;
    --cosmic-cyan: #06B6D4;
    --nebula-purple: #4C1D95;
    --nebula-pink: #831843;
    --space-dark: #030014;
    --space-mid: #0a0520;
    --card-bg: rgba(15, 10, 40, 0.9);
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.75);
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base */
html {
    font-size: 16px;
}

body {
    min-height: 100vh;
    font-family: 'Space Grotesk', sans-serif;
    background: var(--space-dark);
    color: var(--text-primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   SPACE BACKGROUND
   ============================================ */
.space-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, var(--nebula-purple) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--nebula-pink) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, var(--space-mid) 0%, var(--space-dark) 100%);
    z-index: 0;
}

/* ============================================
   NEBULA CLOUDS - Subtle movement
   ============================================ */
.nebula {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.nebula-layer {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    opacity: 0.3;
    mix-blend-mode: screen;
}

.nebula-1 {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(236, 72, 153, 0.3) 0%, transparent 35%);
    animation: nebulaFloat 120s ease-in-out infinite;
}

.nebula-2 {
    background:
        radial-gradient(ellipse at 60% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 70%, rgba(6, 182, 212, 0.2) 0%, transparent 35%);
    animation: nebulaFloat 150s ease-in-out infinite reverse;
}

.nebula-3 {
    background:
        radial-gradient(ellipse at 80% 80%, rgba(247, 181, 0, 0.2) 0%, transparent 30%);
    animation: nebulaFloat 100s ease-in-out infinite;
}

@keyframes nebulaFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3%, -3%) scale(1.02); }
}

/* ============================================
   AURORA BOREALIS - Gentle waves
   ============================================ */
.aurora {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;
}

.aurora-beam {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(100px);
    animation: auroraWave 20s ease-in-out infinite;
}

.aurora-1 {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(139, 92, 246, 0.2) 40%,
        transparent 100%);
}

.aurora-2 {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(6, 182, 212, 0.15) 50%,
        transparent 100%);
    animation-delay: -5s;
    animation-duration: 25s;
}

.aurora-3 {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(247, 181, 0, 0.1) 45%,
        transparent 100%);
    animation-delay: -10s;
    animation-duration: 30s;
}

.aurora-4 {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(236, 72, 153, 0.1) 55%,
        transparent 100%);
    animation-delay: -15s;
    animation-duration: 22s;
}

@keyframes auroraWave {
    0%, 100% { transform: translateX(-5%) scaleY(1); opacity: 0.4; }
    50% { transform: translateX(5%) scaleY(1.1); opacity: 0.6; }
}

/* ============================================
   STARS - Static with subtle twinkle
   ============================================ */
.stars-container {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.stars {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
}

.stars-small {
    background-image:
        radial-gradient(1px 1px at 10% 20%, white 50%, transparent),
        radial-gradient(1px 1px at 30% 65%, white 50%, transparent),
        radial-gradient(1px 1px at 50% 10%, white 50%, transparent),
        radial-gradient(1px 1px at 70% 80%, white 50%, transparent),
        radial-gradient(1px 1px at 90% 40%, white 50%, transparent),
        radial-gradient(1px 1px at 15% 90%, white 50%, transparent),
        radial-gradient(1px 1px at 85% 15%, white 50%, transparent),
        radial-gradient(1px 1px at 45% 45%, white 50%, transparent);
    background-size: 200px 200px;
    opacity: 0.5;
}

.stars-medium {
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 50%, transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.8) 50%, transparent),
        radial-gradient(2px 2px at 40% 90%, rgba(255,255,255,0.7) 50%, transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,0.8) 50%, transparent);
    background-size: 300px 300px;
    animation: starsTwinkle 8s ease-in-out infinite;
}

.stars-large {
    background-image:
        radial-gradient(3px 3px at 25% 25%, rgba(255,255,255,0.9) 50%, transparent),
        radial-gradient(3px 3px at 75% 75%, rgba(255,255,255,0.9) 50%, transparent),
        radial-gradient(2.5px 2.5px at 50% 50%, rgba(247, 181, 0, 0.6) 50%, transparent);
    background-size: 400px 400px;
    animation: starsTwinkle 6s ease-in-out infinite reverse;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ============================================
   SHOOTING STARS - Occasional
   ============================================ */
.shooting-stars {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.shooting-star {
    position: absolute;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, white, transparent);
    opacity: 0;
    animation: shootingStar 8s ease-in-out infinite;
}

.shooting-star::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    left: 0;
    top: -1.5px;
    box-shadow: 0 0 6px white;
}

.shooting-star:nth-child(1) { top: 15%; left: 20%; transform: rotate(35deg); animation-delay: 2s; }
.shooting-star:nth-child(2) { top: 25%; left: 70%; transform: rotate(40deg); animation-delay: 6s; }
.shooting-star:nth-child(3) { top: 10%; left: 50%; transform: rotate(30deg); animation-delay: 12s; }
.shooting-star:nth-child(4) { top: 40%; left: 15%; transform: rotate(45deg); animation-delay: 18s; }
.shooting-star:nth-child(5) { top: 20%; left: 85%; transform: rotate(35deg); animation-delay: 24s; }

@keyframes shootingStar {
    0%, 95%, 100% { opacity: 0; transform: translateX(0) translateY(0) rotate(35deg); }
    2% { opacity: 1; }
    8% { opacity: 0; transform: translateX(200px) translateY(100px) rotate(35deg); }
}

/* ============================================
   PLANETS - Gentle float
   ============================================ */
.planet {
    position: fixed;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
}

.planet-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 10%;
    background: radial-gradient(circle at 30% 30%, #9B59B6 0%, #6C3483 50%, #4A235A 100%);
    box-shadow: inset -15px -8px 30px rgba(0,0,0,0.5), 0 0 40px rgba(155, 89, 182, 0.3);
    animation: planetFloat 30s ease-in-out infinite;
}

.planet-ring {
    position: absolute;
    width: 150px;
    height: 35px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(75deg);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

.planet-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(247, 181, 0, 0.3);
    border-radius: 50%;
}

.planet-2 {
    width: 50px;
    height: 50px;
    bottom: 18%;
    left: 8%;
    background: radial-gradient(circle at 35% 35%, #F39C12 0%, #E67E22 50%, #D35400 100%);
    box-shadow: inset -8px -4px 15px rgba(0,0,0,0.4), 0 0 25px rgba(243, 156, 18, 0.25);
    animation: planetFloat 25s ease-in-out infinite reverse;
}

.moon {
    width: 30px;
    height: 30px;
    position: fixed;
    bottom: 35%;
    right: 18%;
    background: radial-gradient(circle at 40% 40%, #ECF0F1 0%, #BDC3C7 50%, #95A5A6 100%);
    border-radius: 50%;
    box-shadow: inset -6px -3px 12px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.15);
    animation: planetFloat 35s ease-in-out infinite;
    z-index: 5;
}

@keyframes planetFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -12px); }
}

/* ============================================
   COSMIC DUST - Subtle rising particles
   ============================================ */
.cosmic-dust {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.cosmic-dust span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: dustFloat 30s linear infinite;
}

.cosmic-dust span:nth-child(1) { left: 10%; animation-delay: 0s; }
.cosmic-dust span:nth-child(2) { left: 20%; animation-delay: 3s; background: var(--walnut-gold); }
.cosmic-dust span:nth-child(3) { left: 30%; animation-delay: 6s; }
.cosmic-dust span:nth-child(4) { left: 40%; animation-delay: 9s; }
.cosmic-dust span:nth-child(5) { left: 50%; animation-delay: 12s; background: var(--cosmic-purple); }
.cosmic-dust span:nth-child(6) { left: 60%; animation-delay: 15s; }
.cosmic-dust span:nth-child(7) { left: 70%; animation-delay: 18s; background: var(--walnut-gold); }
.cosmic-dust span:nth-child(8) { left: 80%; animation-delay: 21s; }
.cosmic-dust span:nth-child(9) { left: 90%; animation-delay: 24s; }
.cosmic-dust span:nth-child(10) { left: 15%; animation-delay: 27s; }
.cosmic-dust span:nth-child(n+11) { display: none; }

@keyframes dustFloat {
    0% { opacity: 0; transform: translateY(100vh); }
    5% { opacity: 0.5; }
    95% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-100vh); }
}

/* ============================================
   ROCKET - Gentle hover
   ============================================ */
.rocket-scene {
    position: fixed;
    bottom: 12%;
    left: 10%;
    z-index: 10;
}

.rocket-wrapper {
    position: relative;
    animation: rocketHover 6s ease-in-out infinite;
}

.rocket-svg {
    width: 70px;
    height: 120px;
    filter: drop-shadow(0 0 20px rgba(247, 181, 0, 0.4));
}

.flame {
    animation: flameFlicker 0.2s ease-in-out infinite alternate;
    transform-origin: center top;
}

@keyframes rocketHover {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

@keyframes flameFlicker {
    0% { transform: scaleY(1) scaleX(1); }
    100% { transform: scaleY(1.1) scaleX(0.95); }
}

/* Exhaust - simplified */
.exhaust {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.exhaust span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--walnut-gold);
    border-radius: 50%;
    opacity: 0;
    animation: exhaustParticle 1.5s ease-out infinite;
}

.exhaust span:nth-child(1) { left: 0; animation-delay: 0s; }
.exhaust span:nth-child(2) { left: -5px; animation-delay: 0.3s; }
.exhaust span:nth-child(3) { left: 5px; animation-delay: 0.6s; }
.exhaust span:nth-child(4) { left: 0; animation-delay: 0.9s; }
.exhaust span:nth-child(5) { left: -3px; animation-delay: 1.2s; }
.exhaust span:nth-child(n+6) { display: none; }

@keyframes exhaustParticle {
    0% { opacity: 0.8; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(50px) scale(0.3); }
}

/* Speed lines - hidden */
.speed-lines { display: none; }

/* ============================================
   MAIN CONTAINER
   ============================================ */
.container {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 500px;
    padding: 20px;
    animation: containerAppear 1s ease-out forwards;
    opacity: 0;
}

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

/* ============================================
   CARD
   ============================================ */
.card-wrapper {
    position: relative;
}

.holo-border {
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        135deg,
        var(--cosmic-purple),
        var(--cosmic-pink),
        var(--walnut-gold),
        var(--cosmic-cyan),
        var(--cosmic-purple)
    );
    background-size: 300% 300%;
    border-radius: 26px;
    animation: holoBorder 15s linear infinite;
    z-index: -1;
}

.holo-border::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--card-bg);
    border-radius: 24px;
}

@keyframes holoBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 24px;
    padding: 45px 40px;
    text-align: center;
}

/* ============================================
   LOGO SECTION
   ============================================ */
.logo-section {
    margin-bottom: 25px;
}

.logo-container {
    display: inline-block;
}

.logo {
    max-width: 160px;
    height: auto;
    filter: drop-shadow(0 0 20px var(--walnut-gold-glow));
}

/* ============================================
   STATUS BADGE
   ============================================ */
.status-container {
    margin-bottom: 20px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(247, 181, 0, 0.12);
    border: 1px solid rgba(247, 181, 0, 0.35);
    border-radius: 50px;
    padding: 10px 22px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--walnut-gold);
    border-radius: 50%;
    animation: statusDot 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--walnut-gold);
}

@keyframes statusDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--walnut-gold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============================================
   TITLE
   ============================================ */
.title {
    margin-bottom: 20px;
}

.title-word {
    display: block;
    font-size: 2.6rem;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.2;
}

.title-highlight {
    font-weight: 700;
    background: linear-gradient(135deg, var(--walnut-gold), var(--walnut-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   MESSAGE
   ============================================ */
.message-container {
    margin-bottom: 25px;
}

.message {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.brand {
    color: var(--walnut-gold);
    font-weight: 600;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.progress-section {
    margin-bottom: 25px;
}

.progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--cosmic-purple), var(--walnut-gold), var(--cosmic-pink));
    background-size: 200% 100%;
    border-radius: 10px;
    animation: progressFill 3s ease-in-out infinite;
}

@keyframes progressFill {
    0% { background-position: 0% 50%; transform: translateX(-60%); }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; transform: translateX(60%); }
}

/* ============================================
   DIVIDER
   ============================================ */
.divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.divider-diamond {
    width: 8px;
    height: 8px;
    background: var(--walnut-gold);
    transform: rotate(45deg);
}

/* ============================================
   FOOTER
   ============================================ */
.footer-section {}

.footer-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.highlight {
    color: var(--walnut-gold);
    font-weight: 500;
}

/* ============================================
   LOADER DOTS
   ============================================ */
.loader-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.loader-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: loaderDots 1.4s ease-in-out infinite;
}

.loader-dots span:nth-child(1) {
    background: var(--cosmic-purple);
    animation-delay: 0s;
}

.loader-dots span:nth-child(2) {
    background: var(--walnut-gold);
    animation-delay: 0.2s;
}

.loader-dots span:nth-child(3) {
    background: var(--cosmic-pink);
    animation-delay: 0.4s;
}

@keyframes loaderDots {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   LENS FLARE - Subtle
   ============================================ */
.lens-flare {
    position: fixed;
    top: 15%;
    right: 25%;
    z-index: 25;
    pointer-events: none;
}

.flare {
    position: absolute;
    border-radius: 50%;
}

.flare-1 {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(247, 181, 0, 0.25) 0%, transparent 70%);
}

.flare-2 {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    top: 50px;
    left: 50px;
}

.flare-3 {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    top: 70px;
    left: 70px;
}

/* ============================================
   VIGNETTE
   ============================================ */
.vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 30;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .card {
        padding: 35px 25px;
    }

    .logo {
        max-width: 130px;
    }

    .title-word {
        font-size: 2rem;
    }

    .planet-1 {
        width: 70px;
        height: 70px;
        top: 5%;
        right: 5%;
    }

    .planet-ring {
        width: 100px;
        height: 25px;
    }

    .planet-2 {
        width: 35px;
        height: 35px;
    }

    .rocket-scene {
        bottom: 5%;
        left: 5%;
    }

    .rocket-svg {
        width: 50px;
        height: 85px;
    }

    .moon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 400px) {
    .card {
        padding: 30px 20px;
    }

    .title-word {
        font-size: 1.7rem;
    }

    .status-badge {
        padding: 8px 16px;
    }

    .status-text {
        font-size: 0.7rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}