/* Mirrar Hub - Compass Style */

:root {
    --bg-dark: #121212;
    /* Very Dark Gray */
    --text-main: #ffffff;
    /* White Text */

    /* The 5 Elements - Neon Versions */
    --color-noord: #2ecc71;
    /* Aarde - Groen */
    --color-zuid: #ff3b30;
    /* Vuur - Rood (Brighter) */
    --color-oost: #f1c40f;
    /* Lucht - Geel */
    --color-west: #00d2ff;
    /* Water - Blauw (Cyan-ish) */
    --color-center: #bf55ec;
    /* Ether - Paars */

    --glow-strength: 0px 0px 20px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Dark Gray with a Hint of Purple */
    background: radial-gradient(circle at center, #2e243d 0%, #121212 100%);
}

/* The Compass Container */
/* The Compass Container */
.compass-container {
    position: relative;
    width: 90vmin;
    /* Percentage of the smallest side */
    height: 90vmin;
    max-width: 800px;
    /* Prevent it from getting too big */
    max-height: 800px;
    border-radius: 50%;
    /* Subtle Outer Ring */
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.05);
    margin: auto;
    /* Ensure centering in flex body */
}

/* Central Hub (Ether) */
.hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfectly Centered */
    z-index: 10;
    width: 30vmin;
    /* Scalable center */
    height: 30vmin;
    max-width: 260px;
    max-height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* Soft Purple Glow backing - Darker */
    background: radial-gradient(circle, rgba(191, 85, 236, 0.05) 0%, rgba(34, 34, 34, 0.8) 70%);
    box-shadow: 0 0 60px rgba(191, 85, 236, 0.3);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hub-center::after {
    /* Rotating ring */
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 1px solid rgba(191, 85, 236, 0.3);
    border-radius: 50%;
    border-radius: 50%;
    animation: rotate-ring 20s linear infinite;
    pointer-events: none;
    /* Fix: Allow clicks to pass through ring */
}

/* Make sure the link is clickable and on top */
.hub-center a {
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    cursor: pointer;
}

.hub-center img {
    width: 18vmin;
    /* Scalable image */
    max-width: 160px;
    filter: brightness(1) hue-rotate(110deg) saturate(5) drop-shadow(0 0 20px rgba(155, 89, 182, 0.8));
    animation: pulse-ether 2.5s infinite ease-in-out;
    border-radius: 50%;
}

/* The 4 Directions */
/* New Group Wrapper for Directions (Replacing simple <a>) */
.direction-group {
    position: absolute;
    /* Absolute Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 20;
    transition: all 0.4s ease;
}

.direction-group:hover .direction-link {
    transform: scale(1.05);
    opacity: 1;
    text-shadow: 0 0 15px currentColor;
}

/* Modifying direction-link to be part of the group */
.direction-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: inherit;
    /* Inherit color from group */
    transition: all 0.4s ease;
    opacity: 0.9;
}



.direction-link img {
    width: 8vmin;
    max-width: 70px;
    min-width: 40px;
    transition: all 0.4s ease;
    margin-bottom: 5px;
    border-radius: 50%;
}

.direction-link h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 4vmin, 2.2rem);
    /* Responsive Font */
    text-transform: uppercase;
    margin: 10px 0 5px;
    letter-spacing: 3px;
    font-weight: 600;
}

.direction-link p {
    font-size: clamp(0.7rem, 2.5vmin, 0.9rem);
    line-height: 1.4;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
}

/* COMPASS VISUALS (The Star) */
.compass-star {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.star-point {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 3.5vmin solid transparent;
    border-right: 3.5vmin solid transparent;
    transform-origin: bottom center;
    opacity: 0.4;
    transition: all 0.4s ease;
}

.point-n {
    bottom: 50%;
    border-bottom: 28vmin solid var(--color-noord);
    filter: drop-shadow(0 -10px 10px rgba(46, 204, 113, 0.3));
}

.pos-noord:hover~.compass-star .point-n {
    opacity: 1;
    border-bottom-color: #2ecc71;
    filter: drop-shadow(0 -10px 20px rgba(46, 204, 113, 0.8));
}

.point-s {
    top: 50%;
    border-top: 28vmin solid var(--color-zuid);
    filter: drop-shadow(0 10px 10px rgba(255, 59, 48, 0.3));
}

.pos-zuid:hover~.compass-star .point-s {
    opacity: 1;
    border-top-color: #ff3b30;
    filter: drop-shadow(0 10px 20px rgba(255, 59, 48, 0.8));
}

.point-e {
    left: 50%;
    margin-left: 0;
    /* Centered correction */
    border-left: 28vmin solid var(--color-oost);
    border-top: 3.5vmin solid transparent;
    border-bottom: 3.5vmin solid transparent;
    border-right: 0;
    /* Actually rotated Triangle */
    width: 0;
    height: 0;
    border: none;
    border-left: 3.5vmin solid transparent;
    border-right: 3.5vmin solid transparent;
    border-bottom: 28vmin solid var(--color-oost);
    transform: rotate(90deg);
    bottom: 50%;
    transform-origin: bottom center;
    filter: drop-shadow(10px 0 10px rgba(241, 196, 15, 0.3));
}

.pos-oost:hover~.compass-star .point-e {
    opacity: 1;
    border-bottom-color: #f1c40f;
    filter: drop-shadow(10px 0 20px rgba(241, 196, 15, 0.8));
}


.point-w {
    width: 0;
    height: 0;
    border-left: 3.5vmin solid transparent;
    border-right: 3.5vmin solid transparent;
    border-bottom: 28vmin solid var(--color-west);
    transform: rotate(-90deg);
    bottom: 50%;
    transform-origin: bottom center;
    filter: drop-shadow(-10px 0 10px rgba(0, 210, 255, 0.3));
}

.pos-west:hover~.compass-star .point-w {
    opacity: 1;
    border-bottom-color: #00d2ff;
    filter: drop-shadow(-10px 0 20px rgba(0, 210, 255, 0.8));
}


/* NOORD */
.pos-noord {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-noord);
    z-index: 20;
}

/* ZUID */
.pos-zuid {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-zuid);
    z-index: 20;
}

/* OOST */
.pos-oost {
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-oost);
    z-index: 20;
}

/* WEST */
.pos-west {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-west);
    z-index: 20;
}

/* Compass Axis Lines (Glowing) */
.compass-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Compass Axis Lines (Background Ring) */
.compass-back-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.line-v {
    position: absolute;
    left: 50%;
    top: 5%;
    bottom: 5%;
    width: 2px;
    background: linear-gradient(to bottom,
            rgba(46, 204, 113, 0),
            rgba(46, 204, 113, 0.5) 20%,
            var(--color-center) 50%,
            rgba(231, 76, 60, 0.5) 80%,
            rgba(231, 76, 60, 0));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.line-h {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(to right,
            rgba(52, 152, 219, 0),
            rgba(52, 152, 219, 0.5) 20%,
            var(--color-center) 50%,
            rgba(241, 196, 15, 0.5) 80%,
            rgba(241, 196, 15, 0));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes pulse-ether {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

@keyframes rotate-ring {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}