/* TrackMMO motion layer: animations only. Colors and layout live in the theme files.
   Every animation here is switched off by the "Reduce motion" setting and by the OS setting. */

/* ---------- Page entrance + scroll reveal (classes added by motion.js) ---------- */
@keyframes tm-view-in { from { opacity: 0; translate: 0 10px; } }
@keyframes tm-rise { from { opacity: 0; translate: 0 18px; scale: .985; } }
#view.tm-enter { animation: tm-view-in .45s cubic-bezier(.2,.7,.2,1) both; }
.tm-pending { opacity: 0; }
.tm-rise { animation: tm-rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--tm-d, 0ms); }

/* ---------- Header ---------- */
.bar { transition: box-shadow .3s, backdrop-filter .3s; }
body.tm-scrolled .bar { box-shadow: 0 8px 28px -14px #000c; }
.tj-nav-link, .bar .nav a { position: relative; }
.tj-nav-link::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 2px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; transform: scaleX(0); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.tj-nav-link:hover::after { transform: scaleX(1); }
.tj-nav-link[aria-current="page"]::after, .tj-nav-link.active::after { transform: scaleX(0); }

/* ---------- Buttons: soft press ---------- */
:is(.btn, .tj-button, .chip, .support-payment, .tj-utility, .icon-btn):active:not(:disabled) { scale: .97; }
:is(.btn, .tj-button, .chip, .icon-btn) { transition: scale .12s, background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.icon-btn:hover svg { animation: tm-spin-once .6s cubic-bezier(.2,.7,.2,1); }
@keyframes tm-spin-once { to { rotate: 90deg; } }

/* ---------- Release timeline + game cards ---------- */
.tj-release { transition: translate .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.tj-release:hover { translate: 0 -4px; box-shadow: 0 14px 30px -16px #000d; }
.tj-release .tj-art { transition: filter .35s, scale .6s cubic-bezier(.2,.7,.2,1); }
.tj-release:hover .tj-art { scale: 1.06; }
.tj-date-stop { transition: scale .2s; }
.tj-release:hover + .tj-date-stop, .tj-date-stop:hover { scale: 1.1; }
.tj-next-flag { animation: tm-flag-glow 2.4s ease-in-out infinite; }
@keyframes tm-flag-glow { 50% { box-shadow: 0 0 0 4px #db394533, 0 0 18px #db394555; } }
.card { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.rw-card { transition: translate .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.rw-card:hover { translate: 0 -3px; box-shadow: 0 18px 40px -22px #000e; }
.rw-art img, .rw-art .cover-md { transition: scale .7s cubic-bezier(.2,.7,.2,1); }
.rw-card:hover :is(.rw-art img, .rw-art .cover-md) { scale: 1.04; }
.tj-log-row { transition: background-color .2s, translate .2s; }
.tj-log-row:hover { translate: 3px 0; }

/* ---------- Ribbons: light sweep on NEW / TODAY ---------- */
.rb-new, .rb-today { position: relative; overflow: hidden; }
.rb-new::after, .rb-today::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffff8c 50%, transparent 65%); translate: -120% 0; animation: tm-ribbon-sweep 3.6s ease-in-out infinite; }
@keyframes tm-ribbon-sweep { 0%, 55% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }

/* ---------- Toasts ---------- */
.toast { animation: tm-toast-in .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tm-toast-in { from { opacity: 0; translate: -50% -14px; scale: .96; } }

/* ---------- Big Donate tile (home) ---------- */
/* Keeps the theme's own color flow + glow and adds: spinning light border, floating hearts,
   wave on the letters, heartbeat rings, arrow bounce, cursor spotlight and a click burst. */
@property --tm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html:root .tj-home .tj-donate { animation: tj-donate-colors 6s ease-in-out infinite, tj-beacon-glow 3s ease-in-out infinite, tm-donate-nudge 6s ease-in-out 1.5s infinite; }
@keyframes tm-donate-nudge { 0%, 86%, 100% { rotate: 0deg; scale: 1; } 89% { rotate: -.5deg; scale: 1.01; } 92% { rotate: .5deg; scale: 1.01; } 95% { rotate: -.25deg; } }
html:root .tj-home .tj-donate::before { background: conic-gradient(from var(--tm-angle), transparent 0 52%, #ff7fb4 66%, #fff 72%, #8fb2ff 79%, transparent 92%); background-size: auto; padding: 2px; animation: tm-border-spin 3s linear infinite; }
@keyframes tm-border-spin { to { --tm-angle: 360deg; } }
html:root .tj-home .tj-donate:hover { transform: translateY(-5px); box-shadow: 0 18px 50px -8px #d9659970, 0 0 0 1px #ffd7ea55; }
html:root .tj-home .tj-donate:hover::before { animation-duration: 1.4s; }

.tm-letter { display: inline-block; animation: tm-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 75ms); }
@keyframes tm-wave { 0%, 32%, 100% { translate: 0 0; color: inherit; text-shadow: none; } 9% { translate: 0 -8px; color: #ffc6de; text-shadow: 0 6px 16px #ff6fa880; } 18% { translate: 0 1px; } }
.tj-donate:hover .tm-letter { animation-duration: 1.6s; }

.tj-home .tj-donate > .tm-hearts, .tm-hearts { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.tm-heart { position: absolute; bottom: -18px; left: var(--x); font-size: var(--s); line-height: 1; color: #ff8fbf; text-shadow: 0 0 10px #ff5f9e; opacity: 0; animation: tm-heart-rise var(--d) ease-in infinite; animation-delay: var(--dl); }
@keyframes tm-heart-rise { 0% { opacity: 0; translate: 0 0; scale: .5; rotate: 0deg; } 15% { opacity: .9; } 70% { opacity: .55; } 100% { opacity: 0; translate: var(--dx) -190px; scale: 1.1; rotate: var(--r); } }
.tj-donate:hover .tm-heart { animation-duration: calc(var(--d) * .55); }

.tj-home .tj-donate > .tm-spot, .tm-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), #ffffff1f, transparent 70%); }
.tj-donate:hover .tm-spot { opacity: 1; }

.tj-donate-emblem { position: relative; }
.tj-donate-emblem::before, .tj-donate-emblem::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #ff8db5; opacity: 0; animation: tm-ring 2.2s cubic-bezier(.2,.7,.2,1) infinite; pointer-events: none; }
.tj-donate-emblem::after { animation-delay: 1.1s; }
@keyframes tm-ring { 0% { opacity: .75; scale: 1; } 100% { opacity: 0; scale: 1.9; } }
.tj-donate-emblem .ico { animation: tm-beat 1.1s ease-in-out infinite !important; }
@keyframes tm-beat { 0%, 100% { scale: 1; } 15% { scale: 1.22; } 30% { scale: 1; } 45% { scale: 1.14; } 60% { scale: 1; } }

.tj-donate-go { animation: tm-arrow-nudge 1.8s ease-in-out infinite; }
@keyframes tm-arrow-nudge { 0%, 55%, 100% { translate: 0 0; } 70% { translate: 7px 0; } 82% { translate: 2px 0; } }
.tj-donate:hover .tj-donate-go { animation-duration: .8s; background: #ffffff2e; }
.tj-donate-sparks i { width: 4px; height: 4px; }

.tj-home .tj-donate > .tm-burst, .tj-donate .tm-burst { position: absolute; flex: none; font-size: 14px; line-height: 1; color: #ffc2d9; text-shadow: 0 0 10px #ff86b6; pointer-events: none; z-index: 3; translate: -50% -50%; animation: tm-burst .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes tm-burst { to { translate: calc(-50% + var(--bx)) calc(-50% + var(--by)); opacity: 0; scale: .4; rotate: var(--br); } }

/* ---------- Donate page ---------- */
.support-heart { display: inline-block; animation: tj-heartbeat 2.6s ease-in-out infinite; }
.support-payment { position: relative; overflow: hidden; transition: translate .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.support-payment:not(:disabled):hover { translate: 0 -3px; box-shadow: 0 14px 30px -14px #000c; }
.support-payment.featured::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, #ffffff70 50%, transparent 62%); translate: -110% 0; animation: tm-ribbon-sweep 4.5s ease-in-out infinite; }
.support-payment-arrow { transition: translate .25s; }
.support-payment:not(:disabled):hover .support-payment-arrow { translate: 3px -3px; }
.support-provider-mark { transition: rotate .4s cubic-bezier(.2,1.4,.4,1); }
.support-payment:not(:disabled):hover .support-provider-mark { rotate: -10deg; }
.support-story h1 :is(em, span:last-child, i) { background-size: 200% 100%; animation: tm-hue-pan 6s ease-in-out infinite alternate; }
@keyframes tm-hue-pan { to { background-position: 100% 0; } }
.support-sigil { animation: tm-float 5s ease-in-out infinite; }
@keyframes tm-float { 50% { translate: 0 -6px; } }
.support-kicker i { animation: rbPulse 1.6s ease-in-out infinite; }

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tm-pending { opacity: 1; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.reduce-motion .tm-pending { opacity: 1; }
.reduce-motion .tm-hearts { display: none; }
@media (prefers-reduced-motion: reduce) { .tm-hearts { display: none; } }