/* 
 * SITE IMAGE CARD ANIMATIONS - SIMPLIFIED VERSION
 * 
 * Purpose: Clean fade-in/fade-out animations for site image cards
 * 
 * How it works:
 * 1. Card is initially hidden (opacity: 0)
 * 2. When .visible class is added → smooth fade-in animation
 * 3. When .fade-exit class is added → quick fade-out animation
 * 
 * To remove: Delete this file or remove <link> tag from index.html
 */

/* ===========================================
   STEP 1: INITIAL STATE (Hidden)
   =========================================== */
.site-image-card {
    position: fixed;
    top: 180px;
    left: 20px;
    z-index: 998;
    width: 160px;
    
    /* Start completely hidden */
    opacity: 0;
    visibility: hidden;
    
    /* Layout - flex column to stack image and dots */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}

/* ===========================================
   STEP 2: FADE-IN ANIMATION (When .visible added)
   =========================================== */
.site-image-card.visible {
  opacity: 1 !important;
  visibility: visible !important;
  animation: swipeInFromLeft 0.7s ease-out forwards !important;
  pointer-events: auto !important;
}

/* Swipe exit instead of fade exit */
.site-image-card.fade-exit .site-image {
  animation: swipeOutToRight 0.5s ease-out forwards !important;
}

/* ===========================================
   STEP 3: KEYFRAMES - Simple Animations
   =========================================== */

/* Clean fade-in with subtle zoom */
@keyframes cleanFadeIn {
  0% { 
    opacity: 0; 
    transform: scale(0.8);
  }
  100% { 
    opacity: 1; 
    transform: scale(1);
  }
}

/* Clean fade-out with subtle zoom */
@keyframes cleanFadeOut {
  0% { 
    opacity: 1; 
    transform: scale(1);
  }
  100% {
    opacity: 0; 
    transform: scale(0.8);
  }
}

/* ===========================================
   STEP 4: FADE-OUT ANIMATION (When .fade-exit added)
   =========================================== */
.site-image-card.fade-exit {
  animation: cleanFadeOut 0.4s ease-out forwards !important;
  pointer-events: none !important;
}

/* ===========================================
   STEP 5: CONTAINER & IMAGE SETUP
   =========================================== */

/* Force consistent card size (no more black screens!) */
  .site-image-container {
    width: 100%;
    aspect-ratio: 4/3 !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 24px;
    overflow: hidden;
    border-radius: 24px !important;
    border: 3px solid var(--rcmc-gold) !important;
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.08),
      0 12px 24px rgba(0, 0, 0, 0.06),
      0 18px 32px rgba(0, 0, 0, 0.04) !important;
      backdrop-filter: blur(14px) saturate(140%) !important;
      background: rgba(255, 255, 255, 0.12) !important;
  }

/* Remove all overlays that cause black screens */
.site-image-container::before,
.site-image-container::after {
  display: none !important;
}

/* Image fills container properly */
.site-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}

@keyframes swipeInFromLeft {
  0% { 
    transform: translateX(-100%);
    opacity: 1;
  }
  100% { 
    transform: translateX(0);
    opacity: 1;
  }
}

/* Swipe exit animation (right) */
@keyframes swipeOutToRight {
  0% { 
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ===========================================
   STEP 6: RESPONSIVE BREAKPOINTS
   =========================================== */

/* Large screens (1920px+) */
@media (min-width: 1920px) {
  .site-image-card { width: 540px !important; top: 120px !important; left: 25px !important; }
  .site-image-card { gap: 16px; }
  .morphing-dots-indicator { gap: 12px; padding: 10px 20px; }
  .morphing-dot { width: 9px; height: 9px; }
  .morphing-dot.active { width: 32px; height: 9px; }
}

/* Large Desktop (1854-1920px) */
@media (min-width: 1854px) and (max-width: 1919px) {
  .site-image-card { width: 480px !important; top: 115px !important; left: 22px !important; }
}

/* Desktop (1200-1853px) */
@media (min-width: 1200px) and (max-width: 1853px) {
  .site-image-card { width: 400px !important; top: 110px !important; left: 20px !important; }
  .site-image-card { gap: 12px; }
  .morphing-dots-indicator { gap: 10px; padding: 8px 16px; }
  .morphing-dot { width: 7px; height: 7px; }
  .morphing-dot.active { width: 24px; height: 7px; }
}

/* Tablet (768-1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .site-image-card { width: 280px !important; top: 100px !important; left: 15px !important; }
  .site-image-card { gap: 10px; }
  .morphing-dots-indicator { gap: 8px; padding: 7px 14px; }
  .morphing-dot { width: 6px; height: 6px; }
  .morphing-dot.active { width: 20px; height: 6px; }
}

/* Large phone (576-767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .site-image-card { width: 220px !important; top: 90px !important; left: 10px !important; }
  .site-image-card { gap: 8px; }
  .morphing-dots-indicator { gap: 6px; padding: 6px 12px; }
  .morphing-dot { width: 5px; height: 5px; }
  .morphing-dot.active { width: 18px; height: 5px; }
}

/* Mobile (575px and below) - Hidden */
@media (max-width: 575px) {
  .site-image-card { display: none !important; }
  .site-image-card { gap: 6px; }
  .morphing-dots-indicator { 
    gap: 5px; 
    padding: 5px 10px;
    display: flex !important;
  }
  .morphing-dot { width: 4px; height: 4px; }
  .morphing-dot.active { width: 16px; height: 4px; }
}

/* ===========================================
   STEP 7: HOVER EFFECTS (Optional)
   =========================================== */
.site-image-card.visible:hover {
  transform: translateY(-3px) scale(1.01) !important;
  transition: all 0.3s ease-out !important;
}

/* ===========================================
   STEP 8: MORPHING DOTS INDICATOR
   =========================================== */

/* Container for dots - positioned below the image */
.morphing-dots-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  
  /* Glass morphism curved background */
  /* background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1); */
}

/* Show dots when card is visible */
.site-image-card.visible .morphing-dots-indicator {
  opacity: 1;
  visibility: visible;
}

/* Individual dot button */
.morphing-dot {
  border: none;
  cursor: pointer;
  background: white;
  padding: 0;
  margin: 0;
  outline: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 9999px;
  width: 7px;
  height: 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Active dot - morphs into wider pill shape with amber gradient */
.morphing-dot.active {
  width: 24px;
  height: 7px;
  background: linear-gradient(to right, #fbbf24, #fcd34d);
  box-shadow: 
    0 1px 6px rgba(251, 191, 36, 0.5),
    0 2px 12px rgba(251, 191, 36, 0.25);
}

/* Hover state for inactive dots */
.morphing-dot:not(.active):hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.2);
}

/* Focus state for accessibility */
.morphing-dot:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.7);
  outline-offset: 3px;
}

/* Hide dots when there's only one image */
.morphing-dots-indicator.single-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}