/* Motion for the sign-in / sign-up screen (page and modal).
   Decorative layer (.auth-bg), staged entrance, focus glow, button shine and loading state, error shake.
   Everything stops under prefers-reduced-motion. */

:root {
    --auth-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Living background (auth pages only) ---------- */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.auth-bg__photo {
    position: absolute;
    inset: -4%;
    background:
        linear-gradient(90deg, rgba(6, 15, 25, .88), rgba(6, 15, 25, .5)),
        url("../../img/bg.png") center / cover no-repeat;
    animation: auth-kenburns 28s ease-in-out infinite alternate;
}

.auth-bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: .5;
}

.auth-bg__glow--a {
    top: -12%;
    left: -8%;
    width: 46vmax;
    height: 46vmax;
    background: radial-gradient(circle, #ff6a1a, transparent 68%);
    animation: auth-float-a 18s ease-in-out infinite alternate;
}

.auth-bg__glow--b {
    right: -12%;
    bottom: -18%;
    width: 52vmax;
    height: 52vmax;
    background: radial-gradient(circle, #2f7fd6, transparent 68%);
    animation: auth-float-b 22s ease-in-out infinite alternate;
}

.auth-bg__glow--c {
    top: 38%;
    left: 34%;
    width: 24vmax;
    height: 24vmax;
    opacity: .28;
    background: radial-gradient(circle, #34c27a, transparent 70%);
    animation: auth-float-c 16s ease-in-out infinite alternate;
}

.auth-bg__trail {
    position: absolute;
    bottom: 6%;
    left: 4%;
    width: min(46vw, 560px);
    height: auto;
    opacity: .5;
}

.auth-bg__trail path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-bg__trail-ghost {
    stroke: rgba(255, 255, 255, .22);
    stroke-dasharray: 2 9;
    stroke-width: 2.4;
}

.auth-bg__trail-route {
    stroke: #ff8a4f;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-width: 3.4;
    filter: drop-shadow(0 0 8px rgba(255, 106, 26, .7));
    animation: auth-trail 10s var(--auth-ease) infinite;
}

.auth-bg__trail circle {
    fill: #fff;
    stroke: #ff6a1a;
    stroke-width: 3;
    animation: auth-pin 10s ease-in-out infinite;
}

@keyframes auth-kenburns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

@keyframes auth-float-a {
    to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); }
}

@keyframes auth-float-b {
    to { transform: translate3d(-12vmax, -8vmax, 0) scale(1.1); }
}

@keyframes auth-float-c {
    to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.3); }
}

@keyframes auth-trail {
    0% { stroke-dashoffset: 1; }
    45%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}

@keyframes auth-pin {
    0%, 8% { opacity: 0; transform: scale(.4); }
    16%, 90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

/* ---------- Staged entrance ---------- */
.auth-page .glass-card {
    animation: auth-card-in .75s var(--auth-ease) both;
}

.auth-page .glass-card > *,
.auth-page .glass-card form > * {
    animation: auth-rise .65s var(--auth-ease) both;
}

.auth-page .glass-card > :nth-child(1) { animation-delay: .1s; }
.auth-page .glass-card > :nth-child(2) { animation-delay: .18s; }
.auth-page .glass-card > :nth-child(3) { animation-delay: .26s; }
.auth-page .glass-card > :nth-child(4) { animation-delay: .6s; }
.auth-page .glass-card > :nth-child(5) { animation-delay: .7s; }
.auth-page .glass-card form > :nth-child(1) { animation-delay: .3s; }
.auth-page .glass-card form > :nth-child(2) { animation-delay: .36s; }
.auth-page .glass-card form > :nth-child(3) { animation-delay: .42s; }
.auth-page .glass-card form > :nth-child(4) { animation-delay: .48s; }
.auth-page .glass-card form > :nth-child(5) { animation-delay: .54s; }
.auth-page .glass-card form > :nth-child(6) { animation-delay: .6s; }
.auth-page .glass-card form > :nth-child(n+7) { animation-delay: .66s; }

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(16px); }
}

/* The logo breathes slowly. */
.auth-page .glass-card > .flex:first-child {
    animation: auth-rise .65s var(--auth-ease) .1s both, auth-logo-float 6s ease-in-out .9s infinite;
}

@keyframes auth-logo-float {
    50% { transform: translateY(-4px); }
}

/* ---------- Fields: focus glow and label colour ---------- */
.auth-page .glass-card :where(input:not([type="checkbox"]), select, textarea),
.auth-modal__field input {
    transition: border-color .25s ease, background-color .25s ease, box-shadow .3s ease, transform .3s var(--auth-ease);
}

.auth-page .glass-card :where(input:not([type="checkbox"]), select, textarea):focus,
.auth-modal__field input:focus {
    box-shadow: 0 0 0 4px rgba(255, 106, 26, .16), 0 10px 24px rgba(255, 106, 26, .1);
    transform: translateY(-1px);
}

.auth-page .glass-card form > div:focus-within > label {
    color: #ea580c;
}

.auth-page .glass-card label,
.auth-modal__field span {
    transition: color .25s ease;
}

.auth-modal__field:focus-within span {
    color: #ea580c;
}

/* ---------- Submit button: shine, press, loading ---------- */
.auth-page .glass-card button[type="submit"],
.auth-modal__submit {
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--auth-ease), box-shadow .3s ease, background-color .3s ease, opacity .3s ease;
}

.auth-page .glass-card button[type="submit"]::after,
.auth-modal__submit::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    content: "";
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
    transform: skewX(-20deg);
}

.auth-page .glass-card button[type="submit"]:not(:disabled):hover,
.auth-modal__submit:not(:disabled):hover {
    box-shadow: 0 16px 34px rgba(255, 106, 26, .38);
    transform: translateY(-2px);
}

.auth-page .glass-card button[type="submit"]:not(:disabled):hover::after,
.auth-modal__submit:not(:disabled):hover::after {
    left: 140%;
    transition: left .7s ease;
}

.auth-page .glass-card button[type="submit"]:not(:disabled):active,
.auth-modal__submit:not(:disabled):active {
    transform: scale(.98);
}

.auth-page .glass-card button[type="submit"].is-loading,
.auth-modal__submit.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.auth-page .glass-card button[type="submit"].is-loading::before,
.auth-modal__submit.is-loading::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    content: "";
    animation: auth-spin .7s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Errors ---------- */
.auth-page .glass-card [class*="bg-red-50"],
.auth-modal__alert:not([hidden]) {
    animation: auth-alert .55s var(--auth-ease) both;
}

@keyframes auth-alert {
    0% { opacity: 0; transform: translateY(-8px); }
    35% { transform: translateX(-6px); }
    55% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    100% { opacity: 1; transform: none; }
}

/* ---------- Social buttons, consent, links ---------- */
.auth-social__button {
    transition: transform .25s var(--auth-ease), box-shadow .3s ease, border-color .25s ease;
}

.auth-social__button:hover {
    box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
    transform: translateY(-3px);
}

.auth-social__button img,
.auth-social__yandex {
    transition: transform .35s var(--auth-ease);
}

.auth-social__button:hover img,
.auth-social__button:hover .auth-social__yandex {
    transform: scale(1.15) rotate(-6deg);
}

.auth-consent {
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.auth-consent:has(input[type="checkbox"]:checked) {
    border-color: #ffb27f;
    background: #fff6ee;
    box-shadow: 0 0 0 4px rgba(255, 106, 26, .1);
}

.auth-page .auth-footer a,
.auth-modal__footer button,
.auth-modal__forgot {
    position: relative;
}

.auth-page .auth-footer a::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    content: "";
    background: #ff6a1a;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--auth-ease);
}

.auth-page .auth-footer a:hover::after {
    transform: scaleX(1);
}

/* ---------- Modal ---------- */
.auth-modal.is-open .auth-modal__backdrop {
    animation: auth-fade .35s ease both;
}

.auth-modal.is-open .auth-modal__dialog {
    animation: auth-dialog-in .55s var(--auth-ease) both;
}

@keyframes auth-fade {
    from { opacity: 0; }
}

@keyframes auth-dialog-in {
    from { opacity: 0; transform: translateY(34px) scale(.95); }
}

.auth-modal__form.is-active > * {
    animation: auth-rise .5s var(--auth-ease) both;
}

.auth-modal__form.is-active > :nth-child(1) { animation-delay: .02s; }
.auth-modal__form.is-active > :nth-child(2) { animation-delay: .07s; }
.auth-modal__form.is-active > :nth-child(3) { animation-delay: .12s; }
.auth-modal__form.is-active > :nth-child(4) { animation-delay: .17s; }
.auth-modal__form.is-active > :nth-child(5) { animation-delay: .22s; }
.auth-modal__form.is-active > :nth-child(n+6) { animation-delay: .27s; }

.auth-modal__tab {
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .25s var(--auth-ease);
}

.auth-modal__tab:not(.is-active):hover {
    color: #ea580c;
}

.auth-modal__tab:active {
    transform: scale(.97);
}

.auth-modal__close svg {
    transition: transform .4s var(--auth-ease);
}

.auth-modal__close:hover svg {
    transform: rotate(90deg);
}

.auth-modal__logo {
    position: relative;
}

.auth-modal__logo::after {
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(255, 106, 26, .45);
    border-radius: inherit;
    content: "";
    opacity: 0;
    animation: auth-ring 3.2s ease-out infinite;
}

@keyframes auth-ring {
    0% { opacity: .8; transform: scale(.9); }
    70%, 100% { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg__photo,
    .auth-bg__glow,
    .auth-bg__trail-route,
    .auth-bg__trail circle,
    .auth-page .glass-card,
    .auth-page .glass-card > *,
    .auth-page .glass-card form > *,
    .auth-page .glass-card > .flex:first-child,
    .auth-modal.is-open .auth-modal__backdrop,
    .auth-modal.is-open .auth-modal__dialog,
    .auth-modal__form.is-active > *,
    .auth-modal__logo::after,
    .auth-page .glass-card [class*="bg-red-50"],
    .auth-modal__alert:not([hidden]) {
        animation: none !important;
    }

    .auth-bg__trail-route {
        stroke-dashoffset: 0;
    }
}