@keyframes selectPop {
  0% { transform: scale(.92); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes fadeLift {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217,163,33,.24), 0 18px 35px rgba(217,163,33,.25); }
  50% { box-shadow: 0 0 0 7px rgba(217,163,33,.34), 0 22px 42px rgba(217,163,33,.33); }
}

@keyframes shimmer {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(180%) skewX(-18deg); }
}

@keyframes ripple {
  from {
    opacity: .45;
    width: 10px;
    height: 10px;
  }
  to {
    opacity: 0;
    width: 220px;
    height: 220px;
  }
}

.section-reveal {
  opacity: 0;
  transform: translateY(22px);
}

.section-reveal.visible {
  animation: fadeLift .7s ease forwards;
}

.btn,
.filter-chip,
.soft-action,
.round-action,
.icon-pill,
.zoom-controls button,
.close-card,
.selection-item button {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.filter-chip:hover,
.soft-action:hover,
.round-action:hover,
.icon-pill:hover,
.zoom-controls button:hover,
.close-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(22,34,48,.1);
}

.btn:active,
.filter-chip:active,
.soft-action:active,
.round-action:active,
.icon-pill:active,
.zoom-controls button:active {
  transform: translateY(1px) scale(.98);
}

.smile-unit {
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, border-color .16s ease;
}

.smile-unit.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(15,143,135,.24), inset 0 1px 0 rgba(255,255,255,.3);
}

.smile-unit.sponsored::before,
.smile-unit.selected::before,
.smile-unit-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: shimmer 3.2s ease-in-out infinite;
}

.smile-unit.selected::before {
  opacity: .32;
}

.smile-unit.selected {
  animation: selectPop .25s ease both;
}

.timeline-step.current span {
  animation: glowPulse 2.4s ease-in-out infinite;
}

.wall-card,
.left-panel,
.right-panel,
.recent-donors-card,
.faq-card,
.impact-strip,
.timeline-card,
.hero-progress {
  transition: transform .24s ease, box-shadow .24s ease;
}

.wall-card:hover,
.left-panel:hover,
.right-panel:hover,
.recent-donors-card:hover,
.faq-card:hover,
.impact-strip:hover,
.timeline-card:hover,
.hero-progress:hover {
  box-shadow: 0 22px 55px rgba(15,143,135,.11);
}

.wall-grid .smile-unit.sponsored::before,
.wall-grid.is-bulk-selecting .smile-unit,
.wall-grid.is-bulk-selecting .smile-unit::before,
.wall-grid.has-large-selection .smile-unit.selected,
.wall-grid.has-large-selection .smile-unit.selected::before {
  animation: none !important;
  transition: none !important;
}