/* =====================================================================
   SunnyAid — homepage motion layer (9 Sep 2026)
   Owner: "make the page more dynamic". Everything here is gated on html.pm, which premium.js only sets
   when prefers-reduced-motion is NOT set, and every effect is transform/opacity so nothing reflows.
   Entrances key off .pm-in, which premium.js stamps on each <section> as it enters the viewport, so no
   new JavaScript is needed and each sequence plays once. Stagger comes from :nth-child, not from a
   scripted --i, so it also works on markup premium.js never touched.
   Reduced motion: no .pm, so every selector below is inert and the static design is already complete.
   ===================================================================== */

html.sunnyaid { --sa-ease: cubic-bezier(0.16, 1, 0.3, 1); --sa-step: 70ms; }

/* ---------- kicker pills arrive before the heading they label ---------- */
html.sunnyaid.pm #main section .td-kicker,
html.sunnyaid.pm #main section .sa-kicker {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s var(--sa-ease), transform 0.55s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .td-kicker,
html.sunnyaid.pm #main section.pm-in .sa-kicker { opacity: 1; transform: none; }

/* ---------- six gaps: the cards deal in, row by row ---------- */
html.sunnyaid.pm #main .sa-gaps-grid > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s var(--sa-ease), transform 0.7s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-gaps-grid > * { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(1) { transition-delay: 0ms, 0ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(2) { transition-delay: 70ms, 70ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(3) { transition-delay: 140ms, 140ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(4) { transition-delay: 210ms, 210ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(5) { transition-delay: 280ms, 280ms; }
html.sunnyaid.pm #main .sa-gaps-grid > *:nth-child(6) { transition-delay: 350ms, 350ms; }
/* and lift under the pointer */
html.sunnyaid.pm #main .sa-gaps-card { transition: transform 0.3s var(--sa-ease), box-shadow 0.3s var(--sa-ease), border-color 0.3s; }
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-gaps-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(11, 57, 72, 0.42); }
}

/* ---------- four stages: the dashed path draws, then the discs land ---------- */
html.sunnyaid.pm #main .sa-stages-aeo-copy::after {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.75s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-stages-aeo-copy::after { transform: scaleX(1); }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(1) .sa-stages-aeo-copy::after { transition-delay: 260ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(2) .sa-stages-aeo-copy::after { transition-delay: 500ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(3) .sa-stages-aeo-copy::after { transition-delay: 740ms; }

html.sunnyaid.pm #main .sa-stages-aeo-num {
  opacity: 0; transform: scale(0.72);
  transition: opacity 0.4s var(--sa-ease), transform 0.55s var(--sa-ease), background-color 0.3s, color 0.3s;
}
html.sunnyaid.pm #main section.pm-in .sa-stages-aeo-num { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(1) .sa-stages-aeo-num { transition-delay: 180ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(2) .sa-stages-aeo-num { transition-delay: 420ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(3) .sa-stages-aeo-num { transition-delay: 660ms; }
html.sunnyaid.pm #main .sa-stages-aeo-stage:nth-of-type(4) .sa-stages-aeo-num { transition-delay: 900ms; }

/* the photo tile answers the pointer. The scale is on the tile wrapper, never the <img>: rich-photos
   owns transform on the image itself through a scroll-driven animation, and an animation always beats
   a transition on the same property. */
html.sunnyaid.pm #main .sa-stages-aeo-tile { transition: transform 0.4s var(--sa-ease), box-shadow 0.4s var(--sa-ease); }
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-stages-aeo-stage:hover .sa-stages-aeo-tile { transform: translateY(-6px) scale(1.015); }
}

/* ---------- tick lists check themselves off ---------- */
html.sunnyaid.pm #main .sa-ticks > li,
html.sunnyaid.pm #main .sa-stages-aeo-ticks > li,
html.sunnyaid.pm #main .sa-pricing-faq-ticks > li {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.45s var(--sa-ease), transform 0.55s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li { opacity: 1; transform: none; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(1) { transition-delay: 120ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(2) { transition-delay: 200ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(3) { transition-delay: 280ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(4) { transition-delay: 360ms; }
html.sunnyaid.pm #main :is(.sa-ticks, .sa-stages-aeo-ticks, .sa-pricing-faq-ticks) > li:nth-child(n + 5) { transition-delay: 440ms; }

/* ---------- pricing: the three plans rise, the featured one a little further ---------- */
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--sa-ease), transform 0.75s var(--sa-ease), box-shadow 0.35s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-pricing-faq-grid > .sa-pricing-faq-card { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card:nth-of-type(1) { transition-delay: 60ms; }
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card:nth-of-type(2) { transition-delay: 0ms; }
html.sunnyaid.pm #main .sa-pricing-faq-grid > .sa-pricing-faq-card:nth-of-type(3) { transition-delay: 120ms; }
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-pricing-faq-card:hover { box-shadow: 0 26px 52px -28px rgba(11, 57, 72, 0.45); }
}

/* ---------- why-now plates and the closing cards settle in sequence ---------- */
html.sunnyaid.pm #main .sa-whynow-plates > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--sa-ease), transform 0.7s var(--sa-ease);
}
html.sunnyaid.pm #main section.pm-in .sa-whynow-plates > * { opacity: 1; transform: none; }
html.sunnyaid.pm #main .sa-whynow-plates > *:nth-child(2) { transition-delay: 90ms; }
html.sunnyaid.pm #main .sa-whynow-plates > *:nth-child(3) { transition-delay: 180ms; }

/* ---------- the arrow disc turns as its card is entered ---------- */
@media (hover: hover) and (pointer: fine) {
  html.sunnyaid.pm #main .sa-card:hover .sa-arrow__ico,
  html.sunnyaid.pm #main .sa-gaps-card:hover .sa-arrow__ico { transform: rotate(45deg); }
}

/* ---------- belt and braces ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid #main :is(.td-kicker, .sa-kicker, .sa-gaps-grid > *, .sa-stages-aeo-num, .sa-whynow-plates > *,
    .sa-ticks > li, .sa-stages-aeo-ticks > li, .sa-pricing-faq-ticks > li, .sa-pricing-faq-grid > .sa-pricing-faq-card) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.sunnyaid #main .sa-stages-aeo-copy::after { transform: scaleX(1) !important; transition: none !important; }
}