/* Todij Image Showcase Widget CSS */
/* Enhanced hover effects and animations */

.todij-image-showcase .image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}

.todij-image-showcase .image-container .main-image {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s ease;
  opacity: 1;
  border-radius: 8px;
}

.todij-image-showcase .image-container .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s ease;
  border-radius: 8px;
}

.todij-image-showcase .image-container:hover .main-image {
  opacity: 0;
  transform: scale(1.05);
}

.todij-image-showcase .image-container:hover .hover-image {
  opacity: 1;
  transform: scale(1.05);
}

/* Glass Effect Enhancement */
.todij-image-showcase.glass-effect .image-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.todij-image-showcase.glass-effect .image-container:hover {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.3);
}
}

@keyframes veritcal {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes veritcal-reverse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes veritcal-short {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes veritcal-short-reverse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes veritcal2 {
  from {
    -webkit-transform: translate3d(0, -10px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 10px, 0);
  }
}
@keyframes veritcal2-reverse {
  from {
    -webkit-transform: translate3d(0, 10px, 0);
  }
  to {
    -webkit-transform: translate3d(0, -10px, 0);
  }
}
@keyframes horizontal {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes horizontal-reverse {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes horizontal-short {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes horizontal-short-reverse {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes horizontal2 {
  from {
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
  }
  from {
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
  }
}
@-webkit-keyframes horizontal2 {
  from {
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
  }
  from {
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
  }
}
@keyframes rotated_style {
  0% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(-10px, 10px) rotate(10deg);
    transform: translate(-10px, 10px) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5px, -5px) rotate(25deg);
    transform: translate(5px, -5px) rotate(25deg);
  }
  75% {
    -webkit-transform: translate(15px, -5px) rotate(15deg);
    transform: translate(15px, -5px) rotate(15deg);
  }
  to {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
}
@keyframes rotate-anim-reverse {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
    -webkit-transform: rotate(-359deg);
  }
}
@keyframes rotate-anim-short {
  0% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
  }
}
@keyframes rotate-anim-short-reverse {
  0% {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
  }
}
@-webkit-keyframes spine {
  from {
    transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spine-reverse {
  from {
    transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  to {
    transform: rotate(-359deg);
    -webkit-transform: rotate(-359deg);
  }
}
@-webkit-keyframes spine-reverse {
  from {
    transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  to {
    transform: rotate(-359deg);
    -webkit-transform: rotate(-359deg);
  }
}
@keyframes scale {
  from {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  to {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
  }
}
@-webkit-keyframes scale {
  from {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  to {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
  }
}
@keyframes scale2 {
  from {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  to {
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
  }
}
@-webkit-keyframes scale2 {
  from {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  to {
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
  }
}
@keyframes head-move {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(5px, 0, 0) rotate(4deg);
    -webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  75% {
    transform: translate3d(5px, 0, 0) rotate(4deg);
    -webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes head-move {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(5px, 0, 0) rotate(4deg);
    -webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  75% {
    transform: translate3d(5px, 0, 0) rotate(4deg);
    -webkit-transform: translate3d(5px, 0, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes pop {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity: 0;
  }
}
@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.09;
  }
  100% {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity: 0;
  }
}
@keyframes ruller-run {
  0% {
    background-position-y: 200%;
  }
  100% {
    background-position-y: 0%;
  }
}
@-webkit-keyframes ruller-run {
  0% {
    background-position-y: 200%;
  }
  100% {
    background-position-y: 0%;
  }
}
.todij-image-showcase {
  position: relative;
  width: 100%;
  height: 100%;
}
.todij-image-showcase img {
  position: relative;
  z-index: 1;
}
.todij-image-showcase img.blend_normal {
  mix-blend-mode: normal;
}
.todij-image-showcase img.blend_unset {
  mix-blend-mode: unset;
}
.todij-image-showcase img.blend_multiply {
  mix-blend-mode: multiply;
}
.todij-image-showcase img.blend_screen {
  mix-blend-mode: screen;
}
.todij-image-showcase img.blend_overlay {
  mix-blend-mode: overlay;
}
.todij-image-showcase img.blend_darken {
  mix-blend-mode: darken;
}
.todij-image-showcase img.blend_lighten {
  mix-blend-mode: lighten;
}
.todij-image-showcase img.blend_color_dodge {
  mix-blend-mode: color-dodge;
}
.todij-image-showcase img.blend_color_burn {
  mix-blend-mode: color-burn;
}
.todij-image-showcase img.blend_difference {
  mix-blend-mode: difference;
}
.todij-image-showcase img.blend_exclusion {
  mix-blend-mode: exclusion;
}
.todij-image-showcase img.blend_hue {
  mix-blend-mode: hue;
}
.todij-image-showcase img.blend_saturation {
  mix-blend-mode: saturation;
}
.todij-image-showcase img.blend_color {
  mix-blend-mode: color;
}
.todij-image-showcase img.blend_luminosity {
  mix-blend-mode: luminosity;
}
.todij-image-showcase .spin_style {
  animation: spine 30s infinite linear;
  -webkit-animation: spine 30s infinite linear;
}
.todij-image-showcase .spin_style.reverse-enable {
  animation-name: spine-reverse;
}
.todij-image-showcase .scale_style {
  animation: scale 1s alternate infinite;
  -webkit-animation: scale 1s alternate infinite;
}
.todij-image-showcase .scale_style2 {
  animation: scale2 1s alternate infinite;
  -webkit-animation: scale2 1s alternate infinite;
}
.todij-image-showcase .move_leftright {
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
  animation-name: head-move;
  -webkit-animation-name: head-move;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
  animation-direction: linear;
  -webkit-animation-direction: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.todij-image-showcase .pop-wrap {
  position: absolute;
  width: 750px;
  height: 750px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.todij-image-showcase .pop-wrap .pop {
  position: absolute;
  content: "";
  border-radius: 100%;
  width: 100%;
  height: 100%;
  opacity: 0.01;
  background-clip: padding-box;
  -webkit-animation: pop 6s ease-in-out infinite;
  animation: pop 6s ease-in-out infinite;
  background: #6d5afe;
}
.todij-image-showcase .pop-wrap .pop:nth-child(2) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.todij-image-showcase .pop-wrap .pop:nth-child(3) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.todij-image-showcase.ruler_image_yes {
  position: relative;
  overflow: hidden;
}
.todij-image-showcase.ruler_image_yes .ruler-image-anim {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  overflow: hidden;
  height: 200%;
  background: url(./img/ruler-shape.png);
  background-repeat: repeat-y !important;
  animation: ruller-run 60s linear infinite;
}
.todij-image-showcase.ruler_image_yes img.todij-multi-image {
  width: 100%;
  height: auto;
  padding-left: 26px;
}
.todij-image-showcase.ruler_image_yes.ruler_position_right .ruler-image-anim {
  left: unset;
  right: 0;
  background: url(./img/ruler-shape-revers.png);
}
.todij-image-showcase.ruler_image_yes.ruler_position_right img.todij-multi-image {
  width: 100%;
  height: auto;
  padding-left: 0;
  padding-right: 26px;
}
.todij-image-showcase.scroll_reveal.reveal-active {
  visibility: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: max-content;
  right: 0;
  overflow: hidden;
}

.todij-image-showcase.yes .veritcal {
  animation-name: veritcal;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
.todij-image-showcase.yes .veritcal.short {
  animation-name: veritcal-short;
}
.todij-image-showcase.yes .veritcal.short.reverse-enable {
  animation-name: veritcal-short-reverse;
}
.todij-image-showcase.yes .veritcal.reverse-enable {
  animation-name: veritcal-reverse;
}
.todij-image-showcase.yes .veritcal2 {
  animation: veritcal2 3s alternate infinite;
  -webkit-animation: veritcal2 3s alternate infinite;
}
.todij-image-showcase.yes .veritcal2.reverse-enable {
  animation-name: veritcal2-reverse;
}
.todij-image-showcase.yes .horizontal {
  animation-name: horizontal;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
.todij-image-showcase.yes .horizontal.short {
  animation-name: horizontal-short;
}
.todij-image-showcase.yes .horizontal.short.reverse-enable {
  animation-name: horizontal-short-reverse;
}
.todij-image-showcase.yes .horizontal.reverse-enable {
  animation-name: horizontal-reverse;
}
.todij-image-showcase.yes .horizontal2 {
  animation: x-anim2 2s alternate infinite;
  -webkit-animation: x-anim2 2s alternate infinite;
}
.todij-image-showcase.yes .rotated_style {
  -webkit-animation: rotated_style 5s linear infinite;
  animation: rotated_style 5s linear infinite;
}