/*
 * My Account button (Views/Shared/_Header.cshtml).
 *
 * The header used to show the signed-in email, which read as a label rather than something to
 * click. This is a button instead, and it is deliberately the loudest thing in the header: a soft
 * pulsing halo and a slow shine, so a participant notices where their own submissions live.
 *
 * The halo is drawn with box-shadow and the shine with a pseudo-element, so neither affects layout
 * and nothing around the button moves while they animate.
 */

.account-cta {
    position: relative;
    overflow: hidden;
    border: 0;
    background: linear-gradient(135deg, var(--base-color, #18bcc7), #0f9aa6);
    color: #fff !important;
    animation: account-cta-halo 2.6s ease-in-out infinite;
}

.account-cta:hover,
.account-cta:focus-visible {
    color: #fff !important;
    /* Steady while it is being used; the halo is there to attract, not to nag. */
    animation-play-state: paused;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.account-cta .feather {
    /* The theme's left-icon spacing assumes an icon font; keep it optically centred. */
    vertical-align: middle;
}

/* An expanding ring that fades out, rather than a hard flashing border. */
@keyframes account-cta-halo {
    0% {
        box-shadow: 0 0 0 0 rgba(24, 188, 199, 0.55), 0 4px 14px rgba(0, 0, 0, 0.12);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(24, 188, 199, 0), 0 4px 14px rgba(0, 0, 0, 0.12);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(24, 188, 199, 0), 0 4px 14px rgba(0, 0, 0, 0.12);
    }
}

/* A highlight that sweeps across every few seconds, so the button catches the eye in passing. */
.account-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: account-cta-shine 3.6s ease-in-out infinite;
}

@keyframes account-cta-shine {
    0%, 60% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

/* The button still has to read as a button without any of the movement. */
@media (prefers-reduced-motion: reduce) {
    .account-cta {
        animation: none;
        box-shadow: 0 0 0 3px rgba(24, 188, 199, 0.3), 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .account-cta::after {
        display: none;
    }
}