/* Kredit Keys Motion Effects — frontend
   Everything animates with transform / opacity (clip-path + filter for the
   reveal/blur families). Elements are hidden ONLY under html.kkme-js, which the
   inline bootstrap adds when JS runs and reduced-motion is not requested, so
   content is always visible without JS or for reduced-motion visitors. */

.kkme {
  --kkme-d: 30px;
  --kkme-dur: 800ms;
  --kkme-delay: 0ms;
  --kkme-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- transition engine ---------- */
.kkme-js .kkme {
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--kkme-dur);
  transition-timing-function: var(--kkme-ease);
  transition-delay: var(--kkme-delay);
  will-change: opacity, transform;
}
.kkme-js .kkme.kkme-done { will-change: auto; }
.kkme-js .kkme.kkme-skip { transition: none !important; }

/* hidden (initial) state: applies before the element earns .kkme-in */
.kkme-js .kkme:not(.kkme-in) { opacity: 0; }
.kkme-js .kkme.kkme-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* ---------- entrance families (initial transforms) ---------- */
.kkme-js .kkme:not(.kkme-in).kkme-e-fade-up,
.kkme-js .kkme:not(.kkme-in).kkme-e-premium-rise     { transform: translate3d(0, var(--kkme-d), 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-fade-down        { transform: translate3d(0, calc(var(--kkme-d) * -1), 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-fade-left        { transform: translate3d(calc(var(--kkme-d) * -1), 0, 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-fade-right       { transform: translate3d(var(--kkme-d), 0, 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-soft-rise        { transform: translate3d(0, calc(var(--kkme-d) * .6), 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-text-rise        { transform: translate3d(0, calc(var(--kkme-d) * .6), 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-premium-heading  { transform: translate3d(0, var(--kkme-d), 0); filter: blur(6px); }
.kkme-js .kkme:not(.kkme-in).kkme-e-blur-fade-up     { transform: translate3d(0, var(--kkme-d), 0); filter: blur(8px); }
.kkme-js .kkme:not(.kkme-in).kkme-e-zoom-fade        { transform: scale(.94); }
.kkme-js .kkme:not(.kkme-in).kkme-e-soft-scale-in    { transform: scale(.96) translate3d(0, calc(var(--kkme-d) * .3), 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-card-rise        { transform: translate3d(0, calc(var(--kkme-d) * 1.2), 0) scale(.985); }
.kkme-js .kkme:not(.kkme-in).kkme-e-float-in         { transform: translate3d(0, var(--kkme-d), 0) scale(.97) rotate(-.6deg); }

/* clip reveals — the wrapper itself is the mask */
.kkme-js .kkme:not(.kkme-in).kkme-e-reveal-up        { clip-path: inset(100% 0 0 0); transform: translate3d(0, calc(var(--kkme-d) * .5), 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-reveal-left      { clip-path: inset(0 100% 0 0); transform: translate3d(calc(var(--kkme-d) * -.5), 0, 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-reveal-right     { clip-path: inset(0 0 0 100%); transform: translate3d(calc(var(--kkme-d) * .5), 0, 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-clip-reveal-up   { clip-path: inset(100% 0 0 0); opacity: 1; }
.kkme-js .kkme.kkme-e-reveal-up,
.kkme-js .kkme.kkme-e-reveal-left,
.kkme-js .kkme.kkme-e-reveal-right,
.kkme-js .kkme.kkme-e-clip-reveal-up { opacity: 1; }

/* image family — the wrapper fades/slides, the picture settles from a slight scale */
.kkme-js .kkme.kkme-e-image-reveal img,
.kkme-js .kkme.kkme-e-premium-image-reveal img,
.kkme-js .kkme.kkme-e-elegant-image-zoom img,
.kkme-js .kkme.kkme-e-soft-image-scale img {
  transition: transform calc(var(--kkme-dur) * 1.25) var(--kkme-ease) var(--kkme-delay);
  transform-origin: 50% 60%;
}
.kkme-js .kkme:not(.kkme-in).kkme-e-image-reveal          { clip-path: inset(100% 0 0 0); opacity: 1; }
.kkme-js .kkme:not(.kkme-in).kkme-e-image-reveal img      { transform: scale(1.06); }
.kkme-js .kkme:not(.kkme-in).kkme-e-premium-image-reveal  { clip-path: inset(14% 0 0 0 round 2px); transform: translate3d(0, calc(var(--kkme-d) * .5), 0) scale(.985); }
.kkme-js .kkme:not(.kkme-in).kkme-e-premium-image-reveal img { transform: scale(1.045); }
.kkme-js .kkme:not(.kkme-in).kkme-e-elegant-image-zoom img   { transform: scale(1.07); }
.kkme-js .kkme:not(.kkme-in).kkme-e-soft-image-scale img     { transform: scale(1.05); }
.kkme-js .kkme:not(.kkme-in).kkme-e-image-slide-left   { transform: translate3d(-30px, 0, 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-image-slide-right  { transform: translate3d(30px, 0, 0); }
.kkme-js .kkme:not(.kkme-in).kkme-e-image-slide-up     { transform: translate3d(0, 30px, 0); }
.kkme-js .kkme.kkme-in.kkme-e-image-reveal img, .kkme-js .kkme.kkme-in.kkme-e-premium-image-reveal img,
.kkme-js .kkme.kkme-in.kkme-e-elegant-image-zoom img, .kkme-js .kkme.kkme-in.kkme-e-soft-image-scale img { transform: none; }

/* stagger parents never hide themselves; only their children animate */
.kkme-js .kkme.kkme-stagger:not(.kkme-in) { transform: none !important; filter: none !important; clip-path: none !important; }
.kkme-js .kkme.kkme-stagger-parent { transition: none !important; }

/* ---------- gentle float (badges / floating UI) ---------- */
@keyframes kkmeFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -6px, 0); }
}
/* The float runs on the wrapper itself, starting only after the entrance has
   finished (fill-mode none), so entrance transform and float never fight and no
   new containing block is created for absolutely-positioned badges. */
.kkme-js .kkme-float.kkme-in, .kkme-js .kkme-static.kkme-float {
  animation: kkmeFloat var(--kkme-float-dur, 5.5s) ease-in-out infinite alternate;
  animation-delay: calc(var(--kkme-dur) + var(--kkme-delay) + 200ms);
}
@media (max-width: 767px) {
  .kkme-js .kkme-float.kkme-in, .kkme-js .kkme-static.kkme-float { animation-name: kkmeFloatSm; }
  @keyframes kkmeFloatSm { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -3px, 0); } }
}

/* ---------- subtle parallax (JS drives --kkme-px on scroll via rAF) ---------- */
.kkme-js .kkme-parallax > .elementor-widget-container,
.kkme-js .kkme-parallax > .e-con-inner { transform: translate3d(0, var(--kkme-px, 0px), 0); will-change: transform; }

/* ---------- premium button hover ---------- */
.kkme-hover-button .elementor-button,
.kkme-hover-button-shine .elementor-button,
.kkme-hover-button a.kk-btn-el,
.kkme-hover-button-shine a.kk-btn-el {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.kkme-hover-button .elementor-button:hover,
.kkme-hover-button-shine .elementor-button:hover,
.kkme-hover-button a.kk-btn-el:hover,
.kkme-hover-button-shine a.kk-btn-el:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8, 42, 94, .16); }
.kkme-hover-button .elementor-button-icon,
.kkme-hover-button-shine .elementor-button-icon,
.kkme-hover-button .elementor-button svg,
.kkme-hover-button-shine .elementor-button svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.kkme-hover-button .elementor-button:hover .elementor-button-icon,
.kkme-hover-button-shine .elementor-button:hover .elementor-button-icon,
.kkme-hover-button .elementor-button:hover svg,
.kkme-hover-button-shine .elementor-button:hover svg { transform: translateX(4px); }
/* soft shine: one light pass across the face, only on hover */
.kkme-hover-button-shine .elementor-button,
.kkme-hover-button-shine a.kk-btn-el { position: relative; overflow: hidden; }
.kkme-hover-button-shine .elementor-button::after,
.kkme-hover-button-shine a.kk-btn-el::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -35%; width: 30%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-16deg); pointer-events: none; opacity: 0;
}
.kkme-hover-button-shine .elementor-button:hover::after,
.kkme-hover-button-shine a.kk-btn-el:hover::after { opacity: 1; transform: translateX(520%) skewX(-16deg); transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }

/* ---------- premium card hover ---------- */
.kkme-hover-card:not(.kkme-stagger) > .elementor-widget-container,
.kkme-hover-card.e-con:not(.kkme-stagger),
.kkme-child.kkme-hover-card {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
}
.kkme-hover-card:not(.kkme-stagger) > .elementor-widget-container:hover,
.kkme-hover-card.e-con:not(.kkme-stagger):hover,
.kkme-child.kkme-hover-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8, 42, 94, .12); border-color: rgba(226, 170, 40, .55); }
.kkme-child.kkme-hover-card img, .kkme-hover-card .kk-ico, .kkme-hover-card .elementor-icon { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.kkme-child.kkme-hover-card:hover .kk-ico, .kkme-hover-card .elementor-widget-container:hover .elementor-icon { transform: translateY(-2px); }


/* When the site owner disables the reduced-motion guard, keep the selected
   Elementor timings visible even on systems that globally shorten transitions. */
html.kkme-js .kkme {
  transition-duration: var(--kkme-dur) !important;
  transition-delay: var(--kkme-delay) !important;
}
html.kkme-js .kkme-float.kkme-in,
html.kkme-js .kkme-static.kkme-float {
  animation-duration: var(--kkme-float-dur, 5.5s) !important;
  animation-iteration-count: infinite !important;
}

/* ---------- reduced motion: content is shown, floats/parallax removed ---------- */
@media (prefers-reduced-motion: reduce) {
  html.kkme-reduce .kkme, html.kkme-reduce .kkme * { animation: none !important; }
  html.kkme-reduce .kkme-parallax > .elementor-widget-container, html.kkme-reduce .kkme-parallax > .e-con-inner { transform: none !important; }
  html.kkme-reduce .kkme-hover-button .elementor-button:hover, html.kkme-reduce .kkme-hover-card:hover, html.kkme-reduce .kkme-child.kkme-hover-card:hover { transform: none !important; }
}
html.kkme-reduce .kkme, html.kkme-nomobile .kkme { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }