/* =================================================================
   STH Image to Video  |  frontend.css
   Turns a static product image into a walking animation.

   Architecture:
     .sthitv-stage          fixed overlay (whole page)
       .sthitv-walker       flex row of step-images, moves horizontally
         .sthitv-step × N   individual image copies, each bob independently
   ================================================================= */

/* ── Stage ────────────────────────────────────────────────────── */
.sthitv-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999990;
}

/* ── Walker: flex container that walks across the screen ──────── */
.sthitv-walker {
  position: absolute;
  left: 0;
  /* bottom set inline via JS config */
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end;       /* images all sit on the same ground line */
  gap: var(--sthitv-gap, 20px);
  pointer-events: all;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  /* Invisible until animation begins — eliminates flicker */
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Horizontal walk animations  (fill:both = 0% applied before tick) ── */
.sthitv-walker.sthitv-walking.sthitv-dir-ltr {
  animation: sthitv-walk-ltr var(--sthitv-dur, 8s) linear both;
}
.sthitv-walker.sthitv-walking.sthitv-dir-rtl {
  animation: sthitv-walk-rtl var(--sthitv-dur, 8s) linear both;
}

/* LTR: walks from left edge to right edge.
   60vw offset = safely off-screen even for multi-step groups. */
@keyframes sthitv-walk-ltr {
  0%   { transform: translateX(-65vw); opacity: 0; }
  6%   { transform: translateX(10px);  opacity: 1; }
  94%  { transform: translateX(calc(100vw - 10px)); opacity: 1; }
  100% { transform: translateX(calc(100vw + 65vw)); opacity: 0; }
}

@keyframes sthitv-walk-rtl {
  0%   { transform: translateX(calc(100vw + 65vw)); opacity: 0; }
  6%   { transform: translateX(calc(100vw - 10px)); opacity: 1; }
  94%  { transform: translateX(10px);  opacity: 1; }
  100% { transform: translateX(-65vw); opacity: 0; }
}

/* Hover: pause everything */
.sthitv-walker:hover                { animation-play-state: paused; z-index: 1000000; }
.sthitv-walker:hover .sthitv-step  { animation-play-state: paused; }

/* ── Step image ───────────────────────────────────────────────── */
.sthitv-step {
  height: var(--sthitv-vh, 20vh);
  width: auto;
  display: block;
  flex-shrink: 0;
  border: none;
  outline: none;
  background: transparent;
  pointer-events: none;       /* clicks handled by the <a> wrapper */
  transform-origin: bottom center;
  will-change: transform;
}

/* ── Walking bob animations ─────────────────────────────────────
   Two keyframes: LTR (faces right) and RTL (faces left, mirrored).
   The step sequence mimics a real walking gait:
     1. Foot planted (slight forward lean)
     2. Heel lifts, toe still on ground
     3. Foot fully in air, swings forward
     4. Foot plants heel-first
     5. Weight transfers, brief compression
   ────────────────────────────────────────────────────────────── */

/* LTR – shoe faces right, walks right */
@keyframes sthitv-bob-ltr {
  0%   { transform: translateY(0px)    rotate( 4deg);  }   /* planted, forward lean  */
  18%  { transform: translateY(-8px)   rotate(-2deg);  }   /* heel lifts              */
  35%  { transform: translateY(-22px)  rotate(-14deg); }   /* full air, swinging fwd  */
  58%  { transform: translateY(-10px)  rotate( 6deg);  }   /* descending, toe first   */
  72%  { transform: translateY(4px)    rotate( 5deg);  }   /* heel lands, compression */
  85%  { transform: translateY(0px)    rotate( 4deg);  }   /* settled                 */
  100% { transform: translateY(0px)    rotate( 4deg);  }   /* planted again           */
}

/* RTL – shoe faces left (scaleX -1), walks left.
   Rotations are mirrored so the lean direction stays natural. */
@keyframes sthitv-bob-rtl {
  0%   { transform: scaleX(-1) translateY(0px)    rotate(-4deg);  }
  18%  { transform: scaleX(-1) translateY(-8px)   rotate( 2deg);  }
  35%  { transform: scaleX(-1) translateY(-22px)  rotate( 14deg); }
  58%  { transform: scaleX(-1) translateY(-10px)  rotate(-6deg);  }
  72%  { transform: scaleX(-1) translateY(4px)    rotate(-5deg);  }
  85%  { transform: scaleX(-1) translateY(0px)    rotate(-4deg);  }
  100% { transform: scaleX(-1) translateY(0px)    rotate(-4deg);  }
}

/* Apply correct bob based on walker direction */
.sthitv-walking.sthitv-dir-ltr .sthitv-step {
  animation: sthitv-bob-ltr var(--sthitv-bob, 0.72s) ease-in-out infinite;
}
.sthitv-walking.sthitv-dir-rtl .sthitv-step {
  animation: sthitv-bob-rtl var(--sthitv-bob, 0.72s) ease-in-out infinite;
}

/* Phase offsets for alternating left-right-left footstep pattern:
   Step 1 & 3 are in-phase (e.g., left foot);
   Step 2 is opposite-phase (right foot). */
.sthitv-step:nth-child(1) { animation-delay: 0s; }
.sthitv-step:nth-child(2) { animation-delay: calc(var(--sthitv-bob, 0.72s) * -0.5); }
.sthitv-step:nth-child(3) { animation-delay: 0s; }

/* ── Drop shadow (optional) ────────────────────────────────────── */
.sthitv-shadow .sthitv-step {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.50))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30));
}

/* ── Ground shadow ellipse beneath each step ────────────────────
   Created via ::after on the walker; CSS-only, no DOM overhead. */
.sthitv-step-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.sthitv-step-wrap::after {
  content: '';
  display: block;
  width: 80%;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.28) 0%, transparent 70%);
  filter: blur(3px);
  margin-top: -4px;
  /* Animate shadow to shrink when foot is in the air */
  animation: sthitv-ground-shadow var(--sthitv-bob, 0.72s) ease-in-out infinite;
}

.sthitv-step-wrap:nth-child(2)::after {
  animation-delay: calc(var(--sthitv-bob, 0.72s) * -0.5);
}

@keyframes sthitv-ground-shadow {
  0%,  85%, 100% { transform: scaleX(1);    opacity: 0.55; }
  35%            { transform: scaleX(0.30); opacity: 0.08; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sthitv-step {
    height: min(var(--sthitv-vh, 20vh), 18vh);
    max-width: 38vw;
  }
  .sthitv-walker {
    gap: max(8px, calc(var(--sthitv-gap, 20px) * 0.6));
  }
}

@media (max-width: 380px) {
  .sthitv-step {
    height: min(var(--sthitv-vh, 20vh), 16vh);
    max-width: 32vw;
  }
}

/* ── Widget placeholder ─────────────────────────────────────────── */
.sthitv-widget { display: none; }