/* Login and entry page: short transitions, stable loading layout. */
.login-shell { animation: portal-arrive .35s cubic-bezier(.2,.7,.2,1) both; }
.portal-wrap > :is(.topbar,.hero-emoji,h1,.tagline) { animation: portal-arrive .3s ease-out both; }
@keyframes portal-arrive { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
:is(.btn,.captcha-box,.entry-main) { position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, opacity .18s ease; }
.entry-main { border-radius: 12px; }
.btn:active:not(:disabled),.captcha-box:active { transform: scale(.97); }
.btn:hover { opacity: 1; }
.entry-card { will-change: auto; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .2s ease; animation: portal-arrive .32s ease-out both; }
.entry-card:nth-child(2) { animation-delay: .055s; }
.entry-card:nth-child(3) { animation-delay: .11s; }
.entry-card:hover { transform: none; }
.entry-card:focus-within { border-color: #cc7958; box-shadow: 0 8px 26px #98654820; }
.entry-card .entry-icon { transition: transform .25s ease; }
.entry-go { display: inline-block; transition: transform .2s ease; }
.entry-main:active .entry-go,.entry-main.is-opening .entry-go { transform: translateX(4px); }
.field input { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.field input:focus { box-shadow: 0 0 0 3px #e2704e16; }
:is(button,a,input):focus-visible { outline: 2px solid #cc7958; outline-offset: 3px; }
.portal-press { position: absolute; pointer-events: none; border-radius: 50%; background: currentColor; opacity: 0; animation: portal-wave .48s ease-out; }
@keyframes portal-wave { from { opacity: .13; transform: translate(-50%,-50%) scale(0); } to { opacity: 0; transform: translate(-50%,-50%) scale(1); } }
#loginForm .btn:disabled { cursor: wait; opacity: .65; padding-right: 38px; }
#loginForm .btn[aria-busy="true"]::after { content: ''; position: absolute; right: 14px; top: calc(50% - 7px); width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: portal-spin .7s linear infinite; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
.captcha-box { min-height: 44px; }
.entry-grid { min-height: 224px; }
.entry-grid[aria-busy="true"]::before,.entry-grid[aria-busy="true"]::after { content: ''; min-height: 224px; border-radius: var(--radius); background: linear-gradient(110deg,#f2ece1 20%,#fbf7f0 45%,#f2ece1 70%); background-size: 220% 100%; animation: portal-placeholder 1.5s ease-in-out infinite; }
@keyframes portal-placeholder { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (hover: hover) {
 .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px #98654820; }
 .entry-card:hover { transform: translateY(-3px); border-color: #e7cdb2; }
 .entry-card:hover .entry-icon { transform: translateY(-2px); }
 .entry-card:hover .entry-go { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
 .login-shell,.portal-wrap > :is(.topbar,.hero-emoji,h1,.tagline),.entry-card,.entry-grid[aria-busy="true"]::before,.entry-grid[aria-busy="true"]::after,#loginForm .btn[aria-busy="true"]::after { animation: none; }
 :is(.btn,.captcha-box,.entry-main,.entry-card,.entry-icon,.entry-go,.field input) { transition: none; }
 .entry-card:hover,.btn:hover,.btn:active:not(:disabled),.captcha-box:active,.entry-card:hover .entry-icon,.entry-card:hover .entry-go,.entry-main:active .entry-go,.entry-main.is-opening .entry-go { transform: none; }
}

/* Keep links and native buttons on the same baseline, including touch layouts. */
.portal-wrap .topbar > span:last-child { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.portal-wrap .topbar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; line-height: 1.25; white-space: nowrap; box-sizing: border-box; flex-shrink: 0; }
@media (max-width: 560px) { .portal-wrap .topbar > span:last-child { width: 100%; justify-content: flex-start; } }

@media (pointer: coarse) { .portal-wrap .topbar .btn { min-height: 44px; } }