/* =========================================================
   GKM Animations — Universal, Safari-safe
   ---------------------------------------------------------
   • Safe-by-default (content visible)
   • JS opt-in via html.ani-ready
   • Absolute kill switch via html.no-ani
   • No `.ani` class required
   • Works with stagger + IO + reduced motion
   ========================================================= */


/* =========================================================
   SAFETY BASELINE (CRITICAL)
   ---------------------------------------------------------
   Default state: content is visible.
   Animations ONLY hide content after JS explicitly opts in.
   ========================================================= */

/* Any ani-* class participates in the system */
[class*="ani-"] {
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--ani-delay, 0s);
  opacity: 1;
  transform: none;
}

/* JS opt-in: allow entrance animations to set hidden start */
html.ani-ready .ani-in-up,
html.ani-ready .ani-in-down,
html.ani-ready .ani-in-left,
html.ani-ready .ani-in-right,
html.ani-ready .ani-in-zoom,
html.ani-ready .ani-fade-in,
html.ani-ready .ani-flip-down,
html.ani-ready .ani-bg-zoom {
  opacity: 0;
}

/* When in view, animations are allowed to run */
html.ani-ready .is-inview[class*="ani-"] {
  animation-play-state: running;
  opacity: 1;
}

/* Absolute Safari / iOS kill switch */
html.no-ani [class*="ani-"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* =========================================================
   ANIMATION VARIABLES
   ========================================================= */

:root {
  --ani-in-duration: 1s;
  --ani-out-duration: .5s;
  --ani-loop-duration: 20s;

  --ani-distance: 30px;
  --ani-loop-distance: 10px;

  --ani-zoom-from-scale: 1.2;

  --ani-delay: 0s;
  --ani-stagger-step: .2s;

  --ani-hover-flip-duration: .6s;
  --ani-hover-flip-scale: 0;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

/* Entrances */
@keyframes aniInUp {
  from { opacity: 0; transform: translateY(var(--ani-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aniInDown {
  from { opacity: 0; transform: translateY(calc(var(--ani-distance) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aniInLeft {
  from { opacity: 0; transform: translateX(calc(var(--ani-distance) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes aniInRight {
  from { opacity: 0; transform: translateX(var(--ani-distance)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes aniFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes aniZoomElement {
  from { transform: scale(var(--ani-zoom-from-scale)); }
  to   { transform: scale(1); }
}

@keyframes aniFlipDown {
  from {
    opacity: 0;
    transform: perspective(800px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg);
  }
}

/* Background zoom */
@keyframes aniBgZoom {
  from { background-size: 120% auto; }
  to   { background-size: 100% auto; }
}

/* Loops */
@keyframes aniLoopVert {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(calc(var(--ani-loop-distance) * -1)); }
}

@keyframes aniLoopHoriz {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(var(--ani-loop-distance)); }
}

@keyframes aniLoopRandom {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(var(--ani-loop-distance), calc(var(--ani-loop-distance) * -1)); }
  50%  { transform: translate(calc(var(--ani-loop-distance) * -1), var(--ani-loop-distance)); }
  75%  { transform: translate(var(--ani-loop-distance), var(--ani-loop-distance)); }
  100% { transform: translate(0,0); }
}

@keyframes aniHoverFlip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(var(--ani-hover-flip-scale)); }
  100% { transform: scaleX(1); }
}


/* =========================================================
   ENTRANCE CLASSES
   ========================================================= */

.ani-in-up {
  animation-name: aniInUp;
  animation-duration: var(--ani-in-duration);
}

.ani-in-down {
  animation-name: aniInDown;
  animation-duration: var(--ani-in-duration);
}

.ani-in-left {
  animation-name: aniInLeft;
  animation-duration: var(--ani-in-duration);
}

.ani-in-right {
  animation-name: aniInRight;
  animation-duration: var(--ani-in-duration);
}

.ani-fade-in {
  animation-name: aniFadeIn;
  animation-duration: var(--ani-in-duration);
}

.ani-in-zoom {
  animation-name: aniZoomElement;
  animation-duration: var(--ani-in-duration);
  transform-origin: center;
}

.ani-flip-down {
  animation-name: aniFlipDown;
  animation-duration: var(--ani-in-duration);
  transform-origin: top center;
  backface-visibility: hidden;
}

.ani-bg-zoom {
  animation-name: aniBgZoom;
  animation-duration: 2s;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   LOOPING ANIMATIONS
   ========================================================= */

.ani-loop-vert,
.ani-loop-horiz,
.ani-loop-random {
  animation-duration: var(--ani-loop-duration);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.ani-loop-vert   { animation-name: aniLoopVert; }
.ani-loop-horiz  { animation-name: aniLoopHoriz; }
.ani-loop-random { animation-name: aniLoopRandom; }


/* =========================================================
   HOVER EFFECTS
   ========================================================= */

.ani-hover-flip img,
.ani-hover-flip svg {
  display: inline-block;
  transform-origin: center;
  transition: transform var(--ani-hover-flip-duration) ease-in-out;
}

.ani-hover-flip:hover img,
.ani-hover-flip:hover svg {
  animation: aniHoverFlip var(--ani-hover-flip-duration) ease-in-out forwards;
}


/* =========================================================
   STAGGER UTILITIES
   ========================================================= */

.ani-stagger-0  { --ani-delay: calc(var(--ani-stagger-step) * 0); }
.ani-stagger-1  { --ani-delay: calc(var(--ani-stagger-step) * 1); }
.ani-stagger-2  { --ani-delay: calc(var(--ani-stagger-step) * 2); }
.ani-stagger-3  { --ani-delay: calc(var(--ani-stagger-step) * 3); }
.ani-stagger-4  { --ani-delay: calc(var(--ani-stagger-step) * 4); }
.ani-stagger-5  { --ani-delay: calc(var(--ani-stagger-step) * 5); }
.ani-stagger-6  { --ani-delay: calc(var(--ani-stagger-step) * 6); }
.ani-stagger-7  { --ani-delay: calc(var(--ani-stagger-step) * 7); }
.ani-stagger-8  { --ani-delay: calc(var(--ani-stagger-step) * 8); }
.ani-stagger-9  { --ani-delay: calc(var(--ani-stagger-step) * 9); }
.ani-stagger-10 { --ani-delay: calc(var(--ani-stagger-step) * 10); }

/* Kadence auto-stagger */
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1)  { --ani-delay: calc(var(--ani-stagger-step) * 0); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2)  { --ani-delay: calc(var(--ani-stagger-step) * 1); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3)  { --ani-delay: calc(var(--ani-stagger-step) * 2); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(4)  { --ani-delay: calc(var(--ani-stagger-step) * 3); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(5)  { --ani-delay: calc(var(--ani-stagger-step) * 4); }


/* =========================================================
   IMMEDIATE / OVERRIDES
   ========================================================= */

.ani-immediate {
  animation-play-state: running !important;
  opacity: 1 !important;
  transform: none !important;
}


/* =========================================================
   REDUCED MOTION (GLOBAL)
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  [class*="ani-"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}