/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Lightbox Modal */
.lightbox-modal {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease-in-out;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  animation: zoomIn 0.3s ease-in-out;
}

.lightbox-close-btn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lightbox-close-btn:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.lightbox-nav-btn {
  transition: all 0.2s ease;
  user-select: none;
}

.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lightbox-nav-btn:active {
  transform: scale(0.95);
}

.cursor-zoom-in {
  cursor: zoom-in;
}

/* CTA Modal Animations */
.modal-content {
  opacity: 0;
  transform: scale(0.9);
}

.modal-content.modal-show {
  opacity: 1;
  transform: scale(1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}