/* ============================================================ MenuCL – Animated Navigation Widget for Elementor Version 1.0.0 ============================================================ */ /* ── Base system font stack (no Google Fonts needed) ────── */ :root { --menucl-font: 'Segoe UI', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif; --menucl-font-serif: Georgia, 'Times New Roman', serif; } /* ── Wrapper ─────────────────────────────────────────────── */ .menucl-wrapper { position: relative; width: 100%; font-family: var(--menucl-font); box-sizing: border-box; } .menucl-wrapper.menucl-sticky .menucl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; } /* ── Header Bar ──────────────────────────────────────────── */ .menucl-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.4rem; background: #0d0d0d; width: 100%; z-index: 9991; box-sizing: border-box; } .menucl-logo { display: flex; align-items: center; } .menucl-logo-text { font-family: var(--menucl-font-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em; color: #e8c97e; } .menucl-logo-img { max-height: 40px; width: auto; display: block; } /* ── Burger Button ───────────────────────────────────────── */ .menucl-burger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; position: relative; z-index: 9995; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .menucl-burger span { display: block; width: 24px; height: 2px; background: var(--menucl-item-color, #f0ece4); border-radius: 2px; transition: transform var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)), opacity 0.3s ease, width 0.3s ease; transform-origin: center; } .menucl-burger span:nth-child(2) { width: 17px; margin-left: auto; } .menucl-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menucl-burger.is-open span:nth-child(2) { opacity: 0; width: 24px; } .menucl-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .menucl-burger-emoji { font-size: 1.5rem; line-height: 1; color: var(--menucl-item-color, #f0ece4); transition: transform 0.3s ease; user-select: none; } .menucl-burger.is-open .menucl-burger-emoji { transform: rotate(90deg); } /* ── Bottom-Sheet Trigger ─────────────────────────────────── */ .menucl-bottom-trigger { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid #333; border-radius: 999px; padding: 0.45rem 1rem; color: var(--menucl-item-color, #f0ece4); cursor: pointer; font-size: 0.85rem; font-family: var(--menucl-font); transition: border-color 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .menucl-bottom-trigger:hover, .menucl-bottom-trigger:focus { border-color: var(--menucl-pill-acc, #e8c97e); color: var(--menucl-pill-acc, #e8c97e); } .menucl-trigger-dots { display: flex; gap: 3px; align-items: center; } .menucl-trigger-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; } /* ───────────────────────────────────────────────────────────── ① CURTAIN — fade + scale Two selectors: one for when inside wrapper, one for when JS moves it to (to escape stacking contexts). ───────────────────────────────────────────────────────────── */ .menucl-variant-curtain .menucl-curtain-overlay, .menucl-curtain-overlay.menucl-detached { position: fixed; inset: 0; background: var(--menucl-ov-grad, linear-gradient(160deg, #111 0%, #1a1508 100%)); z-index: 99990; display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.5rem; /* Hidden state */ opacity: 0; transform: scale(1.04); transform-origin: top right; transition: opacity var(--menucl-anim-speed, 600ms) ease, transform var(--menucl-anim-speed, 600ms) ease, visibility 0s linear var(--menucl-anim-speed, 600ms); visibility: hidden; pointer-events: none; } .menucl-variant-curtain .menucl-curtain-overlay.is-open, .menucl-curtain-overlay.menucl-detached.is-open { opacity: 1; transform: scale(1); visibility: visible; pointer-events: all; transition: opacity var(--menucl-anim-speed, 600ms) ease, transform var(--menucl-anim-speed, 600ms) ease, visibility 0s linear 0s; } /* ───────────────────────────────────────────────────────────── ② DRAWER ───────────────────────────────────────────────────────────── */ .menucl-variant-drawer .menucl-drawer-backdrop, .menucl-variant-bottom .menucl-drawer-backdrop { position: fixed; inset: 0; background: var(--menucl-backdrop, rgba(0,0,0,0.55)); z-index: 9992; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .menucl-variant-drawer .menucl-drawer-backdrop.is-open, .menucl-variant-bottom .menucl-drawer-backdrop.is-open { opacity: 1; pointer-events: all; } .menucl-variant-drawer .menucl-drawer-panel { position: fixed; top: 0; left: 0; width: min(80vw, 320px); height: 100vh; background: var(--menucl-ov-grad, linear-gradient(180deg, #191206 0%, #141414 100%)); z-index: 9993; transform: translateX(-100%); transition: transform var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)); padding: 5.5rem 1.8rem 2rem; display: flex; flex-direction: column; gap: 0; border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto; } .menucl-variant-drawer .menucl-drawer-panel.is-open { transform: translateX(0); } .menucl-drawer-item { display: flex; align-items: center; gap: 0.8rem; font-size: 1.1rem; font-weight: 500; color: var(--menucl-item-color, #f0ece4); text-decoration: none; padding: 0.8rem 0; border-bottom: 1px solid var(--menucl-divider, #2a2a2a); opacity: 0; transform: translateX(-22px); transition: opacity 0.4s ease var(--menucl-item-delay, 0ms), transform 0.4s ease var(--menucl-item-delay, 0ms), color 0.2s ease; -webkit-tap-highlight-color: transparent; } .menucl-variant-drawer .menucl-drawer-panel.is-open .menucl-drawer-item { opacity: 1; transform: translateX(0); } .menucl-drawer-item:hover, .menucl-drawer-item:active { color: var(--menucl-item-hover, #e8c97e); outline: none; } .menucl-drawer-item .menucl-item-icon { opacity: 0.6; } /* ───────────────────────────────────────────────────────────── ③ BOTTOM SHEET ───────────────────────────────────────────────────────────── */ .menucl-variant-bottom .menucl-bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--menucl-ov-grad, linear-gradient(0deg, #1a1508 0%, #1c1c1c 100%)); border-radius: 1.5rem 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.08); padding: 0.75rem 1.5rem 2.5rem; z-index: 9993; transform: translateY(110%); transition: transform var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.32,0,.15,1)); max-height: 75vh; overflow-y: auto; } .menucl-variant-bottom .menucl-bottom-sheet.is-open { transform: translateY(0); } .menucl-sheet-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 0 auto 1.4rem; } .menucl-bottom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.8rem; } .menucl-bottom-card { background: var(--menucl-card-bg, #222); border: 1px solid var(--menucl-card-br, #2d2d2d); border-radius: var(--menucl-card-rad, 16px); padding: 1rem; cursor: pointer; text-decoration: none; display: block; background-size: cover; background-position: center; position: relative; overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease var(--menucl-item-delay, 0ms), transform 0.4s ease var(--menucl-item-delay, 0ms), background-color 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .menucl-bottom-card::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); border-radius: inherit; opacity: 0; transition: opacity 0.2s; } .menucl-bottom-card:hover::before, .menucl-bottom-card:active::before { opacity: 1; } .menucl-bottom-card:hover, .menucl-bottom-card:active { background-color: var(--menucl-card-bg-h, #2a2000); border-color: var(--menucl-card-br-h, #e8c97e); } .menucl-variant-bottom .menucl-bottom-sheet.is-open .menucl-bottom-card { opacity: 1; transform: translateY(0); } .menucl-card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; position: relative; } .menucl-card-label { font-size: 0.9rem; font-weight: 600; color: var(--menucl-item-color, #f0ece4); position: relative; } .menucl-card-sub { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.2rem; position: relative; } /* ───────────────────────────────────────────────────────────── ④ MORPHING PILL ───────────────────────────────────────────────────────────── */ .menucl-variant-pill .menucl-pill-wrapper { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9993; } .menucl-pill { background: var(--menucl-pill-bg, rgba(25,25,25,0.95)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--menucl-pill-br, #333); border-radius: 999px; overflow: hidden; width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: width var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)), height var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)), border-radius var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)); } .menucl-pill.is-open { width: min(90vw, 300px); height: auto; border-radius: 1.5rem; } .menucl-pill-toggle { width: 56px; height: 56px; flex-shrink: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .menucl-pill-icon { font-size: 1.4rem; line-height: 1; color: var(--menucl-pill-acc, #e8c97e); font-weight: 700; transition: transform var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)); user-select: none; display: block; } .menucl-pill.is-open .menucl-pill-icon { transform: rotate(45deg); } .menucl-pill-items { width: 100%; max-height: 0; overflow: hidden; padding: 0 1.2rem; transition: max-height var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)), padding 0.3s ease; } .menucl-pill.is-open .menucl-pill-items { max-height: 500px; padding: 0 1.2rem 1rem; } .menucl-pill-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--menucl-divider, #2a2a2a); text-decoration: none; font-size: 0.95rem; color: var(--menucl-item-color, #f0ece4); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease var(--menucl-item-delay, 0ms), transform 0.3s ease var(--menucl-item-delay, 0ms), color 0.2s ease; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .menucl-pill.is-open .menucl-pill-item { opacity: 1; transform: translateY(0); } .menucl-pill-item:last-child { border-bottom: none; } .menucl-pill-item:hover, .menucl-pill-item:active { color: var(--menucl-pill-acc, #e8c97e); outline: none; } .menucl-pill-item .menucl-item-icon { opacity: 0.65; } /* ───────────────────────────────────────────────────────────── RESPONSIVE — Device-specific variant overrides via data attr ───────────────────────────────────────────────────────────── */ /* Tablet: hide pill-wrapper bottom bar if variant changes */ @media (max-width: 1024px) { .menucl-wrapper[data-variant-tablet] { /* JS applies variant class based on data attr */ } } @media (max-width: 767px) { .menucl-nav-item { font-size: clamp(1.4rem, 7vw, 2rem); } .menucl-bottom-grid { grid-template-columns: 1fr 1fr; } } /* ── Accessibility ──────────────────────────────────────── */ .menucl-toggle:focus-visible { outline: 2px solid var(--menucl-pill-acc, #e8c97e); outline-offset: 3px; } /* ── Curtain items: also work when overlay is detached to ── */ .menucl-detached .menucl-nav-item { color: var(--menucl-item-color, #f0ece4); position: relative; } /* Hover underline animation */ .menucl-detached .menucl-nav-item::after { content: ''; position: absolute; bottom: 0.3rem; left: 0; width: 0; height: 2px; background: var(--menucl-item-hover, #e8c97e); transition: width 0.3s ease; border-radius: 2px; } .menucl-detached .menucl-nav-item:hover, .menucl-detached .menucl-nav-item:focus { color: var(--menucl-item-hover, #e8c97e); outline: none; } .menucl-detached .menucl-nav-item:hover::after, .menucl-detached .menucl-nav-item:focus::after { width: 100%; } .menucl-detached .menucl-nav-item { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease var(--menucl-item-delay, 0ms), transform 0.4s ease var(--menucl-item-delay, 0ms), color 0.2s ease; } .menucl-detached.is-open .menucl-nav-item { opacity: 1; transform: translateY(0); } .menucl-detached .menucl-curtain-footer { opacity: 0; transition: opacity 0.4s ease 0.5s; } .menucl-detached.is-open .menucl-curtain-footer { opacity: 1; } /* ── Active / current page menu item ─────────────────────── */ .menucl-nav-item.menucl-current, .menucl-drawer-item.menucl-current, .menucl-bottom-card.menucl-current, .menucl-pill-item.menucl-current { color: var(--menucl-item-hover, #e8c97e); } .menucl-nav-item.menucl-current::after { width: 100%; } .menucl-nav-item.menucl-current .menucl-item-icon, .menucl-drawer-item.menucl-current .menucl-item-icon { opacity: 1; } /* ── Close button (X) inside curtain overlay ──────────────── */ .menucl-close-btn { position: relative; /* flow inside overlay so margin-bottom pushes items down */ align-self: flex-end; /* right-align in the flex column */ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--menucl-item-color, #f0ece4); font-size: 1.5rem; cursor: pointer; opacity: 0.6; margin-bottom: var(--menucl-close-mb, 60px); margin-top: var(--menucl-close-mt, 0px); transition: opacity 0.2s ease, transform 0.3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; z-index: 2; } .menucl-close-btn:hover { opacity: 1; transform: rotate(90deg); } .menucl-detached .menucl-close-btn, .menucl-variant-curtain .menucl-curtain-overlay .menucl-close-btn { position: absolute; } /* ── Detached drawer / bottom sheet (moved to body) ─────── */ .menucl-drawer-panel.menucl-detached, .menucl-bottom-sheet.menucl-detached { /* position:fixed already set — just ensure z-index works from body */ z-index: 99990; } .menucl-drawer-backdrop[data-mcl-owner] { z-index: 99989; } /* ── Detached drawer panel (moved to ) ─────────────── */ .menucl-drawer-panel.menucl-detached { position: fixed; top: 0; left: 0; width: min(80vw, 320px); height: 100vh; z-index: 99990; transform: translateX(-100%); transition: transform var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)); pointer-events: none; overflow-y: auto; background: var(--menucl-ov-grad, linear-gradient(180deg, #191206 0%, #141414 100%)); padding: 5.5rem 1.8rem 2rem; display: flex; flex-direction: column; gap: 0; border-right: 1px solid rgba(255,255,255,0.06); } .menucl-drawer-panel.menucl-detached.is-open { transform: translateX(0); pointer-events: all; } /* ── Detached bottom sheet (moved to ) ─────────────── */ .menucl-bottom-sheet.menucl-detached { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99990; transform: translateY(110%); transition: transform var(--menucl-anim-speed, 600ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)); pointer-events: none; background: var(--menucl-ov-grad, linear-gradient(0deg, #1a1508 0%, #1c1c1c 100%)); border-radius: 1.5rem 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.08); padding: 0.75rem 1.5rem 2.5rem; } .menucl-bottom-sheet.menucl-detached.is-open { transform: translateY(0); pointer-events: all; } /* ── Detached backdrop ───────────────────────────────────── */ .menucl-drawer-backdrop[data-mcl-owner] { position: fixed; inset: 0; z-index: 99989; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .menucl-drawer-backdrop[data-mcl-owner].is-open { opacity: 1; pointer-events: all; } /* ── Detached drawer items ───────────────────────────────── */ .menucl-drawer-panel.menucl-detached.is-open .menucl-drawer-item { opacity: 1; transform: translateX(0); } /* ── Detached bottom sheet items ─────────────────────────── */ .menucl-bottom-sheet.menucl-detached.is-open .menucl-bottom-card { opacity: 1; transform: translateY(0); } .menucl-bottom-sheet.menucl-detached .menucl-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; } .menucl-bottom-sheet.menucl-detached .menucl-sheet-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 0 auto 0.5rem; } /* ───────────────────────────────────────────────────────────── BACKGROUND MEDIA LAYER (image or video inside any panel) ───────────────────────────────────────────────────────────── */ .menucl-panel-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } /* Inner content must sit above the bg layer */ .menucl-curtain-overlay > *:not(.menucl-panel-bg), .menucl-drawer-panel > *:not(.menucl-panel-bg), .menucl-bottom-sheet > *:not(.menucl-panel-bg) { position: relative; z-index: 1; } /* Pill: bg layer clips to pill shape, items stack above */ .menucl-pill { position: relative; /* keeps pill as stacking context for bg layer */ } .menucl-pill > *:not(.menucl-panel-bg) { position: relative; z-index: 1; } .menucl-panel-bg--image { background-repeat: no-repeat; background-size: cover; background-position: center center; } .menucl-panel-bg--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .menucl-panel-bg-overlay { position: absolute; inset: 0; } /* ───────────────────────────────────────────────────────────── ⑤ FLOATING ACTION BUTTON ───────────────────────────────────────────────────────────── */ .menucl-fab { position: fixed; bottom: var(--menucl-fab-off-v, 24px); width: var(--menucl-fab-size, 56px); height: var(--menucl-fab-size, 56px); border-radius: 50%; background: var(--menucl-fab-bg, #1a1508); color: var(--menucl-fab-color, #e8c97e); border: none; cursor: pointer; display: none; /* hidden by default; JS shows when variant=fab */ align-items: center; justify-content: center; font-size: calc(var(--menucl-fab-size, 56px) * 0.4); z-index: 9993; box-shadow: 0 4px 20px var(--menucl-fab-glow, rgba(232,201,126,0.5)); transition: transform 0.25s ease, box-shadow 0.25s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Horizontal positioning */ .menucl-fab[data-fab-pos="right"] { right: var(--menucl-fab-off-h, 24px); } .menucl-fab[data-fab-pos="left"] { left: var(--menucl-fab-off-h, 24px); } .menucl-fab[data-fab-pos="center"] { left: 50%; transform: translateX(-50%); } .menucl-fab:hover, .menucl-fab:focus { transform: scale(1.1); box-shadow: 0 6px 28px var(--menucl-fab-glow, rgba(232,201,126,0.7)); outline: none; } .menucl-fab[data-fab-pos="center"]:hover, .menucl-fab[data-fab-pos="center"]:focus { transform: translateX(-50%) scale(1.1); } .menucl-fab.is-open { transform: rotate(45deg); } .menucl-fab[data-fab-pos="center"].is-open { transform: translateX(-50%) rotate(45deg); } .menucl-fab-icon { display: block; line-height: 1; pointer-events: none; } /* Pulsier-Animation */ @keyframes menucl-fab-pulse { 0% { box-shadow: 0 0 0 0 var(--menucl-fab-glow, rgba(232,201,126,0.5)); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .menucl-fab--pulse:not(.is-open) { animation: menucl-fab-pulse 2s ease-out infinite; } /* Show FAB when variant is fab */ .menucl-variant-fab .menucl-fab { display: flex; } /* Hide header bar when FAB is active */ .menucl-variant-fab .menucl-header { display: none; } /* ───────────────────────────────────────────────────────────── SUBMENUS ───────────────────────────────────────────────────────────── */ /* Submenu indicator arrow */ .menucl-sub-indicator { display: inline-block; margin-left: 0.4em; transition: transform 0.25s ease; font-style: normal; } .menucl-has-sub.menucl-sub-open > .menucl-sub-indicator { transform: rotate(90deg); } /* ── EXPAND MODE ─────────────────────────────────────────── */ .menucl-submenu { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .menucl-submenu.menucl-sub-expanded { max-height: 2000px; /* large enough for any nesting */ } /* ── SLIDE MODE ──────────────────────────────────────────── */ .menucl-slide-stack { position: relative; width: 100%; flex: 1; overflow: hidden; } .menucl-slide-level { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--menucl-anim-speed, 400ms) var(--menucl-anim-ease, cubic-bezier(.77,0,.175,1)); pointer-events: none; } .menucl-slide-level--active { transform: translateX(0); pointer-events: all; position: relative; /* first level: flow normally */ } .menucl-slide-level--prev { transform: translateX(-100%); pointer-events: none; position: absolute; } /* Back button */ .menucl-sub-back { display: flex; align-items: center; gap: 0.5em; background: none; border: none; color: var(--menucl-item-hover, #e8c97e); font-size: 1rem; cursor: pointer; padding: 0.6rem 0 1rem; opacity: 0.85; transition: opacity 0.2s; -webkit-tap-highlight-color: transparent; } .menucl-sub-back:hover { opacity: 1; } /* Drawer: expand mode submenu items slightly smaller */ .menucl-drawer-panel .menucl-submenu .menucl-drawer-item { font-size: 0.95em; } /* ───────────────────────────────────────────────────────────── PARALLAX BACKGROUND ───────────────────────────────────────────────────────────── */ /* Oversized so movement doesn't reveal edges */ .menucl-panel-bg.menucl-parallax { inset: -80px; /* extra bleed on all sides */ will-change: transform; transition: transform 0ms linear; /* overridden by JS smoothing */ } .menucl-panel-bg.menucl-parallax video, .menucl-panel-bg.menucl-parallax { width: calc(100% + 160px); height: calc(100% + 160px); } /* ───────────────────────────────────────────────────────────── CURSOR FOLLOWER ───────────────────────────────────────────────────────────── */ .menucl-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); will-change: transform, width, height; transition: opacity 0.2s ease; opacity: 0; /* hidden until first mousemove */ } .menucl-cursor--ring { border: 2px solid #e8c97e; /* overridden by JS */ background: transparent; } .menucl-cursor--visible { opacity: 1; } .menucl-cursor-emoji { position: absolute; font-size: 0.5em; line-height: 1; pointer-events: none; user-select: none; } /* Hide native cursor when follower active */ .menucl-cursor-active, .menucl-cursor-active * { cursor: none !important; } /* ───────────────────────────────────────────────────────────── EASTER EGG — Shake to Shuffle ───────────────────────────────────────────────────────────── */ @keyframes menucl-shake { 0%,100% { transform: translateX(0) rotate(0deg); } 15% { transform: translateX(-8px) rotate(-2deg); } 30% { transform: translateX(8px) rotate(2deg); } 45% { transform: translateX(-6px) rotate(-1deg); } 60% { transform: translateX(6px) rotate(1deg); } 75% { transform: translateX(-3px) rotate(-0.5deg); } 90% { transform: translateX(3px) rotate(0.5deg); } } @keyframes menucl-egg-pop { 0% { transform: translate(-50%,-50%) scale(0) rotate(-20deg); opacity:0; } 40% { transform: translate(-50%,-50%) scale(1.3) rotate(10deg); opacity:1; } 70% { transform: translate(-50%,-50%) scale(0.9) rotate(-5deg); opacity:1; } 100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity:0; } } .menucl-panel-shake { animation: menucl-shake 0.5s ease; } .menucl-egg-burst { position: fixed; top: 50%; left: 50%; font-size: 5rem; z-index: 99998; pointer-events: none; animation: menucl-egg-pop 1.2s cubic-bezier(.36,.07,.19,.97) forwards; user-select: none; } /* ───────────────────────────────────────────────────────────── EASTER EGG BUTTONS ───────────────────────────────────────────────────────────── */ .menucl-egg { background: none; border: none; padding: 0 6px; font-size: 13px; line-height: 1; opacity: 0.08; cursor: pointer; color: inherit; transition: opacity 0.3s ease; user-select: none; -webkit-user-select: none; } .menucl-egg:hover { opacity: 0.22; } /* ── Easter Egg 1: Pixel Explosion ── */ @keyframes menucl-pixel-in { 0% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } } .menucl-pixel-canvas { position: fixed; inset: 0; z-index: 999998; pointer-events: none; } /* ── Easter Egg 2: Glitch ── */ @keyframes menucl-glitch-shift { 0% { transform: translate(0,0); filter: none; } 10% { transform: translate(-4px, 2px); filter: hue-rotate(90deg) saturate(3); } 20% { transform: translate(5px, -3px) skewX(3deg); filter: invert(0.15); } 30% { transform: translate(-2px, 5px); filter: hue-rotate(200deg); } 40% { transform: translate(4px, -1px) skewX(-2deg); filter: saturate(5) brightness(1.4); } 50% { transform: translate(0, 3px); filter: invert(0.08); } 60% { transform: translate(-6px, 0) skewX(1deg); filter: hue-rotate(320deg); } 70% { transform: translate(3px, -4px); filter: none; } 80% { transform: translate(-1px, 2px) skewX(-1deg); filter: saturate(2); } 90% { transform: translate(2px, 1px); filter: hue-rotate(45deg); } 100% { transform: translate(0,0); filter: none; } } @keyframes menucl-glitch-scanline { 0% { top: -10%; } 100% { top: 110%; } } .menucl-glitch-active body, body.menucl-glitch-active { animation: menucl-glitch-shift 0.6s steps(1) forwards; } .menucl-scanline { position: fixed; left: 0; right: 0; height: 3px; background: rgba(0,255,180,0.6); z-index: 999999; pointer-events: none; animation: menucl-glitch-scanline 0.5s linear forwards; mix-blend-mode: screen; }