/* Simple 3D Earth & Rocket Scene - Pure CSS 3D */

/* Container Setup */
.hero-3d-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

/* Theme Integration */
.hero-3d-scene {
    --rocket-primary: var(--primary);
    --rocket-accent: var(--accent);
    --earth-ocean: #4a90e2;
    --earth-ocean-dark: #2c5aa0;
    --earth-land: #7cb342;
    --earth-land-alt: #689f38;
    --earth-land-desert: #d4a574;
    --rocket-body: #e0e0e0;
    --rocket-window: var(--accent);
    --rocket-engine: #404040;
    --rocket-flame: #ff4444;
    --smoke-color: rgba(200, 200, 200, 0.8);
}

/* Dark mode Earth - night side with city lights */
[data-theme="dark"] .hero-3d-scene {
    --earth-ocean: #1a2332;
    --earth-ocean-dark: #0f1419;
    --earth-land: #2d4a1e;
    --earth-land-alt: #1e3315;
}

/* 3D EARTH SPHERE */
.earth-3d {
    position: absolute;
    bottom: -40vh;
    left: -40vh;
    width: 80vh;
    height: 80vh;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
}

.earth-sphere {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background: 
        radial-gradient(circle at 40% 30%, var(--earth-ocean), var(--earth-ocean-dark)),
        linear-gradient(135deg, var(--earth-ocean) 0%, var(--earth-ocean-dark) 100%);
    overflow: hidden;
    box-shadow: 
        inset -20px -20px 40px rgba(0,0,0,0.3),
        0 0 40px rgba(74, 144, 226, 0.2);
}

/* CONTINENTS - Simple shapes using pseudo-elements and positioned divs */
.continent-america {
    position: absolute;
    width: 45%;
    height: 60%;
    top: 15%;
    left: 20%;
    background: var(--earth-land);
    border-radius: 40% 60% 50% 70%;
    transform: rotate(-10deg);
    z-index: 1;
}

.continent-america::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 40%;
    top: 60%;
    left: 20%;
    background: var(--earth-land-alt);
    border-radius: 60% 40% 60% 40%;
    transform: rotate(15deg);
}

.continent-africa {
    position: absolute;
    width: 25%;
    height: 50%;
    top: 30%;
    left: 45%;
    background: var(--earth-land-alt);
    border-radius: 50% 40% 60% 30%;
    transform: rotate(5deg);
    z-index: 1;
}

.continent-europe {
    position: absolute;
    width: 20%;
    height: 25%;
    top: 25%;
    left: 40%;
    background: var(--earth-land);
    border-radius: 50% 70% 40% 60%;
    transform: rotate(-20deg);
    z-index: 1;
}

.continent-asia {
    position: absolute;
    width: 35%;
    height: 40%;
    top: 20%;
    left: 55%;
    background: var(--earth-land);
    border-radius: 60% 70% 50% 80%;
    transform: rotate(10deg);
    z-index: 1;
}

.continent-australia {
    position: absolute;
    width: 15%;
    height: 20%;
    top: 65%;
    left: 70%;
    background: var(--earth-land-desert);
    border-radius: 50%;
    z-index: 1;
}

/* CLOUDS - Subtle floating elements */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    z-index: 2;
}

.cloud-1 {
    width: 40px;
    height: 20px;
    top: 20%;
    left: 30%;
    animation: cloud-drift-1 15s ease-in-out infinite;
}

.cloud-2 {
    width: 30px;
    height: 15px;
    top: 50%;
    left: 60%;
    animation: cloud-drift-2 20s ease-in-out infinite;
}

.cloud-3 {
    width: 25px;
    height: 12px;
    top: 70%;
    left: 25%;
    animation: cloud-drift-3 18s ease-in-out infinite;
}

@keyframes cloud-drift-1 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.3; }
    50% { transform: translateX(10px) translateY(-5px); opacity: 0.6; }
}

@keyframes cloud-drift-2 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.4; }
    50% { transform: translateX(-8px) translateY(3px); opacity: 0.7; }
}

@keyframes cloud-drift-3 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.2; }
    50% { transform: translateX(12px) translateY(-8px); opacity: 0.5; }
}

/* Night mode city lights */
[data-theme="dark"] .city-lights {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffaa00;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 4px #ffaa00;
    animation: city-glow 3s ease-in-out infinite alternate;
}

[data-theme="dark"] .city-ny { top: 35%; left: 30%; }
[data-theme="dark"] .city-london { top: 30%; left: 45%; }
[data-theme="dark"] .city-tokyo { top: 35%; left: 75%; }
[data-theme="dark"] .city-sydney { top: 70%; left: 70%; }

@keyframes city-glow {
    from { opacity: 0.7; box-shadow: 0 0 4px #ffaa00; }
    to { opacity: 1; box-shadow: 0 0 8px #ffaa00, 0 0 12px rgba(255, 170, 0, 0.3); }
}

/* Removed earth-spin animation to fix wobbly effect */

/* 3D ROCKET */
.rocket-3d {
    position: absolute;
    bottom: 10vh;
    left: 15vh;
    width: 2vh;
    height: 5vh;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
    z-index: 15;
    
    /* Initial state */
    transform: 
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        translate3d(0, 0, 0)
        scale3d(1, 1, 1);
    opacity: 1;
}

/* SIMPLE CYLINDRICAL ROCKET BODY */
.rocket-body-3d {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        #ffffff 0%,      /* Nose tip */
        #f0f0f0 15%,     /* Upper nose */
        var(--rocket-body) 25%,   /* Upper body */
        #e8e8e8 40%,     /* Mid body highlight */
        var(--rocket-body) 60%,   /* Mid body */
        #d0d0d0 75%,     /* Lower body */
        var(--rocket-engine) 90%, /* Engine */
        #808080 100%     /* Engine bottom */
    );
    
    /* Simple rocket shape - cylinder with pointed nose */
    border-radius: 50% 50% 10% 10%;
    
    box-shadow: 
        inset 2px 0 6px rgba(255,255,255,0.4),
        inset -2px 0 6px rgba(0,0,0,0.2),
        0 2px 8px rgba(0,0,0,0.3);
    
    transform-style: preserve-3d;
}

/* Add simple window */
.rocket-body-3d::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 35%;
    width: 30%;
    height: 15%;
    background: radial-gradient(ellipse,
        rgba(150, 200, 255, 0.9) 0%,
        var(--rocket-window) 50%,
        rgba(0, 80, 160, 0.8) 100%
    );
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.5),
        0 1px 3px rgba(0,0,0,0.3);
}

/* ENHANCED ROCKET EXHAUST */
.rocket-exhaust-3d {
    position: absolute;
    bottom: -1.5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 1vh;
    height: 2vh;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 14;
    pointer-events: none;
}

.rocket-exhaust-3d.active {
    opacity: 1;
}

/* Main Exhaust Flame */
.rocket-exhaust-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top,
        rgba(255, 255, 255, 0.9) 0%,
        var(--rocket-flame) 20%,
        #ff6600 40%,
        #ffaa00 70%,
        rgba(255, 200, 0, 0.3) 90%,
        transparent 100%
    );
    border-radius: 50% 50% 40% 40%;
    animation: exhaust-primary 0.08s ease-in-out infinite alternate;
    transform: translateZ(2px);
    filter: blur(0.2px);
}

/* Secondary Exhaust Glow */
.rocket-exhaust-3d::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 150%;
    background: radial-gradient(ellipse at center,
        rgba(255, 120, 0, 0.4) 0%,
        rgba(255, 60, 0, 0.2) 40%,
        transparent 70%
    );
    border-radius: 50%;
    animation: exhaust-glow 0.12s ease-in-out infinite alternate;
    transform: translateZ(1px);
    filter: blur(1px);
}

@keyframes exhaust-primary {
    0% { 
        transform: translateZ(2px) scaleY(0.7) scaleX(0.8);
        filter: brightness(0.9) blur(0.2px) hue-rotate(-5deg);
    }
    100% { 
        transform: translateZ(2px) scaleY(1.4) scaleX(1.2);
        filter: brightness(1.3) blur(0.1px) hue-rotate(5deg);
    }
}

@keyframes exhaust-glow {
    0% { 
        transform: translateZ(1px) scale(0.8);
        opacity: 0.3;
    }
    100% { 
        transform: translateZ(1px) scale(1.2);
        opacity: 0.6;
    }
}

/* Exhaust Heat Distortion Effect */
.rocket-3d.approaching::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -50%;
    width: 200%;
    height: 140%;
    background: radial-gradient(ellipse,
        rgba(255, 100, 0, 0.1) 0%,
        rgba(255, 150, 50, 0.05) 50%,
        transparent 80%
    );
    border-radius: 50%;
    animation: heat-distortion 0.3s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 12;
}

@keyframes heat-distortion {
    0% { 
        transform: scale(1) rotate(0deg);
        filter: blur(2px);
    }
    100% { 
        transform: scale(1.1) rotate(2deg);
        filter: blur(3px);
    }
}

/* LAUNCH EFFECTS */

/* Earth shake on launch */
.earth-3d.launching {
    animation: earth-shake-3d 0.6s ease-out, earth-spin 60s linear infinite;
}

@keyframes earth-shake-3d {
    0%, 100% { transform: translate(0, 0) rotateY(0deg); }
    15% { transform: translate(-4px, 2px) rotateY(0deg); }
    30% { transform: translate(3px, -4px) rotateY(0deg); }
    45% { transform: translate(-2px, 3px) rotateY(0deg); }
    60% { transform: translate(2px, -2px) rotateY(0deg); }
    75% { transform: translate(-1px, 1px) rotateY(0deg); }
}

/* Smoke plume at launch site */
.smoke-plume {
    position: absolute;
    bottom: 9vh;
    left: 16.5vh;
    width: 1vh;
    height: 1vh;
    background: var(--smoke-color);
    border-radius: 50%;
    opacity: 0;
    z-index: 12;
}

.smoke-plume.active {
    animation: smoke-rise-3d 2.5s ease-out forwards;
}

/* ENHANCED SMOKE AND PARTICLE EFFECTS */
@keyframes smoke-rise-3d {
    0% {
        opacity: 0.9;
        transform: scale(1) translateY(0) rotate(0deg);
        filter: blur(0px);
        background: radial-gradient(ellipse,
            rgba(220, 220, 220, 0.8) 0%,
            rgba(180, 180, 180, 0.6) 50%,
            transparent 100%
        );
    }
    20% {
        opacity: 0.7;
        transform: scale(3) translateY(-8vh) rotate(15deg);
        filter: blur(0.5px);
        background: radial-gradient(ellipse,
            rgba(200, 200, 200, 0.7) 0%,
            rgba(160, 160, 160, 0.4) 60%,
            transparent 100%
        );
    }
    50% {
        opacity: 0.4;
        transform: scale(6) translateY(-15vh) rotate(45deg);
        filter: blur(1.5px);
        background: radial-gradient(ellipse,
            rgba(180, 180, 180, 0.5) 0%,
            rgba(140, 140, 140, 0.3) 70%,
            transparent 100%
        );
    }
    80% {
        opacity: 0.2;
        transform: scale(9) translateY(-25vh) rotate(80deg);
        filter: blur(2.5px);
    }
    100% {
        opacity: 0;
        transform: scale(12) translateY(-35vh) rotate(120deg);
        filter: blur(4px);
    }
}

/* Particle Trail System */
.particle-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
}

.trail-particle {
    position: absolute;
    width: 0.3vh;
    height: 0.3vh;
    background: radial-gradient(circle,
        rgba(255, 150, 50, 0.8) 0%,
        rgba(255, 100, 0, 0.6) 40%,
        transparent 80%
    );
    border-radius: 50%;
    animation: particle-fade 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes particle-fade {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
        filter: blur(0px);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.7) translate(calc(var(--random-x, 0) * 5px), calc(var(--random-y, 0) * 5px));
        filter: blur(0.5px);
    }
    100% {
        opacity: 0;
        transform: scale(0.2) translate(calc(var(--random-x, 0) * 15px), calc(var(--random-y, 0) * 15px));
        filter: blur(1px);
    }
}

/* Hero text enhancement */
.hero.rocket-launching h1 {
    animation: title-shake 0.5s ease-out;
    text-shadow: 
        0 0 20px var(--rocket-accent),
        0 0 40px var(--rocket-accent),
        var(--pixel-size, 4px) var(--pixel-size, 4px) 0 rgba(0,0,0,0.3);
}

@keyframes title-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2px, -1px); }
    20% { transform: translate(2px, 1px); }
    30% { transform: translate(-1px, -2px); }
    40% { transform: translate(1px, 2px); }
    50% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
    90% { transform: translate(-1px, -1px); }
}

/* DYNAMIC LIGHTING EFFECTS */
.hero.rocket-spiraling {
    background: radial-gradient(ellipse at 80% 80%,
        rgba(255, 120, 0, 0.02) 0%,
        transparent 40%
    );
    transition: background 0.5s ease-out;
}

.hero.rocket-approaching {
    background: radial-gradient(ellipse at 60% 70%,
        rgba(255, 120, 0, 0.05) 0%,
        rgba(255, 60, 0, 0.02) 30%,
        transparent 60%
    );
    transition: background 0.3s ease-out;
}

.hero.rocket-approaching h1 {
    text-shadow: 
        0 0 30px var(--rocket-accent),
        0 0 60px rgba(255, 122, 0, 0.6),
        0 0 90px rgba(255, 122, 0, 0.3),
        var(--pixel-size, 4px) var(--pixel-size, 4px) 0 rgba(0,0,0,0.3);
    transform: scale(1.02);
    transition: all 0.3s ease-out;
}

.hero.rocket-flyby {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 120, 0, 0.1) 0%,
        rgba(255, 80, 0, 0.05) 20%,
        rgba(255, 40, 0, 0.02) 40%,
        transparent 70%
    );
    transition: background 0.2s ease-out;
}

.hero.rocket-flyby h1 {
    text-shadow: 
        0 0 50px var(--rocket-accent),
        0 0 100px rgba(255, 122, 0, 0.8),
        0 0 150px rgba(255, 122, 0, 0.6),
        0 0 200px rgba(255, 122, 0, 0.3),
        0 0 300px rgba(255, 80, 0, 0.2),
        var(--pixel-size, 4px) var(--pixel-size, 4px) 0 rgba(0,0,0,0.3);
    transform: scale(1.03);
    filter: brightness(1.15) contrast(1.08);
    transition: all 0.45s ease-out;
    animation: flyby-wobble 0.45s ease-in-out;
}

.hero-word {
    display: inline-block;
    white-space: nowrap;
    position: relative;
}

.hero-letter {
    display: inline-block;
    position: relative;
    font: inherit;
    line-height: inherit;
    color: inherit !important;
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    pointer-events: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    white-space: inherit;
    will-change: transform, opacity, filter;
}

.hero-letter--accent {
    color: transparent !important;
}

.hero.rocket-flyby.hero-title-explosion h1 {
    text-shadow: none !important;
}

.hero.rocket-flyby.hero-title-explosion .hero-accent::after {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hero.rocket-flyby.hero-title-explosion .hero-letter {
    animation: hero-letter-explode 3s cubic-bezier(0.2, 1, 0.38, 1) forwards;
    animation-delay: calc(0.25s + var(--explode-delay, 0s));
}

.hero.rocket-flyby.hero-title-explosion .hero-letter--accent {
    background: linear-gradient(0deg, rgba(58, 122, 138, 1) 20%, rgba(31, 177, 234, 1) 45%, rgba(232, 244, 240, 1) 66%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

@keyframes hero-letter-explode {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    18% {
        transform: translate3d(calc(var(--explode-x, 0) * 0.12), calc(var(--explode-y, 0) * 0.12), 0) rotate(calc(var(--explode-rot, 0deg) * 0.1)) scale(1.32);
        opacity: 1;
    }
    45% {
        transform: translate3d(calc(var(--explode-x, 0) * 0.48), calc(var(--explode-y, 0) * 0.48), 0) rotate(calc(var(--explode-rot, 0deg) * 0.55)) scale(1.55);
        opacity: 0.94;
    }
    72% {
        transform: translate3d(calc(var(--explode-x, 0) * 0.72), calc(var(--explode-y, 0) * 0.72), 0) rotate(calc(var(--explode-rot, 0deg) * 0.85)) scale(1.85);
        opacity: 0.72;
    }
    100% {
        transform: translate3d(var(--explode-x, 0), var(--explode-y, 0), 0) rotate(var(--explode-rot, 0deg)) scale(2.15);
        opacity: 0;
        filter: blur(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.rocket-flyby.hero-title-explosion .hero-letter {
        animation: none !important;
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        filter: none !important;
        color: inherit !important;
    }
    .hero.rocket-flyby.hero-title-explosion .hero-letter--accent {
        color: var(--accent) !important;
    }
    .hero.rocket-flyby.hero-title-explosion .hero-accent::after {
        opacity: 1 !important;
    }
}

/* Lens Flare Effect */
.hero.rocket-flyby::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 200, 100, 0.6) 30%,
        transparent 70%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(255, 200, 100, 0.6),
        0 0 80px rgba(255, 120, 0, 0.4);
    animation: lens-flare 0.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 100;
}

@keyframes lens-flare {
    0% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    100% { 
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes flyby-wobble {
    0% { 
        transform: scale(1.03) translate(0, 0) rotate(0deg);
    }
    15% { 
        transform: scale(1.04) translate(-4px, -2px) rotate(-0.5deg);
    }
    30% { 
        transform: scale(1.03) translate(3px, 1px) rotate(0.4deg);
    }
    45% { 
        transform: scale(1.05) translate(-2px, -3px) rotate(-0.3deg);
    }
    60% { 
        transform: scale(1.04) translate(3px, 1px) rotate(0.4deg);
    }
    75% { 
        transform: scale(1.04) translate(-1px, 2px) rotate(-0.1deg);
    }
    90% { 
        transform: scale(1.03) translate(1px, -1px) rotate(0.1deg);
    }
    100% { 
        transform: scale(1.03) translate(0, 0) rotate(0deg);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .earth-3d {
        width: 280px;
        height: 280px;
        bottom: -120px;
        left: -120px;
    }
    
    .rocket-3d {
        bottom: 40px;
        left: 80px;
        width: 20px;
        height: 50px;
    }
    
    .smoke-plume {
        bottom: 35px;
        left: 88px;
        width: 6px;
        height: 6px;
    }
    
    .hero-3d-scene {
        perspective: 800px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .earth-3d,
    .rocket-3d,
    .cloud,
    .city-lights {
        animation: none !important;
    }
    
    .rocket-exhaust-3d {
        animation: none !important;
    }
    
    .hero.rocket-launching h1,
    .hero.rocket-approaching h1,
    .hero.rocket-flyby h1 {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}