/* The selection pulse. When a set becomes the one that is on, light breathes out from its icon: a soft gaussian glow
   in the three brand colours, flowing as it swells, two breaths and gone, while a thin ring ripples out and the bar
   itself takes a pass of the same light around its edge. The icon does not change; the light around it does. Then
   the three-colour rule beneath takes the last of it and the row is still again. Announce, then retreat.

   Colour as light, the brand's own rule: red, green and blue never fill a surface. Here they are an aurora, blurred,
   screened over glass, present for under a second. Reduced motion keeps the lift and drops the light. */

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

#dock > span > svg { position: relative; z-index: 1; transition: transform .6s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), filter .6s ease; transform-origin: 50% 50%; }
#dock > span.pl-on > svg { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(255, 250, 248, .5)); transition-duration: .3s; }

/* the glow: a blurred disc of the three colours, spinning slowly so the light flows, breathing twice */
.pl-glow {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from 0deg, var(--r, #F04E4E) 0deg, var(--g, #2BB673) 120deg, var(--b, #2E44E6) 240deg, var(--r, #F04E4E) 360deg);
  filter: blur(12px) saturate(1.2);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%);
  mask: radial-gradient(circle, #000 28%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
  /* played linear: the curve the module writes into pl-breathe carries all the easing */
  animation: pl-breathe 1200ms linear both, pl-flow 1200ms linear both;
}
/* the fallback if the module never wrote its curves; the module's finer sampling of the same shape wins when it does */
@keyframes pl-breathe { 0% { opacity: 0; scale: .38; } 25% { opacity: .76; scale: .66; } 50% { opacity: .36; scale: .94; } 75% { opacity: .56; scale: 1.22; } 100% { opacity: 0; scale: 1.5; } }
@keyframes pl-flow { from { rotate: 0deg; } to { rotate: 150deg; } }

/* the ring: one thin ripple out from the icon, a beat behind the first breath */
.pl-ring {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 250, 248, .6);
  filter: blur(.8px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: pl-ring 980ms cubic-bezier(.16, .7, .3, 1) 140ms both;
}
@keyframes pl-ring { 0% { scale: .5; opacity: .8; } 60% { opacity: .35; } 100% { scale: 2.1; opacity: 0; } }

/* the bar takes a pass of the light around its edge, the way the screen's edge lights when Siri listens */
#dock { position: absolute; }
#dock::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--pl-a, 0deg), var(--r, #F04E4E), var(--g, #2BB673), var(--b, #2E44E6), var(--r, #F04E4E));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(3.5px) saturate(1.15);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
#dock.pl-aurora::before { animation: pl-aurora 1250ms linear both, pl-turn 1250ms linear both; }
@keyframes pl-aurora { 0% { opacity: 0; } 50% { opacity: .82; } 100% { opacity: 0; } }
@keyframes pl-turn { from { --pl-a: 0deg; } to { --pl-a: 240deg; } }

/* the rule takes the last of the light */
#dock .rule::after { transition: filter .55s ease, transform .55s var(--os-settle, cubic-bezier(.22, .8, .22, 1)); }
#dock .rule.pl-land::after { filter: brightness(1.8) saturate(1.2); transform: scaleX(1.3); transition-duration: .32s; }

@media (prefers-reduced-motion: reduce) {
  .pl-glow, .pl-ring { display: none; }
  #dock.pl-aurora::before { animation: none; opacity: .35; transition: opacity .3s ease; }
  #dock > span.pl-on > svg { transform: none; }
  #dock .rule.pl-land::after { transform: none; }
}