/* Motion is decorative: content stays readable without JavaScript. */
/* The poster and stage use transform/opacity only: no moving text or layout. */
@media(prefers-reduced-motion:no-preference){
  .community-hero-art img{animation:nv-poster-mascot 5.8s ease-in-out infinite}
  .community-hero-burst{animation:nv-poster-spark 9s ease-in-out infinite}
  .community-hero-stamp{animation:nv-poster-stamp 7s ease-in-out infinite}
  .community-hero-stroke{animation:nv-poster-stroke 4.8s ease-in-out infinite}
  [data-live-home]:not(.is-animated) .live-broadcast-hero::before{animation:live-scan 14s ease-in-out infinite}
  [data-live-home]:not(.is-animated) .live-stage-mascot{animation:live-mascot 5.8s ease-in-out infinite}
  @media(hover:hover) and (pointer:fine){
    .community-page :is(.community-caption,.community-story):hover{transform:translateY(-3px);border-color:#f36b3f80;box-shadow:0 16px 30px #25282312}
    .fun-card:hover .fun-card-icon{transform:rotate(-9deg) scale(1.12)}
  }
}
@keyframes nv-poster-mascot{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes nv-poster-spark{0%,100%{transform:rotate(12deg) scale(1);opacity:.7}50%{transform:rotate(32deg) scale(1.08);opacity:1}}
@keyframes nv-poster-stamp{0%,35%,100%{transform:rotate(-9deg)}50%,65%{transform:rotate(-5deg) translateY(-3px)}}
@keyframes nv-poster-stroke{0%,100%{transform:translateX(0) rotate(-22deg);opacity:.65}50%{transform:translateX(-5px) rotate(-22deg);opacity:1}}
.motion-suspended *, .motion-suspended *::before, .motion-suspended *::after{animation-play-state:paused!important}
.community-page :is(.community-caption,.community-story),.fun-card-icon{transition:transform .25s var(--nv-ease),box-shadow .25s ease,border-color .25s ease}
@media (prefers-reduced-motion: no-preference) {
  .orbit-two {animation: nv-orbit 14s ease-in-out infinite;}
  .tiny-star {animation: nv-star 9s ease-in-out infinite;}
  .speech {animation: nv-speech 7s ease-in-out infinite;}
  dialog[open] {animation: nv-dialog .24s cubic-bezier(.2,.7,.2,1);}
  dialog[open]::backdrop {animation: nv-backdrop .2s ease-out;}
  .card {transition: transform .25s ease, box-shadow .25s ease;}
  .card-image {transition: transform .45s cubic-bezier(.2,.7,.2,1);}
  .card-image-button {overflow: hidden;}
  .button:active {transform: translateY(1px) scale(.98);}
  @media (hover: hover) and (pointer: fine) {
    .card:hover {transform: translateY(-5px); box-shadow: 0 12px 26px #25282312;}
    .card-image-button:hover .card-image {transform: scale(1.035);}
  }
}
.motion-toggle {font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:8px 0;}
.motion-toggle:disabled {cursor:default;opacity:.7;}
@keyframes nv-orbit {0%,100% {transform:rotate(-20deg)} 50% {transform:rotate(-8deg)}}
@keyframes nv-star {0%,100% {transform:rotate(0) scale(1)} 50% {transform:rotate(35deg) scale(1.13)}}
@keyframes nv-speech {0%,100% {translate:0 0} 50% {translate:0 -5px}}
@keyframes nv-dialog {from {opacity:0;translate:0 12px} to {opacity:1;translate:0 0}}
@keyframes nv-backdrop {from {opacity:0} to {opacity:1}}
html.motion-paused {scroll-behavior:auto!important;}
.motion-paused *, .motion-paused *::before, .motion-paused *::after, .motion-paused dialog::backdrop {
  animation:none!important;transition:none!important;
}
.motion-paused .card:hover {translate:0 0;}
.motion-paused .card-image-button:hover .card-image {transform:none;}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior:auto!important;}
  *, *::before, *::after, dialog::backdrop {animation:none!important;transition:none!important;}
}

/* Shared signature: a little voltage, no extra libraries or hidden content. */
:root {
  --nv-glow: #f36b3f;
  --nv-focus: #a93817;
  --nv-ease: cubic-bezier(.2,.8,.2,1);
}
:is(.button,.button-yellow,.button-ghost,.btn) {
  position: relative;
  isolation: isolate;
  border-radius: 12px;
  background-image: linear-gradient(115deg, #ffffff18, #ffffff00 40%, #f36b3f22 85%, #ffffff30);
  background-size: 220% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 0 #25282318, 0 7px 18px #2528230b;
  transition: transform .22s var(--nv-ease), box-shadow .22s var(--nv-ease), border-color .22s ease, background-position .45s ease;
}
:is(.button.outline,.button.secondary,.button-ghost) {
  background-color: var(--white,#fffdf7);
  background-image: linear-gradient(115deg, #fffdf7, #fff1df);
  box-shadow: 0 4px 0 #25282310, inset 0 1px 0 #fff;
}
.button-ghost {color:var(--ink,#252823);}
.live-broadcast-actions .button.outline {color:var(--ink,#252823);}
:is(.button.yellow,.button-yellow) {
  background-image: linear-gradient(115deg, #ffe990, #ffd449 45%, #ffb85a);
  box-shadow: 0 4px 0 #ad710a33, 0 7px 20px #ffd44925;
}
.button.danger {background-image: none; box-shadow: 0 3px 0 #a6372a12;}
:is(.button,.button-yellow,.button-ghost,.btn)>span:not(.nv-ripple) {
  transition: translate .22s var(--nv-ease);
}
:is(.button,.button-yellow,.button-ghost,.btn):focus-visible,
:is(.chip,.big-reaction,.help-filters button,.navigation>a,summary):focus-visible {
  outline: 3px solid var(--nv-focus);
  outline-offset: 4px;
}
:is(.chip,.big-reaction,.reactions button,.help-filters button,.emoji-palette button) {
  position: relative;
  border-radius: 12px;
  transition: transform .2s var(--nv-ease), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
:is(.chip,.help-filters button)[aria-pressed=true],
.big-reaction[aria-pressed=true] {
  box-shadow: 0 3px 0 #f36b3f55, 0 0 0 1px #f36b3f45;
}
:is(.help-quicklinks a,.help-answer-links a,.profile-links a) {
  position: relative;
  border-radius: 12px;
  transition: transform .2s var(--nv-ease), box-shadow .2s ease, background-color .2s ease;
}
.navigation>a {transition: background-color .2s ease, box-shadow .2s ease;}
.navigation>a:focus-visible {outline-color:var(--yellow,#ffd449);}
.navigation>a[aria-current=page] {box-shadow: inset 3px 0 0 var(--orange,#f36b3f), 0 4px 15px #0002;}
.header nav :is(a,button):not(.button,.nav-live) {
  background-image: linear-gradient(var(--nv-glow),var(--nv-glow));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: color .2s ease, background-size .25s var(--nv-ease);
}
:is(.card,.fun-card,.live-tv-card,.auth-card,.profile-panel,.help-tools,.help-contact,.stat-card,.panel) {
  border-radius: 18px;
  box-shadow: 0 3px 0 #25282305, 0 12px 35px #25282308;
  transition: transform .25s var(--nv-ease), border-color .25s ease, box-shadow .25s ease;
}
.card {translate: none;}
.help-question {border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease;}
.help-question[open] {border-color: #f36b3f70; box-shadow: 0 5px 20px #f36b3f0d;}
.help-question summary {transition: color .2s ease, background-color .2s ease;}
dialog {border-radius: 22px; box-shadow: 0 25px 100px #25282338, 0 0 0 5px #fffdf722;}
dialog::backdrop {background: #171d19c4; backdrop-filter: blur(7px);}
.nav-live {position:relative; transition: transform .2s var(--nv-ease), box-shadow .2s ease;}
.nv-interactive {isolation:isolate;}
.favorite-toggle.nv-interactive {position:relative;}
.nv-ripple {
  position: absolute;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #ffd44938;
  box-shadow: 0 0 15px #f36b3f50;
  translate: -50% -50%;
  pointer-events: none;
}
.motion-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px!important;
  border:1px solid #73756b45;
  border-radius:99px;
  background:var(--white,#fffdf7);
  color:var(--ink,#252823);
  font-size:11px;
  line-height:1.4;
  text-decoration:none;
}
.motion-toggle::before {content:'✦';color:var(--nv-focus);font-size:14px;}
.motion-toggle[aria-pressed=false]::before {content:'○';}
body>.motion-toggle {display:flex;width:max-content;margin:24px auto;}
@media (hover:hover) and (pointer:fine) {
  :is(.button,.button-yellow,.button-ghost,.btn):not(:disabled):not([aria-disabled=true]):hover {
    transform:translateY(-3px);
    background-position:0 0;
    box-shadow:0 6px 0 #f36b3f55, 0 12px 26px #f36b3f20;
  }
  :is(.button,.button-yellow,.button-ghost,.btn):not(:disabled):hover>span:not(.nv-ripple) {translate:2px 0;}
  :is(.chip,.big-reaction,.reactions button,.help-filters button,.emoji-palette button):not(:disabled):hover {
    transform:translateY(-2px);
    border-color:#f36b3f90;
    box-shadow:0 4px 12px #f36b3f16;
  }
  :is(.card,.fun-card,.live-tv-card):hover {
    translate:none;
    transform:translateY(-5px);
    border-color:#f36b3f65;
    box-shadow:0 18px 38px #25282312, 0 0 0 1px #f36b3f18;
  }
  :is(.auth-card,.profile-panel,.stat-card,.panel):hover {border-color:#f36b3f55;box-shadow:0 12px 35px #25282310;}
  :is(.help-quicklinks a,.help-answer-links a,.profile-links a):hover {transform:translateY(-2px);box-shadow:0 5px 0 #f36b3f25;}
  .header nav :is(a,button):not(.button,.nav-live):hover {background-size:100% 2px;}
  .navigation>a:hover {box-shadow:inset 3px 0 0 var(--orange,#f36b3f);}
  .help-question summary:hover {color:var(--nv-focus);}
}
/* Active follows hover, so a pressed control actually feels pressed. */
:is(.button,.button-yellow,.button-ghost,.btn,.chip,.big-reaction,.reactions button,.help-filters button):not(:disabled):not([aria-disabled=true]):active {
  transform:translateY(2px) scale(.985);
  box-shadow:0 1px 0 #f36b3f35;
}
:is(.button,.button-yellow,.button-ghost,.btn):is(:disabled,[aria-disabled=true]):is(:hover,:active) {
  transform:none!important;
  translate:none!important;
  filter:none;
  box-shadow:0 3px 0 #25282310;
}
/* Existing base sheets also have hover transforms: pause those, not just new motion. */
.motion-paused :is(.button,.button-yellow,.button-ghost,.btn,.chip,.big-reaction,.reactions button,.help-filters button,.emoji-palette button,.card,.fun-card,.live-tv-card,.help-quicklinks a,.help-answer-links a,.profile-links a):is(:hover,:active) {
  transform:none!important;
  translate:none!important;
}
.motion-paused .card:hover .card-image {transform:none!important;}
.motion-paused .community-page :is(.community-caption,.community-story):hover,
.motion-paused .fun-card:hover .fun-card-icon{transform:none!important;}
.motion-paused :is(.button,.button-yellow,.button-ghost,.btn)>span:not(.nv-ripple) {translate:none!important;}
@media (prefers-reduced-motion:reduce) {
  :is(.button,.button-yellow,.button-ghost,.btn,.chip,.big-reaction,.reactions button,.help-filters button,.emoji-palette button,.card,.fun-card,.live-tv-card,.help-quicklinks a,.help-answer-links a,.profile-links a):is(:hover,:active) {transform:none!important;translate:none!important;}
  .card:hover .card-image {transform:none!important;}
  :is(.button,.button-yellow,.button-ghost,.btn)>span:not(.nv-ripple) {translate:none!important;}
}