/**
 * ChipsAI Button
 *
 * Three pure-CSS hover effects (one with minimal JS for cursor tracking).
 * Designed for the ChipsAI dark + mint accent aesthetic.
 *
 * @package ChipsAI\CustomBlocks
 */

/* ============================================
   BASE
   ============================================ */

.cai-btn {
    --cai-btn-accent: #7FE9D9;
    --cai-btn-text: #0A1413;
    --cai-btn-text-hover: var(--cai-btn-text);
    --cai-btn-scale: 1.03;
    --cai-btn-glow: 0.6;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid transparent;
    isolation: isolate;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
    color: var(--cai-btn-text);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}

.cai-btn:focus-visible {
    outline: 2px solid var(--cai-btn-accent);
    outline-offset: 3px;
}

.cai-btn--full {
    display: flex;
    width: 100%;
}

/* ============================================
   INNER (text + icon wrapper)
   ============================================ */

.cai-btn__inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: gap 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cai-btn__text {
    display: inline-block;
    line-height: 1;
}

.cai-btn__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Arrow pushes slightly on hover (or tap on touch devices). */
.cai-btn--icon-right:is(:hover, .is-tapped) .cai-btn__icon { transform: translateX(3px); }
.cai-btn--icon-left:is(:hover, .is-tapped)  .cai-btn__icon { transform: translateX(-3px); }

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

.cai-btn--size-sm {
    padding: 10px 18px;
    font-size: 13px;
}

.cai-btn--size-md {
    padding: 14px 26px;
    font-size: 15px;
}

.cai-btn--size-lg {
    padding: 18px 34px;
    font-size: 17px;
}

/* ============================================
   VARIANTS
   ============================================ */

.cai-btn--solid {
    background-color: var(--cai-btn-accent);
    color: var(--cai-btn-text);
    border-color: transparent;
}

.cai-btn--outline {
    background-color: transparent;
    color: var(--cai-btn-accent);
    border-color: var(--cai-btn-accent);
}

.cai-btn--ghost {
    background-color: transparent;
    color: var(--cai-btn-accent);
    border-color: transparent;
}

.cai-btn--ghost:is(:hover, .is-tapped),
.cai-btn--outline:is(:hover, .is-tapped) {
    color: var(--cai-btn-text-hover);
    background-color: var(--cai-btn-accent);
}

/* ============================================
   HOVER EFFECT 1 — GLOW SWEEP
   Diagonal light sweep + outer glow + lift.
   ============================================ */

.cai-btn--hover-glow-sweep::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 70%
    );
    transform: translateX(-110%) skewX(-12deg);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    mix-blend-mode: overlay;
}

.cai-btn--hover-glow-sweep:is(:hover, .is-tapped)::before {
    transform: translateX(110%) skewX(-12deg);
}

.cai-btn--hover-glow-sweep:is(:hover, .is-tapped) {
    transform: translateY(-1px) scale(var(--cai-btn-scale));
    box-shadow:
        0 6px 20px -4px color-mix(in srgb, var(--cai-btn-accent) calc(var(--cai-btn-glow) * 70%), transparent),
        0 0 28px -2px color-mix(in srgb, var(--cai-btn-accent) calc(var(--cai-btn-glow) * 50%), transparent);
}

/* ============================================
   HOVER EFFECT 2 — TEXT RISE
   Two text copies stacked. On hover both translate up;
   visible one exits through top, clone enters from below.
   ============================================ */

.cai-btn__text--rise {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    height: 1em;
    line-height: 1;
}

.cai-btn__text-line {
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cai-btn__text-line--clone {
    position: absolute;
    inset: 0;
    transform: translateY(110%);
}

.cai-btn--hover-text-rise:is(:hover, .is-tapped) .cai-btn__text-line {
    transform: translateY(-110%);
}

.cai-btn--hover-text-rise:is(:hover, .is-tapped) .cai-btn__text-line--clone {
    transform: translateY(0);
}

.cai-btn--hover-text-rise:is(:hover, .is-tapped) {
    transform: scale(var(--cai-btn-scale));
    box-shadow:
        0 6px 20px -4px color-mix(in srgb, var(--cai-btn-accent) calc(var(--cai-btn-glow) * 60%), transparent);
}

/* Text-rise also pairs nicely with brightness shift on solid variant */
.cai-btn--solid.cai-btn--hover-text-rise:is(:hover, .is-tapped) {
    background-color: color-mix(in srgb, var(--cai-btn-accent) 88%, white);
}

/* ============================================
   HOVER EFFECT 3 — MAGNETIC GLOW
   Radial gradient spotlight follows cursor (JS sets --mx/--my).
   ============================================ */

.cai-btn__magnetic {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        circle at var(--cai-btn-mx, 50%) var(--cai-btn-my, 50%),
        color-mix(in srgb, white 65%, transparent) 0%,
        transparent 40%
    );
    mix-blend-mode: overlay;
}

.cai-btn--hover-magnetic-glow:is(:hover, .is-tapped) .cai-btn__magnetic {
    opacity: 1;
}

.cai-btn--hover-magnetic-glow:is(:hover, .is-tapped) {
    transform: scale(var(--cai-btn-scale));
    box-shadow:
        0 6px 24px -4px color-mix(in srgb, var(--cai-btn-accent) calc(var(--cai-btn-glow) * 70%), transparent),
        0 0 40px -8px color-mix(in srgb, var(--cai-btn-accent) calc(var(--cai-btn-glow) * 60%), transparent);
}

/* For outline/ghost variants, magnetic uses the accent (not white) */
.cai-btn--outline.cai-btn--hover-magnetic-glow .cai-btn__magnetic,
.cai-btn--ghost.cai-btn--hover-magnetic-glow   .cai-btn__magnetic {
    background: radial-gradient(
        circle at var(--cai-btn-mx, 50%) var(--cai-btn-my, 50%),
        color-mix(in srgb, var(--cai-btn-accent) 50%, transparent) 0%,
        transparent 50%
    );
    mix-blend-mode: normal;
}

/* ============================================
   ACTIVE STATE (all variants)
   ============================================ */

.cai-btn:active {
    transform: scale(0.98) !important;
    transition-duration: 0.1s;
}

/* ============================================
   FALLBACK for browsers without color-mix()
   (Safari < 16.2) — provide a static glow.
   ============================================ */

@supports not (background: color-mix(in srgb, red, blue)) {
    .cai-btn:is(:hover, .is-tapped) {
        box-shadow: 0 6px 20px -4px var(--cai-btn-accent) !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .cai-btn,
    .cai-btn::before,
    .cai-btn__inner,
    .cai-btn__icon,
    .cai-btn__text-line,
    .cai-btn__magnetic {
        transition: none !important;
        animation: none !important;
    }
    .cai-btn:is(:hover, .is-tapped) {
        transform: none !important;
    }
}