/* Remove the red border line above once you confirm CSS is loading */

/* Mobile Spotlight Effect - Styles */
/* Place this file in: static/css/mobile-spotlight.css */

/* Desktop hover effect - only active on larger screens */

/* Mobile: First card visible by default */
@media (max-width: 768px) {
  body.mobile-spotlight--ready .cards-container .card-item:first-child {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1.05) translateY(-8px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    z-index: 50 !important;
  }
}

/* Mobile base fallback: keep cards readable until JS marks ready */
@media (max-width: 768px) {
  .cards-container .card-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    backdrop-filter: none !important;
  }
  /* Kill any reveal/fade that might set opacity:0 on mobile */
  .cards-container .card-item.reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile: Sequential spotlight effect on scroll */
@media (max-width: 768px) {
  /* Only blur-by-default if JS marked the page as ready */
  body.mobile-spotlight--ready .cards-container .card-item.reveal,
  body.mobile-spotlight--ready .cards-container .card-item.group,
  body.mobile-spotlight--ready .cards-container .card-item {
    opacity: 0.4 !important;
    filter: blur(2px) !important;
    transform: scale(0.95) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.mobile-spotlight--ready .cards-container .card-item.mobile-active.reveal,
  body.mobile-spotlight--ready .cards-container .card-item.mobile-active.group,
  body.mobile-spotlight--ready .cards-container .card-item.mobile-active {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1.05) translateY(-8px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 50 !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.08) !important;
  }

  body.mobile-spotlight--ready .cards-container .card-item.mobile-active .max-h-0 {
    max-height: 15rem !important;
    overflow: visible !important;
  }

  body.mobile-spotlight--ready .cards-container .card-item:not(.mobile-active) .max-h-0 {
    max-height: 0 !important;
    overflow: hidden !important;
  }

  body.mobile-spotlight--ready .cards-container .card-item:hover,
  body.mobile-spotlight--ready .cards-container .card-item.group:hover,
  body.mobile-spotlight--ready .cards-container .card-item:active {
    opacity: 0.4 !important;
    filter: blur(2px) !important;
    transform: scale(0.95) !important;
  }

  body.mobile-spotlight--ready .cards-container .card-item.mobile-active:hover,
  body.mobile-spotlight--ready .cards-container .card-item.mobile-active:active {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1.05) translateY(-8px) !important;
  }
}