/*
 * INR Health — Houding Reset.
 *
 * Een rustige begeleiding van 45 seconden. De ring loopt over de hele sessie vol,
 * zodat je ziet hoever je bent zonder dat het opjaagt.
 */

.inr-houding {
  width: 100% !important;
  max-width: 680px !important;
  display: flex !important; flex-direction: column !important; gap: 22px !important;
  animation: inr-health-omhoog .5s ease !important;
}
.inr-houding-kop .inr-health-titel { text-align: left !important; margin: 0 0 6px !important; font-size: 28px !important; }
.inr-houding-kop .inr-health-lead { text-align: left !important; margin: 0 !important; }

.inr-houding-lijst {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  counter-reset: houding !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.inr-houding-lijst li {
  counter-increment: houding !important;
  position: relative !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important;
  padding: 14px 18px 14px 52px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.035) !important;
}
.inr-houding-lijst li::before {
  content: counter(houding) !important;
  position: absolute !important;
  left: 16px !important; top: 14px !important;
  width: 24px !important; height: 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(20,184,166,.18) !important;
  color: #2DD4BF !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.inr-houding-lijst-titel { font-size: 15px !important; font-weight: 600 !important; color: #F3F7FC !important; }
.inr-houding-lijst-tekst { font-size: 13.5px !important; line-height: 1.5 !important; color: rgba(220,230,244,.66) !important; }

/* ── De lopende oefening ────────────────────────────────────────────────── */

.inr-houding-loopt {
  width: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 100% !important;
}
.inr-houding-scene {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 26px !important;
  max-width: 520px !important;
  text-align: center !important;
}

.inr-houding-vorm {
  position: relative !important;
  width: min(62vw, 40vh) !important;
  height: min(62vw, 40vh) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: opacity .3s ease !important;
}
.inr-houding-vorm.is-pauze { opacity: .5 !important; }

.inr-houding-ring { width: 100% !important; height: 100% !important; transform: rotate(-90deg) !important; overflow: visible !important; }
.inr-houding-ring-baan {
  fill: none !important;
  stroke: rgba(255,255,255,.09) !important;
  stroke-width: 5 !important;
}
.inr-houding-ring-voortgang {
  fill: none !important;
  stroke: #2DD4BF !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 6px rgba(45,212,191,.5)) !important;
}

.inr-houding-binnen {
  position: absolute !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important;
}
.inr-houding-icoon { color: rgba(45,212,191,.9) !important; }
.inr-houding-icoon svg { width: clamp(52px, 12vh, 84px) !important; height: clamp(52px, 12vh, 84px) !important; }

/* Kleine, trage bewegingen die de stap ondersteunen. */
.inr-houding-icoon .inr-houding-pijl { animation: inr-houding-zak 3s ease-in-out infinite !important; }
@keyframes inr-houding-zak {
  0%, 100% { opacity: .35 !important; transform: translateY(-2px) !important; }
  50%      { opacity: 1 !important;  transform: translateY(2px) !important; }
}
.inr-houding-icoon .inr-houding-boog { animation: inr-houding-draai 4s ease-in-out infinite !important; transform-origin: 32px 20px !important; }
@keyframes inr-houding-draai {
  0%, 100% { transform: rotate(-12deg) !important; }
  50%      { transform: rotate(12deg) !important; }
}
.inr-houding-icoon .inr-houding-adem { animation: inr-houding-adem 5s ease-in-out infinite !important; transform-origin: 32px 32px !important; }
@keyframes inr-houding-adem {
  0%, 100% { transform: scale(.86) !important; opacity: .6 !important; }
  50%      { transform: scale(1.08) !important; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .inr-houding-icoon .inr-houding-pijl,
  .inr-houding-icoon .inr-houding-boog,
  .inr-houding-icoon .inr-houding-adem { animation: none !important; }
}

.inr-houding-tel {
  font-size: clamp(20px, 3.4vh, 30px) !important;
  font-weight: 300 !important;
  color: rgba(45,212,191,.95) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.inr-houding-tekstblok { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-houding-staptitel {
  margin: 0 !important;
  font-size: clamp(19px, 2.6vh, 24px) !important; font-weight: 600 !important;
  color: #F3F7FC !important;
}
.inr-houding-staptekst {
  margin: 0 !important;
  font-size: 15px !important; line-height: 1.6 !important;
  color: rgba(220,230,244,.72) !important;
}

.inr-houding-stippen { display: flex !important; gap: 9px !important; }
.inr-houding-stip {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.16) !important;
  transition: background .3s ease, transform .3s ease !important;
}
.inr-houding-stip.klaar { background: rgba(45,212,191,.55) !important; }
.inr-houding-stip.bezig { background: #2DD4BF !important; transform: scale(1.35) !important; }

@media (max-width: 600px) {
  .inr-houding-vorm { width: min(76vw, 42vh) !important; height: min(76vw, 42vh) !important; }
  .inr-houding-staptekst { font-size: 14px !important; }
  .inr-houding-scene { gap: 20px !important; padding: 0 6px !important; }
}