/* 1.9.40 unified slow-motion system.
   Interactive UI follows the same calm timing and easing as the seven-mode
   selector. Ambient video playback and loading/network timers are untouched. */
:root {
  --rabbit-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --rabbit-motion-fast: 620ms;
  --rabbit-motion-standard: 760ms;
  --rabbit-motion-slow: 980ms;
  --rabbit-motion-cinematic: 1180ms;
  --ui-fast: var(--rabbit-motion-fast) var(--rabbit-motion-ease);
  --ui-normal: var(--rabbit-motion-standard) var(--rabbit-motion-ease);
  --ios-duration-micro: 480ms;
  --ios-duration-small: var(--rabbit-motion-fast);
  --ios-duration-medium: var(--rabbit-motion-standard);
  --ios-duration-large: var(--rabbit-motion-slow);
  --effect-card-duration: var(--rabbit-motion-standard);
}

body:not(.admin-page) {
  --profile-open-duration: var(--rabbit-motion-slow);
  --profile-close-duration: var(--rabbit-motion-standard);
  --profile-content-duration: var(--rabbit-motion-standard);
  --profile-ease: var(--rabbit-motion-ease);
}

/* Small interactions: color, lift, border, focus and button feedback. */
body:not(.admin-page) :is(
  button,
  a,
  input,
  textarea,
  select,
  [role="button"],
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .settings-row,
  .social-row,
  .list-card,
  .waifu-tab,
  .waifu-card,
  .memory-card,
  .donate-card,
  .payment-row,
  .pay-row,
  .library-toggle,
  .library-item,
  .anime-track,
  .anime-player-btn,
  .social-icons > *,
  .footer-card a
) {
  transition-duration: var(--rabbit-motion-fast) !important;
  transition-timing-function: var(--rabbit-motion-ease) !important;
}

body:not(.admin-page) :is(
  button,
  [role="button"],
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .settings-row,
  .social-row,
  .waifu-tab,
  .waifu-card,
  .memory-card,
  .donate-card,
  .anime-track
)::before,
body:not(.admin-page) :is(
  button,
  [role="button"],
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .settings-row,
  .social-row,
  .waifu-tab,
  .waifu-card,
  .memory-card,
  .donate-card,
  .anime-track
)::after {
  transition-duration: var(--rabbit-motion-standard) !important;
  transition-timing-function: var(--rabbit-motion-ease) !important;
}

/* Larger surfaces open and close on the slower cinematic timeline. */
body:not(.admin-page) :is(
  .profile-card,
  .mini-status,
  .mini-status__compact,
  .mini-status__expanded,
  .mini-status__expanded-cover,
  .mini-status__expanded-avatar,
  .status-popover,
  .library-section,
  .library-viewport,
  .anime-music-player,
  .anime-player-panel,
  .tab-content,
  .waifu-tab-panel,
  .contact-community-entry
) {
  transition-timing-function: var(--rabbit-motion-ease) !important;
}

body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] {
  --profile-open-duration: var(--rabbit-motion-slow);
  --profile-close-duration: var(--rabbit-motion-standard);
  --profile-content-duration: var(--rabbit-motion-standard);
}

body:not(.admin-page) :is(
  .copy-toast,
  .community-toast,
  .chibi-chat-panel,
  .status-popover
) {
  animation-duration: var(--rabbit-motion-standard) !important;
  animation-timing-function: var(--rabbit-motion-ease) !important;
}

/* Community uses the same movement language even though its assets load
   lazily after this stylesheet. Important declarations keep timing unified. */
body:not(.admin-page) :is(
  .community-menu-launcher,
  .community-island__site-toggle,
  .community-island__site-nav button,
  .community-quick-menu button,
  .community-modal button,
  .contact-community-publisher button,
  .community-board__tabs button,
  .community-post-actions button,
  .community-composer__tab,
  .community-composer__secondary-button,
  .community-dropzone,
  .community-composer__dropzone,
  .community-post-card,
  .community-gallery-card,
  .community-board-post,
  .community-board-image
) {
  transition-duration: var(--rabbit-motion-fast) !important;
  transition-timing-function: var(--rabbit-motion-ease) !important;
}

body:not(.admin-page) #communityQuickBackdrop,
body:not(.admin-page) .community-island::before,
body:not(.admin-page) :is(
  .community-quick-menu,
  .community-modal__panel,
  .contact-community-publisher,
  .community-lightbox,
  .community-lightbox__content,
  .community-island__morph-surface,
  .community-composer__tab-indicator,
  .community-toast
) {
  transition-duration: var(--rabbit-motion-slow) !important;
  transition-timing-function: var(--rabbit-motion-ease) !important;
}

body:not(.admin-page) :is(
  .community-post-card.is-removing,
  .community-gallery-card.is-removing,
  .community-composer__content > form.is-entering,
  .community-composer__content > form.is-leaving,
  .contact-community-publisher__content > form.is-entering,
  .contact-community-publisher__content > form.is-leaving
) {
  animation-duration: var(--rabbit-motion-standard) !important;
  animation-timing-function: var(--rabbit-motion-ease) !important;
}

/* Never reintroduce motion for visitors who request less animation. */
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) :is(
    button,
    a,
    input,
    textarea,
    select,
    [role="button"],
    [class*="card"],
    [class*="row"],
    [class*="panel"],
    [class*="modal"],
    [class*="popover"],
    [class*="community"]
  ) {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }

  body:not(.admin-page) :is(
    .copy-toast,
    .community-toast,
    .chibi-chat-panel,
    .community-post-card,
    .community-gallery-card
  ) {
    animation: none !important;
  }
}

/* 1.9.44 framed surfaces settle more slowly than the seven-mode selector.
   This late-loaded lock prevents generic control timing from shortening them. */
body:not(.admin-page) :is(
  .profile-card,
  .footer.footer-card,
  #tab-home .item-card,
  #tab-home .rank-card,
  #tab-about .wide-card,
  #tab-about .side-card,
  #tab-about #aboutCards > article,
  #tab-about .about-interests,
  #tab-about .about-info-card,
  #tab-about .info-strip > *,
  #tab-about .tag-row > span,
  #tab-about .pill-row > *,
  #tab-settings .settings-card,
  #tab-settings .settings-row,
  #tab-settings .code-setting-actions > button,
  #tab-socials .list-card,
  #tab-socials .social-row,
  #tab-waifu .waifu-tab,
  #tab-waifu .waifu-masthead,
  #tab-waifu .waifu-card,
  #tab-waifu .glass-card,
  #tab-waifu .memory-card,
  #tab-waifu .waifu-note,
  #tab-waifu .waifu-reason,
  #tab-waifu .waifu-metadata > div,
  #tab-waifu .tag-row > span,
  #tab-contact .contact-intro,
  #tab-contact .community-board,
  #tab-contact .contact-community-entry,
  #tab-contact .contact-socials,
  #tab-contact .contact-email,
  #tab-donate .donate-hero,
  #tab-donate .donate-card,
  #tab-donate .thanks,
  #tab-donate .amounts > button,
  #tab-donate .vietqr-info,
  #tab-donate .vietqr-actions > *,
  #tab-donate .donate-bank-rows > div,
  #tab-donate .pay-row,
  .library-post,
  .anime-track,
  .social-icons > a
) {
  transition-duration: var(--rabbit-frame-hover-duration, 1120ms) !important;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) :is(
    .profile-card,
    .footer.footer-card,
    #tab-home .item-card,
    #tab-home .rank-card,
    #tab-about .wide-card,
    #tab-about .side-card,
    #tab-about #aboutCards > article,
    #tab-about .about-interests,
    #tab-about .about-info-card,
    #tab-about .info-strip > *,
    #tab-about .tag-row > span,
    #tab-about .pill-row > *,
    #tab-settings .settings-card,
    #tab-settings .settings-row,
    #tab-settings .code-setting-actions > button,
    #tab-socials .list-card,
    #tab-socials .social-row,
    #tab-waifu .waifu-tab,
    #tab-waifu .waifu-masthead,
    #tab-waifu .waifu-card,
    #tab-waifu .glass-card,
    #tab-waifu .memory-card,
    #tab-waifu .waifu-note,
    #tab-waifu .waifu-reason,
    #tab-waifu .waifu-metadata > div,
    #tab-waifu .tag-row > span,
    #tab-contact .contact-intro,
    #tab-contact .community-board,
    #tab-contact .contact-community-entry,
    #tab-contact .contact-socials,
    #tab-contact .contact-email,
    #tab-donate .donate-hero,
    #tab-donate .donate-card,
    #tab-donate .thanks,
    #tab-donate .amounts > button,
    #tab-donate .vietqr-info,
    #tab-donate .vietqr-actions > *,
    #tab-donate .donate-bank-rows > div,
    #tab-donate .pay-row,
    .library-post,
    .anime-track,
    .social-icons > a
  ) {
    transition-duration: 120ms !important;
  }
}

/* 1.9.45 Socials late cascade lock. Nested rows move independently instead
   of dragging the large Socials card upward at the same time. */
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-page) #tab-socials .list-card:has(
    .social-row:is(:hover, :focus-visible, :focus-within)
  ) {
    border-color: rgba(255, 255, 255, .095) !important;
    box-shadow:
      0 18px 38px rgba(0, 0, 0, .22),
      inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    filter: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* 1.9.53 mini-profile transition lock.
   Keep the compact banner and expanded identity card on one slow, continuous
   timeline. Blur is intentionally not animated over the playing cover video:
   opacity, transforms and the outer clip stay smooth on the compositor. */
body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] {
  --profile-open-duration: 1760ms;
  --profile-close-duration: 1480ms;
  --profile-content-duration: 880ms;
  --profile-open-settle: 2260ms;
  --profile-close-settle: 1640ms;
  --profile-ease: cubic-bezier(.22, .74, .26, 1);
  transition:
    clip-path var(--profile-close-duration) var(--profile-ease),
    transform var(--profile-close-duration) var(--profile-ease),
    border-radius 1120ms var(--profile-ease),
    border-color 920ms ease,
    background-color 1180ms ease,
    box-shadow 1180ms ease !important;
}

body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded {
  transition:
    clip-path var(--profile-open-duration) var(--profile-ease),
    transform var(--profile-open-duration) var(--profile-ease),
    border-radius 1320ms var(--profile-ease),
    border-color 1080ms ease,
    background-color 1380ms ease,
    box-shadow 1380ms ease !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-profile-animating {
  will-change: clip-path, transform;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-profile-animating :is(
  .mini-status__compact,
  .mini-status__expanded,
  .mini-status__expanded-cover,
  .mini-status__expanded-avatar,
  .mini-status__expanded h3,
  .mini-status__expanded-info > *
) {
  will-change: opacity, transform;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover]::before {
  transition: none !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-opening::before {
  animation-duration: 1880ms !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] .mini-status__compact {
  clip-path: inset(0 0 0 0 round 14px) !important;
  filter: none !important;
  transition:
    opacity 720ms ease 300ms,
    transform 1320ms var(--profile-ease) 220ms !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__compact {
  clip-path: inset(0 0 0 0 round 14px) !important;
  filter: none !important;
  transform: translate3d(0, -8px, 0) scale(.982) !important;
  transition:
    opacity 680ms ease,
    transform 1380ms var(--profile-ease) !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] .mini-status__expanded {
  clip-path: none !important;
  filter: none !important;
  transform: translate3d(0, 7px, 0) scale(.994) !important;
  transition:
    opacity 680ms ease,
    transform var(--profile-close-duration) var(--profile-ease) !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded {
  clip-path: none !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    opacity 860ms ease 180ms,
    transform var(--profile-open-duration) var(--profile-ease) 80ms !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] .mini-status__expanded-cover {
  transition:
    opacity 820ms ease,
    transform var(--profile-close-duration) var(--profile-ease) !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded-cover {
  transition:
    opacity 1080ms ease 180ms,
    transform var(--profile-open-duration) var(--profile-ease) 140ms !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] .mini-status__expanded-avatar {
  opacity: 0 !important;
  transform: translate3d(-98px, -78px, 0) scale(.56) rotate(-3deg) !important;
  transition:
    opacity 720ms ease,
    transform var(--profile-close-duration) var(--profile-ease) !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded-avatar {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  transition:
    opacity 860ms ease 320ms,
    transform 1540ms var(--profile-ease) 260ms !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] .mini-status__expanded h3,
html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] .mini-status__expanded-info > * {
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) !important;
  transition:
    opacity var(--profile-content-duration) ease,
    transform 1120ms var(--profile-ease) !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded h3 {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 480ms !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded-info > * {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded-info > :nth-child(1),
html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded-info > :nth-child(2),
html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover].is-expanded .mini-status__expanded-info > :nth-child(3) {
  transition-delay: 0s !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover][data-state="closing"] .mini-status__expanded-info > *,
html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover][data-state="closing"] .mini-status__expanded h3 {
  transition-delay: 0s !important;
}

html:not(.is-performance-mode) body:not(.admin-page) .sidebar > .mini-status[data-profile-popover]:not(.is-profile-animating) :is(
  .mini-status__compact,
  .mini-status__expanded,
  .mini-status__expanded-cover,
  .mini-status__expanded-avatar,
  .mini-status__expanded h3,
  .mini-status__expanded-info > *
) {
  will-change: auto;
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] {
    --profile-open-duration: 480ms;
    --profile-close-duration: 380ms;
    --profile-content-duration: 320ms;
    --profile-open-settle: 560ms;
    --profile-close-settle: 440ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) .sidebar > .mini-status[data-profile-popover],
  body:not(.admin-page) .sidebar > .mini-status[data-profile-popover] :is(
    .mini-status__compact,
    .mini-status__expanded,
    .mini-status__expanded-cover,
    .mini-status__expanded-avatar,
    h3,
    .mini-status__expanded-info,
    .mini-status__expanded-info > *
  ) {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }

  body:not(.admin-page) .sidebar > .mini-status[data-profile-popover]::before {
    animation: none !important;
  }
}

/* Donation presets: six compact rounded rectangles with neutral smoke hover.
   This final cascade lock replaces the legacy iOS pill rail and blue glow. */
body:not(.admin-page) #tab-donate #amountsList {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scroll-snap-type: none !important;
}

body:not(.admin-page) #tab-donate #amountsList > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 11px !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  filter: none !important;
  font-size: clamp(.54rem, 1.15vw, .68rem) !important;
  text-overflow: ellipsis;
  scroll-snap-align: none;
  transform: translate3d(0, 0, 0) !important;
  transition:
    background-color var(--rabbit-frame-hover-duration, 1120ms) cubic-bezier(.22, 1, .36, 1),
    border-color var(--rabbit-frame-hover-duration, 1120ms) ease,
    box-shadow var(--rabbit-frame-hover-duration, 1120ms) cubic-bezier(.22, 1, .36, 1),
    color var(--rabbit-motion-standard, 760ms) ease,
    transform var(--rabbit-frame-hover-duration, 1120ms) cubic-bezier(.22, 1, .36, 1) !important;
}

body:not(.admin-page) #tab-donate #amountsList > button.is-selected {
  border-color: rgba(255, 255, 255, .35) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, .96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-page) #tab-donate #amountsList > button:is(:hover, :focus-visible),
  body:not(.admin-page) #tab-donate #amountsList > button.is-selected:is(:hover, :focus-visible) {
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .08) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .055),
      0 16px 30px rgba(5, 6, 9, .38),
      0 5px 13px rgba(30, 31, 36, .26) !important;
    filter: none !important;
    transform: translate3d(0, -3px, 0) !important;
  }
}

body:not(.admin-page) #tab-donate #amountsList > button:active,
body:not(.admin-page) #tab-donate #amountsList > button.is-selected:active {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(7, 8, 11, .62) !important;
  background-image: none !important;
  box-shadow: 0 8px 18px rgba(5, 6, 9, .25) !important;
  filter: none !important;
  transform: translate3d(0, -1px, 0) scale(.985) !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) #tab-donate #amountsList > button {
    transition-duration: 120ms !important;
  }
}

/* 1.9.63 exact desktop/mobile music parity.
   Both device classes keep the owner's original 132x42 idle bar, expand to
   the same 172x86 player and use the same 172px playlist and glass material. */
body:not(.admin-page) #animeMusicPlayer[data-fixed-viewport-ui="bottom"],
body:not(.admin-page) #animeMusicPlayer[data-fixed-viewport-ui="bottom"]:is(:hover, :focus-within, .is-open, .is-forced-closed) {
  left: max(14px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(172px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  gap: 7px !important;
}

body:not(.admin-page) #animeMusicPlayer .anime-music__panel,
body:not(.admin-page) #animeMusicPlayer .anime-music__mini,
body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open, .is-forced-closed) :is(.anime-music__panel, .anime-music__mini),
body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) :is(.anime-music__panel, .anime-music__mini) {
  border-color: rgba(255, 255, 255, .11) !important;
  background-color: rgba(9, 11, 17, .44) !important;
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, .065), rgba(15, 17, 25, .075) 48%, rgba(0, 0, 0, .14)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 14px 32px rgba(0, 0, 0, .25) !important;
  backdrop-filter: blur(14px) saturate(.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.92) !important;
}

/* 1.9.63 exact desktop/mobile music parity: reuse the original 132x42 idle bar
   and the same 172x86 player so phones and desktop share the exact component
   geometry, dark tone and material. */
body:not(.admin-page) #animeMusicPlayer :is(.anime-music__panel, .anime-music__mini),
body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open, .is-forced-closed) :is(.anime-music__panel, .anime-music__mini) {
  border: 1px solid rgba(255, 255, 255, .15) !important;
  background-color: rgba(9, 11, 17, .44) !important;
  backdrop-filter: blur(14px) saturate(.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.92) !important;
}

body:not(.admin-page) #animeMusicPlayer .anime-music__panel {
  left: 0 !important;
  bottom: calc(100% + 7px) !important;
  width: 100% !important;
  max-width: 172px !important;
  max-height: min(220px, calc(100svh - 126px)) !important;
  transform-origin: left bottom !important;
  transition:
    opacity 260ms cubic-bezier(.16, 1, .3, 1),
    transform 300ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 300ms !important;
}

body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__panel,
body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 10px, 0) scale(.98) !important;
}

body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    opacity 280ms cubic-bezier(.16, 1, .3, 1),
    transform 320ms cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: 0s !important;
}

body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__mini,
body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__mini {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "cover body" !important;
  width: 132px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 7px 9px !important;
  gap: 7px !important;
}

body:not(.admin-page) #animeMusicPlayer:not(:hover):not(:focus-within):not(.is-open) .anime-music__cover,
body:not(.admin-page) #animeMusicPlayer.is-forced-closed .anime-music__cover {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__mini {
  grid-template-columns: 48px minmax(0, 1fr) 10px !important;
  grid-template-rows: 19px 20px 10px 8px !important;
  grid-template-areas:
    "cover body volume"
    "cover controls volume"
    "cover progress volume"
    "equalizer equalizer equalizer" !important;
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  padding: 7px 6px 5px !important;
  gap: 2px 5px !important;
}

body:not(.admin-page) #animeMusicPlayer:is(:hover, :focus-within, .is-open):not(.is-forced-closed) .anime-music__cover {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
}

body:not(.admin-page) #animeMusicPlayer .anime-music__mini {
  transition:
    width 260ms cubic-bezier(.16, 1, .3, 1),
    height 260ms cubic-bezier(.16, 1, .3, 1),
    min-height 260ms cubic-bezier(.16, 1, .3, 1),
    max-height 260ms cubic-bezier(.16, 1, .3, 1),
    padding 260ms cubic-bezier(.16, 1, .3, 1),
    border-radius 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) #animeMusicPlayer :is(.anime-music__panel, .anime-music__mini) {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
}

/* 1.9.65 clearer always-visible flat footer surface.
   The footer is a static information bar, so it must not inherit the generic
   framed-card black outline, smoke shadow, brightness filter or hover lift. */
body:not(.admin-page) .shell > .footer.footer-card,
body:not(.admin-page) .shell > .footer.footer-card:is(:hover, :focus-visible, :focus-within) {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: rgba(9, 11, 17, .29) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) !important;
  backdrop-filter: blur(10px) saturate(.96) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.96) !important;
  transition:
    background-color var(--rabbit-motion-standard) var(--rabbit-motion-ease),
    color var(--rabbit-motion-standard) ease !important;
}

body:not(.admin-page) .shell > .footer.footer-card::before,
body:not(.admin-page) .shell > .footer.footer-card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body:not(.admin-page) .shell > .footer.footer-card :is(
  .footer-nav a,
  .footer-ip,
  .footer-dmca__badge
),
body:not(.admin-page) .shell > .footer.footer-card :is(
  .footer-nav a,
  .footer-ip,
  .footer-dmca__badge
):is(:hover, :focus-visible, :focus-within) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body:not(.admin-page) .shell > .footer.footer-card :is(
  .footer-meta b,
  .footer-nav a
) {
  color: rgba(255, 255, 255, .90) !important;
}

body:not(.admin-page) .shell > .footer.footer-card :is(
  .footer-meta span,
  .footer-copy,
  .footer-dmca,
  .footer-ip
) {
  color: rgba(239, 242, 250, .74) !important;
}

/* 1.9.66 borderless public-site frame system.
   Remove only structural frame borders; separators and accessible focus rings
   on real controls remain available. This late lock also covers hover states. */
body:not(.admin-page) :is(
  .profile-card,
  .mini-status,
  .footer.footer-card,
  #tab-home .item-card,
  #tab-home .rank-card,
  #tab-about .wide-card,
  #tab-about .side-card,
  #tab-about .about-info-card,
  #tab-about .about-interests,
  #tab-about .info-strip > *,
  #tab-settings .settings-card,
  #tab-settings .settings-row,
  #tab-socials .list-card,
  #tab-socials .social-row,
  #tab-waifu .waifu-masthead,
  #tab-waifu .waifu-card,
  #tab-waifu .glass-card,
  #tab-waifu .memory-card,
  #tab-waifu .waifu-note,
  #tab-waifu .waifu-reason,
  #tab-waifu .waifu-metadata > div,
  #tab-contact .contact-intro,
  #tab-contact .community-board,
  #tab-contact .contact-community-entry,
  #tab-contact .contact-socials,
  #tab-contact .contact-email,
  #tab-donate .donate-hero,
  #tab-donate .donate-card,
  #tab-donate .thanks,
  #tab-donate .vietqr-info,
  #tab-donate .pay-row,
  .library-panel,
  .library-post,
  .anime-music__panel,
  .anime-music__mini,
  .anime-track
),
body:not(.admin-page) :is(
  .profile-card,
  .mini-status,
  .footer.footer-card,
  #tab-home .item-card,
  #tab-home .rank-card,
  #tab-about .wide-card,
  #tab-about .side-card,
  #tab-about .about-info-card,
  #tab-about .about-interests,
  #tab-about .info-strip > *,
  #tab-settings .settings-card,
  #tab-settings .settings-row,
  #tab-socials .list-card,
  #tab-socials .social-row,
  #tab-waifu .waifu-masthead,
  #tab-waifu .waifu-card,
  #tab-waifu .glass-card,
  #tab-waifu .memory-card,
  #tab-waifu .waifu-note,
  #tab-waifu .waifu-reason,
  #tab-waifu .waifu-metadata > div,
  #tab-contact .contact-intro,
  #tab-contact .community-board,
  #tab-contact .contact-community-entry,
  #tab-contact .contact-socials,
  #tab-contact .contact-email,
  #tab-donate .donate-hero,
  #tab-donate .donate-card,
  #tab-donate .thanks,
  #tab-donate .vietqr-info,
  #tab-donate .pay-row,
  .library-panel,
  .library-post,
  .anime-music__panel,
  .anime-music__mini,
  .anime-track
):is(:hover, :focus-within, :focus-visible, :active) {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
}

body:not(.admin-page) :is(
  .profile-card,
  .mini-status,
  .footer.footer-card,
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .list-card,
  .waifu-card,
  .memory-card,
  .donate-card,
  .library-panel,
  .library-post,
  .anime-music__panel,
  .anime-music__mini
)::before,
body:not(.admin-page) :is(
  .profile-card,
  .mini-status,
  .footer.footer-card,
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .list-card,
  .waifu-card,
  .memory-card,
  .donate-card,
  .library-panel,
  .library-post,
  .anime-music__panel,
  .anime-music__mini
)::after {
  border: 0 !important;
  outline: 0 !important;
}

/* 1.9.88 unified clear-glass sidebar and footer. Keep this final so legacy
   smoke layers cannot stack several translucent blacks into an opaque card. */
body:not(.admin-page) .sidebar > .profile-card,
body:not(.admin-page) .sidebar > #miniStatusCard.mini-status,
body:not(.admin-page) .shell > .footer.footer-card,
body:not(.admin-page) .sidebar > .profile-card:is(:hover, :focus-within),
body:not(.admin-page) .sidebar > #miniStatusCard.mini-status:is(:hover, :focus-within, .is-expanded),
body:not(.admin-page) .shell > .footer.footer-card:is(:hover, :focus-within) {
  border: 1px solid rgba(255, 255, 255, .15) !important;
  outline: 0 !important;
  background-color: rgba(255, 255, 255, .022) !important;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(247, 184, 205, .055), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .028), rgba(113, 110, 126, .035)) !important;
  box-shadow:
    0 16px 42px rgba(18, 18, 28, .1),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  backdrop-filter: blur(5px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.02) !important;
  filter: none !important;
}

body:not(.admin-page) .sidebar > #miniStatusCard :is(.mini-status__compact, .mini-status__expanded),
body:not(.admin-page) .sidebar > #miniStatusCard:is(:hover, :focus-within, .is-expanded) :is(.mini-status__compact, .mini-status__expanded) {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.admin-page) .sidebar > .profile-card .owner-presence,
body:not(.admin-page) .sidebar > .profile-card .profile-socials > :is(a, button),
body:not(.admin-page) .sidebar > .profile-card .profile-socials > :is(a, button):is(:hover, :focus-visible, :active) {
  border-color: rgba(255, 255, 255, .13) !important;
  background-color: rgba(255, 255, 255, .035) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  filter: none !important;
}

body:not(.admin-page) .shell > .footer.footer-card :is(.footer-nav a, .footer-ip, .footer-dmca__badge),
body:not(.admin-page) .shell > .footer.footer-card :is(.footer-nav a, .footer-ip, .footer-dmca__badge):is(:hover, :focus-visible, :active) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 1.9.94 performance lifecycle: hidden pages neither paint nor keep their
   decorative CSS timelines running. Transitioning pages remain renderable. */
body:not(.admin-page) .tab-content:not(.is-active):not(.is-entering):not(.is-leaving) {
  content-visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.admin-page) .tab-content:not(.is-active):not(.is-entering):not(.is-leaving) *,
body:not(.admin-page) .tab-content:not(.is-active):not(.is-entering):not(.is-leaving) *::before,
body:not(.admin-page) .tab-content:not(.is-active):not(.is-entering):not(.is-leaving) *::after,
body.effects-page-hidden *,
body.effects-page-hidden *::before,
body.effects-page-hidden *::after {
  animation-play-state: paused !important;
}

html.effects-lite body:not(.admin-page) :is(
  .profile-avatar::before,
  .profile-avatar::after,
  .home-showcase,
  .waifu-ribbon
) {
  will-change: auto !important;
}

html.effects-lite body:not(.admin-page) :is(.panel, .profile-card, .mini-status, .footer, .anime-music__panel, .anime-music__mini) {
  backdrop-filter: blur(3px) saturate(1.01) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.01) !important;
}

html.effects-lite body:not(.admin-page) :is(.mouse-light, .effect-particle) {
  display: none !important;
}

/* ==========================================================================
   Global Unified Slow-Motion & Silky Blur Transitions
   ========================================================================== */

/* 1. Main Navigation Tabs: Silky entrance & exit blur transitions */
body:not(.admin-page) .tab-content.is-active,
body:not(.admin-page) .tab-content.is-active.is-entering {
  display: block !important;
  animation: siteTabFadeIn 1.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body:not(.admin-page) .tab-content.is-leaving {
  display: block !important;
  pointer-events: none !important;
  animation: siteTabFadeOut 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

body[data-tab-direction="backward"]:not(.admin-page) .tab-content.is-leaving {
  animation-name: siteTabFadeOutBackward !important;
}

@keyframes siteTabFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(10px);
  }
}

@keyframes siteTabFadeOutBackward {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(10px);
  }
}

@keyframes siteTabFadeIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.975);
    filter: blur(12px);
  }
  35% {
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Staggered soft de-blur & entrance for main content blocks inside active tabs */
body:not(.admin-page) .tab-content.is-active > :is(h1, .subtitle, .section-title, .home-section-title, .about-layout, .settings-grid, .social-layout, .contact-layout, .donate-layout, .waifu-layout, #gearGrid, #rankGrid, #gameGrid) {
  animation: siteTabItemSlide 1.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes siteTabItemSlide {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* 2. Sub-tabs & Embedded Views (Waifu Profiles, About Panes) */
body:not(.admin-page) #tab-waifu .waifu-tab-panel.is-active {
  display: block !important;
  animation: siteTabFadeIn 1.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab-panel.is-leaving {
  display: block !important;
  pointer-events: none !important;
  animation: siteTabFadeOut 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* 3. Calm & Deep Slow-Motion Click Feedback on All Interactive Elements */
body:not(.admin-page) :is(
  button,
  [role="button"],
  .tab,
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .settings-row,
  .social-row,
  .list-card,
  .waifu-tab,
  .waifu-card,
  .waifu-note,
  .waifu-reason,
  .memory-card,
  .donate-card,
  .pay-row,
  .payment-row,
  .library-post,
  .anime-track,
  [data-click-feedback],
  .about-info-card,
  .about-subtab-btn
) {
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 1.05s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) :is(
  button,
  [role="button"],
  .tab,
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .settings-row,
  .social-row,
  .list-card,
  .waifu-tab,
  .waifu-card,
  .waifu-note,
  .waifu-reason,
  .memory-card,
  .donate-card,
  .pay-row,
  .payment-row,
  .library-post,
  .anime-track,
  [data-click-feedback],
  .about-info-card,
  .about-subtab-btn
):is(:active, .is-clicked) {
  transform: scale(0.94) !important;
  transition-duration: 0.95s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):is(:active, .is-clicked) {
  transform: scale(0.94) rotate(var(--card-touch-rotate, 0deg)) !important;
  transition-duration: 0.95s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Reduced motion accessibility guarantee */
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) :is(
    .tab-content,
    .tab-content.is-active,
    .tab-content.is-leaving,
    .tab-content.is-entering,
    #tab-waifu .waifu-tab-panel,
    #tab-about .about-pane
  ) {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}