/* Gheehnest Custom-Code: Front styles (Block-Styles + Bild-Animationen)
   Hinweis: Animationen sind bewusst leichtgewichtig (ohne externes animate.css).
*/

/* --------------------
   Bild-Basis
-------------------- */
.gcc-block-image{
  margin-top:10px;
  overflow:hidden; /* wichtig für Zoom/Hover */
}
.gcc-block-image img.gcc-img{
  max-width:100%;
  height:auto;
  display:block;
  will-change:transform,opacity;
}

/* --------------------
   Mehrere Bilder: Layouts (stack|grid|slider)
   Hinweis: "single" wird serverseitig auf ein Bild reduziert.
-------------------- */
.gcc-images{margin-top:10px;}
.gcc-image-item img.gcc-img{max-width:100%;height:auto;display:block;will-change:transform,opacity;}

/* Untereinander */
.gcc-images--stack .gcc-image-item{margin-bottom:10px;}
.gcc-images--stack .gcc-image-item:last-child{margin-bottom:0;}

/* "selected" behaves like "stack" (no fallback to legacy single-image field) */
.gcc-images--selected .gcc-image-item{margin-bottom:10px;}
.gcc-images--selected .gcc-image-item:last-child{margin-bottom:0;}

/* Grid */
.gcc-images--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}

/* Slider (simple horizontal scroll) */
.gcc-images--slider{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;}
.gcc-images--slider .gcc-image-item{flex:0 0 100%;scroll-snap-align:start;}

/* --------------------
   Hover-Animationen (Elementor-ähnlich)
   Nutzung: Klasse am <img>: gcc-hover-<name>
-------------------- */
.gcc-hover-grow{transition:transform .2s ease;}
.gcc-hover-grow:hover{transform:scale(1.06);}

.gcc-hover-shrink{transition:transform .2s ease;}
.gcc-hover-shrink:hover{transform:scale(.96);}

.gcc-hover-rotate{transition:transform .25s ease;}
.gcc-hover-rotate:hover{transform:rotate(2deg) scale(1.02);}

.gcc-hover-float{transition:transform .25s ease;}
.gcc-hover-float:hover{transform:translateY(-6px);}

.gcc-hover-sink{transition:transform .25s ease;}
.gcc-hover-sink:hover{transform:translateY(6px);}

.gcc-hover-bob{transition:transform .25s ease;}
.gcc-hover-bob:hover{animation:gcc-bob .9s ease-in-out infinite;}

.gcc-hover-pulse:hover{animation:gcc-pulse .7s ease-in-out infinite;}

.gcc-hover-buzz:hover{animation:gcc-buzz .15s linear infinite;}

/* Weitere Hover-Animationen (Elementor/Hover.css-ähnlich) */
.gcc-hover-pulse-grow:hover{animation:gcc-pulse-grow .45s linear infinite;}
.gcc-hover-pulse-shrink:hover{animation:gcc-pulse-shrink .45s linear infinite;}

.gcc-hover-push:hover{animation:gcc-push .3s linear 1;}
.gcc-hover-pop:hover{animation:gcc-pop .3s linear 1;}

.gcc-hover-bounce-in:hover{animation:gcc-bounce-in .5s linear 1;}
.gcc-hover-bounce-out:hover{animation:gcc-bounce-out .5s linear 1;}

.gcc-hover-grow-rotate{transition:transform .25s ease;}
.gcc-hover-grow-rotate:hover{transform:scale(1.06) rotate(2deg);}

.gcc-hover-hang:hover{animation:gcc-hang .9s ease-in-out infinite;}

.gcc-hover-skew{transition:transform .25s ease;}
.gcc-hover-skew:hover{transform:skew(-4deg);}
.gcc-hover-skew-forward{transition:transform .25s ease;}
.gcc-hover-skew-forward:hover{transform:skew(-6deg);}
.gcc-hover-skew-backward{transition:transform .25s ease;}
.gcc-hover-skew-backward:hover{transform:skew(6deg);}

.gcc-hover-wobble-vertical:hover{animation:gcc-wobble-vertical 1s ease-in-out 1;}
.gcc-hover-wobble-horizontal:hover{animation:gcc-wobble-horizontal 1s ease-in-out 1;}
.gcc-hover-wobble-to-bottom-right:hover{animation:gcc-wobble-to-bottom-right 1s ease-in-out 1;}
.gcc-hover-wobble-to-top-right:hover{animation:gcc-wobble-to-top-right 1s ease-in-out 1;}
.gcc-hover-wobble-top:hover{animation:gcc-wobble-top 1s ease-in-out 1;}
.gcc-hover-wobble-bottom:hover{animation:gcc-wobble-bottom 1s ease-in-out 1;}
.gcc-hover-wobble-skew:hover{animation:gcc-wobble-skew 1s ease-in-out 1;}

.gcc-hover-buzz-out:hover{animation:gcc-buzz-out .75s linear 1;}

@keyframes gcc-bob{
  0%,100%{transform:translateY(-4px);}
  50%{transform:translateY(-8px);}
}
@keyframes gcc-pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.04);}
  100%{transform:scale(1);}
}
@keyframes gcc-buzz{
  0%{transform:translateX(0) rotate(0deg);}
  25%{transform:translateX(1px) rotate(1deg);}
  50%{transform:translateX(0) rotate(0deg);}
  75%{transform:translateX(-1px) rotate(-1deg);}
  100%{transform:translateX(0) rotate(0deg);}
}

@keyframes gcc-pulse-grow{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}
@keyframes gcc-pulse-shrink{0%{transform:scale(1);}50%{transform:scale(.92);}100%{transform:scale(1);}}

@keyframes gcc-push{50%{transform:scale(.9);}100%{transform:scale(1);}}
@keyframes gcc-pop{50%{transform:scale(1.1);}100%{transform:scale(1);}}

@keyframes gcc-bounce-in{0%{transform:scale(1);}50%{transform:scale(1.2);}100%{transform:scale(1);}}
@keyframes gcc-bounce-out{0%{transform:scale(1);}50%{transform:scale(.8);}100%{transform:scale(1);}}

@keyframes gcc-hang{0%,100%{transform:translateY(6px);}50%{transform:translateY(10px);}}

@keyframes gcc-wobble-vertical{
  16.65%{transform:translateY(8px);}33.3%{transform:translateY(-6px);}49.95%{transform:translateY(4px);}66.6%{transform:translateY(-2px);}83.25%{transform:translateY(1px);}100%{transform:translateY(0);} }
@keyframes gcc-wobble-horizontal{
  16.65%{transform:translateX(8px);}33.3%{transform:translateX(-6px);}49.95%{transform:translateX(4px);}66.6%{transform:translateX(-2px);}83.25%{transform:translateX(1px);}100%{transform:translateX(0);} }
@keyframes gcc-wobble-to-bottom-right{
  16.65%{transform:translate(8px,8px);}33.3%{transform:translate(-6px,-6px);}49.95%{transform:translate(4px,4px);}66.6%{transform:translate(-2px,-2px);}83.25%{transform:translate(1px,1px);}100%{transform:translate(0,0);} }
@keyframes gcc-wobble-to-top-right{
  16.65%{transform:translate(8px,-8px);}33.3%{transform:translate(-6px,6px);}49.95%{transform:translate(4px,-4px);}66.6%{transform:translate(-2px,2px);}83.25%{transform:translate(1px,-1px);}100%{transform:translate(0,0);} }
@keyframes gcc-wobble-top{
  16.65%{transform:skew(-12deg);}33.3%{transform:skew(10deg);}49.95%{transform:skew(-6deg);}66.6%{transform:skew(4deg);}83.25%{transform:skew(-2deg);}100%{transform:skew(0);} }
@keyframes gcc-wobble-bottom{
  16.65%{transform:skew(12deg);}33.3%{transform:skew(-10deg);}49.95%{transform:skew(6deg);}66.6%{transform:skew(-4deg);}83.25%{transform:skew(2deg);}100%{transform:skew(0);} }
@keyframes gcc-wobble-skew{
  16.65%{transform:skew(-12deg);}33.3%{transform:skew(10deg);}49.95%{transform:skew(-6deg);}66.6%{transform:skew(4deg);}83.25%{transform:skew(-2deg);}100%{transform:skew(0);} }

@keyframes gcc-buzz-out{
  10%{transform:translateX(3px) rotate(2deg);}20%{transform:translateX(-3px) rotate(-2deg);}30%{transform:translateX(3px) rotate(2deg);}40%{transform:translateX(-3px) rotate(-2deg);}50%{transform:translateX(2px) rotate(1deg);}60%{transform:translateX(-2px) rotate(-1deg);}70%{transform:translateX(2px) rotate(1deg);}80%{transform:translateX(-2px) rotate(-1deg);}90%{transform:translateX(1px) rotate(0);}100%{transform:translateX(0) rotate(0);} }

/* --------------------
   Entrance Animationen
   Nutzung: Klasse am <img>: gcc-anim-<name>
-------------------- */
.gcc-anim-none{animation:none !important;}

.gcc-anim-fadeIn{animation:gcc-fadeIn .7s ease both;}
.gcc-anim-fadeInDown{animation:gcc-fadeInDown .7s ease both;}
.gcc-anim-fadeInUp{animation:gcc-fadeInUp .7s ease both;}
.gcc-anim-fadeInLeft{animation:gcc-fadeInLeft .7s ease both;}
.gcc-anim-fadeInRight{animation:gcc-fadeInRight .7s ease both;}

.gcc-anim-zoomIn{animation:gcc-zoomIn .7s ease both;}
.gcc-anim-zoomInDown{animation:gcc-zoomInDown .7s ease both;}
.gcc-anim-zoomInLeft{animation:gcc-zoomInLeft .7s ease both;}
.gcc-anim-zoomInRight{animation:gcc-zoomInRight .7s ease both;}
.gcc-anim-zoomInUp{animation:gcc-zoomInUp .7s ease both;}

.gcc-anim-slideInDown{animation:gcc-slideInDown .7s ease both;}
.gcc-anim-slideInUp{animation:gcc-slideInUp .7s ease both;}
.gcc-anim-slideInLeft{animation:gcc-slideInLeft .7s ease both;}
.gcc-anim-slideInRight{animation:gcc-slideInRight .7s ease both;}

.gcc-anim-rotateIn{animation:gcc-rotateIn .75s ease both;}

.gcc-anim-rotateInDownLeft{animation:gcc-rotateInDownLeft .75s ease both;}
.gcc-anim-rotateInDownRight{animation:gcc-rotateInDownRight .75s ease both;}
.gcc-anim-rotateInUpLeft{animation:gcc-rotateInUpLeft .75s ease both;}
.gcc-anim-rotateInUpRight{animation:gcc-rotateInUpRight .75s ease both;}

.gcc-anim-bounceIn{animation:gcc-bounceIn .75s cubic-bezier(.215,.61,.355,1) both;}

.gcc-anim-bounceInDown{animation:gcc-bounceInDown .75s cubic-bezier(.215,.61,.355,1) both;}
.gcc-anim-bounceInLeft{animation:gcc-bounceInLeft .75s cubic-bezier(.215,.61,.355,1) both;}
.gcc-anim-bounceInRight{animation:gcc-bounceInRight .75s cubic-bezier(.215,.61,.355,1) both;}
.gcc-anim-bounceInUp{animation:gcc-bounceInUp .75s cubic-bezier(.215,.61,.355,1) both;}

.gcc-anim-lightSpeedIn{animation:gcc-lightSpeedIn .8s ease-out both;}

.gcc-anim-rollIn{animation:gcc-rollIn .75s ease both;}

@keyframes gcc-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes gcc-fadeInDown{from{opacity:0;transform:translate3d(0,-16px,0);}to{opacity:1;transform:none;}}
@keyframes gcc-fadeInUp{from{opacity:0;transform:translate3d(0,16px,0);}to{opacity:1;transform:none;}}
@keyframes gcc-fadeInLeft{from{opacity:0;transform:translate3d(-16px,0,0);}to{opacity:1;transform:none;}}
@keyframes gcc-fadeInRight{from{opacity:0;transform:translate3d(16px,0,0);}to{opacity:1;transform:none;}}

@keyframes gcc-zoomIn{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}
@keyframes gcc-zoomInDown{from{opacity:0;transform:translate3d(0,-18px,0) scale(.85);}to{opacity:1;transform:none;}}
@keyframes gcc-zoomInLeft{from{opacity:0;transform:translate3d(-24px,0,0) scale(.85);}to{opacity:1;transform:none;}}
@keyframes gcc-zoomInRight{from{opacity:0;transform:translate3d(24px,0,0) scale(.85);}to{opacity:1;transform:none;}}
@keyframes gcc-zoomInUp{from{opacity:0;transform:translate3d(0,18px,0) scale(.85);}to{opacity:1;transform:none;}}

@keyframes gcc-slideInDown{from{transform:translate3d(0,-24px,0);opacity:0;}to{transform:none;opacity:1;}}
@keyframes gcc-slideInUp{from{transform:translate3d(0,24px,0);opacity:0;}to{transform:none;opacity:1;}}
@keyframes gcc-slideInLeft{from{transform:translate3d(-24px,0,0);opacity:0;}to{transform:none;opacity:1;}}
@keyframes gcc-slideInRight{from{transform:translate3d(24px,0,0);opacity:0;}to{transform:none;opacity:1;}}

@keyframes gcc-rotateIn{from{opacity:0;transform:rotate(-8deg) scale(.98);}to{opacity:1;transform:none;}}

@keyframes gcc-rotateInDownLeft{from{opacity:0;transform-origin:left bottom;transform:rotate(-45deg);}to{opacity:1;transform-origin:left bottom;transform:none;}}
@keyframes gcc-rotateInDownRight{from{opacity:0;transform-origin:right bottom;transform:rotate(45deg);}to{opacity:1;transform-origin:right bottom;transform:none;}}
@keyframes gcc-rotateInUpLeft{from{opacity:0;transform-origin:left bottom;transform:rotate(45deg);}to{opacity:1;transform-origin:left bottom;transform:none;}}
@keyframes gcc-rotateInUpRight{from{opacity:0;transform-origin:right bottom;transform:rotate(-45deg);}to{opacity:1;transform-origin:right bottom;transform:none;}}

@keyframes gcc-bounceIn{
  0%{opacity:0;transform:scale(.3);}
  20%{transform:scale(1.05);}
  40%{transform:scale(.9);}
  60%{opacity:1;transform:scale(1.02);}
  80%{transform:scale(.98);}
  100%{opacity:1;transform:scale(1);}
}

@keyframes gcc-bounceInDown{
  0%{opacity:0;transform:translate3d(0,-24px,0) scale(.3);}20%{transform:translate3d(0,0,0) scale(1.05);}40%{transform:translate3d(0,-6px,0) scale(.9);}60%{opacity:1;transform:translate3d(0,0,0) scale(1.02);}80%{transform:translate3d(0,-2px,0) scale(.98);}100%{opacity:1;transform:translate3d(0,0,0) scale(1);} }
@keyframes gcc-bounceInLeft{
  0%{opacity:0;transform:translate3d(-24px,0,0) scale(.3);}20%{transform:translate3d(0,0,0) scale(1.05);}40%{transform:translate3d(-6px,0,0) scale(.9);}60%{opacity:1;transform:translate3d(0,0,0) scale(1.02);}80%{transform:translate3d(-2px,0,0) scale(.98);}100%{opacity:1;transform:translate3d(0,0,0) scale(1);} }
@keyframes gcc-bounceInRight{
  0%{opacity:0;transform:translate3d(24px,0,0) scale(.3);}20%{transform:translate3d(0,0,0) scale(1.05);}40%{transform:translate3d(6px,0,0) scale(.9);}60%{opacity:1;transform:translate3d(0,0,0) scale(1.02);}80%{transform:translate3d(2px,0,0) scale(.98);}100%{opacity:1;transform:translate3d(0,0,0) scale(1);} }
@keyframes gcc-bounceInUp{
  0%{opacity:0;transform:translate3d(0,24px,0) scale(.3);}20%{transform:translate3d(0,0,0) scale(1.05);}40%{transform:translate3d(0,6px,0) scale(.9);}60%{opacity:1;transform:translate3d(0,0,0) scale(1.02);}80%{transform:translate3d(0,2px,0) scale(.98);}100%{opacity:1;transform:translate3d(0,0,0) scale(1);} }

@keyframes gcc-lightSpeedIn{
  from{opacity:0;transform:translate3d(48px,0,0) skewX(-30deg);}
  60%{opacity:1;transform:skewX(20deg);}
  80%{transform:skewX(-5deg);}
  to{transform:none;}
}

@keyframes gcc-rollIn{
  from{opacity:0;transform:translate3d(-24px,0,0) rotate(-120deg);}
  to{opacity:1;transform:none;}
}