/* JS-driven states and animations (Tailwind handles everything else) */

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: panel-in 0.35s ease forwards;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#sidebar {
  transform: translateX(-100%);
}

@media (min-width: 1024px) {
  #sidebar {
    transform: translateX(0);
  }
}

#sidebar.open {
  transform: translateX(0);
}

body.sidebar-open {
  overflow: hidden;
}

.sidebar-backdrop {
  display: none;
}

body.sidebar-open .sidebar-backdrop {
  display: block;
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgb(237 233 254);
  border-top-color: rgb(124 58 237);
  border-right-color: rgb(8 145 178);
  border-radius: 9999px;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.translate-loader {
  display: none;
}

.translate-loader.is-visible {
  display: flex;
}

.toast {
  animation: toast-in 0.3s ease forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.iframe-container iframe.is-loaded {
  display: block;
}

.iframe-container iframe {
  display: none;
}

.status-indicator.ready {
  background-color: rgb(16 185 129);
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-card:hover .gallery-image {
  transform: scale(1.04);
}

.hero-banner:hover .hero-bg {
  transform: scale(1.03);
}