/* Shoutout to my goat John Rhea who made these shapes, I was too lazy 
https://css-tricks.com/recreating-gmails-google-gemini-animation */
:root {
    --circle: shape(evenodd from 13.482% 79.505%, curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, close);
    --flower: shape(evenodd from 17.9665% 82.0335%, curve by -12.349% -32.0335% with -13.239% -5.129% / -18.021% -15.402%, curve by -0.0275% -22.203% with -3.1825% -9.331% / -3.074% -16.6605%, curve by 12.3765% -9.8305% with 2.3835% -4.3365% / 6.565% -7.579%, curve by 32.0335% -12.349% with 5.129% -13.239% / 15.402% -18.021%, curve by 20.4535% -0.8665% with 8.3805% -2.858% / 15.1465% -3.062%, curve by 11.58% 13.2155% with 5.225% 2.161% / 9.0355% 6.6475%, curve by 12.349% 32.0335% with 13.239% 5.129% / 18.021% 15.402%, curve by 0.5715% 21.1275% with 2.9805% 8.7395% / 3.0745% 15.723%, curve by -12.9205% 10.906% with -2.26% 4.88% / -6.638% 8.472%, curve by -32.0335% 12.349% with -5.129% 13.239% / -15.402% 18.021%, curve by -21.1215% 0.5745% with -8.736% 2.9795% / -15.718% 3.0745%, curve by -10.912% -12.9235% with -4.883% -2.2595% / -8.477% -6.6385%, close);
    --cylinder: shape(evenodd from 10.5845% 59.7305%, curve by 0% -19.461% with -0.113% -1.7525% / -0.11% -18.14%, curve by 10.098% -26.213% with 0.837% -10.0375% / 3.821% -19.2625%, curve by 29.3175% -13.0215% with 7.2175% -7.992% / 17.682% -13.0215%, curve by 19.5845% 5.185% with 7.1265% 0% / 13.8135% 1.887%, curve by 9.8595% 7.9775% with 3.7065% 2.1185% / 7.035% 4.8195%, curve by 9.9715% 26.072% with 6.2015% 6.933% / 9.4345% 16.082%, curve by 0% 19.461% with 0.074% 1.384% / 0.0745% 17.7715%, curve by -13.0065% 29.1155% with -0.511% 11.5345% / -5.021% 21.933%, curve by -26.409% 10.119% with -6.991% 6.288% / -16.254% 10.119%, curve by -20.945% -5.9995% with -7.6935% 0% / -14.8755% -2.199%, curve by -8.713% -7.404% with -3.255% -2.0385% / -6.1905% -4.537%, curve by -9.7575% -25.831% with -6.074% -6.9035% / -9.1205% -15.963%, close);
    --hexagon: shape(evenodd from 6.47% 67.001%, curve by 0% -34.002% with -1.1735% -7.7% / -1.1735% -26.302%, curve by 7.0415% -12.1965% with 0.7075% -4.641% / 3.3765% -9.2635%, curve by 29.447% -17.001% with 6.0815% -4.8665% / 22.192% -14.1675%, curve by 14.083% 0% with 4.3725% -1.708% / 9.7105% -1.708%, curve by 29.447% 17.001% with 7.255% 2.8335% / 23.3655% 12.1345%, curve by 7.0415% 12.1965% with 3.665% 2.933% / 6.334% 7.5555%, curve by 0% 34.002% with 1.1735% 7.7% / 1.1735% 26.302%, curve by -7.0415% 12.1965% with -0.7075% 4.641% / -3.3765% 9.2635%, curve by -29.447% 17.001% with -6.0815% 4.8665% / -22.192% 14.1675%, curve by -14.083% 0% with -4.3725% 1.708% / -9.7105% 1.708%, curve by -29.447% -17.001% with -7.255% -2.8335% / -23.3655% -12.1345%, curve by -7.0415% -12.1965% with -3.665% -2.933% / -6.334% -7.5555%, close);
}

.ai-button-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    width: 100px;
    height: 100px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border-radius: 50%;
    background: transparent;
    border: none;
}

.ai-button-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    background-size: 200% 100%;
    filter: blur(4px);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.ai-button-circle:hover::after {
    animation: shine 1.2s ease forwards;
    opacity: 1;
}

.ai-button-circle .aura {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.3, 0.75, 0.2, 1);
}

.ai-button-circle:hover .aura {
    transform: scale(1);
}

.ai-button-circle .aura::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #9ed2ff 0%, #b69cff 30%, #ff739a 60%, #ffb347 90%);
    background-size: 100% 200%;
    clip-path: var(--circle);
    filter: blur(12px);
    transform-origin: center center;
    will-change: clip-path, background-position, transform;
    animation: morph 6s ease-in-out infinite, wave 4s linear infinite, rotate 10s linear infinite;
}

.ai-button-circle svg {
    z-index: 1;
    width: 70%;
    height: 70%;
    position: relative;
    fill: currentColor;
    color: #222;
    transition: transform 1s cubic-bezier(0.2, 0.6, 0.25, 1), color 0.25s;
}

.ai-button-circle:hover svg {
    transform: rotate(180deg) scale(1.06);
    color: #2d103d;
}

.ai-button-circle .label {
    position: absolute;
    z-index: 3;
    bottom: -3em;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    color: #222;
    background-color: rgba(223, 233, 255, 0.75);
    padding: 0.4em 0.8em;
    border-radius: 0.4em;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0;
    transform: translateY(4px) scale(0.95);
}

.ai-button-circle:hover .label {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes rotate {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

@keyframes wave {
    0% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 50% 0%;
    }
}

@keyframes morph {

    0%,
    36% {
        clip-path: var(--circle);
    }

    40%,
    56% {
        clip-path: var(--flower);
    }

    60%,
    76% {
        clip-path: var(--cylinder);
    }

    80%,
    96% {
        clip-path: var(--hexagon);
    }

    100% {
        clip-path: var(--circle);
    }
}

@keyframes shine {
    from {
        background-position: 150% 0%;
    }

    to {
        background-position: -250% 0%;
    }
}