/* Brand motion: light follows the logo's 45-degree stroke. */
.diagonal-light {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Shine uses background-position (not transform) so text compositing stays stable. */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image: linear-gradient(135deg, transparent 46%, var(--btn-shine) 50%, transparent 54%);
    background-repeat: no-repeat;
    background-size: 320% 320%;
    background-position: 160% -30%;
    transition: background-position 0s var(--ease);
    pointer-events: none;
}

.btn > * {
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .btn:hover::before {
        background-position: -60% 130%;
        transition: background-position 1s var(--ease);
    }
    .btn--large:hover::before {
        transition: background-position 1.5s var(--ease);
    }
}

@media (prefers-reduced-motion: reduce) {
    html, html:focus-within {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }

    .diagonal-light, .btn::before {
        display: none;
    }

    .btn:hover .arrow, .link:hover .arrow {
        transform: none;
    }

    .btn--block .arrow, .btn--block:hover .arrow,
    .header-nav .btn--primary .arrow, .header-nav .btn--primary:hover .arrow {
        transform: translateY(-50%);
    }

}