/* Friendship Charm Bar: charms swing gently on the strand, sparkles twinkle over the tray.
   The classic opening ("stringit", only if the film can't load): the tray eases in from close up and
   the charms swing on. Only transform and opacity animate; reduced motion shows the finished tray. */
[data-theme="charms"] { --cm-strand: repeating-linear-gradient(90deg, #c8a8ff 0 10px, #8fe3c4 10px 20px, #ffd76a 20px 30px, #9fd4ff 30px 40px, #ff9db2 40px 50px); }
[data-theme="charms"] .hero-sky .hero-art { overflow: visible; }
[data-theme="charms"] .hero-art .cm-sw, [data-theme="charms"].tv-bd .cm-sw { transform-box: fill-box; transform-origin: 50% 0; animation: cm-swing 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.8s); }
[data-theme="charms"] .hero-art .twinkle, [data-theme="charms"].tv-bd .twinkle { transform-box: fill-box; transform-origin: center; animation: cm-tw 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
[data-theme="charms"] .card { border-radius: 22px; box-shadow: 0 0 0 1.5px #e9e1f5, 0 14px 32px rgba(126, 91, 181, .16); }
[data-theme="charms"] .btn { border-radius: 999px; background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); }
[data-theme="charms"] .title { letter-spacing: .01em; text-shadow: 0 2px 0 #fff, 0 6px 16px rgba(126, 91, 181, .22); }
[data-theme="charms"] .eyebrow { color: var(--ink); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
[data-theme="charms"] .divider::before, [data-theme="charms"] .divider::after { background: var(--cm-strand); height: 4px; border-radius: 4px; }
[data-theme="charms"] .btn, [data-theme="charms"] .card h2, [data-theme="charms"] .title, [data-theme="charms"] .eyebrow { overflow-wrap: anywhere; }

/* the kid's photo: a gold locket rim */
[data-theme="charms"] .kp-circle .kp-win { box-shadow: 0 0 0 3px #fffaf3, 0 0 0 calc(var(--kp-w) * .05) #e9b949, 0 0 0 calc(var(--kp-w) * .07) #b5861f, 0 10px 24px rgba(126, 91, 181, .25); }

/* the Bead card: a cream card with a punched hole and a strand of beads along the stub */
[data-theme="charms"] .ticket { background: linear-gradient(120deg, #fffdf9 0%, #f4eeff 55%, #fff3ea 100%); color: #2a1d3f; border-radius: 18px; box-shadow: 0 12px 26px rgba(126, 91, 181, .18), inset 0 0 0 1.5px #e3d4f7; }
[data-theme="charms"] .ticket .t-main { border-right: 2px dashed rgba(126, 91, 181, .45); }
[data-theme="charms"] .ticket small { color: #6a4fb0; letter-spacing: .2em; font-weight: 800; }
[data-theme="charms"] .ticket b { font-family: "Fredoka", sans-serif; font-weight: 700; color: #2a1d3f; }
[data-theme="charms"] .ticket .t-stub { background: radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 20%) 0 0 / 18px 18px, var(--cm-strand); }

/* the classic opening (only if the film can't load) */
[data-theme="charms"] .op-art svg { overflow: visible; }
[data-theme="charms"] .op-card:not(.fm-cta) { background: rgba(255, 253, 249, .92); color: var(--cardInk); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e3d4f7, 0 20px 48px rgba(126, 91, 181, .24); }
[data-theme="charms"] .op-stringit .op-line { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
[data-theme="charms"] .op-stringit.op-run .cm-sw { animation: cm-in 1.1s calc(1.6s + var(--i) * .2s) cubic-bezier(.34, 1.4, .64, 1) both, cm-swing 3.2s 3s ease-in-out infinite alternate; }
[data-theme="charms"] .op-art { transform: scale(1.4); transform-origin: 50% 55%; transition: opacity 1s ease, transform 4.4s cubic-bezier(.22, 1, .36, 1); }
[data-theme="charms"] .op-run .op-art, [data-theme="charms"] .op-final .op-art { opacity: 1; transform: none; }
[data-theme="charms"] .op-final .op-art { transition: none; }
@media (max-aspect-ratio: 4/5) { [data-theme="charms"] .op-art svg { transform: scale(1.3); transform-origin: 50% 100%; } }

@keyframes cm-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes cm-tw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
@keyframes cm-in { from { opacity: 0; transform: translateY(-40px) rotate(30deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="charms"] .hero-art *, [data-theme="charms"] .op-art *, [data-theme="charms"].tv-bd * { animation: none !important; }
}