/* WebGraha — shared base styles (used by every page) */

html, body {
    margin: 0;
    padding: 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='35%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%23fdfaf0'/%3E%3Cstop offset='100%25' stop-color='%23d9d2bb'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='15' r='11' fill='url(%23g)'/%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%23b9b09a' opacity='0.55'/%3E%3Ccircle cx='18' cy='13' r='1.1' fill='%23b9b09a' opacity='0.45'/%3E%3Ccircle cx='13' cy='19' r='1.3' fill='%23b9b09a' opacity='0.5'/%3E%3Ccircle cx='19' cy='19' r='0.9' fill='%23b9b09a' opacity='0.4'/%3E%3C/svg%3E") 15 15, auto;
}

a, button, input, textarea, select, label {
    cursor: inherit;
}

::-webkit-scrollbar { display: none; }

.glass-panel, .dropdown-menu {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        0 16px 44px rgba(0, 0, 0, 0.34);
}

.section-label {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(110, 231, 183, 0.85);
}

/* Starfield: faint static dust + twinkling stars (JS-injected) */
#starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(255,255,255,0.85);
    animation-name: star-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes star-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.25); }
}

/* Shooting stars (comet head leads, tail trails behind) */
.shooting-star {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--len, 120px);
    height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 65%, rgba(255,255,255,0.95) 100%);
    border-radius: 2px;
    opacity: 0;
    animation: shoot var(--dur, 1.1s) cubic-bezier(.3,.1,.2,1) forwards;
}
.shooting-star::before {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(255,255,255,0.9);
    transform: translate(-50%, -50%);
}
@keyframes shoot {
    0% { transform: rotate(var(--angle, 130deg)) translateX(0) scaleX(0.3); opacity: 0; }
    12% { opacity: 1; transform: rotate(var(--angle, 130deg)) translateX(40px) scaleX(1); }
    80% { opacity: 0.9; }
    100% { transform: rotate(var(--angle, 130deg)) translateX(var(--dist, 480px)) scaleX(1); opacity: 0; }
}

@keyframes wg-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes wg-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.wg-anim-fade { animation: wg-fade 1s ease; }
.wg-anim-rise { animation: wg-rise 0.9s ease; }