/* ========= KEYFRAME ANIMATIONS ========= */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ========= BASE STYLES (Your Original CSS) ========= */
#section_character {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#section_character .swiper-button-prev,
#section_character .swiper-button-next,
#section_hilight .swiper-button-prev,
#section_hilight .swiper-button-next,
#main-banner .swiper-button-prev,
#main-banner .swiper-button-next {
  width: 10vw !important; /* Adjusted for better visibility */
  height: auto;
  max-width: 100px;
  aspect-ratio: 50 / 61;
}

#section_character .swiper-button-prev::after,
#section_hilight .swiper-button-prev::after,
#section_character .swiper-button-next::after,
#section_hilight .swiper-button-next::after,
#main-banner .swiper-button-prev::after,
#main-banner .swiper-button-next::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../img/gold_arrows.png") !important;
  background-size: contain;
  background-repeat: no-repeat;
}

#section_character .swiper-button-next::after,
#section_hilight .swiper-button-next::after,
#main-banner .swiper-button-next::after {
  transform: rotate(180deg); /* Flip the next button */
}

#section_character .swiper-pagination-bullet-active,
#section_hilight .swiper-pagination-bullet-active,
#main-banner .swiper-pagination-bullet-active {
  background-color: #fd2836; /* Active bullet color */
}
#section_character .swiper-slide .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
/* Assuming .swiper-slide is the direct child of your Swiper container within #section_character */
/* And each slide (e.g., #character01) will have .character-info inside it */
#section_character .swiper-slide .character-info {
  /* Adjusted selector if .character-info is inside each .swiper-slide */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover !important; /* Ensure background images scale properly */
  background-position: center !important; /* Center the background images */
}

/* Original styles for elements within .character-info */
#section_character .character-info .name {
  position: absolute;
  width: auto;
  height: 15vh;
  object-fit: cover;
  left: 10vw;
  top: 5vh;
  z-index: 5;
}

#section_character .character-info .info {
  position: absolute;
  width: auto;
  max-height: 20vh;
  left: 10vw;
  top: 25vh;
  z-index: 5;
}

#section_character .character-info .status {
  position: absolute;
  width: auto;
  height: 40vh;
  max-height: 328px;
  bottom: 10vh;
  left: 10vw;
  aspect-ratio: 442 / 328;
  object-fit: cover;
  z-index: 5;
}

#section_character .character-info .image {
  position: absolute;
  width: auto;
  height: 100vh;
  right: 0;
  top: 0;
  object-fit: cover;
}

#section_character .character-thumb-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 1; /* Ensure it appears above the background but below other content */
}

#section_character .swiperCharacterThumbs {
  position: absolute;
  bottom: 5vh;
  right: 5vw;
  width: 470px; /* Adjusted for better visibility */
  z-index: 10; /* Ensure it appears above other content */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.3) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  padding: 5px;
}
#section_character .swiperCharacterThumbs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(111, 99, 52, 0) 0%,
    rgba(111, 99, 52, 0.5) 20%,
    rgba(111, 99, 52, 0.5) 80%,
    rgba(111, 99, 52, 0) 100%
  );
  z-index: 1;
}

#section_character .swiperCharacterThumbs::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(111, 99, 52, 0) 0%,
    rgba(111, 99, 52, 0.5) 20%,
    rgba(111, 99, 52, 0.5) 80%,
    rgba(111, 99, 52, 0) 100%
  );
  z-index: 1;
}

#section_character .swiperCharacterThumbs .swiper-slide {
  position: relative;
  width: 110px; /* Adjusted for better visibility */
  height: 110px; /* Adjusted for better visibility */
  margin-right: 10px;
}

.mobile #section_character .swiperCharacterThumbs .swiper-slide {
  margin-right: 0px; /* Adjusted for better visibility on mobile */
}

#section_character .character-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  cursor: pointer;
  background-image: url("../characters/character_icons.png");
}

#section_character .character-thumbnail:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  transition: transform 0.3s ease; /* Smooth transition */
}

#section_character .swiperCharacterThumbs .swiper-slide .character-name {
  position: absolute;
  bottom: 0; /* Adjusted for better visibility */
  left: 0;
  width: 100%;
  /* background-color: rgba(235, 229, 213, 0.6); Background color for the name */
  text-align: center;
  border-radius: 10px;
  color: #afa785;
  text-shadow:
    1px 1px 2px #000000,
    1px 1px 2px #000000,
    1px 1px 2px #000000,
    1px 1px 2px #000000,
    1px 1px 2px #000000; /* Text shadow for better readability */
}
#section_character .swiperCharacterThumbs .swiper-slide-thumb-active .character-name {
  color: #fff;
}

#section_character .character-thumbnail-01 {
  background-position: 0 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-02 {
  background-position: -110px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-03 {
  background-position: -220px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-04 {
  background-position: -330px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-05 {
  background-position: -440px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-06 {
  background-position: -550px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-07 {
  background-position: -660px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-08 {
  background-position: -770px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-09 {
  background-position: -880px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-10 {
  background-position: -990px 0; /* Adjusted for better visibility */
}

#section_character .character-thumbnail-11 {
  background-position: -1100px 0; /* Adjusted for better visibility */
}

#section_character .swiper-slide-thumb-active .character-thumbnail-01 {
  background-position: 0px -110px; /* Adjusted for better visibility */
}

#section_character .swiper-slide-thumb-active .character-thumbnail-02 {
  background-position: -110px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-03 {
  background-position: -220px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-04 {
  background-position: -330px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-05 {
  background-position: -440px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-06 {
  background-position: -550px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-07 {
  background-position: -660px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-08 {
  background-position: -770px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-09 {
  background-position: -880px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-10 {
  background-position: -990px -110px; /* Adjusted for better visibility */
}
#section_character .swiper-slide-thumb-active .character-thumbnail-11 {
  background-position: -1100px -110px; /* Adjusted for better visibility */
}

/* ========= INITIAL STATES FOR ANIMATION (within any slide) ========= */
/* These elements start transparent and are ready for animation. */
#section_character .swiper-slide .character-info .name,
#section_character .swiper-slide .character-info .info,
#section_character .swiper-slide .character-info .status,
#section_character .swiper-slide .character-info .image {
  opacity: 0;
  will-change: transform, opacity; /* Hint to the browser for optimization */
}

/* ========= ANIMATED STATES (when slide becomes active) ========= */
#section_character .swiper-slide-active .character-info .name {
  /* opacity: 1; Ensure visibility */
  animation-name: fadeInLeft;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  transform: translateZ(0); /* Hardware acceleration */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#section_character .swiper-slide-active .character-info .info {
  /* opacity: 1; */
  animation-name: fadeInLeft;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#section_character .swiper-slide-active .character-info .status {
  /* opacity: 1; */
  animation-name: fadeInUp;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.6s;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#section_character .swiper-slide-active .character-info .image {
  opacity: 1;
  animation-name: fadeInRight; /* Or zoomIn, fadeIn */
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ========= MEDIA QUERIES (Your Original + Considerations for Animation) ========= */
/** screen portrait tablet **/
@media screen and (max-width: 1024px) and (orientation: portrait) {
  #section_character .character-info .name {
    left: 5vw;
    top: 5vh;
    height: 10vh;
  }

  #section_character .character-info .info {
    display: none;
  }

  #section_character .character-info .status {
    left: 50vw; /* Base position changes */
    bottom: calc(3vh + 110px); /* Adjusted for better visibility */
    transform: translateX(-50%) !important; /* Center the status element */
    width: 100vw;
    max-width: 380px;
    height: auto;
  }

  #section_character .character-info .image {
    top: unset;
    bottom: 0;
    left: 50vw;
    height: 100vh;
    width: auto;
    transform: translateX(-50%) !important; /* Center the image */
  }

  #section_character .swiperCharacterThumbs {
    position: absolute;
    bottom: 1vh; /* Adjusted for better visibility */
    left: 50vw; /* Center the thumbnails */
    transform: translateX(-50%); /* Center the thumbnails */
    /* width:  */
    z-index: 10; /* Ensure it appears above other content */
  }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  #section_character .character-info .name {
    left: 0vw;
    top: 0vh;
    width: 100%;
    height: auto;
    max-width: fit-content;
    max-height: 10vh;
  }
  #section_character .character-info .status {
    object-fit: unset;
    width: 95vw;
    height: auto;
  }
}

@media screen and (max-width: 480px) and (orientation: portrait) {
  #section_character .character-info .status {
    bottom: calc(4vh + 88px); /* Adjusted for better visibility */
  }

  #section_character .swiperCharacterThumbs {
    scale: 0.8;
    transform: translateX(-62%);
    width: 440px;
    bottom: 1vh;
  }
}