/* Suzy's Sweet Tarts — signature motion styles: the header charm + feedback. */
.site-header { position: relative; }

.freshie-charm {
  position: absolute;
  left: 10px;
  top: 100%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transform-origin: 50% -4px;
}
.freshie-charm .charm-string {
  width: 2px;
  height: 13px;
  background: repeating-linear-gradient(#8a6a72 0 3px, transparent 3px, transparent 5px);
}
.freshie-charm svg { display: block; filter: drop-shadow(0 2px 3px rgba(56, 34, 42, .25)); }

@keyframes freshie-swing {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(13deg); }
  48% { transform: rotate(-10deg); }
  72% { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}
.freshie-charm.swinging { animation: freshie-swing 1.2s ease-in-out; }

.charm-spark {
  position: absolute;
  left: 50%;
  bottom: 16px;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  animation: charm-spark-float 1s ease-out var(--delay, 0s) forwards;
}
@keyframes charm-spark-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -44px) scale(1.05); }
}

.success-freshie {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  transform-origin: 50% -4px;
}
.success-freshie .charm-string {
  width: 2px;
  height: 12px;
  background: repeating-linear-gradient(#8a6a72 0 3px, transparent 3px, transparent 5px);
}
.success-freshie.swinging { animation: freshie-swing 1.15s ease-in-out 2; }

@media (prefers-reduced-motion: reduce) {
  .freshie-charm, .success-freshie { animation: none !important; }
  .charm-spark { display: none; }
}

/* Hero hanger (built by motion.js) */
.hero-visual { position: relative; }
.hero-hanger {
  position: absolute; top: -4px; right: 5%; z-index: 4;
  width: 92px; padding: 0; background: none; border: 0; cursor: pointer;
  transform-origin: 50% 0; animation: hh-sway 3.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 10px rgba(43, 14, 30, .22));
}
.hero-hanger svg { display: block; width: 100%; height: auto; }
@keyframes hh-sway { from { transform: rotate(-4.5deg); } to { transform: rotate(5deg); } }
.hero-hanger.hh-big { animation: hh-swing 1.9s cubic-bezier(.3, .6, .4, 1) 1; }
@keyframes hh-swing {
  0% { transform: rotate(0deg); } 18% { transform: rotate(24deg); }
  42% { transform: rotate(-19deg); } 64% { transform: rotate(11deg); }
  82% { transform: rotate(-6deg); } 100% { transform: rotate(0deg); }
}
@media (max-width: 640px) { .hero-hanger { width: 62px; right: 1%; } }
@media (prefers-reduced-motion: reduce) { .hero-hanger { animation: none; } }