/* NotenHaus — musical note fountain (hover/tap) + burst (click/tap) on .btn */

.btn {
  position: relative;
  overflow: visible;
  isolation: isolate;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

.btn.is-btn-pressed,
.btn:active:not(a) {
  transform: scale(0.96) translateY(1px);
}

.btn-notes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.btn-notes__particle {
  position: absolute;
  left: var(--nx, 50%);
  top: var(--ny, 42%);
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: calc(0.85rem * var(--scale, 1));
  line-height: 1;
  color: var(--jwp-color-gold, #ffd98f);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
  transform: translate3d(-50%, 0, 0) scale(0.6) rotate(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.btn--ghost .btn-notes__particle {
  color: var(--jwp-color-maroon, #630a22);
}

.btn-notes__particle--burst {
  color: var(--jwp-color-gold, #ffd98f);
  z-index: 2;
}

/* Fixed portal — survives HTMX cart button swap on touch/tablet */
.btn-notes-burst-portal {
  position: fixed;
  z-index: 400;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

.btn-notes-burst-portal .btn-notes__particle--burst {
  left: 0;
  top: 0;
}

/* Shared fountain animation (desktop hover + mobile tap class) */
.btn.is-notes-active .btn-notes__particle--hover,
.btn:focus-visible .btn-notes__particle--hover {
  animation-name: noteFloatHover;
  animation-duration: var(--dur, 1.1s);
  animation-delay: var(--delay, 0ms);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* Hover fountain — only real hover (avoids sticky :hover on iOS Safari) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-notes__particle--hover {
    animation-name: noteFloatHover;
    animation-duration: var(--dur, 1.1s);
    animation-delay: var(--delay, 0ms);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
}

/* Tap: match hover background briefly (no sticky :hover on iOS) */
.btn.is-notes-active {
  background: var(--color-btn-cta-hover);
  color: var(--jwp-color-neutral-0);
  overflow: visible;
  z-index: 4;
}

.btn--ghost.is-notes-active {
  background: var(--color-btn-ghost-hover-bg);
  border-color: var(--color-btn-ghost);
  color: var(--color-btn-ghost);
}

@keyframes noteFloatHover {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scale(0.6) rotate(0deg);
  }
  18% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(calc(-50% + var(--drift-x, 0px)), -48px, 0)
      scale(calc(var(--scale, 1) * 1.15))
      rotate(var(--rot, 12deg));
  }
}

/* Click/tap: radial burst */
.btn-notes__particle--burst {
  animation: noteBurstClick 320ms cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
}

@keyframes noteBurstClick {
  0% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(-50% + var(--burst-x, 20px)),
        calc(-50% + var(--burst-y, -30px)),
        0
      )
      scale(1.55)
      rotate(var(--rot, 40deg));
  }
}

/* Touch/tablet burst — longer, slower fade, larger notes (≤1023) */
@keyframes noteBurstClickTouch {
  0% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.95) rotate(0deg);
  }
  70% {
    opacity: 1;
  }
  88% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(-50% + var(--burst-x, 20px)),
        calc(-50% + var(--burst-y, -30px)),
        0
      )
      scale(1.9)
      rotate(var(--rot, 40deg));
  }
}

@media (max-width: 1023px) {
  .btn-notes__particle {
    font-size: calc(1rem * var(--scale, 1));
  }

  /* Clip idle fountain; keep burst visible outside button bounds */
  .btn:not(.is-notes-active):not(.is-notes-bursting) {
    overflow: hidden;
  }

  .btn.is-notes-active,
  .btn.is-notes-bursting {
    overflow: visible;
  }

  .btn-notes__particle--burst {
    font-size: calc(1.1rem * var(--scale, 1));
    animation: noteBurstClickTouch 3s cubic-bezier(0.12, 0.65, 0.22, 1) forwards;
  }

  @keyframes noteFloatHover {
    0% {
      opacity: 0;
      transform: translate3d(-50%, 0, 0) scale(0.55) rotate(0deg);
    }
    20% {
      opacity: 0.85;
    }
    100% {
      opacity: 0;
      transform:
        translate3d(calc(-50% + var(--drift-x, 0px)), -36px, 0)
        scale(calc(var(--scale, 1) * 1.1))
        rotate(var(--rot, 10deg));
    }
  }
}

@supports (-webkit-touch-callout: none) {
  /* Promote hover fountain only — do NOT set transform on burst
     (static -webkit-transform kills radial scatter on iOS Safari). */
  .btn.is-notes-active .btn-notes__particle--hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-btn-pressed,
  .btn:active:not(a) {
    transform: none;
  }

  .btn:hover .btn-notes__particle--hover,
  .btn.is-notes-active .btn-notes__particle--hover,
  .btn:focus-visible .btn-notes__particle--hover,
  .btn-notes__particle--burst {
    animation: none;
    opacity: 0;
  }

  .btn.is-notes-active {
    background: var(--color-btn-cta);
  }

  .btn--ghost.is-notes-active {
    background: transparent;
  }
}