/* ============================================================================
 * V19 BUTTONS — 21st.dev-inspired animated brand CTAs   (priority 140, loads last)
 *
 * Replaces the three flat button treatments with two animated, on-brand CTAs
 * and removes the "kraft badge" double-outline ring the client rejected.
 *
 * Source components (recolored to the La Toxica palette — no literal rainbow):
 *   • primary  → animated-gradient button   (awwwards "animated gradient button",
 *                Jack Watkins) — a filled magenta→rose gradient that slides,
 *                a light sheen sweep, and a soft gold+rose glow underneath.
 *   • ghost    → 21st.dev @magicui/rainbow-button mechanic — an animated
 *                gradient BORDER (rose→gold→rose) on a charcoal body, via the
 *                padding-box / border-box background-clip trick.
 *
 * Palette (locked to brand tokens): rose #EC2C91, rose-deep #c81f78,
 * rose-hover #f7549f, jaune/gold #F2B119, charcoal #1a1a1a, cream #faf7f2.
 *
 * Geometry (pill radius, padding, min-height, uppercase, sans) is inherited
 * from v17-components.css — this sheet only restyles surface + motion.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 0. KILL THE KRAFT RING
 *    .latoxica-section-asymmetric__cta and .latoxica-trois-adresses__cta are
 *    <div> WRAPPERS around a real button, but v17 put them in the button
 *    selector group, so they rendered as an outlined / filled pill AROUND the
 *    inner pill (the double-outline "kraft logo" look). Reset them to plain
 *    layout containers. (Confirmed: these classes are only ever wrapper divs.)
 * -------------------------------------------------------------------------- */
.latoxica-section-asymmetric__cta,
.latoxica-trois-adresses__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: inherit;
    transition: none;
}

/* ----------------------------------------------------------------------------
 * 1. PRIMARY — filled animated gradient pill (magenta → rose), gold+rose glow
 * -------------------------------------------------------------------------- */
.latoxica-button--primary,
.v11-btn-primary,
.latoxica-storefront-cta,
.btn-primary,
.latoxica-loc-chooser__btn:not(.latoxica-loc-chooser__btn--alt) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: transparent;
    color: var(--v17-white);
    /* magenta band only under the text (rose-deep 5.2:1 / rose 3.9:1 on white,
     * both pass AA for the bold uppercase large text); the gold lives in the
     * glow, never under the label. */
    background-image: linear-gradient(
        110deg,
        var(--v17-rose-deep) 0%,
        var(--v17-rose) 42%,
        var(--v17-rose-hover) 50%,
        var(--v17-rose) 58%,
        var(--v17-rose-deep) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 0;
    animation: ltx-btn-slide 6.5s linear infinite;
    box-shadow: 0 8px 24px -10px rgba(200, 31, 120, 0.6);
    text-shadow: 0 1px 2px rgba(74, 8, 42, 0.4);
}

/* the gold+rose glow, blurred, sitting behind and just under the pill */
.latoxica-button--primary::before,
.v11-btn-primary::before,
.latoxica-storefront-cta::before,
.btn-primary::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 8%;
    right: 8%;
    bottom: -35%;
    height: 70%;
    border-radius: inherit;
    background: linear-gradient(110deg, var(--v17-rose), var(--v17-jaune), var(--v17-rose-hover));
    background-size: 200% 100%;
    filter: blur(15px);
    opacity: 0.55;
    animation: ltx-btn-slide 6.5s linear infinite;
    transition: opacity 0.25s var(--v17-ease);
}

/* the light sheen that sweeps across every few seconds */
.latoxica-button--primary::after,
.v11-btn-primary::after,
.latoxica-storefront-cta::after,
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: 0;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transform: translateX(-160%) skewX(-18deg);
    animation: ltx-btn-sheen 6.5s ease-in-out infinite;
    pointer-events: none;
}

.latoxica-button--primary:hover,
.latoxica-button--primary:focus-visible,
.v11-btn-primary:hover,
.v11-btn-primary:focus-visible,
.latoxica-storefront-cta:hover,
.btn-primary:hover {
    color: var(--v17-white);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(200, 31, 120, 0.7);
}
.latoxica-button--primary:hover::before,
.v11-btn-primary:hover::before,
.latoxica-storefront-cta:hover::before,
.btn-primary:hover::before {
    opacity: 0.9;
}

/* ----------------------------------------------------------------------------
 * 2. GHOST / OUTLINE — animated gradient border (rainbow-button mechanic)
 *    Charcoal body + a rose→gold→rose border that slides. On cream sections
 *    the body flips to cream with charcoal text (border animation kept).
 * -------------------------------------------------------------------------- */
.latoxica-button--ghost,
.v11-btn-outline,
.btn-secondary,
.btn-tertiary {
    position: relative;
    isolation: isolate;
    color: var(--v17-cream);
    border: 2px solid transparent;
    background-image:
        linear-gradient(var(--v17-charcoal), var(--v17-charcoal)),
        linear-gradient(110deg, var(--v17-rose-deep), var(--v17-rose), var(--v17-jaune), var(--v17-rose), var(--v17-rose-deep));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 240% 100%;
    background-position: 0 0, 0% 0;
    animation: ltx-border-slide 7s linear infinite;
}
.latoxica-button--ghost:hover,
.latoxica-button--ghost:focus-visible,
.v11-btn-outline:hover,
.v11-btn-outline:focus-visible,
.btn-secondary:hover,
.btn-tertiary:hover {
    color: var(--v17-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -12px rgba(242, 177, 25, 0.45);
}

/* cream-section variant: cream interior + charcoal text, border still animates.
 * V19 fix: .latoxica-reservation-card and .latoxica-blog-featured were missing
 * from this list while sealed sheets (reservation-redesign.css:168,
 * v11-contrast-fix.css:85, v17-contrast-fix.css:23) force their label text to
 * charcoal — charcoal-on-charcoal made those CTAs invisible. */
.v11-section-cream .latoxica-button--ghost,
.v17-section--cream .latoxica-button--ghost,
.v11-section-cream .v11-btn-outline,
.v11-section-cream .btn-secondary,
.latoxica-trois-adresses .latoxica-button--ghost,
.latoxica-reservation-card .latoxica-button--ghost,
.latoxica-blog-featured .latoxica-button--ghost,
.latoxica-section-asymmetric[data-on="cream"] .latoxica-button--ghost {
    color: var(--v17-charcoal);
    background-image:
        linear-gradient(var(--v17-cream), var(--v17-cream)),
        linear-gradient(110deg, var(--v17-rose-deep), var(--v17-rose), var(--v17-jaune), var(--v17-rose), var(--v17-rose-deep));
}
.v11-section-cream .latoxica-button--ghost:hover,
.v17-section--cream .latoxica-button--ghost:hover,
.v11-section-cream .v11-btn-outline:hover,
.v11-section-cream .btn-secondary:hover,
.latoxica-reservation-card .latoxica-button--ghost:hover,
.latoxica-reservation-card .latoxica-button--ghost:focus-visible,
.latoxica-blog-featured .latoxica-button--ghost:hover,
.latoxica-blog-featured .latoxica-button--ghost:focus-visible {
    color: var(--v17-charcoal);
}

/* ----------------------------------------------------------------------------
 * 3. KEYFRAMES
 * -------------------------------------------------------------------------- */
@keyframes ltx-btn-slide {
    to { background-position: -220% 0; }
}
@keyframes ltx-border-slide {
    to { background-position: 0 0, -240% 0; }
}
@keyframes ltx-btn-sheen {
    0%   { transform: translateX(-160%) skewX(-18deg); }
    55%  { transform: translateX(260%)  skewX(-18deg); }
    100% { transform: translateX(260%)  skewX(-18deg); }
}

/* ----------------------------------------------------------------------------
 * 4. REDUCED MOTION — freeze to a clean static gradient, no sweep/glow motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .latoxica-button--primary,
    .v11-btn-primary,
    .latoxica-storefront-cta,
    .btn-primary,
    .latoxica-button--ghost,
    .v11-btn-outline,
    .btn-secondary,
    .btn-tertiary,
    .latoxica-button--primary::before,
    .v11-btn-primary::before,
    .latoxica-storefront-cta::before,
    .btn-primary::before {
        animation: none !important;
    }
    .latoxica-button--primary::after,
    .v11-btn-primary::after,
    .latoxica-storefront-cta::after,
    .btn-primary::after {
        display: none;
    }
}