/* Animation Styles - Box-cutter Bar and Future Animations */

/* ═════════ BOX-CUTTER BAR (positioned in sub-nav-area) ═════════ */
.top-line {
    position: absolute;
    left: 0;
    bottom: 0;              /* Position at bottom of sub-nav-area */
    height: 6px;
    width: 90vw;            /* full reach – never changes */
    background: var(--black);
    /* start at zero width by scaling, not by shrinking the box */
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--transition-slow);
    pointer-events: none;
    z-index: 99;

    /* 5-point polygon trims a 45° slice off the top-right corner */
    clip-path: polygon(
        0 0,                      /* top-left */
        calc(100% - 6px) 0,       /* top, 6 px shy of the right edge */
        100% 6px,                 /* 6 px down the right edge  ⇩  */
        100% 100%,                /* bottom-right */
        0 100%                    /* bottom-left */
    );
}

/* bar "extends" by scaling to its full width;
   retracts by scaling back to zero – bevel intact the whole way */
.top-line.show {
    transform: scaleX(1);
}

/* Hide the bar entirely */
.top-line {
    display: none;
}

/* Animation utilities for future complex animations */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.slide-up {
    transform: translateY(20px);
    opacity: 0;
    animation: slideUp 0.6s ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes slideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Preparation for complex animations */
.animation-container {
    position: relative;
    overflow: hidden;
}

.animation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}