:root {
  --motion: 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  --motion-slow: 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

.btn,
button,
.header-cta,
.nav a,
.card,
.sku,
.choice,
.chip {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.btn:hover,
.header-cta:hover,
button.btn:hover {
  transform: translateY(-2px);
}

.app > .sidebar {
  animation: sidebarIn var(--motion-slow) both;
  opacity: 1;
}

.app > .main,
.app > main.main {
  animation: mainIn var(--motion-slow) both;
  /* Keep content visible even if a heavy script stalls the first paint. */
  opacity: 1;
}

.kicker,
h1,
.lede {
  animation: copyIn var(--motion) both;
}

h1 { animation-delay: 0.06s; }
.lede { animation-delay: 0.12s; }

.motion-stagger > * {
  animation: riseIn var(--motion) both;
  animation-delay: calc(var(--i, 0) * 55ms + 0.08s);
}

/* Front end */
body[data-page="home"] header {
  animation: copyIn 0.7s both;
}

body[data-page="home"] .hero > div:first-child {
  animation: fromLeft var(--motion-slow) both;
}

body[data-page="home"] .orbit {
  animation: orbitIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="home"] .core {
  animation: pulseGlow 3.6s ease-in-out 0.8s infinite;
}

body[data-page="home"] .stats,
body[data-page="home"] .preview-band,
body[data-page="home"] .about,
body[data-page="home"] .signup,
body[data-page="home"] #pricing {
  animation: riseIn 0.9s both;
}

body[data-page="home"] .stats > * {
  animation: statUp 0.65s both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

body[data-page="login"] {
  overflow: auto;
}

body[data-page="login"] .card,
body[data-page="login"] main.card {
  animation: loginCard 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="login"] button,
body[data-page="login"] input,
body[data-page="login"] label {
  animation: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

body[data-page="preview"] .hero {
  animation: fromLeft var(--motion-slow) both;
}

body[data-page="preview"] .toc {
  animation: fromRight var(--motion-slow) 0.12s both;
}

body[data-page="preview"] .step:nth-child(odd) {
  animation: fromLeft 0.8s both;
}

body[data-page="preview"] .step:nth-child(even) {
  animation: fromRight 0.8s both;
}

body[data-page="preview"] .tile,
body[data-page="preview"] .chip {
  animation: popIn 0.5s both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

body[data-page="preview"] .shot {
  animation: riseIn 0.75s both;
}

body[data-page="home"] .preview-shot {
  animation: riseIn 0.9s 0.1s both;
}

body[data-page="pricing"] .hero {
  animation: fromLeft var(--motion-slow) both;
}

body[data-page="pricing"] .plan {
  animation: riseIn 0.75s both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

body[data-page="pricing"] .plan.featured {
  animation-name: cardPop;
}

/* Dashboard layouts */
body[data-page="dashboard"] .hero {
  animation: heroClip 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="dashboard"] .circle {
  animation: spinIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both, pulseGlow 3.2s ease-in-out 1.1s infinite;
}

body[data-page="dashboard"] .stats .stat {
  animation: statUp 0.7s both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

body[data-page="dashboard"] .step {
  animation: fromLeft 0.7s both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

body[data-page="products"] .grid > .card {
  animation: cardPop 0.62s both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

body[data-page="product"] .form .card,
body[data-page="product"] aside {
  animation: fromRight 0.7s both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

body[data-page="new-product"] .stage,
body[data-page="new-product"] .drop {
  animation: dropPulse 0.9s both;
}

body[data-page="inventory"] tbody tr {
  animation: rowSweep 0.55s both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

body[data-page="media"] .media-grid > * {
  animation: photoZoom 0.7s both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

body[data-page="listings"] tbody tr {
  animation: unfold 0.6s both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

body[data-page="pos"] .ticket {
  animation: fromLeft 0.8s both;
}

body[data-page="pos"] .catalog,
body[data-page="pos"] .register > section:last-child {
  animation: fromRight 0.8s 0.08s both;
}

body[data-page="pos"] .sku,
body[data-page="pos"] .line {
  animation: popIn 0.45s both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

body[data-page="marketplaces"] .grid > .card {
  animation: channelFlip 0.7s both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

body[data-page="ai-writer"] .grid-2 > :first-child {
  animation: fromLeft 0.75s both;
}

body[data-page="ai-writer"] .grid-2 > :last-child {
  animation: fromRight 0.75s 0.08s both;
}

body[data-page="orders"] tbody tr {
  animation: rowDrop 0.55s both;
  animation-delay: calc(var(--i, 0) * 38ms);
}

body[data-page="shipping"] .table-wrap,
body[data-page="shipping"] .card {
  animation: liftIn 0.7s both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

body[data-page="payments"] tbody tr {
  animation: riseIn 0.55s both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

body[data-page="payments"] .stat b {
  animation: countPop 0.6s 0.2s both;
}

body[data-page="customers"] tbody tr {
  animation: fromLeft 0.5s both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

body[data-page="pages"] .grid > *,
body[data-page="pages"] #grid > * {
  animation: tiltIn 0.7s both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

body[data-page="builder"] .studio > :first-child {
  animation: fromLeft 0.75s both;
}

body[data-page="builder"] .studio > :last-child {
  animation: fromRight 0.75s 0.08s both;
}

body[data-page="builder"] .panel {
  animation: riseIn 0.55s both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

body[data-page="builder"] .themes > *,
body[data-page="builder"] .picks > *,
body[data-page="builder"] .choice,
body[data-page="builder"] .style,
body[data-page="builder"] .swatch {
  animation: pickerIn 0.55s both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

body[data-page="marketing"] .grid-3 > * {
  animation: fanOut 0.7s both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

body[data-page="marketing"] .stat,
body[data-page="marketing"] .card {
  animation: cardPop 0.55s both;
}

body[data-page="customers"] tbody tr {
  animation: fromLeft 0.45s both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

body[data-page="analytics"] .row .bar i,
body[data-page="analytics"] .bar i {
  transform-origin: left center;
  animation: barGrow 0.9s 0.2s both;
}

body[data-page="analytics"] .stat {
  animation: statUp 0.65s both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

body[data-page="messages"] .list {
  animation: fromLeft 0.7s both;
}

body[data-page="messages"] .body,
body[data-page="messages"] .pad.body {
  animation: fromRight 0.7s 0.1s both;
}

body[data-page="mobile"] .phone {
  animation: phoneUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="help"] .grid-3 > * {
  animation: bounceIn 0.7s both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

body[data-page="settings"] form,
body[data-page="settings"] .card {
  animation: riseIn 0.7s both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

body[data-page="domains"] .layout > :first-child {
  animation: fromLeft 0.75s both;
}

body[data-page="domains"] .layout > :last-child {
  animation: fromRight 0.75s 0.08s both;
}

body[data-page="domains"] .block {
  animation: riseIn 0.55s both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

body[data-page="editor"] .chrome {
  animation: chromeDrop 0.55s both;
}

body[data-page="editor"] .rail {
  animation: fromLeft 0.7s 0.08s both;
}

body[data-page="editor"] .inspect {
  animation: fromRight 0.7s 0.12s both;
}

body[data-page="published"] #root {
  animation: riseIn 0.8s both;
}

body[data-page="store"] .cart-drop,
body[data-page="checkout"] .card {
  animation: riseIn 0.55s both;
}

body[data-page="store"] .hero {
  animation: fromLeft var(--motion-slow) both;
}

body[data-page="store"] .grid > * {
  animation: cardPop 0.45s both;
  animation-delay: calc(min(var(--i, 0), 8) * 28ms);
}

body[data-page="dashboard"] .url-bar {
  animation: riseIn 0.6s both;
}

body[data-page="traffic"] tbody tr {
  animation: fromLeft 0.45s both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

body[data-page="affiliates"] .stat,
body[data-page="affiliates"] .card {
  animation: cardPop 0.55s both;
}

body[data-page="partners"] .hero,
body[data-page="partners"] form {
  animation: riseIn 0.7s both;
}

body.motion-settled .motion-stagger > * {
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes sidebarIn {
  from { transform: translateX(-28px); }
  to { transform: none; }
}

@keyframes mainIn {
  from { transform: translateY(18px); }
  to { transform: none; }
}

@keyframes copyIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes riseIn {
  from { transform: translateY(22px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes fromLeft {
  from { transform: translateX(-36px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes fromRight {
  from { transform: translateX(36px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes orbitIn {
  from { transform: scale(0.72) rotate(-12deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 10px rgba(196, 92, 38, 0.18); }
  50% { box-shadow: 0 0 0 18px rgba(196, 92, 38, 0.08); }
}

@keyframes loginCard {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes heroClip {
  from { clip-path: inset(12% 8% 12% 8% round 40px); opacity: 0; transform: scale(0.98); }
  to { clip-path: inset(0 0 0 0 round 28px); opacity: 1; transform: none; }
}

@keyframes spinIn {
  from { transform: scale(0.4) rotate(-40deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes statUp {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes cardPop {
  from { transform: translateY(24px) scale(0.9); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes popIn {
  from { transform: scale(0.82); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes dropPulse {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes rowSweep {
  from { transform: translateX(-28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes photoZoom {
  from { transform: scale(1.12); opacity: 0; filter: blur(6px); }
  to { transform: none; opacity: 1; filter: none; }
}

@keyframes unfold {
  from { transform: rotateX(-18deg); transform-origin: top; opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes channelFlip {
  from { transform: rotateY(18deg) translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes rowDrop {
  from { transform: translateY(-16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes liftIn {
  from { transform: translateY(28px); opacity: 0; box-shadow: none; }
  to { transform: none; opacity: 1; }
}

@keyframes countPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes tiltIn {
  from { transform: rotate(-2.5deg) translateY(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes pickerIn {
  from { transform: scale(0.86); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes fanOut {
  from { transform: translateY(30px) rotate(2deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes bounceIn {
  0% { transform: translateY(24px) scale(0.94); opacity: 0; }
  70% { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: none; }
}

@keyframes phoneUp {
  from { transform: translateY(48px) rotate(-6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes chromeDrop {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}