/* tap feedback: press, pop, sparks and a short note (interactions.js) */
.emi-press { animation: emiPress .26s ease-out; }
@keyframes emiPress { 0% { transform: scale(1); } 40% { transform: scale(.92); } 100% { transform: scale(1); } }
.emi-pop { animation: emiPop .45s cubic-bezier(.3,1.6,.5,1); }
.emi-pop svg { animation: emiPopIc .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes emiPop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes emiPopIc { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
.emi-burst { position: fixed; z-index: 10070; width: 0; height: 0; pointer-events: none; }
.emi-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: 0; animation: emiSpark .6s ease-out forwards; }
@keyframes emiSpark { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
.emi-note { position: fixed; z-index: 10060; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 16px 10px 12px; border-radius: 999px;
  background: #fff; color: #140709; font-size: .86rem; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .2s, transform .25s cubic-bezier(.3,1.4,.5,1); }
.emi-note svg { flex: none; color: #fff; background: #1FA35B; border-radius: 50%; padding: 3px; width: 20px; height: 20px; box-sizing: border-box; }
.emi-note.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .emi-note { bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { .emi-press, .emi-pop, .emi-pop svg { animation: none; } .emi-note { transition: opacity .2s; } }

/* member home placeholder while it loads */
.mh-skel { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.mh-skel-poster { height: clamp(220px, 34vw, 340px); border-radius: 22px; }
.mh-skel-h { width: 220px; height: 22px; }
.mh-skel-row { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 16px; overflow: hidden; }
.mh-skel-card { aspect-ratio: 4 / 5; border-radius: 16px; }
@media (max-width: 640px) { .mh-skel-row { grid-auto-columns: 168px; gap: 12px; } .mh-skel-poster { border-radius: 18px; } }

/* My tickets and other lists: placeholder rows instead of three dots */
.mp-loading { display: flex !important; flex-direction: column; gap: 10px; padding: 6px 0 !important; justify-content: flex-start !important; }
.mp-loading span { width: 100% !important; height: 64px !important; border-radius: 14px !important; animation: shimmer 1.6s infinite linear !important;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 75%) !important; background-size: 600px 100% !important; }
.mp-loading span:nth-child(2) { opacity: .75; } .mp-loading span:nth-child(3) { opacity: .5; }
[data-theme="light"] .mp-loading span, [data-theme="light"] .mh-skel .skeleton { background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.05) 75%) !important; background-size: 600px 100% !important; }