/* Street Art Jam: drips creep, spray mist drifts, the boombox thumps.
   The classic opening ("wall", only if the film can't load): mist puffs, the piece sprays on, the
   drips run and the speakers kick in. Only transform and opacity animate; reduced motion shows the
   finished wall, still. */
[data-theme="graffiti"] .hero-sky .hero-art { overflow: visible; }
[data-theme="graffiti"] .hero-art .gf-drip { transform-box: fill-box; transform-origin: 50% 0; animation: gf-creep 4.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
[data-theme="graffiti"] .hero-art .gf-puff { transform-box: fill-box; transform-origin: center; animation: gf-mist 5s ease-out infinite; animation-delay: calc(var(--i) * -1s); }
[data-theme="graffiti"] .hero-art .gf-bass { transform-box: fill-box; transform-origin: center; animation: gf-thump .5s ease-out infinite; }
[data-theme="graffiti"] .hero-art .gf-led { animation: gf-blink 1s steps(2) infinite; }
[data-theme="graffiti"] .card { border-radius: 14px; box-shadow: 6px 6px 0 rgba(18, 19, 20, .9); }
[data-theme="graffiti"] .btn { border-radius: 10px; letter-spacing: .03em; box-shadow: 0 4px 0 rgba(18, 19, 20, .85); }
[data-theme="graffiti"] .title { letter-spacing: .01em; text-shadow: 3px 3px 0 #ff3ea5, 6px 6px 0 rgba(18, 19, 20, .85); }
[data-theme="graffiti"] .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; }
[data-theme="graffiti"] .btn, [data-theme="graffiti"] .card h2, [data-theme="graffiti"] .title, [data-theme="graffiti"] .eyebrow { overflow-wrap: anywhere; }

/* the classic opening */
[data-theme="graffiti"] .op-art svg { overflow: visible; }
[data-theme="graffiti"] .op-card:not(.fm-cta) { background: rgba(29, 31, 34, .82); box-shadow: 0 0 0 2px #121314, 6px 6px 0 #b8ff3c; }
[data-theme="graffiti"] .op-wall .op-line { color: var(--ink); text-shadow: 0 2px 14px rgba(18, 19, 20, .9); }
[data-theme="graffiti"] .op-wall.op-run .gf-puff { animation: gf-mist 1.2s calc(.6s + var(--i) * .2s) ease-out both, gf-mist 5s 3s ease-out infinite; }
[data-theme="graffiti"] .op-wall.op-run .gf-drip { animation: gf-run 1.4s calc(2.8s + var(--i) * .12s) cubic-bezier(.4, 0, .6, 1) both, gf-creep 4.2s 4.4s ease-in-out infinite alternate; }
[data-theme="graffiti"] .op-wall.op-run .gf-bass { animation: gf-thump .5s 3.6s ease-out infinite; }
[data-theme="graffiti"] .op-art { transform: translateX(-18%) scale(1.3); transform-origin: 50% 50%; transition: opacity 1.2s ease, transform 4.6s cubic-bezier(.33, .05, .2, 1); }
[data-theme="graffiti"] .op-run .op-art, [data-theme="graffiti"] .op-final .op-art { opacity: 1; transform: none; }
[data-theme="graffiti"] .op-final .op-art { transition: none; }
@media (max-aspect-ratio: 4/5) { [data-theme="graffiti"] .op-art svg { transform: scale(1.3); transform-origin: 50% 100%; } }

/* Party TV backdrop */
[data-theme="graffiti"].tv-bd .gf-drip { transform-box: fill-box; transform-origin: 50% 0; animation: gf-creep 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.8s); }

@keyframes gf-creep { from { transform: scaleY(.86); } to { transform: scaleY(1.06); } }
@keyframes gf-run { from { transform: scaleY(0); } }
@keyframes gf-mist { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: .5; } 100% { opacity: 0; transform: translateY(-8px) scale(1.8); } }
@keyframes gf-thump { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes gf-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="graffiti"] .hero-art *, [data-theme="graffiti"] .op-art *, [data-theme="graffiti"].tv-bd * { animation: none !important; }
}