:root {
    --mre-button-size: 4.5rem;
    --mre-option-2-size: 4.25rem;
    --mre-button-offset: 1.5rem;
    --mre-button-safe-bottom: calc(var(--mre-button-offset) + env(safe-area-inset-bottom));
    --mre-viewport-lift: 0px;
}

@property --mre-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.mre-floating-button {
    position: fixed;
    right: var(--mre-button-offset);
    bottom: calc(var(--mre-button-safe-bottom) + var(--mre-viewport-lift));
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mre-button-size);
    min-width: 2.75rem;
    height: var(--mre-button-size);
    min-height: 2.75rem;
    color: #39ece8;
    text-decoration: none;
    background:
        radial-gradient(circle at 32% 22%, rgba(232, 255, 254, 0.24), rgba(98, 255, 251, 0.12) 11%, rgba(98, 255, 251, 0) 28%),
        radial-gradient(circle at 50% 42%, rgba(37, 237, 231, 0.2), rgba(7, 27, 30, 0.34) 43%, rgba(3, 11, 14, 0.98) 78%),
        linear-gradient(145deg, #123b3f 0%, #061a1e 44%, #02080a 100%);
    border: 1px solid rgba(104, 255, 251, 0.48);
    border-radius: 50%;
    box-shadow:
        inset 0 0.12rem 0.22rem rgba(255, 255, 255, 0.22),
        inset -0.28rem -0.58rem 1rem rgba(0, 0, 0, 0.62),
        inset 0.18rem 0.22rem 0.62rem rgba(96, 255, 250, 0.12),
        0 0.95rem 1.75rem rgba(0, 0, 0, 0.34),
        0 0 1.25rem rgba(36, 216, 213, 0.22);
    isolation: isolate;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.mre-floating-button:not(.mre-floating-button--option-2) {
    display: none;
}

.mre-floating-button::before {
    --mre-orbit-angle: 0deg;
    position: absolute;
    inset: -1px;
    z-index: 0;
    padding: 2px;
    content: "";
    pointer-events: none;
    background: conic-gradient(from var(--mre-orbit-angle), rgba(57, 236, 232, 0) 0deg, rgba(57, 236, 232, 0) 258deg, rgba(57, 236, 232, 0.14) 292deg, rgba(57, 236, 232, 0.62) 326deg, #ffffff 348deg, rgba(57, 236, 232, 0.78) 360deg);
    border-radius: inherit;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    animation: mre-circle-comet 5s linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.mre-floating-button:hover,
.mre-floating-button:focus-visible {
    color: #71fffb;
    border-color: rgba(100, 255, 250, 0.76);
    box-shadow:
        inset 0 0.14rem 0.26rem rgba(255, 255, 255, 0.28),
        inset -0.26rem -0.52rem 0.9rem rgba(0, 0, 0, 0.58),
        inset 0.2rem 0.24rem 0.72rem rgba(108, 255, 251, 0.16),
        0 1.1rem 2rem rgba(0, 0, 0, 0.38),
        0 0 1.55rem rgba(44, 231, 225, 0.34);
    transform: translateY(-0.12rem) scale(1.015);
}

.mre-floating-button:hover::before,
.mre-floating-button:focus-visible::before {
    opacity: 1;
}

.mre-floating-button:focus-visible {
    outline: 0.15rem solid #bffdfa;
    outline-offset: 0.25rem;
}

.mre-floating-button:active {
    box-shadow:
        inset 0 0.08rem 0.18rem rgba(255, 255, 255, 0.16),
        inset -0.16rem -0.34rem 0.68rem rgba(0, 0, 0, 0.68),
        inset 0.1rem 0.14rem 0.5rem rgba(96, 255, 250, 0.1),
        0 0.6rem 1.1rem rgba(0, 0, 0, 0.32),
        0 0 1rem rgba(36, 216, 213, 0.18);
    transform: translateY(0.14rem) scale(0.985);
}

.mre-floating-button--option-2 {
    top: 50%;
    right: var(--mre-button-offset);
    bottom: auto;
    width: var(--mre-option-2-size);
    height: var(--mre-option-2-size);
    background: none;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateY(-50%);
}

.mre-floating-button--option-2.is-on-light-background {
    background:
        radial-gradient(circle at 32% 22%, rgba(232, 255, 254, 0.2), rgba(98, 255, 251, 0.1) 12%, rgba(98, 255, 251, 0) 30%),
        radial-gradient(circle at 50% 42%, rgba(37, 237, 231, 0.18), rgba(7, 27, 30, 0.34) 43%, rgba(3, 11, 14, 0.96) 78%),
        linear-gradient(145deg, #123b3f 0%, #061a1e 44%, #02080a 100%);
    border-color: rgba(104, 255, 251, 0.48);
    box-shadow:
        inset 0 0.12rem 0.2rem rgba(255, 255, 255, 0.18),
        inset -0.24rem -0.5rem 0.9rem rgba(0, 0, 0, 0.58),
        inset 0.16rem 0.2rem 0.56rem rgba(96, 255, 250, 0.1),
        0 0.75rem 1.45rem rgba(0, 0, 0, 0.26),
        0 0 1rem rgba(36, 216, 213, 0.2);
}

.mre-floating-button--option-2::before {
    inset: -0.18rem;
    padding: 0.16rem;
    background: conic-gradient(from var(--mre-orbit-angle), rgba(57, 236, 232, 0) 0deg, rgba(57, 236, 232, 0) 232deg, rgba(57, 236, 232, 0.12) 274deg, rgba(57, 236, 232, 0.58) 320deg, #ffffff 348deg, rgba(57, 236, 232, 0.9) 360deg);
    filter: drop-shadow(0 0 0.45rem rgba(57, 236, 232, 0.42));
    opacity: 1;
}

.mre-floating-button--option-2:hover,
.mre-floating-button--option-2:focus-visible {
    background: none;
    border-color: transparent;
    box-shadow: none;
    transform: translateY(calc(-50% - 0.12rem)) scale(1.015);
}

.mre-floating-button--option-2.is-on-light-background:hover,
.mre-floating-button--option-2.is-on-light-background:focus-visible {
    background:
        radial-gradient(circle at 32% 22%, rgba(232, 255, 254, 0.24), rgba(98, 255, 251, 0.12) 12%, rgba(98, 255, 251, 0) 30%),
        radial-gradient(circle at 50% 42%, rgba(37, 237, 231, 0.22), rgba(7, 27, 30, 0.36) 43%, rgba(3, 11, 14, 0.98) 78%),
        linear-gradient(145deg, #123b3f 0%, #061a1e 44%, #02080a 100%);
    border-color: rgba(140, 255, 252, 0.6);
    box-shadow:
        inset 0 0.14rem 0.24rem rgba(255, 255, 255, 0.22),
        inset -0.22rem -0.46rem 0.82rem rgba(0, 0, 0, 0.56),
        inset 0.18rem 0.22rem 0.62rem rgba(108, 255, 251, 0.14),
        0 0.9rem 1.65rem rgba(0, 0, 0, 0.3),
        0 0 1.35rem rgba(44, 231, 225, 0.3);
}

.mre-floating-button--option-2:active {
    box-shadow: none;
    transform: translateY(calc(-50% + 0.14rem)) scale(0.985);
}

.mre-floating-button--option-2.is-on-light-background:active {
    box-shadow:
        inset 0 0.08rem 0.16rem rgba(255, 255, 255, 0.14),
        inset -0.14rem -0.3rem 0.62rem rgba(0, 0, 0, 0.64),
        0 0.5rem 1rem rgba(0, 0, 0, 0.26),
        0 0 0.85rem rgba(36, 216, 213, 0.18);
}


.mre-floating-button--option-2 .mre-floating-icon {
    width: 78%;
    height: 78%;
    filter:
        drop-shadow(0 0 0.22rem rgba(218, 255, 255, 0.62))
        drop-shadow(0 0 0.65rem rgba(57, 236, 232, 0.48));
}

.mre-floating-button--option-2 .mre-official-halo {
    opacity: 0.22;
}

.mre-floating-button--option-2 .mre-infinity-shimmer,
.mre-floating-button--option-2 .mre-comet-trail,
.mre-floating-button--option-2 .mre-comet-core,
.mre-floating-button--option-2 .mre-comet-head {
    opacity: 0;
    animation: none;
}

.mre-floating-button--option-2:hover .mre-infinity-shimmer,
.mre-floating-button--option-2:focus-visible .mre-infinity-shimmer {
    opacity: 0.42;
    animation: mre-comet-path 1.35s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}

.mre-floating-button--option-2:hover .mre-comet-trail,
.mre-floating-button--option-2:focus-visible .mre-comet-trail {
    opacity: 0.78;
    animation: mre-comet-path 1.35s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}

.mre-floating-button--option-2:hover .mre-comet-core,
.mre-floating-button--option-2:focus-visible .mre-comet-core {
    opacity: 0.9;
    animation: mre-comet-path 1.35s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}

.mre-floating-button--option-2:hover .mre-comet-head,
.mre-floating-button--option-2:focus-visible .mre-comet-head {
    opacity: 1;
    animation: mre-comet-path 1.35s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}

.mre-floating-button::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.05;
    color: #e9ffff;
    text-align: center;
    content: "MRE AI";
    opacity: 0;
    transform: rotateY(180deg);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
    backface-visibility: hidden;
}

.mre-floating-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 82%;
    height: 82%;
    overflow: visible;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
    backface-visibility: hidden;
}

.mre-floating-button:hover .mre-floating-icon,
.mre-floating-button:focus-visible .mre-floating-icon {
    opacity: 0;
    transform: rotateY(-180deg);
}

.mre-floating-button:hover::after,
.mre-floating-button:focus-visible::after {
    opacity: 1;
    transform: rotateY(0deg);
}

.mre-floating-button--option-2::after,
.mre-floating-button--option-2:hover::after,
.mre-floating-button--option-2:focus-visible::after {
    position: absolute;
    top: calc(100% + 0.38rem);
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.45rem;
    min-height: 2.15rem;
    padding: 0.48rem 0.72rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: #eaffff;
    white-space: nowrap;
    content: "MREai";
    background: rgba(2, 17, 20, 0.78);
    border: 1px solid rgba(98, 255, 251, 0.34);
    border-radius: 999px;
    box-shadow:
        0 0.55rem 1.35rem rgba(0, 0, 0, 0.28),
        0 0 0.85rem rgba(57, 236, 232, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.35rem) scale(0.96);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    backface-visibility: visible;
}

.mre-floating-button--option-2:hover .mre-floating-icon,
.mre-floating-button--option-2:focus-visible .mre-floating-icon {
    opacity: 1;
    transform: scale(1.04);
}

.mre-floating-button--option-2:hover::after,
.mre-floating-button--option-2:focus-visible::after {
    opacity: 1;
    border-color: rgba(188, 255, 253, 0.34);
    box-shadow: 0 0 0.85rem rgba(57, 236, 232, 0.2);
    transform: translateY(0) scale(1);
}

.mre-infinity-shimmer,
.mre-comet-trail,
.mre-comet-core,
.mre-comet-head {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mre-official-halo {
    opacity: 0.34;
}

.mre-official-infinity {
    opacity: 0.96;
}

.mre-infinity-shimmer {
    stroke: rgba(218, 255, 255, 0.38);
    stroke-width: 13;
    stroke-dasharray: 20 80;
    stroke-dashoffset: 0;
    opacity: 0.3;
    animation: mre-comet-path 5.8s linear infinite;
}

.mre-comet-trail {
    stroke: rgba(48, 237, 232, 0.54);
    stroke-width: 19;
    stroke-dasharray: 26 74;
    stroke-dashoffset: 0;
    opacity: 0.68;
    filter: blur(0.2px) drop-shadow(0 0 3px rgba(57, 236, 232, 0.52)) drop-shadow(0 0 7px rgba(57, 236, 232, 0.36));
    animation: mre-comet-path 5.8s linear infinite;
}

.mre-comet-core {
    stroke: rgba(178, 255, 252, 0.88);
    stroke-width: 10.5;
    stroke-dasharray: 12 88;
    stroke-dashoffset: 0;
    opacity: 0.84;
    filter: drop-shadow(0 0 3px rgba(122, 255, 252, 0.62));
    animation: mre-comet-path 5.8s linear infinite;
}

.mre-comet-head {
    stroke: #fff;
    stroke-width: 15;
    stroke-dasharray: 1.6 98.4;
    stroke-dashoffset: 0;
    opacity: 0.96;
    filter: blur(0.25px) drop-shadow(0 0 3px rgba(255, 255, 255, 0.92)) drop-shadow(0 0 8px rgba(57, 236, 232, 0.76));
    animation: mre-comet-path 5.8s linear infinite;
}

.mre-floating-button.is-enhanced-pass .mre-infinity-shimmer {
    opacity: 0.38;
}

.mre-floating-button.is-enhanced-pass .mre-comet-trail,
.mre-floating-button.is-enhanced-pass .mre-comet-core,
.mre-floating-button.is-enhanced-pass .mre-comet-head {
    opacity: 1;
}

.btn-scroll-top {
    right: var(--mre-button-offset);
    bottom: calc(var(--mre-button-safe-bottom) + var(--mre-viewport-lift) + var(--mre-button-size) + 0.75rem);
}

@keyframes mre-comet-path {
    to {
        stroke-dashoffset: 100;
    }
}

@keyframes mre-circle-comet {
    to {
        --mre-orbit-angle: 360deg;
    }
}

@media (max-width: 575.98px) {
    :root {
        --mre-button-size: 3.75rem;
        --mre-option-2-size: 3.75rem;
        --mre-button-offset: 1rem;
    }

    .btn-scroll-top {
        bottom: calc(var(--mre-button-safe-bottom) + var(--mre-viewport-lift) + var(--mre-button-size) + 0.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mre-floating-button,
    .mre-floating-button::before,
    .mre-floating-button::after,
    .mre-floating-icon {
        transition: none;
    }

    .mre-floating-button::before {
        --mre-orbit-angle: 330deg;
        animation: none;
    }

    .mre-floating-button:hover,
    .mre-floating-button:focus-visible,
    .mre-floating-button:active {
        transform: none;
    }

    .mre-floating-button--option-2,
    .mre-floating-button--option-2:hover,
    .mre-floating-button--option-2:focus-visible,
    .mre-floating-button--option-2:active {
        transform: translateY(-50%);
    }

    .mre-floating-button--option-2:hover .mre-floating-icon,
    .mre-floating-button--option-2:focus-visible .mre-floating-icon {
        transform: none;
    }

    .mre-floating-button--option-2::after {
        transform: translateY(0) scale(1);
    }

    .mre-floating-button--option-2:hover .mre-infinity-shimmer,
    .mre-floating-button--option-2:focus-visible .mre-infinity-shimmer,
    .mre-floating-button--option-2:hover .mre-comet-trail,
    .mre-floating-button--option-2:focus-visible .mre-comet-trail,
    .mre-floating-button--option-2:hover .mre-comet-core,
    .mre-floating-button--option-2:focus-visible .mre-comet-core,
    .mre-floating-button--option-2:hover .mre-comet-head,
    .mre-floating-button--option-2:focus-visible .mre-comet-head {
        animation: none;
    }

    .mre-infinity-shimmer,
    .mre-comet-trail,
    .mre-comet-core,
    .mre-comet-head {
        animation: none;
    }

    .mre-infinity-shimmer {
        opacity: 0;
    }

    .mre-comet-trail {
        stroke-dasharray: 18 82;
        stroke-dashoffset: 62;
        opacity: 0.42;
    }

    .mre-comet-core {
        stroke-dasharray: 9 91;
        stroke-dashoffset: 62;
        opacity: 0.58;
    }

    .mre-comet-head {
        stroke-dasharray: 1.25 98.75;
        stroke-dashoffset: 62;
        opacity: 0.9;
    }
}