/*==========================================================
    KIYOMI RYOKAN
    COMPONENTS
    Buttons, cards, links, shared surfaces
==========================================================*/


/*==========================================================
    BUTTON — PRIMARY
==========================================================*/

.btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding:1.1rem 2.4rem;

    border-radius:var(--radius-pill);

    background:var(--color-primary);

    color:#fff;

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.04em;

    overflow:hidden;

    transition:
        background .4s var(--ease-soft),
        transform .4s var(--ease-soft),
        box-shadow .4s var(--ease-soft);

    box-shadow:0 10px 30px rgba(94,67,50,.22);

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:translateX(-120%) skewX(-12deg);

    pointer-events:none;

}

.btn:hover{

    background:var(--color-primary-dark);

    transform:translateY(-3px);

    box-shadow:0 16px 40px rgba(94,67,50,.3);

}

.btn:hover::before{

    animation:shimmer-sweep 1.1s ease forwards;

}

.btn:active{

    transform:translateY(-1px);

}

.btn:focus-visible{

    outline:2px solid #fff;

    outline-offset:3px;

}


/*==========================================================
    BUTTON — SECONDARY (GHOST, FOR USE OVER IMAGES)
==========================================================*/

.btn-secondary{

    background:transparent;

    color:#fff;

    box-shadow:none;

    border:1px solid rgba(255,255,255,.55);

    backdrop-filter:blur(6px);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.14);

    border-color:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

}


/*==========================================================
    BUTTON — ON LIGHT SURFACE (OUTLINE)
==========================================================*/

.btn-outline{

    background:transparent;

    color:var(--color-primary);

    border:1px solid var(--color-primary);

    box-shadow:none;

}

.btn-outline:hover{

    background:var(--color-primary);

    color:#fff;

}


/*==========================================================
    BUTTON SIZES
==========================================================*/

.btn-sm{

    padding:.8rem 1.75rem;

    font-size:.8rem;

}


/*==========================================================
    CARD — SHARED SURFACE
==========================================================*/

.card{

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    transition:
        transform .5s var(--ease-luxury),
        box-shadow .5s var(--ease-luxury),
        border-color .5s var(--ease-luxury);

}

.card:hover{

    border-color:transparent;

    box-shadow:var(--shadow-lg);

}


/*==========================================================
    TEXT LINK — UNDERLINE GLIDE
==========================================================*/

.text-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    font-weight:600;

    color:var(--color-primary);

    padding-bottom:.2rem;

    transition:gap .35s var(--ease-soft), color .35s ease;

}

.text-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:var(--color-primary);

    transform:scaleX(.25);

    transform-origin:left;

    transition:transform .45s var(--ease-luxury);

}

.text-link:hover{

    gap:.85rem;

    color:var(--color-primary-dark);

}

.text-link:hover::after{

    transform:scaleX(1);

}


/*==========================================================
    BADGE / EYEBROW (numbered or labeled markers)
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.4rem 1rem;

    border-radius:var(--radius-pill);

    background:var(--color-mist);

    color:var(--color-primary);

    font-size:.75rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-weight:600;

}


/*==========================================================
    MAGNETIC HOVER TARGET (JS toggles transform via
    inline style; this just sets the transition curve)
==========================================================*/

.magnetic{

    transition:transform .35s var(--ease-soft);

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:640px){

    .btn{

        padding:1rem 2rem;

        font-size:.85rem;

    }

}