/* Motion for the four inline benefit drawings. The whole section wakes them. */
.why-solar-section .benefit-svg {
  overflow: visible;
}
.benefit-grid article:nth-child(1) { --solar-delay: 0s; }
.benefit-grid article:nth-child(2) { --solar-delay: .18s; }
.benefit-grid article:nth-child(3) { --solar-delay: .36s; }
.benefit-grid article:nth-child(4) { --solar-delay: .54s; }

@media (prefers-reduced-motion: no-preference) {
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-savings {
    animation: solar-savings-bob 3.2s ease-in-out var(--solar-delay) infinite;
  }
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-savings .icon-motion {
    stroke-dasharray: 43;
    animation: solar-savings-draw 3.2s ease-in-out var(--solar-delay) infinite;
  }

  .why-solar-section:is(:hover, :focus-within) .benefit-svg-roof {
    animation: solar-roof-lift 3.3s ease-in-out var(--solar-delay) infinite;
  }
  .why-solar-section .benefit-svg-roof circle.icon-motion,
  .why-solar-section .benefit-svg-roof path.icon-motion {
    transform-box: view-box;
    transform-origin: 24px 7px;
  }
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-roof circle.icon-motion {
    animation: solar-sun-pulse 3.3s ease-in-out var(--solar-delay) infinite;
  }
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-roof path.icon-motion {
    animation: solar-sun-rays 3.3s ease-in-out var(--solar-delay) infinite;
  }

  .why-solar-section:is(:hover, :focus-within) .benefit-svg-future {
    animation: solar-future-lift 3.4s ease-in-out var(--solar-delay) infinite;
  }
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-future .icon-motion {
    stroke-dasharray: 45;
    animation: solar-future-draw 3.4s ease-in-out var(--solar-delay) infinite;
  }

  .why-solar-section .benefit-svg-clean {
    transform-box: view-box;
    transform-origin: 8px 26px;
  }
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-clean {
    animation: solar-leaf-sway 3.6s ease-in-out var(--solar-delay) infinite;
  }
  .why-solar-section:is(:hover, :focus-within) .benefit-svg-clean .icon-motion {
    stroke-dasharray: 76;
    animation: solar-leaf-draw 3.6s ease-in-out var(--solar-delay) infinite;
  }
}

@keyframes solar-savings-bob {
  0%, 12%, 45%, 100% { transform: translateY(0); }
  27% { transform: translateY(-3px); }
}
@keyframes solar-savings-draw {
  0% { stroke-dashoffset: 43; opacity: .25; }
  28%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 43; opacity: .25; }
}
@keyframes solar-roof-lift {
  0%, 14%, 47%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
}
@keyframes solar-sun-pulse {
  0%, 13%, 55%, 100% { transform: scale(1); }
  31% { transform: scale(1.26); }
}
@keyframes solar-sun-rays {
  0%, 10%, 52%, 100% { transform: rotate(0); opacity: .8; }
  31% { transform: rotate(28deg); opacity: 1; }
}
@keyframes solar-future-lift {
  0%, 15%, 46%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
}
@keyframes solar-future-draw {
  0% { stroke-dashoffset: 45; opacity: .3; }
  30%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 45; opacity: .3; }
}
@keyframes solar-leaf-sway {
  0%, 12%, 60%, 100% { transform: rotate(0); }
  30% { transform: rotate(-9deg); }
  44% { transform: rotate(4deg); }
}
@keyframes solar-leaf-draw {
  0% { stroke-dashoffset: 76; opacity: .35; }
  34%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 76; opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .why-solar-section .benefit-svg,
  .why-solar-section .benefit-svg .icon-motion {
    animation: none !important;
  }
}