:root {
    --card-height: 300px;
    --card-width: calc(var(--card-height) / 1.3);
  }

html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}
  .card-2 {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    display: flex;
    
    justify-content: center;
    align-items: flex-end;
    padding: 0 36px;
    perspective: 2500px;
    margin: 0 50px;
  }
  
  .cover-image-2 {
    width: 100%;
    height: 100%;
    
    object-fit: cover;
  }
  
  .wrapper-2 {
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: -1;
 

  }
  
  .card-2-anima .wrapper-2 {
    transform: perspective(900px) translateY(25%) rotateX(65deg) translateZ(0)  scale(.7);
    
  }
  .card-2-anima .slifer{
    box-shadow: 2px 35px 32px -8px rgba(226, 7, 7, 0.836);
    -webkit-box-shadow: 0px 8px 50px -12px rgba(226, 7, 7, 0.836);
    -moz-box-shadow: 2px 3px 32px 1px rgba(226, 7, 7, 0.836);
  }
  
  .card-2-anima .obelis{
    box-shadow: 2px 35px 32px -8px rgba(8, 67, 206, 0.854);
    -webkit-box-shadow: 0px 8px 50px -12px rgba(8, 67, 206, 0.854);
    -moz-box-shadow: 2px 3px 32px 1px rgba(8, 67, 206, 0.854);
  }

  .card-2-anima .ra{
    box-shadow: 2px 35px 32px -8px rgba(218, 169, 5, 0.75);
    -webkit-box-shadow: 0px 8px 50px -12px rgba(218, 169, 5, 0.75);
    -moz-box-shadow: 2px 3px 32px 1px rgba(218, 169, 5, 0.75);
  }

  
  .wrapper-2::before,
  .wrapper-2::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
  }
  .wrapper-2::before {
    top: 0;
    height: 100%;
    
  }
  .wrapper-2::after {
    bottom: 0;
    opacity: 1;
    
  }
  
  .card-2-anima .wrapper-2::before,
  .wrapper-2::after {
    opacity: 1;
  }
  
  .card-2-anima .wrapper-2::after {
    height: 120px;
  }
  .title {
    width: 100%;
    transition: transform 0.5s;
  }
  .card-2-anima .title {
    transform: translate3d(0%, -50px, 100px);
  }
  
  .character-2 {
    width: 100%;
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
    
  }
  

  .animate-cloud-landing{
    animation: animate-avatars-landing 1s infinite alternate ;
  }
  .animate-cloud{
    animation: animate-avatars 1.3s infinite alternate ;
  }

  .character-ra{
    scale: .90;
    filter: drop-shadow(0px 6px 6px rgba(241, 163, 29, 0.814));
    
  }

  .accesory-shadow{
    scale: 1;
    filter: drop-shadow(0px 8px 3px rgba(27, 26, 26, 0.361));
    
  }
  .character-slifer{
    scale: .90;
    filter: drop-shadow(0px 6px 6px rgba(237, 21, 21, 0.761));
    
  }
  .character-obelis{
    scale: .90;
    filter: drop-shadow(0px 6px 6px rgba(29, 75, 241, 0.789));
    
  }

  .card-2-anima .character-2 {
    opacity: 1;
    transform: translate3d(0%, -20%, 60px);
  }

  @keyframes animate-avatars-landing {
    0%{
      transform: translateY(-.5%) scale(1);
    }
    100%{
      transform: translateY(0%) scale(.99);
    }
    
  }

  @keyframes animate-avatars {
    0%{
      transform: translateY(-28%) scale(.9);
    }
    100%{
      transform: translateY(-26%) scale(.87);
    }
    
  }
  

.animate-spin-card {
    animation: spin 2s infinite alternate ;
}
@keyframes spin {
  to{
    transform: rotate(360deg);
  }
  
}

.htmx-indicator {
  display: none !important;
  opacity: 1;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display:flex !important;
}


.blur-notify{
  backdrop-filter: blur(3px) !important;
  z-index: 99999 !important;
}

.actual-image {
    transition: opacity 0.5s ease;
  }

  /* Estilos para el modal */
.modal-image {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-image-content {
  margin: auto;
  display: block;
  width: 300px;
  animation-name: zoom;
  animation-duration: 0.6s;
}

.modal-image-content-deck {
  margin: auto;
  display: block;
  width: 95% !important;
  max-width: 800px !important;
  animation-name: zoom;
  animation-duration: 0.6s;
}


@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close-image {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-image:hover,
.close-image:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#caption {
  margin: auto;
  display: block;
  font-size: 1.5rem;
  width: 95%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  
}
#caption-description {
  margin: auto;
  display: block;
  width: 95%;
  text-align: center;
  color: #ccc;
  
  height: fit-content;
}

/* Galería de imágenes */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

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