/* Caractère — an interval to play with, never a report of loading progress. */
.waiting-experience {
  --waiting-thumb: 116px;
  --waiting-edge: 58px;
  --waiting-x: 42%;
  --waiting-smear: 0px;
  width: 100%;
  margin-block: clamp(35px, 5vw, 75px) 0;
}
.waiting-bar {
  position: relative;
  height: 108px;
  width: 100%;
  isolation: isolate;
}
.waiting-fill {
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: var(--waiting-edge);
  width: max(0px, calc(var(--waiting-x) - var(--waiting-edge)));
  height: 43px;
  transform: translateY(-50%);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 76%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 76%, transparent);
  animation: waiting-breath 6.8s ease-in-out infinite;
  animation-play-state: paused;
}
.waiting-fill::before,
.waiting-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  pointer-events: none;
}
.waiting-fill::before {
  mask-image: var(--waiting-grain, none);
  -webkit-mask-image: var(--waiting-grain, none);
  mask-size: 192px 100%;
  -webkit-mask-size: 192px 100%;
  mask-repeat: repeat-x;
  -webkit-mask-repeat: repeat-x;
  opacity: .67;
  filter: blur(.25px);
}
.waiting-fill::after {
  inset: 12px -4px;
  filter: blur(10px);
  opacity: .12;
}
.waiting-head {
  position: absolute;
  display: block;
  left: var(--waiting-x);
  top: 50%;
  width: var(--waiting-thumb);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.waiting-head img {
  width: 100%;
  height: auto;
  filter: blur(var(--waiting-smear));
  transition: filter 180ms ease-out;
}
.waiting-head .waiting-c-light { display: none; }
:root[data-theme=night] .waiting-head .waiting-c-dark { display: none; }
:root[data-theme=night] .waiting-head .waiting-c-light { display: block; }
.waiting-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 0;
  margin: 0;
  z-index: 3;
  accent-color: var(--ink);
}
/* The ordinary range stays available until its visual counterpart is bound. */
.waiting-experience:not([data-waiting-ready]) .waiting-head,
.waiting-experience:not([data-waiting-ready]) .waiting-fill { visibility: hidden; }
[data-waiting-ready] .waiting-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  opacity: 0;
  cursor: grab;
}
[data-waiting-ready] .waiting-input:active { cursor: grabbing; }
[data-waiting-ready] .waiting-input::-webkit-slider-runnable-track { height: 80px; background: transparent; }
[data-waiting-ready] .waiting-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--waiting-thumb);
  height: 80px;
  border: 0;
  background: transparent;
}
[data-waiting-ready] .waiting-input::-moz-range-track { height: 80px; background: transparent; border: 0; }
[data-waiting-ready] .waiting-input::-moz-range-thumb { width: var(--waiting-thumb); height: 80px; border: 0; background: transparent; border-radius: 0; }
.waiting-bar:has(.waiting-input:focus-visible) {
  outline: 1px dashed var(--ink);
  outline-offset: 8px;
}
.waiting-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.waiting-meta .eyebrow { font-size: 10px; }
[data-waiting-animation=running] .waiting-fill { animation-play-state: running; }
@keyframes waiting-breath {
  0%, 100% { opacity: .76; transform: translateY(-50%) scaleY(.91); }
  50% { opacity: 1; transform: translateY(-50%) scaleY(1.08); }
}
@media(max-width:760px) {
  .waiting-experience { --waiting-thumb: 88px; --waiting-edge: 44px; margin-top: 30px; }
  .waiting-bar { height: 94px; }
  .waiting-fill { height: 34px; }
  .waiting-meta { align-items: flex-start; gap: 15px; margin-top: 6px; }
  .waiting-meta .eyebrow { max-width: 190px; line-height: 1.6; padding-top: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .waiting-fill { animation: none; }
  .waiting-head img { filter: none; transition: none; }
}
@media print {
  .waiting-fill { animation: none; }
  .waiting-input { display: none; }
}