/* ============================================================
   UFO Beam Nav — Pure CSS hover-expand trapezoid menu
   ============================================================ */

/* ── CSS custom properties (defaults) ───────────────────── */

.ubn-menu {
    --ubn-circle-bg: rgba(26, 26, 26, 0.8);
    --ubn-circle-icon: #f0ede6;
    --ubn-circle-border: transparent;
}

/* ── Menu wrapper ───────────────────────────────────────── */

.ubn-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* ── Circle trigger ─────────────────────────────────────── */

.ubn-circle {
    position: absolute;
    border-radius: 50%;
    background: var(--ubn-circle-bg);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
    border: 0 solid var(--ubn-circle-border);
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.ubn-circle-icon {
    font-size: 1.2rem;
    color: var(--ubn-circle-icon);
    line-height: 1;
    transition: color 0.35s ease;
}

.ubn-circle-icon--img {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG icon — rendered as a mask so `icon_color` fills the shape */
.ubn-circle-icon--svg {
    width: 60%;
    height: 60%;
    background-color: currentColor;
    -webkit-mask-image: var(--ubn-svg);
            mask-image: var(--ubn-svg);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transition: background-color 0.35s ease;
}

.ubn-circle-icon--img img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    transition: filter 0.35s ease;
}

/* ── Overlay (full-viewport backdrop behind beam) ────────── */

.ubn-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ubn-menu:hover .ubn-overlay {
    opacity: 1;
}

/* ── Beam / trapezoid ───────────────────────────────────── */

.ubn-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: #f0ede6;
    clip-path: var(--ubn-clip-collapsed);
    transition:
        clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ubn-menu:hover .ubn-beam {
    pointer-events: auto;
    clip-path: var(--ubn-clip-expanded);
}

/* ── Link positioning variants ──────────────────────────── */

.ubn-beam-nav {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ubn-beam-nav--bottom-right {
    bottom: 8vh;
    right: 6vw;
    align-items: flex-end;
}

.ubn-beam-nav--bottom-left {
    bottom: 8vh;
    left: 6vw;
    align-items: flex-start;
}

.ubn-beam-nav--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

/* ── Links ──────────────────────────────────────────────── */

.ubn-beam-link {
    color: #1a1a1a;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.35s ease calc(var(--i, 0) * 0.07s + 0.25s),
        transform 0.4s ease calc(var(--i, 0) * 0.07s + 0.25s),
        color 0.2s ease,
        background-size 0.3s ease;
    pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, currentColor 15%, transparent), color-mix(in srgb, currentColor 15%, transparent));
    background-repeat: no-repeat;
    background-size: 100% 0.35em;
    background-position: 0 bottom;
    padding-bottom: 0;
}

.ubn-menu:hover .ubn-beam-link {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ubn-beam-link:hover {
    color: #e8432a;
    background-size: 100% 100%;
}

.ubn-beam-link[aria-current="page"] {
    color: #e8432a;
}

/* ── SVG border overlay ─────────────────────────────────── */

.ubn-beam-border-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
}

.ubn-menu:hover .ubn-beam-border-svg {
    opacity: 1;
}

.ubn-beam-border {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

/* ============================================================
   Colour schemes — Dark / Light

   Dark  = light icon on dark circle (for use over light backgrounds)
   Light = dark icon on light circle (for use over dark backgrounds)

   In "auto" mode, JS toggles these classes based on the
   background luminance of the element behind the circle.
   ============================================================ */

/* ── Dark scheme (default — dark circle, light icon) ────── */

.ubn-menu--dark .ubn-circle {
    --ubn-circle-bg: rgba(26, 26, 26, 0.85);
    --ubn-circle-icon: #f0ede6;
    --ubn-circle-border: rgba(255, 255, 255, 0.08);
}

/* ── Light scheme (light circle, dark icon) ─────────────── */

.ubn-menu--light .ubn-circle {
    --ubn-circle-bg: rgba(255, 255, 255, 0.85);
    --ubn-circle-icon: #1a1a1a;
    --ubn-circle-border: rgba(0, 0, 0, 0.08);
}

.ubn-menu--light .ubn-circle-icon--img img {
    filter: invert(1);
}