/* Symbol-only loader. Uses the original logo image without the wordmark.
   Set --pebi-size to resize; keep logo.png beside this stylesheet. */
.pebi-symbol-loader {
  --pebi-size: 96px;
  width: var(--pebi-size);
  aspect-ratio: 166 / 180;
}
.pebi-symbol-loader__mark {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #378fcb, #3dbed0 55%, #82ccb2);
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjYiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTY2IDE4MCI+PGcgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0wIDBIOTVBNzEgNzEgMCAwIDEgOTUgMTQySDU0TDgyIDExN1E4OSAxMTEgOTkgMTExQTQxIDQxIDAgMCAwIDk1IDMwSDQxUTIyIDMwIDIyIDQ4TDggMzNRMCAyNSAwIDEyWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iOTIiIHI9IjE2Ii8+PHBhdGggZD0iTTM0IDEwN1YxNDFRMzQgMTUxIDI2IDE1OEw0IDE4MFYxMzZRNCAxMjcgMTEgMTIxWiIvPjwvZz48cGF0aCBkPSJNMzggNDZMNjkgODIiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMzIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjYiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTY2IDE4MCI+PGcgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0wIDBIOTVBNzEgNzEgMCAwIDEgOTUgMTQySDU0TDgyIDExN1E4OSAxMTEgOTkgMTExQTQxIDQxIDAgMCAwIDk1IDMwSDQxUTIyIDMwIDIyIDQ4TDggMzNRMCAyNSAwIDEyWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iOTIiIHI9IjE2Ii8+PHBhdGggZD0iTTM0IDEwN1YxNDFRMzQgMTUxIDI2IDE1OEw0IDE4MFYxMzZRNCAxMjcgMTEgMTIxWiIvPjwvZz48cGF0aCBkPSJNMzggNDZMNjkgODIiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMzIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  animation: pebi-symbol-pulse 2.4s ease-in-out infinite;
}
.pebi-symbol-loader__mark::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 35%, #d5fff0b3 50%, transparent 65%);
  transform: translateX(-110%);
  animation: pebi-symbol-shimmer 2.4s ease-in-out infinite;
}
@keyframes pebi-symbol-pulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes pebi-symbol-shimmer {
  0%, 10% { transform: translateX(-110%); }
  80%, 100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .pebi-symbol-loader__mark { animation: none; }
  .pebi-symbol-loader__mark::after { display: none; }
}