/* Sprout Lands — animações de UI (steps para look pixel) */

@keyframes pix-btn-squash {
  0% { transform: translateY(0) scale(1, 1); }
  100% { transform: translateY(2px) scale(0.98, 0.94); }
}

@keyframes pix-click-bounce {
  0% { transform: translateY(0) scale(1, 1); }
  38% { transform: translateY(2px) scale(0.96, 0.94); }
  68% { transform: translateY(-1px) scale(1.04, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes pix-select-pulse {
  0%, 100% {
    outline-offset: 2px;
    outline-width: 2px;
  }
  50% {
    outline-offset: 5px;
    outline-width: 2px;
  }
}

@keyframes pix-corner-breathe {
  0%, 100% { inset: 3px; opacity: 1; }
  50% { inset: 1px; opacity: 0.85; }
}

@keyframes pix-bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes pix-dock-shift-left {
  0%, 100% { transform: translateX(-50%); }
  45% { transform: translateX(calc(-50% - 10px)); }
  72% { transform: translateX(calc(-50% + 4px)); }
}

@keyframes pix-dock-shift-right {
  0%, 100% { transform: translateX(-50%); }
  45% { transform: translateX(calc(-50% + 10px)); }
  72% { transform: translateX(calc(-50% - 4px)); }
}

/* Dock — bounce ao recentrar com o drawer */
.pixel-studio__dock.is-dock-shift-left {
  animation: pix-dock-shift-left 0.28s steps(4);
}

.pixel-studio__dock.is-dock-shift-right {
  animation: pix-dock-shift-right 0.28s steps(4);
}

@keyframes pix-pop-all {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.1); }
}

@keyframes pix-pop-up {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(1.18); }
}

/* Mobile bottom sheets — base fixa, dois pulos no topo */
@keyframes pix-mobile-sheet-bounce {
  0%, 100% { transform: scaleY(1); }
  22% { transform: scaleY(1.06); }
  44% { transform: scaleY(1); }
  66% { transform: scaleY(1.034); }
  88% { transform: scaleY(1); }
}

@keyframes pix-pop-down {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(1.18); }
}

@keyframes pix-pop-left {
  0%, 100% { transform: scaleX(1); }
  45% { transform: scaleX(1.14); }
}

@keyframes pix-pop-right {
  0%, 100% { transform: scaleX(1); }
  45% { transform: scaleX(1.14); }
}

@keyframes pix-nudge-left {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(-6px); }
  72% { transform: translateX(2px); }
}

@keyframes pix-panel-drawer-in-x {
  0% { transform: translateX(100%); }
  62% { transform: translateX(-10px); }
  78% { transform: translateX(0) scaleX(1.028); }
  100% { transform: translateX(0) scaleX(1); }
}

@keyframes pix-panel-drawer-in-y {
  0% { transform: translateY(100%); }
  62% { transform: translateY(-10px); }
  78% { transform: translateY(0) scaleY(1.028); }
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes pix-panel-enter {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pix-tab-pop {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(1.18); }
}

@keyframes pix-toast-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.92, 0.88); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1, 1); }
}

@keyframes pix-merge-pulse {
  0%, 100% { background: var(--sprout-panel-light); }
  50% { background: var(--ep-secondary-sky-light); }
}

@keyframes pix-swatch-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Clique — bounce em botões e controlos clicáveis (Estúdio Pixel) */
.pixel-studio button:active:not(:disabled):not([type="range"]):not([type="text"]):not([type="number"]):not([type="checkbox"]),
.pixel-studio .pix-btn:active:not(:disabled) .pix-btn__face,
.pixel-studio .dock-swatch:active,
.pixel-studio .color-mode-swatch:active .color-mode-swatch__inner,
.pixel-studio .custom-palette-slot:active,
.pixel-studio .color-picker-drop__grid button:active,
.pixel-studio .layer-panel-head__merge:active:not(:disabled) {
  animation: pix-click-bounce 0.2s steps(4);
  transform-origin: center center;
  box-shadow: none;
}

/* Ferramenta activa no dock / navegação canvas */
.is-sprout-bounce {
  animation: pix-pop-all 0.24s steps(4);
  transform-origin: center center;
}

.is-sprout-bounce--up {
  animation: pix-pop-up 0.24s steps(4);
  transform-origin: bottom center;
}

.is-sprout-bounce--down {
  animation: pix-pop-down 0.24s steps(4);
  transform-origin: top center;
}

.is-sprout-bounce--left {
  animation: pix-pop-left 0.24s steps(4);
  transform-origin: center right;
}

.is-sprout-bounce--right {
  animation: pix-pop-right 0.24s steps(4);
  transform-origin: center left;
}

.is-sprout-bounce--nudge-left {
  animation: pix-nudge-left 0.24s steps(4);
  transform-origin: center right;
}

/* Ferramenta activa no dock / navegação canvas */
.dock-hud-tool.is-just-selected,
.nav-tool.is-just-selected {
  animation: pix-pop-all 0.24s steps(4);
  transform-origin: center center;
}

/* Tabs — cresce em altura ao activar (ancorado em baixo) */
.pix-tabs--studio .pix-tabs__btn.is-active {
  transform-origin: bottom center;
  animation: pix-pop-up 0.24s steps(4);
}

/* bar-menu — sem bounce na bandeja; clique nos ícones anima só a face (centro) */
.bar-menu__shell,
.bar-menu__drawer,
.bar-menu__item,
.bar-menu.is-open .bar-menu__item .pix-btn__face {
  animation: none !important;
  transition: none !important;
}

.bar-menu__shell .bar-menu__action.pix-btn:active:not(:disabled) {
  animation: none !important;
}

.bar-menu__shell .bar-menu__action.pix-btn:active:not(:disabled) > .pix-btn__face {
  animation: pix-click-bounce 0.2s steps(4) !important;
  transform-origin: center center !important;
}

/* Drops — bounce na direcção de abertura */
.pix-drop.is-content-visible:not(.pix-drop--grow-up) .dock-shapes-drop__card,
.pix-drop.is-content-visible:not(.pix-drop--grow-up) .layer-merge-drop__card,
.pix-drop.is-content-visible:not(.pix-drop--grow-up) .color-picker-drop__card {
  animation: pix-pop-down 0.24s steps(4);
  transform-origin: top center;
}

.pix-drop.is-content-visible:not(.pix-drop--grow-up) .layer-popover__card {
  animation: pix-pop-down 0.24s steps(4);
  transform-origin: top right;
}

.pix-drop--grow-up.is-content-visible .dock-shapes-drop__card,
.pix-drop--grow-up.is-content-visible .dock-lasso-drop__card,
.pix-drop--grow-up.is-content-visible .color-picker-drop__card {
  animation: pix-pop-up 0.24s steps(4);
  transform-origin: bottom center;
}

/* Modais — bounce em todas as direcções ao abrir */
.studio-modal__drop.is-content-visible .studio-modal__card {
  animation: pix-pop-all 0.28s steps(4);
  transform-origin: center center;
}

/* Layer row — bounce no lock só ao passar perto (zona antes do botão) */
.layer-name-row--has-actions:has(.layer-hover-zone:hover) .layer-lock--compact:not(:disabled) {
  animation: pix-nudge-left 0.24s steps(4);
  transform-origin: center right;
}

/* Painel lateral — entrada com bounce */
.pixel-studio:not(.is-panel-collapsed) .pixel-studio__right.is-panel-drawer-entering {
  animation: pix-panel-drawer-in-x 0.36s steps(5) forwards;
  transition: none;
}

@media (max-width: 900px) {
  .pixel-studio:not(.is-panel-collapsed) .pixel-studio__right.is-panel-drawer-entering {
    animation: pix-panel-drawer-in-x 0.36s steps(5) forwards;
    transform-origin: right center;
  }
}

/* Painéis — entrada ao trocar tab */
.studio-panel.is-entering {
  animation: pix-panel-enter 0.24s steps(6);
}

/* Toast */
.pt-toast.is-visible {
  animation: pix-toast-pop 0.28s steps(6) forwards;
  transition: none;
}

/* Modo mesclar activo */
.layer-panel-head__merge.is-active {
  animation: pix-merge-pulse 1.2s steps(4) 3;
}

/* Swatch activo (seletores — pop mais subtil) */
.dock-swatch.is-active,
.custom-palette-slot.is-filled.is-active {
  animation: pix-swatch-pop 0.3s steps(4);
}

/* ── Slider Sprout (track + fill animado) ── */
.pix-range {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  --range-pct: 50%;
  --range-track-h: 12px;
  --range-thumb-w: 14px;
  --range-thumb-h: 18px;
}

.pix-range__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--range-track-h);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--ep-tertiary-cream-dark);
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

.pix-range__fill {
  display: block;
  height: 100%;
  width: var(--range-pct);
  background: var(--ep-primary-blue);
  transition: none;
}

.pix-range:has(input.is-pressed) .pix-range__fill,
.pix-range:has(input:active) .pix-range__fill {
  transition: none;
}

.pix-range.is-snap-anim .pix-range__fill {
  transition: width 0.1s steps(4);
}

.layer-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.layer-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--range-track-h);
  background: transparent;
  border: none;
}

.layer-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--range-thumb-w);
  height: var(--range-thumb-h);
  margin-top: calc((var(--range-track-h) - var(--range-thumb-h)) / 2);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--ep-tertiary-cream-light);
  box-shadow: none;
  transition:
    width 0.1s steps(2),
    height 0.1s steps(2),
    margin 0.1s steps(2);
}

.layer-slider input[type="range"].is-pressed::-webkit-slider-thumb,
.layer-slider input[type="range"]:active::-webkit-slider-thumb {
  width: calc(var(--range-thumb-w) + 2px);
  height: calc(var(--range-thumb-h) + 2px);
  margin-top: calc((var(--range-track-h) - var(--range-thumb-h) - 2px) / 2);
  animation: pix-click-bounce 0.2s steps(4);
  transform-origin: center center;
}

.layer-slider input[type="range"]::-moz-range-track {
  height: var(--range-track-h);
  background: transparent;
  border: none;
}

.layer-slider input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb-w);
  height: var(--range-thumb-h);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius-sm);
  background: var(--ep-tertiary-cream-light);
  box-shadow: none;
  transition:
    width 0.1s steps(2),
    height 0.1s steps(2);
}

.layer-slider input[type="range"].is-pressed::-moz-range-thumb,
.layer-slider input[type="range"]:active::-moz-range-thumb {
  width: calc(var(--range-thumb-w) + 2px);
  height: calc(var(--range-thumb-h) + 2px);
  animation: pix-click-bounce 0.2s steps(4);
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .pixel-studio__dock.is-dock-shift-left,
  .pixel-studio__dock.is-dock-shift-right,
  .pixel-studio__dock.is-dock-mobile-bounce,
  .pixel-studio button:active:not(:disabled),
  .pix-btn:active:not(:disabled) .pix-btn__face,
  .dock-hud-tool.is-just-selected,
  .nav-tool.is-just-selected,
  .is-sprout-bounce,
  .is-sprout-bounce--up,
  .is-sprout-bounce--down,
  .is-sprout-bounce--left,
  .is-sprout-bounce--right,
  .is-sprout-bounce--nudge-left,
  .layer-name-row--has-actions:has(.layer-hover-zone:hover) .layer-lock--compact:not(:disabled),
  .layer-panel-head__merge.is-active,
  .pt-toast.is-visible,
  .studio-panel.is-entering,
  .pixel-studio:not(.is-panel-collapsed) .pixel-studio__right.is-panel-drawer-entering,
  .pix-tabs--studio .pix-tabs__btn.is-active,
  .bar-menu.is-open .bar-menu__item .pix-btn__face,
  .pix-drop.is-content-visible .dock-shapes-drop__card,
  .pix-drop.is-content-visible .layer-merge-drop__card,
  .pix-drop.is-content-visible .layer-popover__card,
  .pix-drop.is-content-visible .color-picker-drop__card,
  .studio-modal__drop.is-content-visible .studio-modal__card,
  .dock-swatch.is-active,
  .custom-palette-slot.is-filled.is-active {
    animation: none;
  }

  .pix-range__fill,
  .layer-slider input[type="range"]::-webkit-slider-thumb {
    transition: none;
  }

  .bar-menu__drawer,
  .bar-menu__item,
  .bar-menu.is-open .bar-menu__item,
  .bar-menu__tray,
  .bar-menu__actions,
  .bar-menu__action--compact {
    transition: none;
  }

  .bar-menu:not(.is-open) .bar-menu__action--compact {
    transform: none;
  }

  .nav-mobile-panel,
  .pixel-studio.is-nav-mobile-collapsed .nav-mobile-panel,
  .nav-mobile-toggle {
    transition: none;
  }

  .pixel-studio.is-nav-mobile-collapsed .nav-mobile-panel {
    transform: translateX(0);
    opacity: 0;
  }

  .pix-drop--mobile-sheet,
  .pix-drop--mobile-sheet.is-content-visible,
  .studio-modal__drop,
  .studio-modal__drop.is-content-visible {
    transition: none;
    transform: none;
  }
}