/* ============================================================
   Welcome Mascot - Button Styles
   Octagon button positioning, styling, hover states
   ============================================================ */

/* ─── Base Octagon Button ─── */
.octagon-button {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: var(--mascot-transition);
    z-index: var(--mascot-z-base);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--mascot-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--mascot-text);
    padding: 10px 20px;
    min-width: 100px;
    border: 2px solid var(--mascot-primary);
    border-radius: 25px;
    background: var(--mascot-bg);
    box-shadow: 0 4px 15px var(--mascot-shadow);
    white-space: nowrap;
    outline: none;
}

.octagon-button:hover,
.octagon-button:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 6px 20px var(--mascot-shadow-hover);
    z-index: calc(var(--mascot-z-base) + 5);
}

.octagon-button:active {
    transform: translate(-50%, -50%) scale(0.98);
    transition-duration: 0.1s;
}

/* Focus ring for keyboard navigation */
.octagon-button:focus-visible {
    outline: 3px solid var(--mascot-primary);
    outline-offset: 3px;
}

/* ─── Octagon Position Layout (8 positions) ─── */
/* Position calculations: radius ~45% from center */

.octagon-button[data-position="A"] { top: 5%;  left: 50%; }    /* 0°   - Top */
.octagon-button[data-position="B"] { top: 14%; left: 82%; }    /* 45°  - Top-Right */
.octagon-button[data-position="C"] { top: 50%; left: 95%; }    /* 90°  - Right */
.octagon-button[data-position="D"] { top: 86%; left: 82%; }    /* 135° - Bottom-Right */
.octagon-button[data-position="E"] { top: 95%; left: 50%; }    /* 180° - Bottom */
.octagon-button[data-position="F"] { top: 86%; left: 18%; }    /* 225° - Bottom-Left */
.octagon-button[data-position="G"] { top: 50%; left: 5%; }     /* 270° - Left */
.octagon-button[data-position="H"] { top: 14%; left: 18%; }    /* 315° - Top-Left */

/* ─── Button Icon Support ─── */
.octagon-button .button-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}

.octagon-button .button-label {
    flex: 1;
}

/* ─── Button Active/Selected State ─── */
.octagon-button.active {
    background: var(--mascot-primary);
    color: #ffffff;
    border-color: var(--mascot-primary);
}

/* ─── Button Disabled State ─── */
.octagon-button.disabled,
.octagon-button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Button Entrance Animation ─── */
.octagon-button {
    opacity: 0;
    animation: mascot-button-enter 0.3s ease forwards;
}

.octagon-button[data-position="A"] { animation-delay: 0.02s; }
.octagon-button[data-position="B"] { animation-delay: 0.05s; }
.octagon-button[data-position="C"] { animation-delay: 0.08s; }
.octagon-button[data-position="D"] { animation-delay: 0.11s; }
.octagon-button[data-position="E"] { animation-delay: 0.14s; }
.octagon-button[data-position="F"] { animation-delay: 0.17s; }
.octagon-button[data-position="G"] { animation-delay: 0.20s; }
.octagon-button[data-position="H"] { animation-delay: 0.23s; }

@keyframes mascot-button-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ─── Button Ripple Effect ─── */
.octagon-button .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: mascot-ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes mascot-ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ─── Pulse indicator (for highlighted buttons) ─── */
.octagon-button.pulse::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid var(--mascot-primary);
    opacity: 0;
    animation: mascot-button-pulse 2s infinite;
}

@keyframes mascot-button-pulse {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.15); }
}