/* One focus and feedback contract for all frontend pages and shared chrome. */
body {
    --ui-focus-color: #d78523;
    --ui-focus-width: 3px;
    --ui-focus-offset: 2px;
    --touch-spring: cubic-bezier(.2,.85,.25,1.2);
    --touch-ease: cubic-bezier(.2,.8,.2,1);
    --chrome-sheen-cycle: 16s;
}
body:is([data-member-page], .auth-page, .customer) :focus-visible {
    outline: var(--ui-focus-width) solid var(--ui-focus-color) !important;
    outline-offset: var(--ui-focus-offset) !important;
}
.home-carousel-toggle, .member-banner-pagination .swiper-pagination-bullet {
    --ui-focus-color: #fff; --ui-focus-width: 2px; --ui-focus-offset: -4px;
}
body:is([data-member-page], .customer) :is(.im-image-viewer, .im-shared-viewer) {
    --ui-focus-color: #bff1d8; --ui-focus-width: 2px;
}
.home-feedback-layer {
    position: absolute; inset: 0; z-index: 6; overflow: hidden;
    border-radius: inherit; pointer-events: none;
}
.home-feedback-layer .home-click-wave {
    position: absolute; left: var(--wave-x); top: var(--wave-y);
    width: var(--wave-size); height: var(--wave-size); margin: 0;
    border-radius: 50%; background: #83d8a940; pointer-events: none;
    animation: home-touch-wave .6s ease-out forwards;
}
/* Header owns all its states here, independent of homepage/member decorators. */
body .ui-header {
    --header-spring: var(--touch-spring);
    --header-ease: var(--touch-ease);
}
body .ui-header .header-motion-control, body .shell-motion-control {
    position: relative; overflow: hidden; touch-action: manipulation;
}
body .ui-header .header-motion-control > svg, body .shell-motion-control > svg { transform-origin: center; }
body .ui-account-drawer .ui-drawer-heading { position: relative; overflow: hidden; }
body .ui-account-drawer .ui-drawer-heading > * { position: relative; z-index: 1; }
body :is(.ui-shell-header, .customer header.ui-header, .ui-drawer-heading)::before {
    content: ""; position: absolute; width: 180px; height: 180px; top: -120px; right: 5%; pointer-events: none;
    border: 1px solid #d1ffe52a; border-radius: 38%;
    background: radial-gradient(circle, #a3efc928, transparent 68%);
}
/* A short visible sweep, followed by a long quiet interval. */
body :is(.ui-shell-header, .customer header.ui-header, .ui-drawer-heading)::after {
    content: ""; position: absolute; inset: -60% -50%; pointer-events: none;
    background: linear-gradient(110deg, transparent 43%, #dcffe938 50%, transparent 57%);
    opacity: 0; transform: translateX(-60%);
}
body .ui-account-drawer :is(.ui-drawer-identity, .ui-drawer-balances) { position: relative; overflow: hidden; }
body .ui-account-drawer .ui-drawer-balances::before {
    content: ""; position: absolute; width: 64px; height: 64px; right: 12px; top: 12px;
    border: 1px solid #12654820; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #8ecfaa20, transparent 65%);
}
body .ui-shell-footer .footer_item::after {
    content: ""; position: absolute; bottom: 2px; width: 18px; height: 2px;
    border-radius: 2px; background: currentColor; opacity: 0; pointer-events: none;
}
body .ui-shell-footer .footer_item:is(.is-active, [aria-expanded="true"])::after { opacity: .65; }
@media (prefers-reduced-motion: no-preference) {
    body :is(.ui-shell-header, .customer header.ui-header, .ui-drawer-heading)::before {
        animation: ui-background-orbit 10s ease-in-out -3s infinite alternate;
    }
    body :is(.ui-shell-header, .customer header.ui-header, .ui-drawer-heading)::after {
        animation: ui-chrome-sheen var(--chrome-sheen-cycle) linear infinite;
    }
    body .ui-account-drawer .ui-drawer-balances::before {
        animation: ui-background-float 9s ease-in-out var(--ui-ambient-phase, 0s) infinite;
    }
    body .shell-copy-motion {
        animation: ui-copy-drift 7.2s var(--touch-ease) var(--ui-ambient-phase, 0s) infinite;
    }
    body .shell-icon-motion {
        animation: ui-icon-breathe 6.4s var(--touch-ease) var(--ui-ambient-phase, 0s) infinite;
    }
    body .ui-shell-footer .footer_item:is(.is-active, [aria-expanded="true"])::after {
        animation: home-copy-arrive 260ms var(--touch-ease);
    }
    /* Homepage controls reuse the same press timing as the shared navigation. */
    [data-home-page] :is(.home-service, .member-shortcuts button, .member-cta, .home-task-action, .member-vip, .home-carousel-toggle, .home-motion-control) {
        transition: transform .24s var(--touch-spring), border-color .2s, box-shadow .2s, background-color .2s;
    }
    [data-home-page] :is(.home-service, .member-shortcuts button, .home-task-action, .member-vip, .home-carousel-toggle):active,
    [data-home-page] .home-motion-control.home-motion-pressed:not(.home-linked-region) {
        transform: scale(.97); transition-duration: 100ms;
    }
    [data-home-page] .home-linked-region.home-motion-pressed { transform: none; }
    [data-home-page] .home-linked-region.home-motion-pressed .home-region-link { transform: scale(.97); transition-duration: 100ms; }
    body .ui-header .header-motion-control:not(:disabled), body .shell-motion-control:not(:disabled) {
        transition: transform .24s var(--touch-spring), border-color .2s, box-shadow .2s, background-color .2s;
    }
    body .ui-header .header-motion-control.touch-pressed:not(:disabled), body .shell-motion-control.touch-pressed:not(:disabled) {
        transform: scale(.97); filter: none; transition-duration: 100ms;
    }
    body .ui-header .header-motion-control:not(:disabled):not([aria-disabled="true"]) > svg {
        animation: ui-icon-breathe 6.4s var(--header-spring) calc(var(--header-phase, 0s) * -1) infinite;
    }
    body .ui-header .header-motion-control:last-child:not(:disabled):not([aria-disabled="true"]) > svg {
        animation-delay: -1.8s;
    }
    body .ui-account-drawer :is(.ui-drawer-identity, .ui-drawer-balances, .ui-drawer-group) { animation: home-copy-arrive .45s var(--touch-ease) backwards; }
    body .ui-account-drawer .ui-drawer-balances { animation-delay: 35ms; }
    body .ui-account-drawer .ui-drawer-group { animation-delay: 70ms; }
    body .ui-header .header-motion-control.home-motion-clicked > svg,
    body .shell-motion-control.home-motion-clicked:not(.ui-drawer-link):not(.shell-motion-close):not(summary) > svg,
    body :is(.ui-header .header-motion-control, .ui-footer .footer_item, .home-service, [data-member-page] .ui-icon-button:not(.shell-motion-close)):focus-visible > svg {
        animation: home-click-icon .45s var(--touch-spring) !important;
    }
    body .ui-account-drawer .ui-drawer-link > svg,
    body .ui-account-drawer .ui-link-label,
    body .shell-motion-close > svg { transition: transform .22s var(--touch-spring); }
    body .ui-account-drawer .ui-drawer-link:is(:hover, :focus-visible, .touch-pressed) > svg { transform: translateX(3px) rotate(-6deg); }
    body .ui-account-drawer .ui-drawer-link.touch-pressed > .ui-link-label { transform: translateX(3px); }
    body .shell-motion-close:is(:hover, :focus-visible, .touch-pressed) > svg { transform: rotate(90deg); }
    body .shell-motion-close > svg { animation: none !important; }
    body .ui-account-drawer .ui-drawer-group summary.touch-pressed { background: #1265480b; }
    body .ui-account-drawer .ui-drawer-group[open] > .ui-drawer-link {
        animation: home-copy-arrive .35s var(--touch-ease) var(--shell-entry-delay, 0ms) backwards;
    }
    body .ui-shell-footer .footer_item > svg,
    body .ui-account-drawer .ui-drawer-actions .shell-motion-control > svg {
        animation: ui-icon-breathe 6.4s var(--touch-spring) calc(var(--shell-phase, 0s) * -1) infinite;
    }
    body .ui-shell-footer .footer_item.is-active > svg { --ui-icon-y: -4px; }
}
body:is(.suite-paused, .home-inactive) .ui-header *,
body:is(.suite-paused, .home-inactive) .ui-header *::before { animation-play-state: paused !important; }
body.touch-motion-paused :is(.ui-header, .shell-motion-control) *,
body.touch-motion-paused .shell-motion-control,
body.touch-motion-paused :is(.ui-header, .ui-drawer-heading)::before,
body:is(.suite-paused, .home-inactive) :is(.ui-header, .ui-drawer-heading)::before,
body .ui-account-backdrop[hidden] *, body .ui-account-backdrop[hidden] *::before,
body .ui-wallet-dialog.none *, body .ui-wallet-dialog.none *::before { animation-play-state: paused !important; }
body.touch-motion-paused :is(.shell-copy-motion, .shell-icon-motion),
body.touch-motion-paused .shell-surface-motion::before,
body .touch-sleep:is(.shell-copy-motion, .shell-icon-motion),
body .shell-surface-motion.touch-sleep::before { animation-play-state: paused !important; }
body:is(.touch-motion-paused, .suite-paused, .home-inactive) :is(.ui-header, .ui-drawer-heading)::after,
body .ui-account-backdrop[hidden] .ui-drawer-heading::after,
body .ui-drawer-heading.touch-sleep::after { animation-play-state: paused !important; }
@keyframes ui-chrome-sheen {
    0% { opacity: 0; transform: translateX(-60%); }
    3%, 8% { opacity: 1; }
    13%, 100% { opacity: 0; transform: translateX(60%); }
}
@keyframes ui-copy-drift {
    0%, 65%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(0, var(--ui-copy-y, -2px), 0); }
    45% { transform: translate3d(0, 1px, 0); }
}
@keyframes ui-icon-breathe {
    0%, 65%, 100% { transform: none; }
    25% { transform: translate3d(var(--ui-icon-x, 0px), var(--ui-icon-y, -3px), 0) rotate(var(--ui-icon-angle, -5deg)) scale(1.06); }
    45% { transform: rotate(3deg); }
}
@keyframes home-nav-bob { 0%, 12%, 100% { transform: none; } 4% { transform: translateY(-4px) scale(1.08); } 8% { transform: translateY(1px); } }
@keyframes home-idle-orbit { 0%, 12%, 100% { transform: none; } 4% { transform: rotate(-9deg) scale(1.08); } 8% { transform: rotate(5deg); } }
@keyframes home-message-pop { 0%, 12%, 100% { transform: none; } 4% { transform: translateY(-3px) scale(1.14); } 8% { transform: scale(.96); } }
@keyframes ui-icon-guide { 0%, 12%, 100% { transform: none; } 4% { transform: translateX(4px) rotate(-5deg); } 8% { transform: translateX(-1px); } }
@keyframes ui-icon-nod { 0%, 12%, 100% { transform: none; } 4% { transform: rotate(-10deg) scale(1.08); } 8% { transform: rotate(5deg); } }
/* Small geometry shares compositor-friendly background motion across all pages. */
@keyframes ui-background-orbit { to { transform: translate3d(24px, -20px, 0) rotate(30deg); } }
@keyframes ui-background-float { 50% { transform: translate3d(12px, -24px, 0) rotate(25deg); } }
@keyframes home-copy-arrive { from { transform: translateY(5px); } to { transform: none; } }
@keyframes home-click-icon { 40% { transform: scale(1.18) rotate(-8deg); } 75% { transform: scale(.97); } }
@keyframes home-touch-wave {
    from { transform: translate(-50%, -50%) scale(0); opacity: .65; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body :is(.ui-shell-header, .customer header.ui-header, .ui-drawer-heading)::before { display: none; }
    body :is(.ui-shell-header, .customer header.ui-header, .ui-drawer-heading)::after { display: none; animation: none !important; }
    body :is(.shell-copy-motion, .shell-icon-motion) { animation: none !important; transform: none !important; }
    body .shell-surface-motion::before { animation: none !important; }
    body .ui-shell-footer .footer_item::after { animation: none; }
    .home-feedback-layer { display: none !important; }
    [data-home-page] .home-motion-control,
    [data-home-page] .home-linked-region .home-region-link { transition: none !important; transform: none !important; }
    body .ui-header .header-motion-control, body .shell-motion-control { transition: none !important; transform: none !important; }
    body :is(.header-motion-control, .shell-motion-control) > svg { animation: none !important; transition: none !important; transform: none !important; }
    body .ui-account-drawer summary > svg { transform: rotate(0deg) !important; }
    body .ui-account-drawer details[open] > summary > svg { transform: rotate(90deg) !important; }
}