/****************************************************************************** 
 * TS-Slideshow UI – v5.7
 * - Keeps v5.6 play/pause + arrow bounce behavior
 * - Strengthens .hint-center rule to override Kadence .splide__toggle neutralizer
 ******************************************************************************/

/* ----- Variables ----- */
:root { --ts-ui-neutral: rgba(0,0,0,.60); }

@supports (background: color-mix(in srgb, black, white)) {
  .ts-slideshow-controls { --ts-ui-active: color-mix(in srgb, var(--brandBlue, #1e66f5) 85%, transparent); }
}
@supports not (background: color-mix(in srgb, black, white)) {
  .ts-slideshow-controls { --ts-ui-active: var(--brandBlue, rgba(30, 102, 245, 0.65)); }
}

/* ----- Base positioning ----- */
.ts-slideshow-controls .splide { position: relative; }
.ts-slideshow-controls .splide__track { position: relative; }

/* Overlay zones */
.ts-slideshow-controls .splide__track .ts-zones {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
}
.ts-slideshow-controls .splide__track .ts-zone {
  position: absolute; top: 0; bottom: 0; pointer-events: auto; cursor: pointer;
}
.ts-slideshow-controls .splide__track .ts-zone--left   { left: 0;   width: 25%; }
.ts-slideshow-controls .splide__track .ts-zone--center { left: 25%; width: 50%; }
.ts-slideshow-controls .splide__track .ts-zone--right  { right: 0;  width: 25%; }

/* ----- Arrows: neutral by default, bounce on hover ----- */
.ts-slideshow-controls .splide .splide__arrows .splide__arrow {
  background: var(--ts-ui-neutral);
  color: #fff;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .24s ease, opacity .35s ease;
}

/* Zone hover → show hint (brandBlue, steady) */
.ts-slideshow-controls .splide.hint-prev .splide__arrows .splide__arrow--prev,
.ts-slideshow-controls .splide.hint-next .splide__arrows .splide__arrow--next {
  background: var(--ts-ui-active);
}

/* Direct hover on arrow button → keep background active, nudge icon only */
.ts-slideshow-controls .splide .splide__arrows .splide__arrow:hover {
  background: var(--ts-ui-active);
}

.ts-slideshow-controls .splide .splide__arrows .splide__arrow svg {
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}

.ts-slideshow-controls .splide .splide__arrows .splide__arrow--prev:hover svg {
  animation: ts-arrow-nudge-left 300ms cubic-bezier(.22,1,.36,1);
}
.ts-slideshow-controls .splide .splide__arrows .splide__arrow--next:hover svg {
  animation: ts-arrow-nudge-right 300ms cubic-bezier(.22,1,.36,1);
}

@keyframes ts-arrow-nudge-left {
  0%   { transform: scaleX(-1) translateX(0); }
  20%  { transform: scaleX(-1) translateX(4px); }
  70%  { transform: scaleX(-1) translateX(0); }
  100% { transform: scaleX(-1) translateX(0); }
}
@keyframes ts-arrow-nudge-right {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(4px); }
  70%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* ----- Center play/pause button ----- */
.ts-slideshow-controls .splide > .kb-gallery-pause-button {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; border: 0; z-index: 60;
  background: var(--ts-ui-active);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.ts-slideshow-controls .splide > .kb-gallery-pause-button svg { width: 28px; height: 28px; }

/* Hint-center → force override (even if .splide__toggle is present) */
.ts-slideshow-controls .splide.hint-center > .kb-gallery-pause-button,
.ts-slideshow-controls .splide.hint-center > .kb-gallery-pause-button.splide__toggle {
  opacity: .85; visibility: visible; pointer-events: auto;
  transition: opacity .18s ease, visibility 0s;
}
.ts-slideshow-controls .splide.hint-center > .kb-gallery-pause-button:hover,
.ts-slideshow-controls .splide.hint-center > .kb-gallery-pause-button.splide__toggle:hover {
  opacity: 1;
  animation: ts-bounce-scale 300ms cubic-bezier(.22,1,.36,1);
}

@keyframes ts-bounce-scale {
  0%   { transform: translate(-50%,-50%) scale(1); }
  40%  { transform: translate(-50%,-50%) scale(1.1); }
  70%  { transform: translate(-50%,-50%) scale(0.97); }
  100% { transform: translate(-50%,-50%) scale(1); }
}

/* Activation click/space */
@keyframes ts-center-activate {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.25); opacity: 0; }
}
.ts-slideshow-controls .splide.center-activated > .kb-gallery-pause-button {
  animation: ts-center-activate 650ms cubic-bezier(.22,.61,.36,1);
}

/* ----- Progress ring ----- */
.ts-slideshow-controls .splide > .kb-gallery-pause-button svg.ts-progress {
  position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
  transform: rotate(-90deg);
  opacity: 0; transition: opacity .2s ease;
}
.ts-slideshow-controls .splide > .kb-gallery-pause-button svg.ts-progress.is-visible { opacity: .9; }
.ts-slideshow-controls .splide > .kb-gallery-pause-button svg.ts-progress .ts-progress__circle {
  stroke: var(--brandBlue, #1e66f5);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 113.097;
  stroke-dashoffset: 113.097;
}
.ts-slideshow-controls .splide > .kb-gallery-pause-button svg.ts-progress.is-animating .ts-progress__circle {
  animation: ts-progress var(--ts-progress-duration, 5000ms) linear forwards;
}
@keyframes ts-progress { to { stroke-dashoffset: 0; } }

/* Neutralize Kadence toggle (baseline, overridden by .hint-center above) */
.ts-slideshow-controls .kb-gallery-pause-button.splide__toggle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex !important; opacity: 0; visibility: hidden; pointer-events: none;
}

/* ----- Inactive wrapper dimming ----- */
.ts-slideshow-controls.ts-inactive { opacity: .65; transition: opacity .2s ease; }
.ts-slideshow-controls.ts-active   { opacity: 1;   transition: opacity .2s ease; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ts-slideshow-controls .splide > .kb-gallery-pause-button,
  .ts-slideshow-controls .splide .splide__arrows .splide__arrow,
  .ts-slideshow-controls .splide > .kb-gallery-pause-button svg.ts-progress { transition: none !important; }
}