/**
 * Windchime Typography - visual styles for WindchimePhysics.
 *
 * Every letter is transform-only during animation: `transform` is the only
 * property WindchimePhysics.js touches each frame (translate3d + rotate),
 * which the browser can composite on the GPU without triggering layout or
 * paint on every tick. Everything else here (string height, glyph offset,
 * font metrics) is written once at build time, not during animation.
 */

.windchime-container {
    position: relative;
    width: 100%;
    min-height: 140px;
    overflow: visible; /* letters may hang/swing slightly past the container's own box */
    touch-action: pan-y; /* a vertical swipe still scrolls the page; only movement inside the widget drives the wind field */
    -webkit-user-select: none;
    user-select: none;
}

.windchime-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.windchime-letter {
    position: absolute;
    top: 0;
    left: 0;
    /* rotation pivots from the anchor point (where the string is mounted), not the letter's own centre - this is what makes it read as "hanging from above" rather than "spinning in place". */
    transform-origin: 50% 0%;
    will-change: transform;
    cursor: pointer;
}

.windchime-container.windchime-no-interaction .windchime-letter {
    cursor: default;
}

.windchime-string {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    /* height is set inline per-letter at layout time (each letter's own randomised string length) */
    background: rgba(0, 0, 0, 0.22);
    transform: translateX(-50%);
    pointer-events: none;
}

.windchime-glyph {
    position: absolute;
    left: 50%;
    /* `top` is set inline per-letter at layout time, equal to that letter's string length, so the glyph sits at the bottom of its own string */
    transform: translateX(-50%);
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #0057A0; /* Howei brand blue by default; override per-instance via the `letterColors` option */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* prefers-reduced-motion (and WindchimePhysics's own `reducedMotion` option) render one static frame - no continuous swing, no cursor wind field - while a deliberate tap/click still works. */
.windchime-container.windchime-reduced-motion .windchime-letter {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .windchime-container .windchime-letter {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .windchime-container {
        min-height: 110px;
    }
}