/*
 * Creative Button widget.
 *
 * Each effect provides distinct hover interactions inspired by modern button effects.
 */
.ekl-creative-button {
    --ekl-cb-speed: 400ms;
    --ekl-cb-effect: #07a698;

    @apply flex;
}

.ekl-creative-button__link {
    @apply relative inline-flex items-center justify-center overflow-hidden rounded-[6px] bg-ekl-brand px-[28px] py-[14px] text-[16px] font-semibold leading-none text-white;
    transition: background-color var(--ekl-cb-speed) ease, border-color var(--ekl-cb-speed) ease, color var(--ekl-cb-speed) ease, transform var(--ekl-cb-speed) ease, box-shadow var(--ekl-cb-speed) ease;
}

.ekl-creative-button__label {
    @apply relative z-[1] inline-flex items-center gap-[8px];
    transition: transform var(--ekl-cb-speed) ease, opacity var(--ekl-cb-speed) ease;

    i,
    svg {
        @apply block;
    }

    svg {
        @apply h-[1em] w-[1em] fill-current;
    }
}

.ekl-creative-button__effect {
    @apply absolute inset-0 z-0 pointer-events-none;

    background-color: var(--ekl-cb-effect);
    transition: transform var(--ekl-cb-speed) ease-in-out, opacity var(--ekl-cb-speed) ease-in-out;
}

/* ==========================================================================
   1. Default (Sweep)
   ========================================================================== */
.ekl-creative-button[data-effect='default'],
.ekl-creative-button[data-effect='sweep'] {
    .ekl-creative-button__effect { @apply origin-left scale-x-0; }
    &[data-direction='right'] .ekl-creative-button__effect { @apply origin-right; }
    &[data-direction='up'] .ekl-creative-button__effect { @apply origin-bottom scale-x-100 scale-y-0; }
    &[data-direction='down'] .ekl-creative-button__effect { @apply origin-top scale-x-100 scale-y-0; }

    &:hover .ekl-creative-button__effect { @apply scale-100; }
}

/* ==========================================================================
   2. Winona
   Text slides up and replaced by data-text from below
   ========================================================================== */
.ekl-creative-button[data-effect='winona'] {
    .ekl-creative-button__effect { @apply hidden; }

    .ekl-creative-button__link::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        color: var(--ekl-cb-effect, #ffffff);
        transform: translate3d(0, 30%, 0);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
        pointer-events: none;
    }

    &:hover .ekl-creative-button__link::after {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    &:hover .ekl-creative-button__label {
        opacity: 0;
        transform: translate3d(0, -30%, 0);
    }
}

/* ==========================================================================
   3. Ujarak
   Background expands horizontally from scale(0.7, 1)
   ========================================================================== */
.ekl-creative-button[data-effect='ujarak'] {
    .ekl-creative-button__effect {
        opacity: 0;
        transform: scale3d(0.7, 1, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ==========================================================================
   4. Wayra
   Rotated sweep overlay from corner
   ========================================================================== */
.ekl-creative-button[data-effect='wayra'] {
    .ekl-creative-button__effect {
        width: 160%;
        height: 160%;
        top: -30%;
        left: -30%;
        opacity: 0;
        transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
        transform-origin: 0% 100%;
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, 0);
    }
}

/* ==========================================================================
   5. Tamaya
   Top and bottom halves split open revealing scaled label
   ========================================================================== */
.ekl-creative-button[data-effect='tamaya'] {
    .ekl-creative-button__effect { @apply hidden; }

    .ekl-creative-button__link::before,
    .ekl-creative-button__link::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--ekl-cb-effect, #07a698);
        color: #ffffff;
        text-align: center;
        pointer-events: none;
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
        z-index: 2;
        padding-left: inherit;
        padding-right: inherit;
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
    }

    /* Top half */
    .ekl-creative-button__link::before {
        clip-path: polygon(0 0, 100% 0, 100% 50.5%, 0 50.5%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 50.5%, 0 50.5%);
    }

    /* Bottom half */
    .ekl-creative-button__link::after {
        clip-path: polygon(0 49.5%, 100% 49.5%, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 49.5%, 100% 49.5%, 100% 100%, 0 100%);
    }

    .ekl-creative-button__label {
        opacity: 0;
        transform: scale3d(0.2, 0.2, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
    }

    &:hover .ekl-creative-button__link::before {
        transform: translate3d(0, -100%, 0);
    }

    &:hover .ekl-creative-button__link::after {
        transform: translate3d(0, 100%, 0);
    }

    &:hover .ekl-creative-button__label {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ==========================================================================
   6. Rayen
   Sliding overlay with secondary text sliding in from left, label sliding down
   ========================================================================== */
.ekl-creative-button[data-effect='rayen'] {
    .ekl-creative-button__effect { @apply hidden; }

    .ekl-creative-button__link::before {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--ekl-cb-effect, #07a698);
        color: #ffffff;
        transform: translate3d(-100%, 0, 0);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
        pointer-events: none;
        z-index: 2;
    }

    &:hover .ekl-creative-button__link::before {
        transform: translate3d(0, 0, 0);
    }

    &:hover .ekl-creative-button__label {
        transform: translate3d(0, 100%, 0);
    }
}

/* ==========================================================================
   7. Pipaluk
   Border and inner scale animation
   ========================================================================== */
.ekl-creative-button[data-effect='pipaluk'] {
    .ekl-creative-button__effect {
        opacity: 0;
        transform: scale3d(0.7, 0.7, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.25, 0, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.25, 0, 0.3, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    &:hover .ekl-creative-button__link {
        transform: scale3d(1.03, 1.03, 1);
    }
}

/* ==========================================================================
   8. Moema
   Expanding pulsating ripple aura
   ========================================================================== */
.ekl-creative-button[data-effect='moema'] {
    .ekl-creative-button__effect {
        inset: -12px;
        border-radius: inherit;
        opacity: 0;
        transform: scale3d(0.8, 0.5, 1);
    }

    &:hover .ekl-creative-button__effect {
        animation: ekl-anim-moema-ripple var(--ekl-cb-speed) forwards;
    }

    &:hover .ekl-creative-button__link {
        animation: ekl-anim-moema-bounce var(--ekl-cb-speed) forwards;
    }
}

@keyframes ekl-anim-moema-bounce {
    60% {
        transform: scale3d(0.88, 0.88, 1);
    }
    85% {
        transform: scale3d(1.08, 1.08, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes ekl-anim-moema-ripple {
    0% {
        opacity: 0.5;
        transform: scale3d(0.8, 0.5, 1);
    }
    100% {
        opacity: 0;
        transform: scale3d(1.25, 1.35, 1);
    }
}

/* ==========================================================================
   9. Wave
   Water-wave style rising/expanding ripple
   ========================================================================== */
.ekl-creative-button[data-effect='wave'] {
    .ekl-creative-button__link {
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    .ekl-creative-button__effect {
        top: 100%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 260%;
        min-width: 260px;
        aspect-ratio: 1 / 1;
        border-radius: 38% 42% 40% 44%;
        background-color: var(--ekl-cb-effect, #07a698);
        transform: translate3d(-50%, 35%, 0) rotate(0deg);
        transition: transform calc(var(--ekl-cb-speed) * 1.8) cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .ekl-creative-button__effect::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 42% 38% 44% 40%;
        background-color: var(--ekl-cb-effect, #07a698);
        opacity: 0.45;
        transform: rotate(60deg);
        transition: transform calc(var(--ekl-cb-speed) * 1.8) cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover .ekl-creative-button__effect {
        transform: translate3d(-50%, -70%, 0) rotate(360deg);
    }

    &:hover .ekl-creative-button__effect::before {
        transform: rotate(500deg);
    }
}

/* ==========================================================================
   10. Aylen
   Two overlapping layers sliding down from above
   ========================================================================== */
.ekl-creative-button[data-effect='aylen'] {
    .ekl-creative-button__effect {
        transform: translate3d(0, -100%, 0);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
    }

    .ekl-creative-button__link::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--ekl-cb-effect, #07a698);
        opacity: 0.5;
        transform: translate3d(0, -100%, 0);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
        pointer-events: none;
        z-index: 0;
    }

    &:hover .ekl-creative-button__link::before {
        transform: translate3d(0, 0, 0);
    }

    &:hover .ekl-creative-button__effect {
        transform: translate3d(0, 0, 0);
        transition-delay: calc(var(--ekl-cb-speed) * 0.35);
    }
}

/* ==========================================================================
   11. Saqui
   Secondary text rotate-in from bottom corner
   ========================================================================== */
.ekl-creative-button[data-effect='saqui'] {
    .ekl-creative-button__effect {
        opacity: 0;
        transition: opacity var(--ekl-cb-speed) ease-out;
    }

    .ekl-creative-button__link::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: -25% 50%;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
        color: #ffffff;
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) ease-out;
        pointer-events: none;
        z-index: 2;
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
    }

    &:hover .ekl-creative-button__link::after {
        opacity: 1;
        transform: rotate3d(0, 0, 1, 0deg);
    }

    &:hover .ekl-creative-button__label {
        opacity: 0;
        transform: scale(0.85);
    }
}

/* ==========================================================================
   12. Wapasha
   Border zooms outwards and expands into place
   ========================================================================== */
.ekl-creative-button[data-effect='wapasha'] {
    .ekl-creative-button__effect {
        inset: 0;
        border: 2px solid var(--ekl-cb-effect, #07a698);
        background: transparent;
        border-radius: inherit;
        opacity: 0;
        transform: scale3d(0.6, 0.6, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    &:hover .ekl-creative-button__link {
        box-shadow: inset 0 0 0 2px var(--ekl-cb-effect, #07a698);
    }
}

/* ==========================================================================
   13. Nuka
   Subtle outer expansion and inner scale
   ========================================================================== */
.ekl-creative-button[data-effect='nuka'] {
    .ekl-creative-button__effect {
        opacity: 0;
        transform: scale3d(0.7, 1, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
    }

    .ekl-creative-button__effect::before {
        content: '';
        position: absolute;
        inset: 4px;
        border-radius: inherit;
        background-color: #ffffff;
        opacity: 0;
        transform: scale3d(0.6, 1, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    &:hover .ekl-creative-button__effect::before {
        opacity: 0.15;
        transform: scale3d(1, 1, 1);
    }

    &:hover .ekl-creative-button__link {
        transform: scale3d(1.02, 1.02, 1);
    }
}

/* ==========================================================================
   14. Antiman
   Border outline pop-in with smooth fade
   ========================================================================== */
.ekl-creative-button[data-effect='antiman'] {
    .ekl-creative-button__effect {
        inset: 0;
        border: 2px solid var(--ekl-cb-effect, #07a698);
        background: transparent;
        border-radius: inherit;
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1), opacity var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    &:hover .ekl-creative-button__label {
        transform: scale(0.96);
    }
}

/* ==========================================================================
   15. Quidel
   Slide-in from below
   ========================================================================== */
.ekl-creative-button[data-effect='quidel'] {
    .ekl-creative-button__effect {
        transform: translate3d(0, 100%, 0);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
    }

    &:hover .ekl-creative-button__effect {
        transform: translate3d(0, 0, 0);
    }
}

/* ==========================================================================
   16. Shikoba
   Label shifts right, icon slides in from left
   ========================================================================== */
.ekl-creative-button[data-effect='shikoba'] {
    .ekl-creative-button__effect {
        opacity: 0;
        transition: opacity var(--ekl-cb-speed) ease;
    }

    .ekl-creative-button__label {
        transform: translate3d(0, 0, 0);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
    }

    &:hover .ekl-creative-button__label {
        transform: translate3d(6px, 0, 0);
    }
}

/* ==========================================================================
   17. Isi
   Circular bubble expanding from right edge
   ========================================================================== */
.ekl-creative-button[data-effect='isi'] {
    .ekl-creative-button__effect {
        top: 50%;
        left: 100%;
        right: auto;
        bottom: auto;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px;
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.5);
        transform-origin: 50% 50%;
        transition: transform calc(var(--ekl-cb-speed) * 1.5) cubic-bezier(0.7, 0, 0.3, 1), opacity var(--ekl-cb-speed) ease;
        pointer-events: none;
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale(25);
    }
}

/* ==========================================================================
   18. Naira
   Angled diagonal drop slice
   ========================================================================== */
.ekl-creative-button[data-effect='naira'] {
    .ekl-creative-button__effect {
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        opacity: 0;
        transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -12deg);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.75, 0, 0.125, 1), opacity calc(var(--ekl-cb-speed) * 0.5) ease;
        pointer-events: none;
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }

    &:hover .ekl-creative-button__label {
        transform: scale(1.04);
    }
}

/* ==========================================================================
   19. Sacnite
   Inset expanding frame ring
   ========================================================================== */
.ekl-creative-button[data-effect='sacnite'] {
    .ekl-creative-button__effect {
        inset: 0;
        border-radius: inherit;
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--ekl-cb-effect, #07a698);
        opacity: 0;
        transform: scale3d(0.85, 0.85, 1);
        transition: transform var(--ekl-cb-speed) cubic-bezier(0.2, 1, 0.3, 1), opacity var(--ekl-cb-speed) ease, box-shadow var(--ekl-cb-speed) ease;
        pointer-events: none;
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        box-shadow: inset 0 0 0 60px var(--ekl-cb-effect, #07a698);
    }
}

/* ==========================================================================
   20. Shutter
   Center split opening like a shutter
   ========================================================================== */
.ekl-creative-button[data-effect='shutter'] {
    .ekl-creative-button__effect { @apply origin-center scale-x-0; }
    &[data-direction='up'] .ekl-creative-button__effect,
    &[data-direction='down'] .ekl-creative-button__effect { @apply scale-x-100 scale-y-0; }

    &:hover .ekl-creative-button__effect { @apply scale-100; }
}

/* ==========================================================================
   21. Slide
   Smooth linear slide in from chosen direction
   ========================================================================== */
.ekl-creative-button[data-effect='slide'] {
    .ekl-creative-button__effect { @apply -translate-x-full; }
    &[data-direction='right'] .ekl-creative-button__effect { @apply translate-x-full; }
    &[data-direction='up'] .ekl-creative-button__effect { @apply translate-x-0 translate-y-full; }
    &[data-direction='down'] .ekl-creative-button__effect { @apply translate-x-0 -translate-y-full; }

    &:hover .ekl-creative-button__effect { @apply translate-x-0 translate-y-0; }
}

/* ==========================================================================
   22. Shine
   Diagonal light streak sweep
   ========================================================================== */
.ekl-creative-button[data-effect='shine'] {
    .ekl-creative-button__effect {
        @apply -translate-x-full skew-x-[-20deg] bg-transparent;

        background-image: linear-gradient(
            90deg,
            transparent 0%,
            rgb(255 255 255 / 45%) 50%,
            transparent 100%
        );
    }

    &:hover .ekl-creative-button__effect { @apply translate-x-full; }
}

/* ==========================================================================
   23. Grow
   Elevation lift with shadow
   ========================================================================== */
.ekl-creative-button[data-effect='grow'] {
    .ekl-creative-button__effect { @apply opacity-0; }

    .ekl-creative-button__link {
        transition: transform var(--ekl-cb-speed) ease-in-out;
    }

    &:hover .ekl-creative-button__link { @apply scale-105; }
}

/* ==========================================================================
   24. Jelly
   Playful bouncy elastic squish
   ========================================================================== */
.ekl-creative-button[data-effect='jelly'] {
    .ekl-creative-button__effect {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity var(--ekl-cb-speed) ease, transform var(--ekl-cb-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
        transform: scale(1);
    }

    &:hover .ekl-creative-button__link {
        animation: ekl-anim-jelly 0.6s both;
    }
}

@keyframes ekl-anim-jelly {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1, 1); }
}

/* ==========================================================================
   25. Pulse
   Glowing concentric radar pulse rings
   ========================================================================== */
.ekl-creative-button[data-effect='pulse'] {
    .ekl-creative-button__effect {
        inset: 0;
        border-radius: inherit;
        background-color: var(--ekl-cb-effect, #07a698);
        opacity: 0;
        transition: opacity var(--ekl-cb-speed) ease;
    }

    .ekl-creative-button__link {
        overflow: visible;
    }

    &:hover .ekl-creative-button__effect {
        opacity: 1;
    }

    &:hover .ekl-creative-button__link::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 var(--ekl-cb-effect, #07a698);
        animation: ekl-anim-pulse 1.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
        pointer-events: none;
    }
}

@keyframes ekl-anim-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--ekl-cb-effect, #07a698);
        opacity: 0.8;
    }
    100% {
        box-shadow: 0 0 0 16px var(--ekl-cb-effect, #07a698);
        opacity: 0;
    }
}

.ekl-creative-button[data-effect='none'] .ekl-creative-button__effect {
    @apply hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ekl-creative-button__effect,
    .ekl-creative-button__link,
    .ekl-creative-button__label {
        @apply transition-none animate-none;
    }
}