@property --glint {
    syntax: "<angle>";
    initial-value: 30deg;
    inherits: false;
}

.service-btn {
    --radius: 50%;

    --shine1-x: 22%;
    --shine1-y: 16%;
    --shine2-x: 86%;
    --shine2-y: 86%;

    width: 95px;
    height: 95px;
    border-radius: var(--radius);

    position: relative;
    border: none;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;

    background: rgb(156 156 156 / 30%);
    -webkit-backdrop-filter: blur(2px) saturate(125%);
    backdrop-filter: blur(2px) saturate(125%);

    border: 1px solid rgba(255, 255, 255, 0.24);

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition:
        transform 0.18s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

/* ===== Inner glass frame ===== */
/* Curved glint that orbits ON the rim */
.service-btn::after {
    --glint-rot: -55deg;

    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 255deg,
        rgba(255, 255, 255, 0.15) 275deg,
        rgba(255, 255, 255, 0.85) 292deg,
        rgba(255, 255, 255, 0.18) 310deg,
        transparent 330deg,
        transparent 360deg
    );

    padding: 1.5px;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.55;
    animation: rimGlint 4.8s linear infinite;
}

/* ===== Border ring ===== */
/* Rim base (soft bevel ring) */
.service-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;

    border: 1px solid rgba(255, 255, 255, 0.32);

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.34),
        inset -1px -1px 1px rgba(255, 255, 255, 0.08);

    opacity: 0.65;
}

/* flat inner layer */
.service-text {
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    overflow: hidden;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    background: rgba(255, 255, 255, 0.035);
}

#call_captain_btn {
    --tint-x: 22%;
    --tint-y: 58%;
}

#order_bill_btn {
    --tint-x: 60%;
    --tint-y: 90%;
}

#ice_btn {
    --tint-x: 20%;
    --tint-y: 36%;
}

#cleaning_btn {
    --tint-x: 80%;
    --tint-y: 25%;
}

#napkin_btn {
    --tint-x: 20%;
    --tint-y: 85%;
}
/* ===== Corner shines (still there, but refined) ===== */
.service-text::before,
.service-text::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* top-left */
.service-text::before {
    background: linear-gradient(135deg, transparent 22%, rgba(255, 255, 255, 0.18) 42%, transparent 62%);

    opacity: 0.18;
}

/* bottom-right */
.service-text::after {
    background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.32), transparent 32%);

    opacity: 0.12;
}

/* ===== Label ===== */
.service-label {
    position: relative;
    z-index: 6;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(12, 28, 32, 0.82);
    text-align: center;
}

/* ===== Press (native) ===== */
.service-btn:active {
    transform: scale(0.97);
    --angle: 30deg;
}

/* ===== Active: flip corner shine (opposite) ===== */
/* .service-btn.is-active .service-text::before {
    background: radial-gradient(
        circle at 86% 86%,
        rgba(255, 255, 255, 0.85),
        rgba(255, 255, 255, 0.22) 38%,
        rgba(255, 255, 255, 0) 65%
    );

    opacity: 0.88;
}
.service-btn.is-active .service-text::after {
    background: radial-gradient(
        circle at 18% 18%,
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.14) 35%,
        rgba(255, 255, 255, 0) 62%
    );

    opacity: 0.3;
} */

/* ===== Active glow (subtle) ===== */
.service-btn.is-active {
    --shine1-x: 84%;
    --shine1-y: 84%;
    --shine2-x: 18%;
    --shine2-y: 18%;

    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.service-btn.is-active .service-label {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
/* 
.service-btn.is-active .service-text::before {
    background:
        radial-gradient(
            circle at 82% 82%,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.2) 34%,
            rgba(255, 255, 255, 0) 60%
        ),
        linear-gradient(135deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0) 60%);

    opacity: 0.72;
    filter: blur(0.3px);
} */

/* .service-btn.is-active .service-text::after {
    background: radial-gradient(
        circle at 18% 18%,
        rgba(255, 255, 255, 0.42),
        rgba(255, 255, 255, 0.1) 32%,
        rgba(255, 255, 255, 0) 58%
    );

    opacity: 0.22;
    filter: blur(0.55px);
} */

/* .service-btn.is-active .service-label {
    position: relative;
    z-index: 5;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
} */
/* ===== Animate rim glint around ==== */

/* Smooth, constant rotation */
/* @keyframes rimSpin {
    to {
        transform: rotate(360deg);
    }
} */

@keyframes rimSpin {
    0% {
        transform: rotate(0deg);
    }
    18% {
        transform: rotate(70deg);
    } /* faster (side) */
    42% {
        transform: rotate(140deg);
    } /* slower (top zone) */
    58% {
        transform: rotate(175deg);
    } /* subtle linger feeling */
    76% {
        transform: rotate(260deg);
    } /* faster (side) */
    100% {
        transform: rotate(360deg);
    }
}

/* “Pause” effect via opacity only (no transform jerks) */
@keyframes glintPulse {
    0%,
    18% {
        opacity: 0;
    }
    22%,
    34% {
        opacity: 0.95;
    } /* linger */
    40%,
    70% {
        opacity: 0;
    } /* rest */
    74%,
    86% {
        opacity: 0.9;
    } /* second linger */
    92%,
    100% {
        opacity: 0;
    }
}
.service-btn.is-liquid::after {
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0) 0deg,
        rgba(255, 255, 255, 0) 250deg,
        rgba(255, 255, 255, 0.82) 278deg,
        rgba(255, 255, 255, 0.38) 295deg,
        rgba(255, 255, 255, 0) 320deg,
        rgba(255, 255, 255, 0) 360deg
    );

    padding: 2px;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation:
        rimSpin 4s linear infinite,
        glintPulse 4.5s ease-in-out infinite;
}

@keyframes rimLoading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* active: spin only */
.service-btn.is-active.is-liquid::after {
    inset: -1px;
    padding: 2px;
    opacity: 0.88;
    box-shadow: none;

    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0) 0deg 300deg,
        rgba(255, 255, 255, 0.14) 312deg,
        rgba(255, 255, 255, 0.96) 332deg,
        rgba(255, 255, 255, 0.34) 348deg,
        rgba(255, 255, 255, 0) 360deg
    );

    /* cut the center so only the rim is visible */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    mix-blend-mode: screen;
    animation: rimLoading 1.6s linear infinite;
    filter: blur(0.2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .service-btn.is-liquid::after {
        animation: none;
        opacity: 0.55;
    }
}

/* Optional: slow it down on low motion prefs */
@media (prefers-reduced-motion: reduce) {
    .service-btn.is-liquid .service-text::before {
        animation: none;
        opacity: 0.25; /* keep a static sparkle */
    }
}