/**
 * @package     Vaxin.Module
 * @subpackage  mod_vaxinmenuextreme
 * @copyright   (C) 2026 vaxin.fr <https://vaxin.fr>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

.vme-nav {
    --vme-primary: #6366f1;
    --vme-secondary: #ec4899;
    --vme-accent: #22d3ee;
    --vme-bg: #0f1020;
    --vme-text: #c7c9e0;
    --vme-text-active: #ffffff;
    --vme-speed: 450ms;
    --vme-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --vme-op-bg: 100;
    --vme-op-ind: 100;
    --vme-op-sub: 100;
    --vme-glow: 1;
    --vme-blur: 14px;
    --vme-radius: 14px;
    --vme-reveal: 0;

    display: block;
    position: relative;
    background: color-mix(in srgb, var(--vme-bg) calc(var(--vme-op-bg) * 1%), transparent);
    border-radius: var(--vme-radius);
    padding: 6px 16px;
    font-family: inherit;
}

.vme-track {
    position: relative;
}

.vme-nav[data-orientation="horizontal"] .vme-track {
    overflow: visible;
}

.vme-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.vme-nav[data-orientation="vertical"] .vme-list {
    flex-direction: column;
}

.vme-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.vme-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    color: var(--vme-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: calc(var(--vme-radius) - 4px);
    position: relative;
    z-index: 2;
    transition: color var(--vme-speed) var(--vme-ease);
}

.vme-link:hover,
.vme-link:focus-visible,
.vme-item.current > .vme-link {
    color: var(--vme-text-active);
}

.vme-link:focus-visible {
    outline: 2px solid var(--vme-accent);
    outline-offset: 2px;
}

.vme-image {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
}

.vme-separator > .vme-link,
.vme-text {
    opacity: 0.55;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: default;
}

/* --- Sliding indicator (bounding box; visual lives in ::before) --- */
.vme-indicator {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    opacity: calc(var(--vme-reveal, 0) * var(--vme-op-ind, 100) / 100);
    width: var(--vme-w, 0);
    height: var(--vme-h, 0);
    transform: translate(var(--vme-x, 0), var(--vme-y, 0));
    transition:
        transform var(--vme-speed) var(--vme-ease),
        width var(--vme-speed) var(--vme-ease),
        height var(--vme-speed) var(--vme-ease),
        opacity var(--vme-speed) var(--vme-ease);
}

.vme-ready .vme-indicator {
    --vme-reveal: 1;
}

.vme-indicator::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(var(--vme-radius) - 4px);
}

/* Pill fills the whole box; underline pins a thin bar. */
.vme-underline .vme-indicator::before {
    inset: auto 0 4px 0;
    height: 3px;
    border-radius: 3px;
}

.vme-underline.vme-ind-start .vme-indicator::before {
    inset: 4px 0 auto 0;
}

.vme-nav[data-orientation="vertical"].vme-underline .vme-indicator::before {
    inset: 0 auto 0 4px;
    width: 3px;
    height: auto;
}

.vme-nav[data-orientation="vertical"].vme-underline.vme-ind-start .vme-indicator::before {
    inset: 0 4px 0 auto;
}

/* --- Extra indicator styles (compose with any theme) --- */

/* Dot: a small centred marker. */
.vme-dot .vme-indicator::before {
    inset: auto auto 3px 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
}

.vme-ind-start.vme-dot .vme-indicator::before {
    inset: 3px auto auto 50%;
}

.vme-nav[data-orientation="vertical"].vme-dot .vme-indicator::before {
    inset: 50% 3px auto auto;
    margin: -3.5px 0 0 0;
}

/* Backlight: a soft blurred glow behind the active item. */
.vme-backlight .vme-indicator::before {
    inset: -3px -2px;
    border-radius: 999px;
    filter: blur(9px);
    opacity: 0.85;
}

/* Outline: a bright frame around the active item. */
.vme-nav.vme-outline .vme-indicator::before {
    inset: 0;
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--vme-primary) 90%, transparent);
    border-radius: calc(var(--vme-radius) - 2px);
}

.vme-nav.vme-outline.vme-glow .vme-indicator::before {
    box-shadow:
        0 0 12px color-mix(in srgb, var(--vme-primary) calc(var(--vme-glow) * 70%), transparent),
        inset 0 0 10px color-mix(in srgb, var(--vme-primary) calc(var(--vme-glow) * 30%), transparent);
}

/* --- Burger (hidden until mobile drawer mode) --- */
.vme-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 11px;
    border: 0;
    border-radius: calc(var(--vme-radius) - 4px);
    background: transparent;
    cursor: pointer;
}

.vme-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--vme-text-active);
    transition: transform 0.3s var(--vme-ease), opacity 0.2s ease;
}

.vme-nav.is-open .vme-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.vme-nav.is-open .vme-burger span:nth-child(2) {
    opacity: 0;
}

.vme-nav.is-open .vme-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Submenus --- */
.vme-submenu {
    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 210px;
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: color-mix(in srgb, var(--vme-bg) calc(var(--vme-op-sub) * 1%), transparent);
    border-radius: var(--vme-radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    z-index: 50;
    transition:
        opacity var(--vme-speed) var(--vme-ease),
        transform var(--vme-speed) var(--vme-ease),
        visibility var(--vme-speed);
}

/* Animation variants */
.vme-sub-slide .vme-submenu { transform: translateY(8px); }
.vme-sub-fade .vme-submenu { transform: none; }
.vme-sub-scale .vme-submenu { transform: scale(0.92); transform-origin: top left; }

.vme-item:hover > .vme-submenu,
.vme-item:focus-within > .vme-submenu,
.vme-item.is-open > .vme-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.vme-nav[data-orientation="vertical"] .vme-submenu {
    top: 0;
    left: 100%;
}

.vme-nav[data-orientation="vertical"].vme-sub-slide .vme-submenu {
    transform: translateX(8px);
}

.vme-submenu .vme-link {
    width: 100%;
}

/* Flip to the opposite side when the submenu would overflow the viewport
   (the .vme-flip-x class is toggled by the script). */
.vme-item.vme-flip-x > .vme-submenu {
    left: auto;
    right: 0;
}

.vme-nav[data-orientation="vertical"] .vme-item.vme-flip-x > .vme-submenu {
    left: auto;
    right: 100%;
}

.vme-sub-scale .vme-item.vme-flip-x > .vme-submenu {
    transform-origin: top right;
}

/* --- Responsive (class toggled by JS at the configured breakpoint) --- */
.vme-nav.vme-is-mobile .vme-list {
    gap: 2px;
}

/* drawer: collapse behind a burger button */
.vme-nav.vme-is-mobile.vme-mmode-drawer .vme-burger {
    display: flex;
}

.vme-nav.vme-is-mobile.vme-mmode-drawer .vme-track {
    position: static;
    overflow: visible;
}

.vme-nav.vme-is-mobile.vme-mmode-drawer .vme-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 8px;
    border-radius: var(--vme-radius);
    background: color-mix(in srgb, var(--vme-bg) calc(max(var(--vme-op-bg), 92) * 1%), transparent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--vme-blur));
    -webkit-backdrop-filter: blur(var(--vme-blur));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.28s var(--vme-ease), transform 0.28s var(--vme-ease), visibility 0.28s;
    z-index: 60;
}

.vme-nav.vme-is-mobile.vme-mmode-drawer.is-open .vme-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vme-nav.vme-is-mobile.vme-mmode-drawer:not(.is-open) .vme-indicator {
    opacity: 0;
}

/* stack: always wrap to a vertical column */
.vme-nav.vme-is-mobile.vme-mmode-stack .vme-list {
    flex-direction: column;
}

/* scroll: keep one horizontal row that scrolls on small screens */
.vme-nav.vme-is-mobile.vme-mmode-scroll .vme-track {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
    margin-bottom: -24px;
}

.vme-nav.vme-is-mobile.vme-mmode-scroll .vme-track::-webkit-scrollbar {
    display: none;
}

/* mobile submenus expand inline rather than floating */
.vme-nav.vme-is-mobile .vme-submenu {
    position: static;
    min-width: 0;
    box-shadow: none;
    margin: 2px 0 4px 12px;
    background: color-mix(in srgb, var(--vme-bg) calc(var(--vme-op-sub) * 0.6%), transparent);
    opacity: 1;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transform: none;
    transition: height var(--vme-speed) var(--vme-ease);
}

.vme-nav.vme-is-mobile .vme-item.is-open > .vme-submenu {
    visibility: visible;
    height: auto;
}

/* --- Motion effects (opt-in via nav classes / data attributes) --- */

/* Magnetic hover + micro-tilt: JS feeds the offsets as custom properties. */
.vme-nav.vme-magnetic .vme-link {
    transition: transform 0.3s var(--vme-ease);
    transform:
        translate(var(--vme-mag-x, 0px), var(--vme-mag-y, 0px))
        perspective(600px)
        rotateX(var(--vme-tilt-x, 0deg))
        rotateY(var(--vme-tilt-y, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
}

/* Gradient sweep across the label on hover / active. */
.vme-nav.vme-text-sweep .vme-link:hover .vme-label,
.vme-nav.vme-text-sweep .vme-item.current > .vme-link .vme-label {
    background: linear-gradient(
        90deg,
        var(--vme-text-active),
        var(--vme-accent),
        var(--vme-text-active)
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: vme-text-sweep 0.9s var(--vme-ease);
}

@keyframes vme-text-sweep {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}

/* Letter-by-letter reveal: JS wraps each character in .vme-char with --i. */
.vme-nav.vme-text-reveal .vme-char {
    display: inline-block;
    white-space: pre;
}

.vme-nav.vme-text-reveal .vme-link:hover .vme-char {
    animation: vme-char-rise 0.5s var(--vme-ease) both;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes vme-char-rise {
    0% { transform: translateY(0); }
    40% { transform: translateY(-42%); }
    100% { transform: translateY(0); }
}

/* Cursor trail glow (JS positions/eases it). */
.vme-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--vme-accent) calc(var(--vme-glow) * 26%), transparent),
        transparent 68%
    );
    transform: translate(var(--vme-trail-x, 0px), var(--vme-trail-y, 0px));
    transition: opacity 0.3s ease;
}

.vme-nav.vme-has-trail:hover .vme-trail {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .vme-indicator,
    .vme-indicator::before,
    .vme-link,
    .vme-label,
    .vme-char,
    .vme-trail,
    .vme-track::before,
    .vme-track::after,
    .vme-submenu,
    .vme-list,
    .vme-burger span {
        transition: none !important;
        animation: none !important;
    }

    .vme-nav.vme-magnetic .vme-link,
    .vme-char {
        transform: none !important;
    }

    .vme-trail { display: none !important; }
}