/* CSS / WoWonder 4.3.4 auth micro-interactions; modern desktop/mobile browsers. */
.forum-auth { --auth-ease: cubic-bezier(.2,.8,.2,1); }

.forum-auth .btn-fb-submit,
.forum-auth .btn-fb-create-acc,
.forum-auth .auth-switch a,
.forum-auth .fb-gender-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
    user-select: none;
    -webkit-user-select: none;
}

.forum-auth .btn-fb-submit:disabled {
    transition: none !important;
}

.forum-auth .fb-input-wrapper input {
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--auth-ease) !important;
}

.forum-auth .fb-input-wrapper input:focus {
    transform: translateY(-1px) scale(1.004);
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 2px 10px rgba(56, 189, 248, 0.12) !important;
}

.forum-auth .fb-field-label {
    transition: color 180ms ease, transform 180ms var(--auth-ease);
    transform-origin: left center;
}

.forum-auth .fb-input-wrapper:focus-within .fb-field-label {
    color: #38bdf8;
    transform: translateX(2px);
}

.forum-auth .fb-gender-radio-mark,
.forum-auth .fb-custom-checkbox {
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--auth-ease) !important;
}

.forum-auth .fb-gender-radio-mark::after {
    transform: scale(.3);
    transition: transform 220ms var(--auth-ease), opacity 160ms ease;
}

.forum-auth .fb-gender-card input:checked + .fb-gender-radio-mark::after {
    transform: scale(1);
}

.forum-auth .fb-terms-box:active .fb-custom-checkbox {
    transform: scale(.88);
}

.forum-auth .fb-checkbox-svg {
    transition: opacity 150ms ease;
}

.forum-auth .fb-checkbox-svg polyline {
    stroke-dasharray: 15;
    stroke-dashoffset: 15;
    transition: stroke-dashoffset 230ms var(--auth-ease);
}

.forum-auth .fb-terms-box input:checked + .fb-custom-checkbox polyline {
    stroke-dashoffset: 0;
}

.forum-auth .fb-form-box :is(.fb-forgot-link-box a,.fb-founder-chip,.fb-terms-text a) {
    transition: color 160ms ease, opacity 160ms ease;
}

.forum-auth .fb-form-box :is(.fb-forgot-link-box a,.fb-founder-chip,.fb-terms-text a):active {
    opacity: .65;
}

/* Tactile Ripple Wave */
.forum-auth .auth-click-ripple {
    position: absolute;
    display: block;
    width: var(--ripple-size);
    height: var(--ripple-size);
    left: var(--ripple-x);
    top: var(--ripple-y);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
    animation: auth-click-wave 520ms var(--auth-ease) forwards;
}

.forum-auth .btn-fb-submit .auth-click-ripple {
    background: rgba(255, 255, 255, 0.45);
}

.forum-auth .btn-fb-create-acc .auth-click-ripple,
.forum-auth .fb-gender-card .auth-click-ripple,
.forum-auth .auth-switch a .auth-click-ripple {
    background: rgba(56, 189, 248, 0.35);
}

@keyframes auth-click-wave {
    0% {
        opacity: .75;
        transform: translate(-50%,-50%) scale(0);
    }
    50% {
        opacity: .35;
    }
    100% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(1);
    }
}

@media (hover: hover) and (pointer: fine) {
    .forum-auth :is(.btn-fb-create-acc,.auth-switch a,.fb-gender-card):hover {
        border-color: rgba(56, 189, 248, 0.45);
        box-shadow: 0 4px 14px rgba(56, 189, 248, 0.12);
    }
    .forum-auth .btn-fb-submit:hover:not(:disabled) {
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
    }
}

/* Native document transitions */
@view-transition { navigation: auto; }
.forum-auth .fb-form-box { view-transition-name: auth-panel; }
.forum-auth .auth-switch a[aria-current] { view-transition-name: auth-active-tab; }
::view-transition-group(auth-panel), ::view-transition-group(auth-active-tab) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
::view-transition-old(auth-panel) { animation: auth-panel-out 120ms ease both; }
::view-transition-new(auth-panel) { animation: auth-panel-in 240ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes auth-panel-out { to { opacity: 0; transform: translateY(-5px); } }
@keyframes auth-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .forum-auth .fb-form-box, .forum-auth .auth-switch a[aria-current] { view-transition-name: none; }
    .forum-auth .auth-click-ripple { display: none; }
    .forum-auth .fb-form-box *, .forum-auth .fb-form-box *::before, .forum-auth .fb-form-box *::after {
        animation: none !important;
        transition: none !important;
    }
    .forum-auth .fb-input-wrapper:focus-within .fb-field-label,
    .forum-auth :is(.btn-fb-submit,.btn-fb-create-acc,.auth-switch a,.fb-gender-card):active {
        transform: none !important;
    }
}