/*
 * Animated Link widget.
 *
 * Provides the 15 line hover animation styles:
 * Carpo, Carme, Dia, Eirene, Elara, Ersa, Helike, Herse, Io, Iocaste,
 * Kale, Leda, Metis, Mneme, Thebe.
 */
.ekl-animated-link {
    --ekl-link-line: #f00e6d;
    --ekl-link-line-hover: var(--ekl-link-line);
    --ekl-link-size: 2px;
    --ekl-link-offset: 0px;
    --ekl-link-speed: 350ms;

    @apply flex items-center;
}

.ekl-animated-link:hover {
    --ekl-link-line: var(--ekl-link-line-hover);
}

.ekl-animated-link__link {
    @apply inline-flex items-center gap-[8px] text-[16px] font-semibold leading-[1.4] transition-colors duration-300;
}

.ekl-animated-link__icon {
    @apply inline-flex shrink-0 items-center justify-center transition-all duration-300;

    i,
    svg {
        @apply block;
    }

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

.ekl-animated-link__text {
    @apply relative inline-block;

    &::before,
    &::after {
        @apply absolute left-0 w-full pointer-events-none;

        top: calc(100% + var(--ekl-link-offset, 0px));
        height: var(--ekl-link-size, 2px);
        background-color: var(--ekl-link-line, currentColor);
    }

    &::before {
        content: '';
    }

    span {
        @apply inline-block;
    }
}

.ekl-animated-link__graphic {
    @apply absolute left-0 top-0 pointer-events-none fill-none;

    stroke: var(--ekl-link-line, currentColor);
    stroke-width: var(--ekl-link-size, 2px);
}

/* ==========================================================================
   15 Animation Styles
   ========================================================================== */

/* 1. Carpo: Top line scales in from left, bottom line scales out to right */
.ekl-animated-link[data-effect='carpo'] .ekl-animated-link__text::before,
.link--carpo::before {
    transform-origin: 0% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform var(--ekl-link-speed, 0.3s) ease;
}

.ekl-animated-link[data-effect='carpo']:hover .ekl-animated-link__text::before,
.link--carpo:hover::before {
    transform: scale3d(1, 1, 1);
}

.ekl-animated-link[data-effect='carpo'] .ekl-animated-link__text::after,
.link--carpo::after {
    content: '';
    top: calc(100% + var(--ekl-link-offset, 0px) + 4px);
    transition: transform var(--ekl-link-speed, 0.3s) ease;
    transform-origin: 100% 50%;
}

.ekl-animated-link[data-effect='carpo']:hover .ekl-animated-link__text::after,
.link--carpo:hover::after {
    transform: scale3d(0, 1, 1);
}

/* 2. Carme: Animated SVG scribble stroke */
.ekl-animated-link[data-effect='carme'] .ekl-animated-link__text::before,
.ekl-animated-link[data-effect='carme'] .ekl-animated-link__text::after,
.link--carme::before,
.link--carme::after {
    display: none;
}

.ekl-animated-link[data-effect='carme'] .ekl-animated-link__graphic--scribble,
.link__graphic--scribble {
    top: calc(100% + var(--ekl-link-offset, 0px));
}

.ekl-animated-link[data-effect='carme'] .ekl-animated-link__graphic--scribble path,
.link__graphic--scribble path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

.ekl-animated-link[data-effect='carme']:hover .ekl-animated-link__graphic--scribble path,
.link--carme:hover .link__graphic--scribble path {
    stroke-dashoffset: 0;
    transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
    transition-duration: 0.3s;
}

/* 3. Dia: Staggered dual lines dropping in */
.ekl-animated-link[data-effect='dia'] .ekl-animated-link__text::before,
.ekl-animated-link[data-effect='dia'] .ekl-animated-link__text::after,
.link--dia::before,
.link--dia::after {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: translate3d(0, 3px, 0);
    transition-property: transform, opacity;
    transition-duration: var(--ekl-link-speed, 0.3s);
    transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='dia']:hover .ekl-animated-link__text::before,
.ekl-animated-link[data-effect='dia']:hover .ekl-animated-link__text::after,
.link--dia:hover::before,
.link--dia:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
}

.ekl-animated-link[data-effect='dia'] .ekl-animated-link__text::after,
.link--dia::after {
    content: '';
    top: calc(100% + var(--ekl-link-offset, 0px) + 4px);
    width: 70%;
    left: 15%;
}

.ekl-animated-link[data-effect='dia'] .ekl-animated-link__text::before,
.ekl-animated-link[data-effect='dia']:hover .ekl-animated-link__text::after,
.link--dia::before,
.link--dia:hover::after {
    transition-delay: 0.1s;
}

.ekl-animated-link[data-effect='dia']:hover .ekl-animated-link__text::before,
.link--dia:hover::before {
    transition-delay: 0s;
}

/* 4. Eirene: Pill morph underline with text drop */
.ekl-animated-link[data-effect='eirene'] .ekl-animated-link__text::before,
.link--eirene::before {
    height: 7px;
    border-radius: 20px;
    transform: scale3d(1, 1, 1);
    transition: transform 0.2s, opacity 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);
}

.ekl-animated-link[data-effect='eirene']:hover .ekl-animated-link__text::before,
.link--eirene:hover::before {
    transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    transition-duration: 0.4s;
    opacity: 1;
    transform: scale3d(1.2, 0.14, 1);
}

.ekl-animated-link[data-effect='eirene'] .ekl-animated-link__text span,
.link--eirene span {
    transform: translate3d(0, -4px, 0);
    transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);
}

.ekl-animated-link[data-effect='eirene']:hover .ekl-animated-link__text span,
.link--eirene:hover span {
    transform: translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    transition-duration: 0.4s;
    transition-delay: 0s;
}

/* 5. Elara: Notch clip-path underline with text lift */
.ekl-animated-link[data-effect='elara'] .ekl-animated-link__text::before,
.link--elara::before {
    transform-origin: 50% 100%;
    transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}

.ekl-animated-link[data-effect='elara']:hover .ekl-animated-link__text::before,
.link--elara:hover::before {
    transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}

.ekl-animated-link[data-effect='elara'] .ekl-animated-link__text span,
.link--elara span {
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='elara']:hover .ekl-animated-link__text span,
.link--elara:hover span {
    transform: translate3d(0, -2px, 0);
}

/* 6. Ersa: Center strikethrough with text scale */
.ekl-animated-link[data-effect='ersa'] .ekl-animated-link__text,
.link--ersa {
    padding: 0 4px;
}

.ekl-animated-link[data-effect='ersa'] .ekl-animated-link__text::before,
.link--ersa::before {
    top: 50%;
    height: var(--ekl-link-size, 2px);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='ersa']:hover .ekl-animated-link__text::before,
.link--ersa:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.ekl-animated-link[data-effect='ersa'] .ekl-animated-link__text span,
.link--ersa span {
    transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='ersa']:hover .ekl-animated-link__text span,
.link--ersa:hover span {
    transform: scale3d(1.08, 1.08, 1.08);
}

/* 7. Helike: Cyberpunk digital glitch */
.ekl-animated-link[data-effect='helike']:hover .ekl-animated-link__text span,
.link--helike:hover span {
    animation: ekl-glitch-text 0.4s linear;
}

.ekl-animated-link[data-effect='helike'] .ekl-animated-link__text::before,
.link--helike::before {
    height: var(--ekl-link-size, 2px);
    opacity: 0;
}

.ekl-animated-link[data-effect='helike']:hover .ekl-animated-link__text::before,
.link--helike:hover::before {
    opacity: 1;
    animation: ekl-glitch-line 0.4s steps(2, start) forwards;
}

@keyframes ekl-glitch-text {
    0% {
        opacity: 1;
        transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }
    10% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
    20% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
    35% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
    50% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
    60% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
    70% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
    80% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
    90% { transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1); }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

@keyframes ekl-glitch-line {
    0% { transform: scale3d(1, 1, 1); }
    10% { transform: translate3d(10px, 0, 0); }
    20% { transform: translate3d(0, 4px, 0); }
    30% { transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0); transform-origin: 100% 0%; }
    40% { transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0); }
    50% { transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0); }
    60% { transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0); }
    70% { transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0); }
    80% { transform: translate3d(-30px, 10px, 0) scale3d(1, 0.4, 1); transform-origin: 100% 0%; }
    90% { transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0); transform-origin: 0% 50%; }
    100% { opacity: 1; }
}

/* 8. Herse: Animated SVG arc stroke */
.ekl-animated-link[data-effect='herse'] .ekl-animated-link__text::before,
.ekl-animated-link[data-effect='herse'] .ekl-animated-link__text::after,
.link--herse::before,
.link--herse::after {
    display: none;
}

.ekl-animated-link[data-effect='herse'] .ekl-animated-link__graphic--arc,
.link__graphic--arc {
    top: 73%;
    left: -23%;
}

.ekl-animated-link[data-effect='herse'] .ekl-animated-link__graphic--arc path,
.link__graphic--arc path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.ekl-animated-link[data-effect='herse']:hover .ekl-animated-link__graphic--arc path,
.link--herse:hover .link__graphic--arc path {
    stroke-dashoffset: 0;
    transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
    transition-duration: 0.3s;
}

/* 9. Io: Dual lines sliding from opposite directions */
.ekl-animated-link[data-effect='io'] .ekl-animated-link__text::before,
.link--io::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.ekl-animated-link[data-effect='io']:hover .ekl-animated-link__text::before,
.link--io:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='io'] .ekl-animated-link__text::after,
.link--io::after {
    content: '';
    top: calc(100% + var(--ekl-link-offset, 0px) + 4px);
    transform-origin: 0% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.ekl-animated-link[data-effect='io']:hover .ekl-animated-link__text::after,
.link--io:hover::after {
    transform-origin: 100% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}

/* 10. Iocaste: Sliding ribbon wave line */
.ekl-animated-link[data-effect='iocaste'] .ekl-animated-link__text,
.link--iocaste {
    overflow: hidden;
    padding: 7px 0;
}

.ekl-animated-link[data-effect='iocaste'] .ekl-animated-link__text::before,
.ekl-animated-link[data-effect='iocaste'] .ekl-animated-link__text::after,
.link--iocaste::before,
.link--iocaste::after {
    display: none;
}

.ekl-animated-link[data-effect='iocaste'] .ekl-animated-link__graphic--slide,
.link__graphic--slide {
    top: -3px;
    stroke-width: var(--ekl-link-size, 2px);
    transition: transform 0.7s cubic-bezier(0, 0.25, 0.5, 1);
}

.ekl-animated-link[data-effect='iocaste']:hover .ekl-animated-link__graphic--slide,
.link--iocaste:hover .link__graphic--slide {
    transform: translate3d(-66.6%, 0, 0);
}

/* 11. Kale: Line rises up and settles */
.ekl-animated-link[data-effect='kale'] .ekl-animated-link__text::before,
.link--kale::before {
    height: 10px;
    top: calc(100% + var(--ekl-link-offset, 0px));
    opacity: 0;
}

.ekl-animated-link[data-effect='kale']:hover .ekl-animated-link__text::before,
.link--kale:hover::before {
    opacity: 1;
    animation: ekl-line-up 0.3s ease forwards;
}

@keyframes ekl-line-up {
    0% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 0.045, 1);
    }
    50% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 1, 1);
    }
    51% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 0.045, 1);
    }
}

.ekl-animated-link[data-effect='kale'] .ekl-animated-link__text::after,
.link--kale::after {
    content: '';
    transition: opacity 0.3s;
    opacity: 0;
}

.ekl-animated-link[data-effect='kale']:hover .ekl-animated-link__text::after,
.link--kale:hover::after {
    opacity: 1;
    transition-delay: 0.3s;
}

/* 12. Leda: Sliding text replacement over underline */
.ekl-animated-link[data-effect='leda'] .ekl-animated-link__text,
.link--leda {
    overflow: hidden;
    line-height: 1.6;
}

.ekl-animated-link[data-effect='leda'] .ekl-animated-link__text::before,
.link--leda::before {
    height: var(--ekl-link-size, 2px);
    top: calc(100% - 3px);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}

.ekl-animated-link[data-effect='leda']:hover .ekl-animated-link__text::before,
.link--leda:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.ekl-animated-link[data-effect='leda'] .ekl-animated-link__text::after,
.link--leda::after {
    content: attr(data-text);
    height: 100%;
    top: 0;
    background: none;
    transform-origin: 100% 50%;
    transform: translate3d(150%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
    color: var(--ekl-link-line, currentColor);
}

.ekl-animated-link[data-effect='leda']:hover .ekl-animated-link__text::after,
.link--leda:hover::after {
    transform: translate3d(0, 0, 0);
}

.ekl-animated-link[data-effect='leda'] .ekl-animated-link__text span,
.link--leda span {
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}

.ekl-animated-link[data-effect='leda']:hover .ekl-animated-link__text span,
.link--leda:hover span {
    transform: translate3d(-150%, 0, 0);
}

/* 13. Metis: Refined directional underline */
.ekl-animated-link[data-effect='metis'] .ekl-animated-link__text::before,
.link--metis::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.ekl-animated-link[data-effect='metis']:hover .ekl-animated-link__text::before,
.link--metis:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

/* 14. Mneme: Curtain background cover */
.ekl-animated-link[data-effect='mneme'] .ekl-animated-link__text::before,
.link--mneme::before {
    height: 100%;
    top: 0;
    opacity: 0;
}

.ekl-animated-link[data-effect='mneme']:hover .ekl-animated-link__text::before,
.link--mneme:hover::before {
    opacity: 1;
    animation: ekl-cover-up 0.3s ease forwards;
}

@keyframes ekl-cover-up {
    0% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 0.045, 1);
    }
    50% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 1, 1);
    }
    51% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 0.045, 1);
    }
}

.ekl-animated-link[data-effect='mneme'] .ekl-animated-link__text::after,
.link--mneme::after {
    content: '';
    transition: opacity 0.3s;
}

.ekl-animated-link[data-effect='mneme']:hover .ekl-animated-link__text::after,
.link--mneme:hover::after {
    opacity: 0;
}

/* 15. Thebe: Elastic staggered dual lines */
.ekl-animated-link[data-effect='thebe'] .ekl-animated-link__text::before,
.link--thebe::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='thebe']:hover .ekl-animated-link__text::before,
.link--thebe:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 2, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.ekl-animated-link[data-effect='thebe'] .ekl-animated-link__text::after,
.link--thebe::after {
    content: '';
    top: calc(100% + var(--ekl-link-offset, 0px) + 4px);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
}

.ekl-animated-link[data-effect='thebe']:hover .ekl-animated-link__text::after,
.link--thebe:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

/* ==========================================================================
   Icon Animations
   ========================================================================== */

/* Slide Icon */
.ekl-animated-link[data-icon-anim='slide']:hover .ekl-animated-link__icon--after {
    transform: translateX(5px);
}

.ekl-animated-link[data-icon-anim='slide']:hover .ekl-animated-link__icon--before {
    transform: translateX(-5px);
}

/* Bounce Icon */
.ekl-animated-link[data-icon-anim='bounce']:hover .ekl-animated-link__icon {
    animation: ekl-icon-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes ekl-icon-bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* Rotate Icon */
.ekl-animated-link[data-icon-anim='rotate']:hover .ekl-animated-link__icon {
    transform: rotate(360deg);
}

/* Zoom Icon */
.ekl-animated-link[data-icon-anim='zoom']:hover .ekl-animated-link__icon {
    transform: scale(1.25);
}

/* Fade Icon */
.ekl-animated-link[data-icon-anim='fade'] .ekl-animated-link__icon {
    @apply opacity-50;
}

.ekl-animated-link[data-icon-anim='fade']:hover .ekl-animated-link__icon {
    @apply opacity-100;
}

/* ==========================================================================
   Accessibility & Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ekl-animated-link,
    .ekl-animated-link__text,
    .ekl-animated-link__text::before,
    .ekl-animated-link__text::after,
    .ekl-animated-link__icon,
    .ekl-animated-link__text span,
    .ekl-animated-link__graphic,
    .ekl-animated-link__graphic path {
        @apply transition-none;

        animation: none !important;
        transform: none !important;
    }
}