/* ==============================
   Solarex — smoother animation.css
   Replace your current animation.css with this file.
   - Keeps existing class names (wow / ud-* / srx-*)
   - Smoother easing, GPU-accel, gentle overshoot & settle
   - Tokens: --d (delay), --dur (duration), --e (easing), --float-dur
   ============================== */

/* -------- tokens (override per-element with inline style if required) -------- */
:root{
  --srex-anim-default-delay: 180ms;
  --srex-anim-default-dur: 900ms;     /* slightly longer for smoother motion */
  --srex-anim-ease: cubic-bezier(.16,.84,.28,1); /* smooth ease-out with gentle curve */
  --srex-float-duration: 6400ms;
  --srx-default-duration: 760ms;
  --srx-default-ease: cubic-bezier(.16,.84,.28,1);
  --srx-float-dur: 6400ms;
}

/* ==========================================================================
   1) Compatibility: existing wow / ud-* classes (use keyframes so fill-mode 'both' works)
   ========================================================================== */

/* helper to ensure elements aren't removed from layout so images still load */
.wow.ud-fade-in-up,
.ud-fade-in-up,
.fadeInUp {
  opacity: 0;
  transform: translate3d(0,18px,0);
  animation-name: srex-reveal-up;
  animation-duration: var(--dur, var(--srex-anim-default-dur));
  animation-timing-function: var(--e, var(--srex-anim-ease));
  animation-delay: var(--d, var(--srex-anim-default-delay));
  animation-fill-mode: both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

/* LEFT */
.wow.ud-fade-in-left,
.ud-fade-in-left,
.fadeInLeft {
  opacity: 0;
  transform: translate3d(-24px,0,0);
  animation-name: srex-reveal-left;
  animation-duration: var(--dur, var(--srex-anim-default-dur));
  animation-timing-function: var(--e, var(--srex-anim-ease));
  animation-delay: var(--d, var(--srex-anim-default-delay));
  animation-fill-mode: both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

/* RIGHT */
.wow.ud-fade-in-right,
.ud-fade-in-right,
.fadeInRight {
  opacity: 0;
  transform: translate3d(24px,0,0);
  animation-name: srex-reveal-right;
  animation-duration: var(--dur, var(--srex-anim-default-dur));
  animation-timing-function: var(--e, var(--srex-anim-ease));
  animation-delay: var(--d, var(--srex-anim-default-delay));
  animation-fill-mode: both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

/* GENERIC FADE */
.wow.ud-fade-in,
.ud-fade-in,
.fadeIn {
  opacity: 0;
  animation-name: srex-reveal-fade;
  animation-duration: var(--dur, var(--srex-anim-default-dur));
  animation-timing-function: var(--e, var(--srex-anim-ease));
  animation-delay: var(--d, var(--srex-anim-default-delay));
  animation-fill-mode: both;
  will-change: opacity;
  backface-visibility: hidden;
}

/* ==========================================================================
   2) New utility classes (keyframe-based) - nice, smooth reveal
   ========================================================================== */

.anim-up {
  opacity: 0;
  transform: translate3d(0,18px,0);
  animation: srex-reveal-up var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both;
  will-change: transform, opacity;
}
.anim-left {
  opacity: 0;
  transform: translate3d(-24px,0,0);
  animation: srex-reveal-left var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both;
  will-change: transform, opacity;
}
.anim-right {
  opacity: 0;
  transform: translate3d(24px,0,0);
  animation: srex-reveal-right var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both;
  will-change: transform, opacity;
}
.anim-fade {
  opacity: 0;
  animation: srex-reveal-fade var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both;
  will-change: opacity;
}
.anim-zoom {
  opacity: 0;
  transform: scale(.96);
  animation: srex-reveal-zoom var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both;
  will-change: transform, opacity;
}

/* ==========================================================================
   3) Scroll-trigger pattern (transition-based for toggle style)
   - .anim + direction, and JS adds .anim--in when in view (optional small JS)
   ========================================================================== */

.anim { opacity: 0; will-change: transform, opacity; transform: translate3d(0,12px,0); }
.anim.anim-up.anim--in    { animation: srex-reveal-up var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both; }
.anim.anim-left.anim--in  { animation: srex-reveal-left var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both; }
.anim.anim-right.anim--in { animation: srex-reveal-right var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both; }
.anim.anim-fade.anim--in  { animation: srex-reveal-fade var(--dur, var(--srex-anim-default-dur)) var(--e, var(--srex-anim-ease)) var(--d, var(--srex-anim-default-delay)) both; }

/* ==========================================================================
   4) Floating / gentle infinite motion (use on wrappers, NOT on <img> directly)
   - float has subtle ease-in-out and gentle amplitude
   ========================================================================== */

@keyframes srex-float {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-6px,0); }
  100% { transform: translate3d(0,0,0); }
}

.float-wrap {
  display: inline-block;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  animation: srex-float var(--srex-float-duration, var(--srx-float-dur)) ease-in-out infinite;
  -webkit-transform: translateZ(0);
}
.anim-float {
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  animation: srex-float var(--srex-float-duration, var(--srx-float-dur)) ease-in-out infinite;
}

/* keep images layout-stable and visible */
.float-wrap img,
.anim-float img,
.float-wrap * img {
  display: block;
  height: auto;
  object-fit: cover;
  opacity: 1;
  -webkit-transform: translateZ(0);
}

/* ==========================================================================
   5) Reveal keyframes — added smooth overshoot + settle for natural motion
   ========================================================================== */

/* slight overshoot (ease-out then settle) */
@keyframes srex-reveal-up {
  0%   { opacity: 0; transform: translate3d(0,20px,0) scale(1); }
  60%  { opacity: 1; transform: translate3d(0,-6px,0) scale(1.004); } /* gentle overshoot */
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes srex-reveal-left {
  0%   { opacity: 0; transform: translate3d(-28px,0,0) scale(1); }
  60%  { opacity: 1; transform: translate3d(6px,0,0) scale(1.002); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes srex-reveal-right {
  0%   { opacity: 0; transform: translate3d(28px,0,0) scale(1); }
  60%  { opacity: 1; transform: translate3d(-6px,0,0) scale(1.002); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes srex-reveal-fade {
  from { opacity: 0; transform: translate3d(0,6px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes srex-reveal-zoom {
  0%   { opacity: 0; transform: scale(.96) translateZ(0); }
  60%  { opacity: 1; transform: scale(1.01) translateZ(0); }
  100% { opacity: 1; transform: scale(1) translateZ(0); }
}

/* ==========================================================================
   6) Transition-based variant for toggled classes (srx-animate / srx-in)
   - If you prefer toggle style instead of keyframes (useful for IntersectionObserver)
   ========================================================================== */

/* base hidden (keeps element in layout so images load) */
.srx-animate {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,18px,0);
  transition:
    opacity var(--dur, var(--srx-default-duration)) var(--e, var(--srx-default-ease)) var(--d, var(--srx-default-delay)),
    transform var(--dur, var(--srx-default-duration)) var(--e, var(--srx-default-ease)) var(--d, var(--srx-default-delay));
  will-change: opacity, transform;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

/* visible state when JS adds .srx-in */
.srx-animate.srx-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* direction modifiers (initial state) */
.srx-fade-up.srx-animate    { transform: translate3d(0,18px,0); }
.srx-fade-left.srx-animate  { transform: translate3d(-28px,0,0); }
.srx-fade-right.srx-animate { transform: translate3d(28px,0,0); }
.srx-zoom.srx-animate       { transform: scale(.96) translateZ(0); }

/* image reveal helper */
.srx-img {
  /*opacity: 0;*/
  transform: translate3d(0,10px,0) scale(1.01);
  transition:
    opacity var(--dur, var(--srx-default-duration)) var(--e, var(--srx-default-ease)) var(--d, 0ms),
    transform var(--dur, var(--srx-default-duration)) var(--e, var(--srx-default-ease)) var(--d, 0ms);
  display:block;
  height:auto;
  object-fit:cover;
}
.srx-img.srx-in { opacity:1; transform:none; }

/* ==========================================================================
   7) Stagger helpers & utilities
   ========================================================================== */
.srx-stagger > * { transition-delay: var(--d, 0ms); }

/* quick nth-child stagger */
.srx-stagger > *:nth-child(1) { --d: 80ms; }
.srx-stagger > *:nth-child(2) { --d: 160ms; }
.srx-stagger > *:nth-child(3) { --d: 240ms; }
.srx-stagger > *:nth-child(4) { --d: 320ms; }
.srx-stagger > *:nth-child(5) { --d: 400ms; }

.srex-force-visible,
.srx-force-visible { opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; animation:none !important; }

/* ==========================================================================
   8) Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wow.ud-fade-in-up, .ud-fade-in-up, .fadeInUp,
  .wow.ud-fade-in-left, .ud-fade-in-left, .fadeInLeft,
  .wow.ud-fade-in-right, .ud-fade-in-right, .fadeInRight,
  .anim-up, .anim-left, .anim-right, .anim-fade, .anim-zoom,
  .anim, .anim--in,
  .srx-animate, .srx-in, .srx-img, .float-wrap, .anim-float {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ================================
   Header Call Fade Right-to-Left
   Usage: Add class "hdr-fade-right" to your call block
   Example:
   <div class="srex-header__call hdr-fade-right">...</div>
   ================================ */

.hdr-fade-right {
  opacity: 0;
  transform: translateX(400px); /* start offset to the right */
  animation: hdr-fade-right-key var(--hdr-call-dur, 600ms) var(--hdr-call-ease, cubic-bezier(.22,.9,.33,1)) forwards;
  animation-delay: var(--hdr-call-delay, 600ms); /* optional delay */
  will-change: opacity, transform;
}

@keyframes hdr-fade-right-key {
  from {
    opacity: 0;
    transform: translateX(600px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* [1] The container */
.img-hover-zoom {
  height: auto;
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}