/**
 * ============================================
 * iMENU ORBIT — Floating Fairy Navigation
 * Radial pie menu inspired by Orbit CSS
 * Part of the 2026 iApp design system
 *
 * Usage:
 *   <div class="imenu-fairy" data-ia-behavior="ia-fairy-menu">
 *     <button class="imenu-fairy-btn">∞</button>
 *     <a href="#section" class="imenu-fairy-item">...</a>
 *   </div>
 *
 * Orbit: open class toggles item positions
 * Items fan in a 135° arc from ↑ → ↖ → ← → ↙
 * (optimal for fixed bottom-right placement)
 * ============================================
 */

/* ============================================
   CONTAINER
   Fixed at bottom-right; sized to trigger btn
   ============================================ */
.imenu-fairy {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    width: 52px;
    height: 52px;
}

/* Invisible full-screen backdrop — click to close */
.imenu-fairy-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: none;
    cursor: default;
}

.imenu-fairy.open .imenu-fairy-backdrop {
    display: block;
}

/* ============================================
   TRIGGER BUTTON — the ∞ fairy orb
   ============================================ */
.imenu-fairy-btn {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: var(--iv-color-accent, #2d5016);
    color: var(--iv-color-text-inverse, #ffffff);
    font-size: 1.65rem;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 4px 16px rgba(45, 80, 22, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.2);

    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.imenu-fairy-btn:hover,
.imenu-fairy-btn:focus-visible {
    background: var(--iv-color-accent-light, #4a7c2a);
    box-shadow:
        0 6px 24px rgba(45, 80, 22, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.25);
    outline: none;
}

.imenu-fairy.open .imenu-fairy-btn {
    transform: rotate(90deg) scale(1.05);
    background: var(--iv-color-accent-light, #4a7c2a);
    animation: fairy-pulse 1s ease-out;
}

/* Ripple when menu opens */
@keyframes fairy-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 124, 42, 0.5), 0 4px 16px rgba(45,80,22,0.35); }
    60%  { box-shadow: 0 0 0 16px rgba(74, 124, 42, 0), 0 4px 16px rgba(45,80,22,0.35); }
    100% { box-shadow: 0 6px 24px rgba(45,80,22,0.45), 0 2px 6px rgba(0,0,0,0.25); }
}

/* ============================================
   SATELLITE ITEMS — orbital navigation nodes
   ============================================ */
.imenu-fairy-item {
    /* Orbital position variables — overridden per item */
    --o-tx: 0px;
    --o-ty: 0px;

    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;

    /* Centered on the trigger button */
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;

    background: var(--iv-color-bg, #ffffff);
    border: 1.5px solid var(--iv-color-border, #e0e0e0);
    color: var(--iv-color-text, #333333);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    text-decoration: none;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;

    box-shadow: 0 2px 8px var(--iv-color-shadow, rgba(0,0,0,0.1));

    /* Hidden and collapsed by default */
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0) scale(0.4);

    transition:
        opacity     0.25s ease,
        transform   0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.15s ease,
        color        0.15s ease,
        box-shadow   0.15s ease;
}

/* ── Orbital positions: 135° arc fanning upper-left ── */
/* radius ≈ 100px — comfortable gap from 52px trigger */
.imenu-fairy-item:nth-child(1) { --o-tx:    0px; --o-ty: -104px; } /* 12 o'clock  ↑  */
.imenu-fairy-item:nth-child(2) { --o-tx:  -74px; --o-ty:  -74px; } /* 10:30       ↖  */
.imenu-fairy-item:nth-child(3) { --o-tx: -104px; --o-ty:    0px; } /* 9 o'clock   ←  */
.imenu-fairy-item:nth-child(4) { --o-tx:  -74px; --o-ty:   74px; } /* 7:30        ↙  */

/* ── Open: fly to orbit position ── */
.imenu-fairy.open .imenu-fairy-item {
    opacity: 1;
    pointer-events: auto;
    transform: translate(var(--o-tx), var(--o-ty)) scale(1);
}

/* Staggered entry — items cascade outward */
.imenu-fairy.open .imenu-fairy-item:nth-child(1) { transition-delay: 0.00s; }
.imenu-fairy.open .imenu-fairy-item:nth-child(2) { transition-delay: 0.05s; }
.imenu-fairy.open .imenu-fairy-item:nth-child(3) { transition-delay: 0.10s; }
.imenu-fairy.open .imenu-fairy-item:nth-child(4) { transition-delay: 0.15s; }

/* Staggered exit — items collapse inward in reverse */
.imenu-fairy:not(.open) .imenu-fairy-item:nth-child(1) { transition-delay: 0.12s; }
.imenu-fairy:not(.open) .imenu-fairy-item:nth-child(2) { transition-delay: 0.08s; }
.imenu-fairy:not(.open) .imenu-fairy-item:nth-child(3) { transition-delay: 0.04s; }
.imenu-fairy:not(.open) .imenu-fairy-item:nth-child(4) { transition-delay: 0.00s; }

/* ── Hover/focus state while open ── */
.imenu-fairy-item:hover,
.imenu-fairy-item:focus-visible {
    border-color: var(--iv-color-accent-light, #4a7c2a);
    color: var(--iv-color-accent-light, #4a7c2a);
    box-shadow: 0 4px 14px var(--iv-color-shadow-hover, rgba(0,0,0,0.15));
    outline: none;
    /* Scale around orbit position, not center */
    transform: translate(var(--o-tx), var(--o-ty)) scale(1.1);
}

/* Item icon (larger than label) */
.imenu-fairy-item .o-icon {
    font-size: 1.05rem;
    line-height: 1;
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
[data-theme="dark"] .imenu-fairy-item {
    background: var(--iv-color-bg-elevated, #1c1c2e);
    border-color: var(--iv-color-border, #2a2a3e);
    color: var(--iv-color-text, #e0e0e0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .imenu-fairy-item:hover,
[data-theme="dark"] .imenu-fairy-item:focus-visible {
    border-color: var(--iv-color-accent-lighter, #8bc34a);
    color: var(--iv-color-accent-lighter, #8bc34a);
}

/* ============================================
   MOBILE — tighter orbit radius
   ============================================ */
@media (max-width: 480px) {
    .imenu-fairy {
        bottom: 16px;
        right: 16px;
    }

    .imenu-fairy-item:nth-child(1) { --o-tx:    0px; --o-ty:  -86px; }
    .imenu-fairy-item:nth-child(2) { --o-tx:  -61px; --o-ty:  -61px; }
    .imenu-fairy-item:nth-child(3) { --o-tx:  -86px; --o-ty:    0px; }
    .imenu-fairy-item:nth-child(4) { --o-tx:  -61px; --o-ty:   61px; }
}

/* ============================================
   ACCESSIBILITY: reduce motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .imenu-fairy-btn,
    .imenu-fairy-item {
        transition: opacity 0.15s ease;
        animation: none;
    }

    .imenu-fairy.open .imenu-fairy-item { transition-delay: 0s !important; }
    .imenu-fairy:not(.open) .imenu-fairy-item { transition-delay: 0s !important; }
}