/* color palette */
:root {
    --cl-zoom: 1;
    --lavender-first: #9b84f0;
    --lavender-second: #7c62d4;
    --bg: #1a1726;
    --bg-surface: #211e30;
    --bg-card: #2a2640;
    --bg-card-solid: rgba(28, 25, 45, 0.92);
    --bg-nav: rgba(26, 23, 38, 0.7);
    --bg-deep: rgba(16, 14, 28, 0.97);
    --border: rgba(180, 160, 255, 0.12);
    --border-accent: rgba(184, 168, 248, 0.18);
    --border-accent-mid: rgba(184, 168, 248, 0.25);
    --text-primary: #f0ecff;
    --text-secondary: #b8aee0;
    --text-muted: #7a6fa8;
    --text-dim: #6a5fa0;
    --text-dimmer: #5a4f88;
    --text-dimmest: #4a4060;
    --accent: #b8a8f8;
    --accent-glow: rgba(184, 168, 248, 0.25);
    --accent-faint: rgba(184, 168, 248, 0.08);
    --accent-subtle: rgba(184, 168, 248, 0.12);
    --accent-mid: rgba(184, 168, 248, 0.2);
    --accent-strong: rgba(184, 168, 248, 0.5);
    --lavender-faint: rgba(155, 132, 240, 0.25);
    --input-bg: rgba(42, 38, 64, 0.8);
    --skin-glow: drop-shadow(0 0 28px rgba(184, 168, 248, 0.2));
    --logo-size: 36px;
    --logo-radius: 9px;
}

/* reset browser defaults so it looks the same everywhere */
*, /* every item on the page */
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* defaults */
body {
    font-family: 'Quicksand', sans-serif; /* use sans serif as fallback */
    background: var(--bg); /* background color */
    color: var(--text-primary); /* text color */
}

/* ambient gradient */
body::before { /* psuedo/virtual element (?) */
    content: '';
    position: fixed; /* doesnt scroll */
    inset: 0; /*covers entire screen */
    pointer-events: none; /* cant be clicked */
    background:
            radial-gradient(
                    ellipse 60% 50% at 20% 30%,
                    rgba(155, 132, 240, 0.08) 0%,
                    transparent 70%
            ),
                /*
                 shape: ellipse
                 size: 60% screen width, 50% screen height
                 center position: 20% screen width, 30% screen height
                 color at center: soft purple, 8% opacity
                 distance until fully transparent: 70% from center to edge
                 */
            radial-gradient(
                    ellipse 50% 60% at 80% 70%,
                    rgba(184, 168, 248, 0.06) 0%,
                    transparent 70%
            );
    /*
     shape: ellipse
     size: 50% screen width, 60% screen height
     center position: 80% screen width, 70% screen height
     color at center: lighter lilac, 6% opacity
     distance until fully transparent: 70% from center to edge
     */
    z-index: 0; /* bottom of stack order */
}

/* stars */
.stars {
    position: fixed; /* doesnt scroll */
    inset: 0; /* covers entire screen */
    pointer-events: none; /* cant be clicked */
    z-index: 0; /* bottom of stack order, but is loaded after the gradients so its above those */
}

.star {
    position: absolute; /* relative to whole screen */
    border-radius: 50%; /*makes it a circle, like a chamfer in onshape */
    background: #fff; /* star color */
    animation: twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
    /*
     name of the keyframe: twinkle
     duration: random, fallback 3 seconds
     timing curve(?): eases in and out forever
     delay: random, fallback 0 seconds
     */
}

@keyframes twinkle {
    0%, 100% { /* start and end at dim opacity */
        opacity: var(--lo, .05);
    }
    50% { /* peak brightness at halfway point */
        opacity: var(--hi, .4);
    }
}

/* nav */
nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    background: var(--bg-nav);
}

/* logo */
.logo-link {
    display: flex; /* flex container */
    align-items: center;
    gap: .75rem; /* root element, doesnt compound */
    text-decoration: none; /* removes underline in hyprlink */
    color: var(--text-primary); /* text color */
    transition: opacity .2s; /* animates hover opacity instead of instant */
}

.logo-link:hover {
    opacity: .8; /* fades logo to 80% opacity on hover */
}

.logo-img {
    width: var(--logo-size);
    height: var(--logo-size);
    border-radius: var(--logo-radius);
    object-fit: cover; /* scales image to fit */
    border: 1px solid var(--border); /*  */
}

.logo-fb {
    width: var(--logo-size);
    height: var(--logo-size);
    border-radius: var(--logo-radius);
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--lavender-first), var(--lavender-second)); /* show when logo image fails to load */
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    flex-shrink: 0; /* prevents squishing */
}

/* svg overlay used for drawing lines between orbiting cards */
.lines-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    overflow: visible;
}

/* tooltip */
#tooltip {
    position: fixed;
    z-index: 500;
    background: var(--bg-deep);
    border: 1px solid var(--border-accent-mid);
    border-radius: 10px;
    padding: .6rem .8rem;
    max-width: 260px;
    pointer-events: none;
    display: none;
}

#tooltip .tt-name {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

#tooltip .tt-lore {
    font-size: .65rem;
    line-height: 1.5;
    color: #9080c0;
}

/* loading / error status */
.status {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: .9rem;
    z-index: 10;
}

.status.error {
    color: #f88;
}

/* orbiting cards — base shared by skill, pet, dungeon, wardrobe, garden cards */
.orbit-card {
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 20;
    background: var(--bg-card-solid);
    border: 1px solid var(--accent-mid);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    animation: cardIn .4s ease forwards;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.85);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* animation practice */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0); /* moves up without moving other elements */
    }
}

/* bottom strip */
#bottom-left {
    position: fixed; /* doesnt move */
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .75rem;
    opacity: 0; /* starts hidden so the delay looks clean */
    animation: fadeUp .5s ease forwards .6s; /* "forwards" keeps it visible after animating in */
}

#bottom-right {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .75rem;
    opacity: 0;
    animation: fadeUp .5s ease forwards .6s;
}

#version-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #3a3050;
    user-select: none; /* cant be highlighted */
}

#credits-link {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #3a3050;
    text-decoration: none;
    transition: color .2s;
}

#credits-link:hover {
    color: var(--text-muted);
}