Deviatore ambra con animazioni acceso spento

type: custom:mushroom-template-card
entity: switch.caricacellulare
icon: |
  {% if is_state (config.entity, 'on') %}
   mdi:toggle-switch
  {% else %}
   mdi:toggle-switch-off
  {% endif %}
icon_color: |
  {% if is_state (config.entity, 'on') %}
   amber
  {% else %}
   disabled
  {% endif %}
primary: |
  {% if is_state (config.entity, 'on') %}
   Deviatore acceso
  {% else %}
   Deviatore spento
  {% endif %}
tap_action:
  action: toggle
secondary: |
  {% if is_state (config.entity, 'on') %}
   destra
  {% else %}
   sinistra
  {% endif %}
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        padding-left: 10px;
        font-family: cursive;
        --card-primary-font-size: 22px;
      }
      .secondary {
        padding-left: 10px;
        font-family: cursive;
        font-weight: 300;
        --card-secondary-font-size: 18px;
      }
    .: |
      ha-state-icon {
        animation:  {{ 'pulse 2s ease-in-out infinite;' if not is_state('switch.caricacellulare', 'on') }};
      }
      ha-card {
        background: {{ 'rgba(var(--rgb-amber), 0.3); --card-primary-color: white; --card-secondary-color:white; ' if is_state('switch.caricacellulare', 'on')}};
        animation: {{ 'ping 2s ease-out infinite;' if is_state('switch.caricacellulare', 'on')}};
        transform: scale(1);
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
        }
        100% {
          box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
        }
      }
      ha-card:active {
        transform: translateY(1.5px);
        transition: 0s;
        box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
      }