/* Site motion styles (public/motion.js sets html[data-motion]). Nothing here applies without the attribute,
   and everything is off for people who ask their system for reduced motion. */

/* ---------- shared ---------- */
html[data-motion] .m-in { opacity: 0; }
html[data-motion] .m-in.m-shown { opacity: 1; }
.m-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-right: 8px; vertical-align: -2px; }
.m-eq i { display: block; width: 4px; border-radius: 2px; background: linear-gradient(var(--warn), var(--accent)); animation: m-eq 0.9s ease-in-out infinite alternate; }
.m-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.m-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }
.m-eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.2s; }
@keyframes m-eq { from { height: 3px; } to { height: 16px; } }

/* ---------- Groovy: wobbly logo, floating notes, cards rise with a tilt, jiggly buttons ---------- */
html[data-motion="groovy"] .brand-logo { animation: m-drop 0.9s cubic-bezier(.34,1.56,.64,1) both, m-wobble 7s ease-in-out 1.2s infinite; transform-origin: 50% 70%; }
@keyframes m-drop { from { transform: translateY(-40px) scale(.6) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes m-wobble { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-3deg) scale(1.04); } 92% { transform: rotate(2.5deg) scale(1.03); } 95% { transform: rotate(-1.2deg); } }
html[data-motion="groovy"] .m-in { transform: translateY(26px) rotate(-1.2deg); transition: opacity .55s ease, transform .7s cubic-bezier(.34,1.56,.64,1); }
html[data-motion="groovy"] .m-in.m-shown { transform: none; }
html[data-motion="groovy"] .btn.primary:hover { animation: m-jiggle .5s ease; }
@keyframes m-jiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg) scale(1.05); } 50% { transform: rotate(3deg) scale(1.05); } 75% { transform: rotate(-1deg); } }
html[data-motion="groovy"] .landing-poster { position: relative; overflow: hidden; }
.m-note { position: absolute; bottom: -30px; font-size: 26px; color: var(--warn); opacity: 0; pointer-events: none; animation: m-float 6s linear infinite; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
@keyframes m-float { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 12% { opacity: .9; } 50% { transform: translate(18px, -170px) rotate(12deg); } 85% { opacity: .6; } 100% { transform: translate(-10px, -360px) rotate(-8deg); opacity: 0; } }
html[data-motion="groovy"] .landing-poster strong { display: inline-block; animation: m-breathe 3.2s ease-in-out infinite; }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04) rotate(-1deg); } }

/* ---------- Neon drift: drifting glows, ticker, glide-in cards with a glow ---------- */
html[data-motion="neon"] body { background: var(--bg); }
.m-glows { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.m-glows i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; will-change: transform; }
.m-glows i:nth-child(1) { background: radial-gradient(closest-side, rgba(255,117,64,.55), rgba(255,117,64,0)); top: -30vmax; right: -22vmax; animation: m-drift1 26s ease-in-out infinite alternate; }
.m-glows i:nth-child(2) { background: radial-gradient(closest-side, rgba(64,200,194,.5), rgba(64,200,194,0)); bottom: -34vmax; left: -24vmax; animation: m-drift2 32s ease-in-out infinite alternate; }
.m-glows i:nth-child(3) { background: radial-gradient(closest-side, rgba(192,132,252,.35), rgba(192,132,252,0)); top: 35%; left: 45%; width: 40vmax; height: 40vmax; animation: m-drift3 38s ease-in-out infinite alternate; }
@keyframes m-drift1 { to { transform: translate(-22vw, 18vh) scale(1.15); } }
@keyframes m-drift2 { to { transform: translate(24vw, -16vh) scale(1.2); } }
@keyframes m-drift3 { to { transform: translate(-30vw, 20vh) scale(.8); } }
.m-ticker { overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); background: rgba(23,23,20,.7); font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.m-ticker-track { display: inline-block; padding: 7px 0; animation: m-marquee var(--m-speed, 60s) linear infinite; }
.m-ticker:hover .m-ticker-track { animation-play-state: paused; }
.m-ticker a { margin: 0 22px; color: var(--text); }
.m-ticker a b { color: var(--warn); margin-right: 6px; }
.m-ticker .m-tag { color: var(--accent); margin-right: 8px; letter-spacing: 2px; }
@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[data-motion="neon"] .m-in { transform: translateX(-24px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
html[data-motion="neon"] .m-in.m-shown { transform: none; }
html[data-motion="neon"] .card { transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
html[data-motion="neon"] .card:hover { border-color: var(--accent2); box-shadow: 0 0 0 1px rgba(64,200,194,.35), 0 0 26px rgba(64,200,194,.22), 0 0 60px rgba(255,117,64,.10); transform: translateY(-2px); }
html[data-motion="neon"] h1, html[data-motion="neon"] .landing-poster strong { background: linear-gradient(100deg, var(--text) 40%, #ffd34d 50%, var(--text) 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: m-shine 5s ease-in-out infinite; }
@keyframes m-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -30% 0; } }
html[data-motion="neon"] .btn.primary { box-shadow: 0 0 18px rgba(255,117,64,.35); animation: m-glow 2.6s ease-in-out infinite; }
@keyframes m-glow { 50% { box-shadow: 0 0 30px rgba(255,211,77,.55); } }

/* ---------- Poster pop: springy cards, cursor tilt, slammed date headers, dropped logo ---------- */
html[data-motion="poster"] .brand-logo { animation: m-slam .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes m-slam { from { transform: scale(1.8) rotate(8deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
html[data-motion="poster"] .m-in { transform: scale(.9) rotate(var(--m-tilt, 1.5deg)); transition: opacity .35s ease, transform .55s cubic-bezier(.34,1.3,.64,1); }
html[data-motion="poster"] .m-in.m-shown { transform: none; }
html[data-motion="poster"] .card { transform-style: preserve-3d; will-change: transform; }
html[data-motion="poster"] .card.m-tilting { transition: transform .08s linear; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
html[data-motion="poster"] .day.m-in, html[data-motion="poster"] h2.m-in { transform: none; transition: none; }
html[data-motion="poster"] .day.m-shown, html[data-motion="poster"] h2.m-shown { animation: m-stamp .45s cubic-bezier(.34,1.3,.64,1) both; }
@keyframes m-stamp { from { transform: scale(1.35) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-motion="poster"] .landing-poster { transition: transform .15s ease-out; transform-style: preserve-3d; }
html[data-motion="poster"] .btn:active { transform: scale(.94); }
html[data-motion="poster"] .btn.primary:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 4px 6px 0 rgba(0,0,0,.4); transition: transform .15s, box-shadow .15s; }

@media (prefers-reduced-motion: reduce) {
  html[data-motion] *, html[data-motion] *::before, html[data-motion] *::after { animation: none !important; transition: none !important; }
  html[data-motion] .m-in { opacity: 1; transform: none; }
  .m-glows, .m-note { display: none; }
}

/* Holiday sections arrive a moment after the page; they get one smooth fade-in of their own (opacity and
   transform only) instead of joining the scroll-in animations. Same for every style. */
html[data-motion] .holiday-strip { animation: m-holiday .5s ease-out both; }
@keyframes m-holiday { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }