/* Animaak Slider (front-end) */
.animaak-slider{
  --animaak-num-active-color: #ff3b30;
  --animaak-num-hover-bg: #8fd19e;
  --animaak-dot-color: #d1d5db;
  --animaak-dot-active-color: #111827;
  --animaak-timer-color: #ff3b30;

  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(280px, 520px);
  gap:72px;
  align-items:center;
}

@media (max-width: 900px){
  .animaak-slider{ grid-template-columns: 1fr; gap:28px; }
}

/* Left: stacked images */
.animaak-slider__left{ position:relative; }

.animaak-stack{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: visible;
  padding: 18px 10px 10px 18px;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,0.10));
}

.animaak-stack__img{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  background:#fff;
  opacity:0;
  transform-origin: 50% 50%;
  transition: opacity 420ms ease, transform 520ms ease;
  box-shadow: 0 18px 55px rgba(0,0,0,0.08);
}

.animaak-stack__img.is-active{
  opacity:1;
  transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  z-index:4;
}

.animaak-stack__img.is-next1{
  opacity:1;
  transform: translateX(-18px) translateY(10px) rotate(-3deg) scale(0.992);
  z-index:3;
}

.animaak-stack__img.is-next2{
  opacity:1;
  transform: translateX(-36px) translateY(20px) rotate(-6deg) scale(0.985);
  z-index:2;
}

.animaak-stack__img.is-next3{
  opacity:1;
  transform: translateX(-54px) translateY(30px) rotate(-9deg) scale(0.978);
  z-index:1;
}

/* Dots (moved 15px down) */
.animaak-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:33px; /* +15px */
}

.animaak-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background: var(--animaak-dot-color);
  border:0;
  padding:0;
  cursor:pointer;
}
.animaak-dot.is-active{ background: var(--animaak-dot-active-color); }

/* Right side constant-height box */
.animaak-rightbox{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}

/* Numbers row: no gaps, circles touch */
.animaak-nums{
  display:flex;
  gap:0;
  align-items:center;
  margin: 0 0 18px 0;
  flex-wrap:wrap;
}

/* h5 wrapper requested */
.animaak-numwrap{
  margin:0;
  padding:0;
  line-height:1;
}

/* Fixed 50x50 circle hit area */
.animaak-numbtn{
  width:50px;
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: transparent;
  border:0;
  padding:0;
  cursor:pointer;
  color:#111827;
  line-height:1;
  transition: background-color 160ms ease, color 160ms ease;
  position:relative;
}

.animaak-numbtn:hover{
  background: var(--animaak-num-hover-bg);
}

.animaak-numbtn.is-active{
  color: var(--animaak-num-active-color);
  font-weight:700;
}

/* Timer ring (SVG) */
.animaak-timer{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform: rotate(-90deg);
}

.animaak-timer circle{
  fill: none;
  stroke: var(--animaak-timer-color);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
}

.animaak-numbtn.is-timing .animaak-timer circle{
  opacity: 1;
  animation: animaak-ring linear forwards;
}

@keyframes animaak-ring{
  from { stroke-dashoffset: var(--animaak-ring-len); }
  to   { stroke-dashoffset: 0; }
}

.animaak-content__item{ display:none; }
.animaak-content__item.is-active{ display:block; }

/* Leave title & paragraph styling to the theme/WordPress */