/* Sport reactietimer, shortcode [sport_timer] */

.sport-timer{
  /* kleuren, ook per shortcode in te stellen */
  --st-accent: #ef1c25;
  --st-secondary: #2e3192;
  --st-on-color: #ffffff;

  /* terugval eerst, daarna afgeleid van de tekstkleur van de site */
  --st-line: rgba(128,128,128,.38);
  --st-soft: rgba(128,128,128,.95);
  --st-track: rgba(128,128,128,.08);
  --st-line: color-mix(in srgb, currentColor 22%, transparent);
  --st-soft: color-mix(in srgb, currentColor 62%, transparent);
  --st-track: color-mix(in srgb, currentColor 7%, transparent);

  container-type: inline-size;
  max-width: 420px;
  margin: 0 auto;
  font-family: inherit;
  color: inherit;
  line-height: 1.4;
}
.sport-timer *{ box-sizing: border-box; }

/* kop */
.sport-timer .st-head{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--st-line);
}
.sport-timer .st-title{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sport-timer .st-meters{
  font-size: .8rem;
  color: var(--st-soft);
  font-variant-numeric: tabular-nums;
}
.sport-timer .st-meters span{ font-weight: 600; }
.sport-timer .st-dot{ opacity: .5; margin: 0 2px; }

/* speelvlak */
.sport-timer .st-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(52vh, 340px);
  padding: 24px 0 30px;
  overflow: hidden;
}
.sport-timer .st-call{
  margin: 0;
  font-size: clamp(5rem, 46cqw, 11rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--st-accent);
  opacity: 0;
  transform: scale(.85);
}
.sport-timer .st-call.is-word{ font-size: clamp(3rem, 26cqw, 6rem); }
.sport-timer .st-call.is-on{ animation: st-snap .25s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes st-snap{ to{ opacity: 1; transform: scale(1); } }

.sport-timer .st-idle{
  margin: 0;
  text-align: center;
  font-size: .95rem;
  letter-spacing: .04em;
}
.sport-timer .st-idle span{
  display: inline-block;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--st-soft);
}

/* wachtstand, bewust geen aftelling */
.sport-timer .st-wait{ position: absolute; display: flex; gap: 9px; }
.sport-timer .st-wait i{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-secondary);
  animation: st-breathe 2.2s ease-in-out infinite;
}
.sport-timer .st-wait i:nth-child(2){ animation-delay: .28s; }
.sport-timer .st-wait i:nth-child(3){ animation-delay: .56s; }
@keyframes st-breathe{ 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:1; transform:scale(1);} }

.sport-timer .st-trail{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  min-height: 20px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--st-soft);
}
.sport-timer .st-trail span{
  border: 1px solid var(--st-line);
  border-radius: 3px;
  padding: 0 6px;
}
.sport-timer .st-trail span:last-child{
  color: var(--st-on-color);
  background: var(--st-accent);
  border-color: var(--st-accent);
}
.sport-timer .st-hide{ display: none; }

/* bediening */
.sport-timer .st-controls{ display: grid; gap: 14px; }
.sport-timer .st-row{ display: grid; gap: 6px; }
.sport-timer .st-label{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-soft);
}
.sport-timer .st-seg{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--st-line);
  border-radius: 20px;
  background: var(--st-track);
  overflow: hidden;
}
.sport-timer button.st-opt{
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  min-height: 46px;
  padding: 0 4px;
  border: 0;
  border-left: 1px solid var(--st-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sport-timer button.st-opt:first-child{ border-left: 0; }
.sport-timer button.st-opt[aria-checked="true"]{
  background: var(--st-secondary);
  color: var(--st-on-color);
  border-color: var(--st-secondary);
}
.sport-timer button.st-opt:focus-visible{ outline: 2px solid var(--st-accent); outline-offset: -4px; }

.sport-timer button.st-go{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  min-height: 60px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: var(--st-accent);
  box-shadow: none;
  color: var(--st-on-color);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.sport-timer button.st-go:hover{ color: var(--st-on-color); }
.sport-timer button.st-go.is-running{ background: var(--st-secondary); }
.sport-timer button.st-go:focus-visible{ outline: 3px solid var(--st-line); outline-offset: 2px; }

.sport-timer .st-status{
  margin: 0;
  text-align: center;
  font-size: .72rem;
  color: var(--st-soft);
}
.sport-timer button.st-link{
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-transform: none;
  text-decoration: underline;
  cursor: pointer;
}
.sport-timer .st-status span{ display: block; margin-top: 3px; }

.sport-timer.is-running .st-seg{ opacity: .6; }

@container (min-width: 380px){
  .sport-timer .st-head{ flex-direction: row; align-items: baseline; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce){
  .sport-timer .st-call.is-on{ animation: none; opacity: 1; transform: none; }
  .sport-timer .st-wait i{ animation: none; opacity: .5; }
}