/* Echo ring — generated by es.echoapp.brand/logo/generate.py. */

@property --echo-turn {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.echo-ring {
  --echo-size: 96px;
  width: var(--echo-size);
  height: var(--echo-size);
  border-radius: 50%;
  background: conic-gradient(from var(--echo-turn), #F32735 0.0deg, #F32735 122.4deg, #FF5050 169.2deg, #FF8A2B 198.0deg, #FF5050 237.6deg, #F32735 360.0deg);
  /* The hole. Same 3-in-52 ring width as the app's button. */
  mask: radial-gradient(closest-side, transparent 88.46%, #000 88.46%);
  -webkit-mask: radial-gradient(closest-side, transparent 88.46%, #000 88.46%);
  animation: echo-spin 11s linear infinite;
}

/* A filled centre, for the logo lockup rather than the bare ring. */
.echo-ring--solid {
  mask: none;
  -webkit-mask: none;
  background:
    radial-gradient(closest-side, var(--echo-bezel, #0B0B0E) 88.46%, transparent 88.46%),
    conic-gradient(from var(--echo-turn), #F32735 0.0deg, #F32735 122.4deg, #FF5050 169.2deg, #FF8A2B 198.0deg, #FF5050 237.6deg, #F32735 360.0deg);
}

@keyframes echo-spin {
  0% { --echo-turn: 8.23deg; }
  4.167% { --echo-turn: 21.08deg; }
  8.333% { --echo-turn: 36.27deg; }
  12.5% { --echo-turn: 49.22deg; }
  16.67% { --echo-turn: 53.06deg; }
  20.83% { --echo-turn: 62.97deg; }
  25% { --echo-turn: 85.52deg; }
  29.17% { --echo-turn: 105.80deg; }
  33.33% { --echo-turn: 122.55deg; }
  37.5% { --echo-turn: 144.28deg; }
  41.67% { --echo-turn: 160.29deg; }
  45.83% { --echo-turn: 163.93deg; }
  50% { --echo-turn: 171.77deg; }
  54.17% { --echo-turn: 188.92deg; }
  58.33% { --echo-turn: 203.73deg; }
  62.5% { --echo-turn: 220.78deg; }
  66.67% { --echo-turn: 246.94deg; }
  70.83% { --echo-turn: 267.03deg; }
  75% { --echo-turn: 274.48deg; }
  79.17% { --echo-turn: 284.20deg; }
  83.33% { --echo-turn: 297.45deg; }
  87.5% { --echo-turn: 305.72deg; }
  91.67% { --echo-turn: 319.71deg; }
  95.83% { --echo-turn: 346.07deg; }
  100% { --echo-turn: 368.23deg; }
}

/* Motion is decoration here, so it goes when the reader asks for less of it. */
@media (prefers-reduced-motion: reduce) {
  .echo-ring { animation: none; --echo-turn: 0deg; }
}