/*
 * Theme Name:  Solar System UI
 * Theme URI:   https://example.com/solar-system-ui
 * Description: Interactive solar system homepage template.
 * Version:     1.0.0
 * Author:      Custom
 * Text Domain: solar-system-ui
 */

/* ============================================================
   CUSTOM PROPERTIES
============================================================ */
:root {
    --color-space:       #04070f;
    --color-deep:        #080d1a;
    --color-sun-core:    #fff7c0;
    --color-sun-mid:     #ffcc44;
    --color-sun-outer:   #ff8800;
    --color-sun-glow:    #ff660044;
    --color-planet-1:    #3b6bff;
    --color-planet-1-g:  #1e3bcc;
    --color-planet-2:    #9b59b6;
    --color-planet-2-g:  #6c3483;
    --color-asteroid:    #c8d6e5;
    --color-asteroid-g:  #8395a7;
    --color-text:        #e8eaf6;
    --color-dim:         rgba(255,255,255,0.55);

    --sun-size:          140px;
    --planet-size:       72px;
    --asteroid-min:      52px;
    --asteroid-max:      80px;

    --orbit-inner-r:     200px;
    --orbit-outer-r:     320px;

    --z-space:      0;
    --z-orbits:     1;
    --z-planet:     2;
    --z-asteroid:   3;
    --z-sun:        10;
    --z-ui:         20;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-space);
    color: var(--color-text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; }

/* ============================================================
   GALAXY WRAPPER — full-screen, perspective stage
============================================================ */
.galaxy-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 900px;
    overflow: hidden;
}

/* ============================================================
   STARFIELD CANVAS
============================================================ */
.starfield-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-space);
    pointer-events: none;
}

/* ============================================================
   AMBIENT RINGS (decorative background glows)
============================================================ */
.ambient-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-space);
    animation: ambientPulse 8s ease-in-out infinite alternate;
}
.ambient-ring--1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(255,120,0,0.06) 0%, transparent 70%);
    animation-delay: 0s;
}
.ambient-ring--2 {
    width: 820px; height: 820px;
    background: radial-gradient(circle, rgba(59,107,255,0.05) 0%, transparent 70%);
    animation-delay: -3s;
}
.ambient-ring--3 {
    width: 1100px; height: 1100px;
    background: radial-gradient(circle, rgba(155,89,182,0.04) 0%, transparent 70%);
    animation-delay: -5.5s;
}

@keyframes ambientPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.12); opacity: 1;   }
}

/* ============================================================
   ORBIT TRACKS
============================================================ */
.orbit-track {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.07);
    pointer-events: none;
    z-index: var(--z-orbits);
    transform-style: preserve-3d;
    transform: rotateX(72deg);
}
.orbit-track--inner {
    width:  calc(var(--orbit-inner-r) * 2);
    height: calc(var(--orbit-inner-r) * 2);
    border-color: rgba(59,107,255,0.15);
}
.orbit-track--outer {
    width:  calc(var(--orbit-outer-r) * 2);
    height: calc(var(--orbit-outer-r) * 2);
    border-color: rgba(155,89,182,0.12);
}

/* ============================================================
   PLANET WRAPPERS & ORBIT ANIMATION
============================================================ */
.planet-wrapper {
    position: absolute;
    z-index: var(--z-planet);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--planet-size);
    height: var(--planet-size);
    transform-style: preserve-3d;
}

/* Each wrapper orbits around the center */
.orbit--inner {
    animation: orbitInner 18s linear infinite;
}
.orbit--outer {
    animation: orbitOuter 30s linear infinite;
    animation-direction: reverse;
}

@keyframes orbitInner {
    0%   { transform: rotateZ(0deg)   translateX(var(--orbit-inner-r)) rotateZ(0deg);   }
    100% { transform: rotateZ(360deg) translateX(var(--orbit-inner-r)) rotateZ(-360deg); }
}
@keyframes orbitOuter {
    0%   { transform: rotateZ(0deg)   translateX(var(--orbit-outer-r)) rotateZ(0deg);   }
    100% { transform: rotateZ(360deg) translateX(var(--orbit-outer-r)) rotateZ(-360deg); }
}

/* ============================================================
   PLANETS
============================================================ */
.planet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--planet-size);
    height: var(--planet-size);
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}
.planet:hover,
.planet:focus-visible {
    transform: scale(1.15);
    outline: none;
}

/* Services planet */
.planet--services {
    background: radial-gradient(circle at 35% 35%, #5b8bff, var(--color-planet-1-g));
    box-shadow:
        0 0 16px 4px rgba(59,107,255,0.5),
        0 0 40px 8px rgba(59,107,255,0.25),
        inset 0 2px 4px rgba(255,255,255,0.25);
}
.planet--services.is-active {
    box-shadow:
        0 0 24px 8px rgba(59,107,255,0.8),
        0 0 60px 16px rgba(59,107,255,0.4),
        inset 0 2px 4px rgba(255,255,255,0.3);
    animation: planetPulse 1.5s ease-in-out infinite;
}

/* Contact planet */
.planet--contact {
    background: radial-gradient(circle at 35% 35%, #c07ae8, var(--color-planet-2-g));
    box-shadow:
        0 0 16px 4px rgba(155,89,182,0.5),
        0 0 40px 8px rgba(155,89,182,0.25),
        inset 0 2px 4px rgba(255,255,255,0.2);
}
.planet--contact:hover {
    box-shadow:
        0 0 28px 10px rgba(155,89,182,0.75),
        0 0 60px 18px rgba(155,89,182,0.35),
        inset 0 2px 4px rgba(255,255,255,0.3);
}

/* Saturn-like ring on Services planet */
.planet__ring {
    position: absolute;
    width: 110%;
    height: 28%;
    border-radius: 50%;
    border: 2px solid rgba(180,210,255,0.4);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
    pointer-events: none;
}

.planet__label {
    position: relative;
    z-index: 1;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.planet__glow {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    pointer-events: none;
    animation: glowBreath 4s ease-in-out infinite alternate;
}
.planet--services .planet__glow {
    background: radial-gradient(circle, rgba(59,107,255,0.25) 0%, transparent 70%);
}
.planet--contact .planet__glow {
    background: radial-gradient(circle, rgba(155,89,182,0.25) 0%, transparent 70%);
    animation-delay: -2s;
}

@keyframes planetPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}
@keyframes glowBreath {
    0%   { opacity: 0.6; transform: scale(0.95); }
    100% { opacity: 1;   transform: scale(1.1);  }
}

/* ============================================================
   THE SUN
============================================================ */
.sun-wrapper {
    position: absolute;
    z-index: var(--z-sun);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sun {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sun-size);
    height: var(--sun-size);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%,
        var(--color-sun-core) 0%,
        var(--color-sun-mid)  45%,
        var(--color-sun-outer) 75%,
        #cc4400 100%
    );
    box-shadow:
        0 0 30px 10px rgba(255,140,0,0.7),
        0 0 70px 25px rgba(255,90,0,0.45),
        0 0 120px 50px rgba(255,60,0,0.25),
        0 0 200px 80px rgba(255,40,0,0.12);
    animation: sunPulse 4s ease-in-out infinite;
    transition: transform 0.3s ease;
}
.sun:hover {
    transform: scale(1.07);
}
.sun:focus-visible {
    outline: 3px solid rgba(255,200,0,0.7);
    outline-offset: 6px;
}

.sun__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}
.sun__site-name {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(20,10,0,0.85);
    text-shadow: 0 1px 2px rgba(255,200,100,0.5);
}

/* Corona rings */
.sun__corona {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,180,50,0.18);
    animation: coronaExpand 3s ease-out infinite;
    pointer-events: none;
}
.sun__corona--1 {
    inset: -12px;
    animation-delay: 0s;
}
.sun__corona--2 {
    inset: -26px;
    animation-delay: -1s;
    border-color: rgba(255,140,30,0.12);
}
.sun__corona--3 {
    inset: -44px;
    animation-delay: -2s;
    border-color: rgba(255,100,10,0.07);
}

@keyframes sunPulse {
    0%, 100% {
        box-shadow:
            0 0 30px 10px rgba(255,140,0,0.7),
            0 0 70px 25px rgba(255,90,0,0.45),
            0 0 120px 50px rgba(255,60,0,0.25),
            0 0 200px 80px rgba(255,40,0,0.12);
    }
    50% {
        box-shadow:
            0 0 40px 16px rgba(255,160,0,0.85),
            0 0 90px 36px rgba(255,100,0,0.55),
            0 0 160px 70px rgba(255,70,0,0.3),
            0 0 260px 100px rgba(255,40,0,0.15);
    }
}
@keyframes coronaExpand {
    0%   { transform: scale(1);    opacity: 0.7; }
    60%  { transform: scale(1.06); opacity: 0.3; }
    100% { transform: scale(1);    opacity: 0.7; }
}

/* ============================================================
   ASTEROID FIELD
============================================================ */
.asteroid-field {
    position: absolute;
    inset: 0;
    z-index: var(--z-asteroid);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hidden state */
.asteroid-field[aria-hidden="true"] .asteroid {
    opacity: 0;
    transform: scale(0) translate(0, 0);
    pointer-events: none;
}

/* Revealed state */
.asteroid-field[aria-hidden="false"] .asteroid {
    pointer-events: all;
}

/* Base asteroid */
.asteroid {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    background: radial-gradient(135deg, var(--color-asteroid) 0%, var(--color-asteroid-g) 100%);
    box-shadow:
        0 0 10px 2px rgba(200,214,229,0.3),
        inset 0 1px 3px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.3);
    transition:
        opacity 0.5s ease calc(var(--asteroid-index) * 0.07s),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--asteroid-index) * 0.07s),
        box-shadow 0.3s ease;
    cursor: pointer;
    min-width: var(--asteroid-min);
    padding: 8px 14px;
}
.asteroid:hover {
    background: radial-gradient(135deg, #dde9f5 0%, #a8bdcf 100%);
    box-shadow:
        0 0 20px 6px rgba(200,214,229,0.55),
        inset 0 1px 3px rgba(255,255,255,0.5);
    transform: scale(1.12) !important;
    z-index: calc(var(--z-asteroid) + 1);
}

.asteroid__label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a2535;
    text-shadow: none;
    white-space: nowrap;
}

/* Shape variants */
.asteroid--1 { border-radius: 42% 58% 60% 40% / 52% 44% 56% 48%; }
.asteroid--2 { border-radius: 55% 45% 38% 62% / 46% 58% 42% 54%; }
.asteroid--3 { border-radius: 38% 62% 55% 45% / 58% 40% 60% 42%; }
.asteroid--4 { border-radius: 60% 40% 45% 55% / 40% 60% 38% 62%; }
.asteroid--5 { border-radius: 48% 52% 62% 38% / 56% 44% 55% 45%; }

/* Floating animation — applied by JS per asteroid */
@keyframes floatX {
    0%, 100% { translate: 0px 0px; }
    25%       { translate: 12px -8px; }
    50%       { translate: -6px 14px; }
    75%       { translate: -14px -4px; }
}
@keyframes floatY {
    0%, 100% { translate: 0px 0px; }
    33%       { translate: -10px 10px; }
    66%       { translate: 8px -12px; }
}
@keyframes floatZ {
    0%, 100% { translate: 0px 0px; }
    20%       { translate: 14px 6px; }
    55%       { translate: -8px -12px; }
    80%       { translate: 6px 10px; }
}

/* ============================================================
   TAGLINE
============================================================ */
.galaxy-tagline {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-ui);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-dim);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: taglineFade 1.2s ease 1.5s forwards;
}
@keyframes taglineFade {
    to { opacity: 1; }
}

/* ============================================================
   RESPONSIVE — TABLET
============================================================ */
@media (max-width: 900px) {
    :root {
        --sun-size:       110px;
        --planet-size:    58px;
        --orbit-inner-r:  155px;
        --orbit-outer-r:  240px;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
   Stack planets vertically; disable 3D orbits; scale everything
============================================================ */
@media (max-width: 600px) {
    :root {
        --sun-size:       90px;
        --planet-size:    52px;
        --orbit-inner-r:  0px;
        --orbit-outer-r:  0px;
    }

    .galaxy-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
        padding: 3rem 1rem;
    }

    /* Cancel orbit animations on mobile */
    .orbit--inner,
    .orbit--outer {
        position: relative;
        animation: none;
        transform: none;
    }

    .orbit-track,
    .ambient-ring--2,
    .ambient-ring--3 { display: none; }

    .planet-wrapper {
        position: relative;
        transform: none !important;
        animation: none !important;
    }

    /* Planets float gently on mobile */
    .planet--services,
    .planet--contact {
        animation: mobileFloat 5s ease-in-out infinite alternate;
    }
    .planet--contact { animation-delay: -2.5s; }

    @keyframes mobileFloat {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }

    .asteroid-field {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        padding: 1rem;
        max-width: 340px;
    }

    .asteroid-field[aria-hidden="false"] .asteroid {
        position: relative;
        transform: none !important;
        animation: mobileFloat 6s ease-in-out infinite alternate;
    }

    .galaxy-tagline {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 1rem;
    }
}