motion.css

/* Motion & loading layer — intentionally subtle */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease:cubic-bezier(.4,0,.2,1)}
html{scroll-behavior:smooth}
body,.sidebar,.topbar,.mobile-header,.mobile-bottom,.card,.btn,.icon-btn,.chip,.filter-select,.filter-search,input,textarea,.pill,.stat-icon{transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.content>*{animation:section-in .48s var(--ease-out) both}.content>*:nth-child(2){animation-delay:.05s}.content>*:nth-child(3){animation-delay:.09s}.content>*:nth-child(4){animation-delay:.13s}.content>*:nth-child(5){animation-delay:.17s}@keyframes section-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.btn,.icon-btn,.chip,.side-nav a,.sidebar-action,.mobile-bottom a{transition:transform .16s var(--ease-out),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}.btn:hover,.icon-btn:hover{transform:translateY(-1px)}.btn:active,.icon-btn:active,.chip:active{transform:translateY(0) scale(.975)}.side-nav a:hover,.sidebar-action:hover{transform:translateX(2px)}.mobile-bottom a:active{transform:scale(.96)}
.stat-card,.journey-card,.chart-card,.range-card{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease),border-color .2s var(--ease)}.stat-card:hover,.journey-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(31,50,81,.08);border-color:var(--line-2)}[data-theme="dark"] .stat-card:hover,[data-theme="dark"] .journey-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.2)}
.icon-btn .ui-icon,[data-theme-toggle] svg{transition:transform .25s var(--ease-out)}.icon-btn:hover .ui-icon,[data-theme-toggle]:hover svg{transform:rotate(-10deg)}.brand-mark{transition:transform .22s var(--ease-out),box-shadow .22s var(--ease)}.brand:hover .brand-mark{transform:rotate(-5deg) scale(1.04);box-shadow:0 7px 18px rgba(37,99,235,.2)}
.progress span{transition:width .42s var(--ease-out)}.pill{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease-out)}.alert.show{animation:alert-in .26s var(--ease-out) both}@keyframes alert-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.loading-text,.loading-value,.skeleton-block,.skeleton-line{position:relative;overflow:hidden;color:transparent!important;border-color:transparent!important;background:var(--surface-2)!important;border-radius:6px}.loading-text{display:inline-block;min-width:150px;min-height:12px;vertical-align:middle}.loading-value{display:inline-block;min-width:110px;min-height:22px}.loading-text::after,.loading-value::after,.skeleton-block::after,.skeleton-line::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(132,151,181,.18),transparent);animation:shimmer 1.25s ease-in-out infinite}[data-theme="dark"] .loading-text::after,[data-theme="dark"] .loading-value::after,[data-theme="dark"] .skeleton-block::after,[data-theme="dark"] .skeleton-line::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}@keyframes shimmer{100%{transform:translateX(100%)}}
.flight-skeleton{padding:14px 15px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:170px minmax(310px,1fr) 175px;gap:16px;align-items:center}.flight-skeleton:last-child{border-bottom:0}.skeleton-airline{display:flex;align-items:center;gap:9px}.skeleton-logo{width:36px;height:36px;border-radius:8px}.skeleton-copy{display:grid;gap:6px;flex:1}.skeleton-line{height:9px}.skeleton-line.short{width:55%}.skeleton-line.medium{width:72%}.skeleton-line.price{height:16px;width:78%;margin-left:auto}.skeleton-path{height:1px;border-radius:999px;margin:0 14px}.skeleton-path::before,.skeleton-path::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--line-2)}.skeleton-path::before{left:0}.skeleton-path::after{right:0}
.flight-row{animation:row-in .28s var(--ease-out) both;animation-delay:min(calc(var(--row,0) * 22ms),180ms)}@keyframes row-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.results-card.is-refreshing .flight-row{opacity:.46;pointer-events:none}.results-card.is-refreshing{cursor:progress}
.is-busy{pointer-events:none;position:relative}.is-busy::before{content:"";width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .65s linear infinite}.is-busy.busy-hide-text{font-size:0}.is-busy.busy-hide-text::before{margin:0}@keyframes spin{to{transform:rotate(360deg)}}
.loading-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 35%,transparent);animation:pulse-dot 1.4s ease-out infinite}@keyframes pulse-dot{70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:820px){.stat-card:hover,.journey-card:hover{transform:none}.flight-skeleton{grid-template-columns:1fr;gap:10px}.flight-skeleton .skeleton-path{height:34px}.content>*{animation-duration:.38s}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.content>*{opacity:1!important;transform:none!important}}