/* ==========================================================================
   Solvyn — Shared site footer (single source of truth)

   Loaded on every page via js/site-footer.js, which fetches
   partials/footer.html into a page's <div id="site-footer-slot"></div>.
   Each page still owns a thin *-footer-wrap class that only sets the
   negative-margin bleed needed to flush the footer against that page's
   own panel edges (padding differs per page: 40px on detail/projects
   pages, 8px on pricing) — that bleed amount is page layout glue, not
   footer content, so it stays out of this file.

   Edit spacing, copy, or the garden animation here and it updates every
   page that includes the partial.
   ========================================================================== */

.footer-mobile-clip { position: static; height: auto; overflow: visible; }
.footer { position: relative; }
.footer__visual { position: relative; }
.footer__wordmark { position: absolute; }
.footer__wordmark img { width: 100%; display: block; }
.footer__photo { position: absolute; overflow: hidden; }
.footer__photo-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform-origin: 50% 100%;
}
.footer__photo-layer--base { animation: wind-sway-base 6.6s ease-in-out infinite; }
.footer__photo-layer--top {
  clip-path: inset(0 0 42% 0);
  animation: wind-sway-top 5.4s ease-in-out infinite;
}
@keyframes wind-sway-base {
  0%, 100% { transform: rotate(0deg); }
  9%   { transform: rotate(0.18deg); }
  18%  { transform: rotate(-0.05deg); }
  34%  { transform: rotate(0.32deg); }
  47%  { transform: rotate(0.08deg); }
  63%  { transform: rotate(-0.28deg); }
  79%  { transform: rotate(0.15deg); }
}
@keyframes wind-sway-top {
  0%, 100% { transform: rotate(0deg); }
  7%   { transform: rotate(0.4deg); }
  15%  { transform: rotate(-0.15deg); }
  29%  { transform: rotate(0.85deg); }
  41%  { transform: rotate(0.2deg); }
  58%  { transform: rotate(-0.7deg); }
  74%  { transform: rotate(0.35deg); }
  88%  { transform: rotate(-0.1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__photo-layer--base, .footer__photo-layer--top { animation: none; }
}
.footer__garden { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.garden-butterfly { position: absolute; left: 0; top: 0; width: 52px; height: 52px; will-change: transform; }
.garden-butterfly__art {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: butterfly-flutter-rest 2.2s ease-in-out infinite alternate;
}
.garden-butterfly.is-flying .garden-butterfly__art {
  animation: butterfly-flutter-fly 0.11s linear infinite;
}
@keyframes butterfly-flutter-rest {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.94); }
}
@keyframes butterfly-flutter-fly {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.68); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__garden { display: none; }
}

.footer__cta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer__logo-chip {
  width: 37.5px; height: auto; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.3); border: 1px solid var(--white);
  box-shadow: var(--shadow-footer-logo); backdrop-filter: blur(2px);
}
.footer__logo-chip img { width: 100%; display: block; }
.footer__heading { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-32); line-height: 1.26; text-align: center; color: var(--purple-800); }
.footer__body { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-14); line-height: 1.4; color: var(--slate-500); text-align: center; max-width: 422px; }

.site-footer-wrap .footer { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1025px) {
  .site-footer-wrap .footer__cta { width: 422px; max-width: 100%; box-sizing: border-box; }
  .site-footer-wrap .footer__visual {
    position: relative;
    width: 100%;
    margin-top: -90px; /* the photo has ~150px of empty sky above the wordmark; pull it up under the CTA */
    pointer-events: none;
    aspect-ratio: 814 / 412;
    overflow: hidden;
    border-radius: 0 0 var(--radius-panel-lg) var(--radius-panel-lg);
  }
  .site-footer-wrap .footer__photo { inset: 0; width: 100%; height: 100%; }
  .site-footer-wrap .footer__wordmark { top: 30.5%; left: 50%; transform: translateX(-50%); width: 95.7%; }
  .site-footer-wrap .footer__garden { inset: 0; opacity: 1; }
}

.footer__copyright {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 25px 0 40px; /* Figma 806:3608 — 25px under the panel */
  text-align: center;
  font-size: var(--text-14);
  color: var(--slate-500);
}

@media (max-width: 1024px) {
  .footer__copyright { margin: 24px 0 40px; }
  .footer__cta { width: 100%; max-width: none; gap: 20px; }
  .footer__heading { font-size: 24px; }
  .footer__body { max-width: 300px; margin: 0 auto; }
  .footer__visual {
    width: 100%;
    aspect-ratio: 590 / 299;
    overflow: hidden;
    margin-top: -41px;
    border-radius: 0 0 32px 32px;
  }
  .footer__photo { position: absolute; inset: 0; width: 100%; height: 100%; top: 0; left: 0; transform: none; }
  .footer__wordmark { top: 51.8%; left: 50%; transform: translate(-50%, -50%); width: 85%; }
  .footer__garden { inset: 0; opacity: 1; }
  .garden-butterfly { left: auto; right: auto; aspect-ratio: 1 / 1; }
  .garden-butterfly:nth-child(1) { top: 38%; left: 6%;  width: 7% !important;   height: auto !important; }
  .garden-butterfly:nth-child(2) { top: 36%; left: 84%; width: 6% !important;   height: auto !important; }
  .garden-butterfly:nth-child(3) { top: 48%; left: 64%; width: 5.5% !important; height: auto !important; }
  .garden-butterfly:nth-child(4) { top: 40%; left: 26%; width: 5% !important;   height: auto !important; }
  .garden-butterfly:nth-child(5) { top: 56%; left: 46%; width: 4.5% !important; height: auto !important; }
}