/* ── CSS Reset & Font Setup ── */
body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #111113;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    overflow-x: hidden;
}

/* ── Container Layout ── */
.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.button-circle {
    position: relative;
    width: 440px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ── Button Transitions & Shared Reset ── */
.main-button,
.connected-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

/* ── Circle Icon Core Styling ── */
.circle-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s ease,
                filter 0.4s ease;
}

/* ── Central Main Button ── */
.main-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.main-button:hover,
.main-button.is-hovered {
    transform: translate(-50%, -50%) scale(1.05);
}

.main-button .circle-icon {
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.45);
}

.main-button.is-hovered .circle-icon {
    box-shadow: 0 0 35px rgba(0, 255, 136, 0.7);
    transform: scale(1.05);
}

/* ── Connected Radial Buttons ── */
.connected-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    z-index: 5;
    /* Move to position based on angle */
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))) scale(0.85);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.3s ease,
                z-index 0.3s ease;
}

.connected-button .circle-icon {
    filter: saturate(1.1) brightness(0.9);
}

/* Hover and Active State for Connected Buttons */
.connected-button:hover,
.connected-button.is-hovered {
    z-index: 100;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))) scale(1.05);
}

.connected-button.is-hovered .circle-icon {
    filter: saturate(1.4) brightness(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

/* Fade out non-hovered buttons when one is hovered */
.button-circle.has-hover .connected-button:not(.is-hovered),
.button-circle.has-hover .main-button:not(.is-hovered) {
    opacity: 0.35;
}

/* ── Premium Project Card (Details) ── */
.project-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    color: white;
    width: max-content;
    max-width: 380px;
    box-sizing: border-box;
    text-align: left;
    
    /* Modern Glassmorphism Styling */
    background: rgba(22, 22, 26, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    
    /* Reveal Transition Animation */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 500;
    transition: opacity 0.3s ease,
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s ease;
}

/* Show Card on Hover/Active */
.connected-button.is-hovered .project-card,
.main-button.is-hovered .project-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Card Image Preview */
.card-preview {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

/* Card Content Area */
.card-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-content h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ffffff;
}

.card-content p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
    white-space: normal;
}

/* ── Central Main Card (Tabslify Specific) ── */
.project-card.main-card {
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 24px;
    width: 340px;
    max-width: 90vw;
    gap: 8px;
    box-shadow: 0 12px 45px rgba(0, 255, 136, 0.2);
}

.project-card.main-card h1 {
    font-size: 20px;
    font-weight: 800;
    color: #00ff88;
    padding: 0;
}

.project-card.main-card p {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    padding: 0;
}

.main-button.is-hovered .project-card.main-card {
    transform: translateX(-50%) translateY(0);
}

/* ── Symmetrical Floating Card Positioning (Desktop) ── */

/* 1. Left-Side Buttons (Slide out to the Right) */
.connected-button[style*="--angle: 225deg"] .project-card,
.connected-button[style*="--angle: 270deg"] .project-card,
.connected-button[style*="--angle: 315deg"] .project-card {
    left: calc(100% + 18px);
    right: auto;
    top: 50%;
    transform: translateY(-50%) translateX(-15px);
}
.connected-button[style*="--angle: 225deg"].is-hovered .project-card,
.connected-button[style*="--angle: 270deg"].is-hovered .project-card,
.connected-button[style*="--angle: 315deg"].is-hovered .project-card {
    transform: translateY(-50%) translateX(0);
}

/* 2. Right-Side Buttons (Slide out to the Left) */
.connected-button[style*="--angle: 45deg"] .project-card,
.connected-button[style*="--angle: 90deg"] .project-card,
.connected-button[style*="--angle: 135deg"] .project-card {
    right: calc(100% + 18px);
    left: auto;
    top: 50%;
    transform: translateY(-50%) translateX(15px);
}
.connected-button[style*="--angle: 45deg"].is-hovered .project-card,
.connected-button[style*="--angle: 90deg"].is-hovered .project-card,
.connected-button[style*="--angle: 135deg"].is-hovered .project-card {
    transform: translateY(-50%) translateX(0);
}

/* 3. Top Button (Slide down Below) */
.connected-button[style*="--angle: 0deg"] .project-card {
    top: calc(100% + 18px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-15px);
}
.connected-button[style*="--angle: 0deg"].is-hovered .project-card {
    transform: translateX(-50%) translateY(0);
}

/* 4. Bottom Button (Slide up Above) */
.connected-button[style*="--angle: 180deg"] .project-card {
    bottom: calc(100% + 18px);
    top: auto;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
}
.connected-button[style*="--angle: 180deg"].is-hovered .project-card {
    transform: translateX(-50%) translateY(0);
}


/* ══════════════════════════════════════════
   TABLET RESPONSIVENESS: 601px – 1024px
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .button-circle {
        width: 360px;
        height: 360px;
    }

    .main-button {
        width: 130px;
        height: 130px;
    }

    .connected-button {
        width: 90px;
        height: 90px;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-165px) rotate(calc(-1 * var(--angle))) scale(0.85);
    }

    .connected-button:hover,
    .connected-button.is-hovered {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-165px) rotate(calc(-1 * var(--angle))) scale(1.05);
    }

    .project-card {
        padding: 10px 14px 10px 10px;
        border-radius: 14px;
        max-width: 320px;
        gap: 12px;
    }

    .card-preview {
        width: 65px;
        height: 65px;
        border-radius: 8px;
    }

    .card-content h1 {
        font-size: 15px;
    }

    .card-content p {
        font-size: 12px;
    }
    
    .project-card.main-card {
        width: 300px;
        padding: 2px 2px;
    }
}


/* ══════════════════════════════════════════
   MOBILE RESPONSIVENESS: ≤ 600px
══════════════════════════════════════════ */
@media (max-width: 600px) {
    .container {
        /* Add some padding at the bottom for the fixed details card */
        padding-bottom: 120px;
    }

    .button-circle {
        width: 270px;
        height: 270px;
    }

    .main-button {
        width: 95px;
        height: 95px;
    }

    .connected-button {
        width: 65px;
        height: 65px;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-120px) rotate(calc(-1 * var(--angle))) scale(0.85);
    }

    .connected-button:hover,
    .connected-button.is-hovered {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-120px) rotate(calc(-1 * var(--angle))) scale(1.05);
    }

    /* Redirect all project cards to a single centered banner below the spiderweb */
    .project-card,
    .connected-button[style*="--angle"] .project-card,
    .connected-button[style*="--angle"].is-hovered .project-card {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: -150px !important;
        top: auto !important;
        transform: translateX(-50%) translateY(20px) !important;
        width: min(340px, 92vw) !important;
        max-width: 92vw !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 14px 10px 10px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
    }

    /* Hovered reveal for mobile position */
    .connected-button.is-hovered .project-card,
    .main-button.is-hovered .project-card {
        transform: translateX(-50%) translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .card-preview {
        width: 60px;
        height: 60px;
        border-radius: 8px;
    }

    .card-content {
        gap: 3px;
    }

    .card-content h1 {
        font-size: 14px;
    }

    .card-content p {
        font-size: 11.5px;
        line-height: 1.35;
    }

    /* Main Card styling for Mobile */
    .project-card.main-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 14px 18px !important;
        gap: 6px !important;
    }
    
    .project-card.main-card p {
        font-size: 12px !important;
    }
}

/* ══════════════════════════════════════════
   TINY DEVICES: ≤ 380px
══════════════════════════════════════════ */
@media (max-width: 380px) {
    .container {
        padding-bottom: 130px;
    }

    .button-circle {
        width: 230px;
        height: 230px;
    }

    .connected-button {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-100px) rotate(calc(-1 * var(--angle))) scale(0.85);
    }

    .connected-button:hover,
    .connected-button.is-hovered {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-100px) rotate(calc(-1 * var(--angle))) scale(1.05);
    }

    .project-card,
    .connected-button[style*="--angle"] .project-card,
    .connected-button[style*="--angle"].is-hovered .project-card {
        bottom: -130px !important;
        width: min(290px, 94vw) !important;
        padding: 8px 12px 8px 8px !important;
    }
    
    .card-preview {
        width: 50px;
        height: 50px;
    }
    
    .card-content h1 {
        font-size: 13px;
    }
    
    .card-content p {
        font-size: 10.5px;
    }
}