/**
 * Scroll Image Motion Pro — Frontend CSS v3.0
 *
 * Animation: pure CSS @keyframes (simpScroll).
 * JS only sets animation-duration + animation-direction as inline style.
 * No JS measurement. Works everywhere.
 */

/* ─── Box sizing ─────────────────────────────────────────────────────────── */
.simp-section,
.simp-section * {
  box-sizing: border-box;
}

/* ─── Section wrapper ────────────────────────────────────────────────────── */
.simp-section {
  position: relative;
  width: 100%;
  height: var(--simp-section-height, 700px);
  overflow: hidden;
}

/* ─── Columns — always row, never stack ──────────────────────────────────── */
.simp-columns-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  gap: var(--simp-column-gap, 24px);
}

.simp-column {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ─── Scrolling track ────────────────────────────────────────────────────── */
.simp-track {
  display: flex;
  flex-direction: column;
  gap: var(--simp-image-gap, 16px);

  /*
   * THE LOOP: PHP outputs 2x images [A,B,C,A,B,C].
   * CSS animates translateY(0) -> translateY(-50%).
   * -50% = exactly one original set in height = seamless snap.
   *
   * animation-duration and animation-direction are set by JS inline.
   * Default is paused; JS sets animationPlayState to 'running'.
   */
  animation: simpScroll 20s linear infinite normal;
  animation-play-state: paused;

  /* GPU compositing */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── The keyframe ───────────────────────────────────────────────────────── */
@keyframes simpScroll {
  from { transform: translateY(0);    }
  to   { transform: translateY(-50%); }
}

/* ─── Image wrapper ──────────────────────────────────────────────────────── */
.simp-img-wrap {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--simp-border-radius, 16px);
  /* Inline style="aspect-ratio:W/H" is always set by PHP (standard=4/3 fallback) */
}

.simp-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--simp-border-radius, 16px);
  transform: translateZ(0);
}

/* ─── Fade overlays (shown via per-section CSS from PHP) ─────────────────── */
.simp-fade {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.simp-fade-top    { top: 0; }
.simp-fade-bottom { bottom: 0; }

/* ─── Placeholder when no images ─────────────────────────────────────────── */
.simp-placeholder {
  padding: 20px;
  color: #bbb;
  font-style: italic;
  font-size: 13px;
  text-align: center;
}

/* ─── Mobile: two columns always side-by-side ────────────────────────────── */
@media (max-width: 767px) {
  .simp-columns-wrapper {
    flex-direction: row;  /* explicit: never let themes override to column */
  }
  .simp-column {
    flex: 1 1 0;
  }
}

/* ─── Animation-disabled state (set by JS for mobile toggle) ─────────────── */
.simp-section[data-anim-disabled="true"] .simp-track {
  animation: none !important;
  transform: translateY(0) !important;
}