/* Shared motion language; keep mirrored static/basuratti_motion.css identical. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-normal:360ms;--motion-slow:560ms}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
.site-header{transition:box-shadow var(--motion-normal),border-color var(--motion-normal);view-transition-name:site-header}
.site-header.is-scrolled{box-shadow:0 6px 24px #0000000b}
.menu-toggle{min-height:40px;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.menu-toggle>span{display:inline-block;transition:transform 440ms var(--motion-ease);transform-origin:center}
.menu-toggle[aria-expanded=true]>span{transform:rotate(45deg)}
.menu-backdrop{position:fixed;inset:0;z-index:29;background:#080d0a59;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 360ms var(--motion-ease),visibility 0s 360ms}
html[data-menu-open] .menu-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.site-nav a{transition:color var(--motion-fast),background var(--motion-fast)}
.site-nav a[aria-current=page]{color:var(--accent)}
:where(.button,.text-link,.wallet-icon-button,.wallet-project-main,.menu-toggle){transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-normal),transform var(--motion-normal) var(--motion-ease)}
:where(.button,.menu-toggle):active{transform:scale(.97)}
.text-link>span,.nav-account>span,.preview-label>i{display:inline-block;transition:transform var(--motion-normal) var(--motion-ease)}
.preview-item{transition:box-shadow var(--motion-normal),transform var(--motion-slow) var(--motion-ease)}
.preview-item img,.project-art img{transition:transform 700ms var(--motion-ease)}
.passport-telegram-photo{animation:motion-photo-in 400ms var(--motion-ease) both}
.wallet-card{transition:box-shadow var(--motion-normal),transform var(--motion-slow) var(--motion-ease)}
.payment-row{transition:background var(--motion-fast)}
.brand-tariff,.product-card{transition:transform var(--motion-normal) var(--motion-ease),border-color var(--motion-normal),box-shadow var(--motion-normal)}
.modal:not(.hidden) .modal-card,dialog[open]{animation:motion-dialog-in 320ms var(--motion-ease) both}
.modal:not(.hidden){animation:motion-photo-in 220ms ease both}
.modal,dialog{transition:opacity 220ms ease,display 220ms allow-discrete,overlay 220ms allow-discrete}
.modal.hidden,dialog:not([open]){opacity:0}
.motion-disclosure{overflow:hidden;overflow:clip}
.wallet-history summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:44px}
.wallet-history summary::-webkit-details-marker{display:none}
.wallet-history summary:before{content:'＋';display:inline-block;transition:transform var(--motion-normal) var(--motion-ease)}
.wallet-history details[open]>summary:before{transform:rotate(45deg)}
.motion-loading-label{display:flex;align-items:center;gap:10px;margin-bottom:24px!important;font-size:13px;color:var(--muted)}
.motion-loading-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent);animation:motion-pulse 1600ms ease-in-out infinite}
.motion-skeleton{pointer-events:none;user-select:none}
.motion-skeleton-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px}
.motion-skeleton-card{height:260px;padding:28px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface)}
.motion-skeleton-stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.motion-skeleton-stat{padding:22px 18px;border:1px solid var(--line)}
.motion-skeleton-line{height:10px;width:65%;border-radius:2px;background:currentColor;opacity:.09;color:var(--ink);animation:motion-skeleton-breathe 1800ms ease-in-out infinite}
.motion-skeleton-line+.motion-skeleton-line{margin-top:13px;width:88%;height:8px;animation-delay:100ms}
.motion-skeleton-line.short{width:36%}.motion-skeleton-line.amount{height:40px;width:43%}
.motion-skeleton-passport{height:340px;margin-top:48px;border:1px solid var(--line);background:var(--surface);padding:30px}
.account-state:has(.motion-skeleton){max-width:none;border:0;padding-top:0}
.motion-loading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.motion-loading-grid>div{height:190px;background:var(--surface);border:1px solid var(--line);padding:24px}
html.is-navigating:before{content:'';position:fixed;inset:0 0 auto;height:2px;background:var(--accent);z-index:120;transform-origin:left;animation:motion-navigation 6s cubic-bezier(.15,.7,.2,1) both;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000010}
 .text-link:hover>span,.nav-account:hover>span,.preview-item:hover .preview-label>i{transform:translate(3px,-2px)}
 .preview-item:hover{transform:translateY(-4px)}
 .preview-item:hover img,.project-art:hover img{transform:translateY(-4px) scale(1.025)}
 .wallet-card:hover{transform:translateY(-2px);box-shadow:7px 10px 0 #b5c59d}
 .payment-row:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
 .brand-tariff:hover,.product-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0000000a}
}
@media(max-width:740px){
 html[data-menu-open]{overflow:hidden}
 .site-nav[data-motion-menu]{display:flex;max-height:0;padding-block:0;opacity:0;visibility:hidden;transform:translateY(-8px);overflow:hidden;overscroll-behavior:contain;pointer-events:none;border-bottom-color:transparent;box-shadow:none;transition:max-height 460ms var(--motion-ease),padding 460ms var(--motion-ease),transform 460ms var(--motion-ease),opacity 240ms ease,visibility 0s 460ms,border-color 240ms}
 .site-nav[data-motion-menu].is-open{max-height:min(var(--menu-height,360px),calc(100vh - 88px - var(--app-safe-top,0px)));max-height:min(var(--menu-height,360px),calc(100dvh - 88px - var(--app-safe-top,0px)));padding-block:16px 24px;opacity:1;visibility:visible;transform:none;overflow-y:auto;pointer-events:auto;border-bottom-color:var(--line);box-shadow:0 18px 32px #00000012;transition-delay:0s}
 .site-nav[data-motion-menu]>a{opacity:0;transform:translateY(-7px);transition:opacity 180ms ease,transform 320ms var(--motion-ease),color var(--motion-fast)}
 .site-nav[data-motion-menu].is-open>a{opacity:1;transform:none;transition-delay:calc(55ms + var(--menu-order,0)*35ms)}
 .motion-skeleton-grid{grid-template-columns:1fr;gap:24px}.motion-skeleton-card{height:225px;padding:23px}.motion-skeleton-stat{min-height:90px;padding:18px}.motion-skeleton-passport{height:300px;margin-top:32px}.motion-loading-grid{grid-template-columns:1fr}.motion-loading-grid>div{height:160px}
}
/* Native document transitions preserve real navigation, forms and history. */
@view-transition{navigation:auto}
::view-transition-group(root),::view-transition-group(site-header){animation-duration:360ms;animation-timing-function:var(--motion-ease)}
::view-transition-old(root){animation:motion-page-out 180ms ease both;mix-blend-mode:normal}
::view-transition-new(root){animation:motion-page-in 420ms var(--motion-ease) both;mix-blend-mode:normal}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none;mix-blend-mode:normal}
@keyframes motion-page-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes motion-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes motion-photo-in{from{opacity:0}to{opacity:1}}
@keyframes motion-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes motion-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes motion-skeleton-breathe{0%,100%{opacity:.06}50%{opacity:.12}}
@keyframes motion-navigation{0%{transform:scaleX(.04)}18%{transform:scaleX(.5)}100%{transform:scaleX(.94)}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .button:hover,.button:active,.menu-toggle:active,.wallet-card:hover,.preview-item:hover,.preview-item:hover img,.project-art:hover img,.brand-tariff:hover,.product-card:hover{transform:none}
 .site-nav[data-motion-menu].is-open>a{transform:none}
 html.is-navigating:before{transform:scaleX(.7)}
}
