/* Target specifically the Cinematic Hero menu items */
.cinematic-menu a {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important; /* Ensure no underline interferes */
}

/* Base style for the vertical line - positioned to the left of the link */
.cinematic-menu a::before {
    content: '' !important;
    position: absolute !important;
    left: -15px !important; /* 15px to the left of the text */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important; /* Medium line thickness */
    height: 0 !important; /* Initial height is 0 (hidden) */
    background-color: currentColor !important; /* Matches link text color */
    transition: height 0.3s ease !important; /* Smooth animation */
    z-index: 10 !important;
    pointer-events: none; /* Don't interfere with clicks */
}

/* Hover effect - expand the line height */
.cinematic-menu a:hover::before {
    height: 70% !important;
}