/* ==========================================================================
   PIANOMODE — HERO MAGNET NOTES
   --------------------------------------------------------------------------
   Floating musical notes / symbols that drift inside each page hero and get
   softly pulled toward the pointer (mouse + touch). Smooth, subtle, premium.

   Styling rules are placed low-specificity so individual pages can override
   opacity / color via CSS custom properties:
     --pm-magnet-color   (default: gold)
     --pm-magnet-glow    (default: gold halo)
   ========================================================================== */

.pm-hero-magnet-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    contain: layout paint;
}

.pm-hero-magnet-note {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    color: var(--pm-magnet-color, #D7BF81);
    font-family: 'Bravura Text', 'Noto Music', 'Segoe UI Symbol', 'Apple Symbols', serif;
    text-shadow: 0 0 10px var(--pm-magnet-glow, rgba(215, 191, 129, 0.35));
    will-change: transform, opacity;
    transform-origin: center;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    letter-spacing: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* The transform is driven entirely by JS (rAF) — never stomp it here */
}

/* Entry fade */
.pm-hero-magnet-note.pm-magnet-enter {
    opacity: 0 !important;
}

/* Host hero must be a positioning context */
.pm-lp-hero,
.pianomode-hero-learn,
.pm-exp-hero {
    position: relative;
}

/* Respect reduced-motion and mobile performance budgets */
@media (prefers-reduced-motion: reduce) {
    .pm-hero-magnet-field { display: none !important; }
}

/* Phones: keep the effect but spawn fewer notes (handled in JS); also soften */
@media (max-width: 600px) {
    .pm-hero-magnet-note {
        text-shadow: 0 0 6px var(--pm-magnet-glow, rgba(215, 191, 129, 0.25));
    }
}