/**
 * CMBG3 Law — Approach Scroll Arrow Styling
 */

.approach-arrow-track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 10;
    pointer-events: none;
}

.approach-arrow {
    position: absolute;
    /* Shift left so the tip points toward the title. 
       Adjusted to hang off the container beautifully as the size increases. */
    left: -85px; 
    top: 0;
    width: 120px;
    height: auto;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smoothed inertia scrub buffer */
    opacity: 0; /* Starts hidden until first layout calculate */
}

.approach-arrow.is-active {
    opacity: 1;
}

.approach-arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Remove the black stroke if present in Figma file but not desired in layout. 
   Setting vector-effect to ensure stroke scales natively if we decide to keep it. */
.approach-arrow svg path {
    stroke: none !important; /* Overriding the default Figma export stroke per design screenshot */
}

/* Responsive overrides: Hide or adjust arrow on mobile if layout collapses */
@media (max-width: 1024px) {
    .approach-arrow {
        left: -40px;
        width: 60px;
    }
}