/* ============================================================
   BEINC — Button Component
   Animated CTA button with arrow container hover sequence.
   Depends on: global.css (tokens), button.js (GSAP animation)

   Structure:
   <a class="btn" href="#">
     <span class="btn__label">Meet the Weirdos</span>
     <span class="btn__arrow">
       <svg>...</svg>
     </span>
   </a>

   Hover phases (driven by JS):
   1. Default: cream bg, dark text, arrow hidden
   2. First hover: arrow container appears below-right, rotated
   3. Final hover: arrow slides up next to button, colors invert
   ============================================================ */

/* ── WRAPPER — contains label + arrow as siblings ── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    text-decoration: none;
    cursor: pointer;
}

/* Invisible hit area extending right of the button to cover the
   gap + arrow area. Prevents mouseleave when cursor moves between
   label and arrow. Size set by JS via --btn-hit-extend. */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
}
.btn.is-hovered::after {
    width: var(--btn-hit-extend, 0px);
}

/* ── LABEL — the text rectangle ── */
.btn__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-black2);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    font-size: var(--text-btn);
    letter-spacing: var(--tracking-btn);
    line-height: var(--leading-tight);
    white-space: nowrap;
    border: 0.5px solid transparent;
    transition: none; /* JS handles transitions */
    position: relative;
    z-index: 1;
}

/* ── ARROW — the square container with chevron ── */
.btn__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;           /* collapsed by default — JS expands it */
    aspect-ratio: 1;
    border-radius: var(--radius);
    background: var(--color-white);
    border: 0.5px solid transparent;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    /* Initial position: below-right of the label (first hover state) */
    /* JS will set the exact transform on hover */
    top: 0;
    left: 100%;
    transition: none;   /* JS handles transitions */
}

@media (max-width: 767px) {
    .btn__arrow {
        position: relative;
        top: auto;
        left: auto;
        margin-left: 6px;
    }
}

.btn__arrow svg {
    width: 40%;
    height: 40%;
    flex-shrink: 0;
}

.btn__arrow svg path {
    fill: var(--color-black2);
    transition: none;
}

/* ── HOVER STATE CLASSES (applied by JS) ── */

/* Final hover: inverted colors */
.btn.is-hovered .btn__label {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-greyish);
}

.btn.is-hovered .btn__arrow {
    background: var(--color-black);
    border-color: var(--color-greyish);
}

.btn.is-hovered .btn__arrow svg path {
    fill: var(--color-white);
}