:root {
  --motion-ease: cubic-bezier(.4, 0, .2, 1);
  --scene-ease: cubic-bezier(.22, .68, .18, 1);
}

/* Glide's navigation uses a short color transition, without lifting the button. */
.button, .icon-button, .submit-button, .example-button {
  transition: background-color 150ms var(--motion-ease),
    color 150ms var(--motion-ease), border-color 150ms var(--motion-ease),
    box-shadow 150ms var(--motion-ease);
}
.button:active, .submit-button:hover { transform: none; }
.button-dark:hover, .submit-button:hover { background: #242421; }
.button-outline:not(:disabled):hover { background: #f4f4f2; }
.button:active { box-shadow: inset 0 0 0 100px #00000009; }
.submit-button .icon { transition: transform 150ms var(--motion-ease); }
.submit-button:active .icon { transform: translateY(-2px); }
.composer textarea { scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }

/* A bounded camera viewport keeps every transformed pixel above the caption. */
.market-stage {
  width: min(1600px, 100%);
  margin: -112px auto 0;
  display: flex;
  flex-direction: column;
}
.market-viewport {
  position: relative;
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}
.market-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.market-visual .market-image {
  animation: none;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  aspect-ratio: 1983 / 793;
  object-fit: contain;
}
.market-avito-logo {
  position: absolute;
  top: 9.15%;
  left: 50%;
  width: 10.5%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
.market-life {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}
.market-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.market-flight {
  position: absolute;
  top: var(--altitude);
  left: -6%;
  width: 112%;
  height: var(--bird-size);
  animation: market-bird-flight var(--flight-time) linear infinite;
  animation-delay: var(--flight-delay);
  animation-play-state: paused;
}
.market-flight:nth-child(1) { --altitude: 2%; --bird-size: 44px; --flight-time: 21s; --flight-delay: -4s; --flap-time: 850ms; --bird-opacity: .68; }
.market-flight:nth-child(2) { --altitude: 7%; --bird-size: 34px; --flight-time: 26s; --flight-delay: -8s; --flap-time: 760ms; --bird-opacity: .48; }
.market-flight:nth-child(3) { --altitude: 1%; --bird-size: 28px; --flight-time: 31s; --flight-delay: -20s; --flap-time: 920ms; --bird-opacity: .38; animation-direction: reverse; }
.market-flight:nth-child(4) { --altitude: 5%; --bird-size: 38px; --flight-time: 23s; --flight-delay: -15s; --flap-time: 810ms; --bird-opacity: .56; }
.market-bird {
  display: block;
  width: var(--bird-size);
  height: var(--bird-size);
  opacity: var(--bird-opacity);
  animation: market-bird-glide 3.6s ease-in-out infinite alternate;
  animation-delay: var(--flight-delay);
  animation-play-state: paused;
}
.market-bird-sprite {
  display: block;
  width: 100%;
  height: 100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: market-bird-flap var(--flap-time) steps(1,end) infinite;
  animation-delay: var(--flight-delay);
  animation-play-state: paused;
}
.market-flight:nth-child(3) .market-bird-sprite { --bird-facing: -1; }
.market-stage[data-birds-ready="true"] .market-bird-sprite { background-image: url('/assets/market-birds.webp'); }
.market-stage[data-birds="playing"] :is(.market-flight,.market-bird,.market-bird-sprite) { animation-play-state: running; }
@keyframes market-bird-flight {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(100%,0,0); }
}
@keyframes market-bird-glide {
  from { transform: translate3d(0,-4px,0) rotate(-4deg); }
  to { transform: translate3d(0,6px,0) rotate(3deg); }
}
@keyframes market-bird-flap {
  /* Align the body anchors between the generated atlas's two rows. */
  0%,100% { background-position: 0 0; transform: translateY(-14.04%) scaleX(var(--bird-facing,1)); }
  25% { background-position: 100% 0; transform: translateY(-14.04%) scaleX(var(--bird-facing,1)); }
  50% { background-position: 0 100%; transform: translateY(0) scaleX(var(--bird-facing,1)); }
  75% { background-position: 100% 100%; transform: translateY(0) scaleX(var(--bird-facing,1)); }
}
.market-canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
.market-visual.canvas-ready .market-image { opacity: 0; }
.market-visual.canvas-ready .market-canvas { opacity: 1; }
.market-status { animation: none; transition: opacity 250ms var(--motion-ease); }
.market-status-left { top: auto; bottom: 65px; left: 7%; }
.market-status-right { top: auto; bottom: 80px; right: 7%; }
.market-stage:not([data-category="all"]) .market-status-left { top: 26px; left: 26px; bottom: auto; }
.market-stage:not([data-category="all"]) .market-status-right { opacity: 0; }
.category-dock {
  z-index: 5;
  isolation: isolate;
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: max-content;
  margin: -48px auto 0;
  flex-shrink: 0;
}
.category {
  position: relative;
  z-index: 1;
  gap: 8px;
  transition: color 150ms var(--motion-ease), background-color 150ms var(--motion-ease);
}
.category-selection {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border: 1px solid #dddcd8;
  border-radius: 99px;
  background: white;
  box-shadow: 0 2px 4px #00000009;
  pointer-events: none;
  transition: transform 350ms var(--scene-ease), width 350ms var(--scene-ease);
  z-index: 0;
}
.category-dock.motion-ready .category.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.category-dock.motion-ready .category:hover:not(.active) { background: #ffffff3d; }
.category-indicator { width: 18px; height: 18px; position: relative; flex: 0 0 18px; }
.category-indicator > .icon, .category-progress {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity 150ms var(--motion-ease), transform 150ms var(--motion-ease);
}
.category-progress { opacity: 0; transform: rotate(-90deg) scale(.7); }
.category-progress circle { fill: none; stroke-width: 2.4; }
.category-progress .progress-track { stroke: #e8e8e5; }
.category-progress .progress-arc { stroke: #262622; stroke-linecap: round; }
.category.active .category-progress { opacity: 1; transform: rotate(-90deg) scale(1); }
.category.active .category-indicator > .icon { opacity: 0; transform: scale(.7); }
.scene-bottom {
  position: relative;
  z-index: 6;
  min-height: 80px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 76px 24px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-bottom .scene-caption {
  margin: 0;
  max-width: 820px;
  color: #6e6e68;
  font-size: 14px;
  line-height: 1.6;
}
.motion-toggle {
  position: absolute;
  z-index: 3;
  right: max(26px, calc((100% - 1040px) / 2));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e8e8e3;
  border-radius: 50%;
  color: #73736c;
  background: #fff;
  transition: color 150ms var(--motion-ease), background-color 150ms var(--motion-ease);
}
.motion-toggle:hover { background: #f4f4f0; color: #171715; }
.motion-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .play-symbol { display: none; }
.motion-toggle[aria-pressed="true"] .play-symbol { display: block; }
.motion-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.motion-toggle[aria-disabled="true"] { opacity: .45; cursor: default; }

@media (max-width: 760px) {
  .market-stage { width: 100%; margin: -34px auto 0; }
  .market-viewport { aspect-ratio: 1.3 / 1; }
  .market-flight:nth-child(n+3) { display: none; }
  .market-flight:nth-child(1) { --bird-size: 32px; --flight-time: 14s; --altitude: 8%; }
  .market-flight:nth-child(2) { --bird-size: 25px; --flight-time: 18s; --altitude: 3%; }
  .category-dock { width: calc(100% - 24px); max-width: none; margin-top: -48px; }
  .market-status-left { bottom: 65px; left: 18px; }
  .market-stage:not([data-category="all"]) .market-status-left { top: 44px; left: 14px; bottom: auto; }
  .category-selection { top: 4px; height: calc(100% - 8px); }
  .category-indicator, .category-indicator > .icon, .category-progress { width: 16px; height: 16px; }
  .category-indicator { flex-basis: 16px; }
  .scene-bottom { margin: 0; padding: 22px 60px 22px 22px; min-height: 90px; }
  .scene-bottom .scene-caption { font-size: 13px; line-height: 1.6; }
  .motion-toggle { right: 15px; top: 50%; width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .market-sky { display: none; }
  .market-flight,.market-bird,.market-bird-sprite { animation: none; }
  .market-visual { will-change: auto; }
  .market-visual.canvas-ready .market-image { opacity: 1; }
  .market-visual.canvas-ready .market-canvas { opacity: 0; }
  .category-selection, .category-progress, .category-indicator > .icon { transition: none; }
}