/* Etel-Tuning review tolerance: a line of fine print under the stars and two short star animations. Only its own .etel-rv* classes; the stars are WooCommerce's. */
.etel-rv-host { position: relative; }
.etel-rv-host p.stars { position: relative; }

/* the fine print: the same quiet line as the checkout's small print, with the shop's orange rule */
.etel-rv-note {
  --etel-orange: #e84e1b; --etel-mute: #6b6b66; --rv-ease: cubic-bezier(.16, 1, .3, 1);
  max-width: 46rem; margin: .1rem 0 1.1rem; padding: .1rem 0 .1rem .8rem; border-left: 3px solid var(--etel-orange);
  font-size: .86rem; line-height: 1.5; color: var(--etel-mute);
}
.etel-rv-note[hidden] { display: none; }
.etel-rv-note.is-in { animation: rv-note-in .45s var(--rv-ease) both; }

/* the hidden button looks like the text around it; only the pointer gives it away */
.etel-rv-note .etel-rv-egg {
  appearance: none; display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; cursor: pointer;
}
.etel-rv-note .etel-rv-egg.is-rattling { display: inline-block; animation: rv-rattle .35s linear; }
.etel-rv-note .etel-rv-egg:focus-visible { outline: 2px dotted var(--etel-orange); outline-offset: 2px; }

/* Toleranzspray (German shop): four soft blobs of mist sweep across the stars */
.etel-rv-mist { position: absolute; left: var(--rv-from, 0); top: 50%; width: 0; height: 0; pointer-events: none; }
.etel-rv-mist i {
  position: absolute; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(232, 78, 27, .34) 0, rgba(232, 78, 27, .12) 45%, rgba(232, 78, 27, 0) 70%);
}
.etel-rv-host p.stars.is-spraying .etel-rv-mist i { animation: rv-mist .8s ease-out both; }
.etel-rv-host p.stars.is-spraying .etel-rv-mist i:nth-child(2) { animation-delay: .06s; margin-top: -2.6rem; }
.etel-rv-host p.stars.is-spraying .etel-rv-mist i:nth-child(3) { animation-delay: .12s; margin-top: -1.7rem; }
.etel-rv-host p.stars.is-spraying .etel-rv-mist i:nth-child(4) { animation-delay: .18s; }

/* graded on a curve (English shop): a wave runs through the star groups */
.etel-rv-host p.stars.is-curving a { animation: rv-wave .5s ease-in-out both; }
.etel-rv-host p.stars.is-curving a:nth-child(2) { animation-delay: .07s; }
.etel-rv-host p.stars.is-curving a:nth-child(3) { animation-delay: .14s; }
.etel-rv-host p.stars.is-curving a:nth-child(4) { animation-delay: .21s; }
.etel-rv-host p.stars.is-curving a:nth-child(5) { animation-delay: .28s; }

/* the star that is lit at the end pops once */
.etel-rv-host p.stars.is-settled a.active { animation: rv-pop .45s var(--rv-ease, cubic-bezier(.16, 1, .3, 1)); }

@keyframes rv-note-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rv-rattle { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px) rotate(-3deg); } 50% { transform: translateX(2px) rotate(3deg); } 80% { transform: translateX(-1px); } }
@keyframes rv-mist {
  0%   { opacity: 0; transform: translateX(0) scale(.4); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--rv-sweep, 200px)) scale(1.6); }
}
@keyframes rv-wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes rv-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .etel-rv-note, .etel-rv-note *, .etel-rv-host p.stars, .etel-rv-host p.stars * { animation: none !important; transition: none !important; }
}