/* PettyUI Animations — stagger, reveal, and transition CSS */

.petty-stagger-hidden { opacity: 0; }

.petty-stagger-fade-up {
  animation: pettyFadeUp 0.5s ease both;
}
.petty-stagger-fade-down {
  animation: pettyFadeDown 0.5s ease both;
}
.petty-stagger-fade-left {
  animation: pettyFadeLeft 0.5s ease both;
}
.petty-stagger-fade-right {
  animation: pettyFadeRight 0.5s ease both;
}
.petty-stagger-scale {
  animation: pettyScale 0.5s ease both;
}
.petty-stagger-blur {
  animation: pettyBlur 0.6s ease both;
}

.petty-reveal-hidden { opacity: 0; }

.petty-reveal-fade-up {
  animation: pettyFadeUp 0.6s ease both;
}
.petty-reveal-fade-down {
  animation: pettyFadeDown 0.6s ease both;
}
.petty-reveal-fade-left {
  animation: pettyFadeLeft 0.6s ease both;
}
.petty-reveal-fade-right {
  animation: pettyFadeRight 0.6s ease both;
}
.petty-reveal-scale {
  animation: pettyScale 0.6s ease both;
}
.petty-reveal-blur {
  animation: pettyBlur 0.7s ease both;
}

petty-typewriter.petty-typewriter-cursor::after {
  content: "|";
  animation: pettyCursorBlink 0.8s step-end infinite;
}
petty-typewriter[data-state="done"].petty-typewriter-cursor::after {
  animation: pettyCursorBlink 0.8s step-end 3;
}

petty-counter { font-variant-numeric: tabular-nums; }

@keyframes pettyFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pettyFadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pettyFadeLeft {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pettyFadeRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pettyScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pettyBlur {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes pettyCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

dialog[open] {
  animation: pettyDialogIn 0.2s ease;
}
@keyframes pettyDialogIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

[popover]:popover-open {
  animation: pettyPopoverIn 0.15s ease;
}
@keyframes pettyPopoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-part="toast"] {
  animation: pettySlideIn 0.3s ease;
}
@keyframes pettySlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

petty-loading-indicator { display: inline-flex; align-items: center; justify-content: center; position: relative; }
petty-loading-indicator [data-part="container"] { display: flex; align-items: center; justify-content: center; position: relative; }

petty-loading-indicator [data-part="indicator"] {
  border-radius: 50%;
  border: 3px solid rgba(54, 192, 241, 0.12);
  border-top-color: #36c0f1;
  border-right-color: rgba(54, 192, 241, 0.4);
  animation: pettyLoadSpin 1.1s linear infinite, pettyLoadPulse 2.2s ease-in-out infinite;
}

petty-loading-indicator [data-part="container"]::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(54, 192, 241, 0.2);
  border-left-color: rgba(54, 192, 241, 0.1);
  animation: pettyLoadSpin 2.4s linear infinite reverse;
}

@keyframes pettyLoadSpin {
  to { rotate: 360deg; }
}

@keyframes pettyLoadPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(54, 192, 241, 0.15); }
  50% { box-shadow: 0 0 20px rgba(54, 192, 241, 0.35); }
}