/* Drifting three-word background — stand-alone CSS file */

.card {
    /* Must be positioned so the background layer can anchor to it */
    position: relative;
}

/* Background layer that sits behind all content inside the card */
.m3w-drifter {
    position: absolute;
    inset: 0;
    /* Let the card's own background color show; don't repaint here */
    background: transparent;
    pointer-events: none;
    z-index: 0;          /* base layer inside .card */
    overflow: hidden;
}

/* All normal content inside the card renders above the drifter layer */
.card > :not(.m3w-drifter) {
    position: relative;  /* so z-index applies */
    z-index: 1;
}

/* Individual floating phrases */
.m3w-drifter .phrase {
    position: absolute;   /* CRITICAL: take out of flow */
    left: 0;
    top: 0;      /* transform origin reference */
    color: var(--card-bg2, #cc6a2f);     /* theme color with fallback */
    opacity: .85;
    font-weight: 700;
    white-space: nowrap;
    will-change: transform, opacity;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.25);
    filter: none; /* or keep the drop-shadow if you like it */

    /*  text-shadow:
        0 1px 0 rgba(255,255,255,.70),
        0 2px 8px rgba(0,0,0,.35);*/
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .m3w-drifter .phrase {
        animation: none !important;
        transition: none !important;
    }
}