/**
 * ui-polish.css — Professional micro-interactions, focus states, transitions
 *
 * Loads after design-system.css so CSS variables are available.
 * Does NOT re-define layout — only layering/enhancing existing classes.
 */

/* ═══════════════════════════════════════════════════════════════════════
   FOCUS RINGS — accessible, consistent
   ═══════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-secondary, #a855f7);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — unified interactive states
   ═══════════════════════════════════════════════════════════════════════ */
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"] {
  cursor: pointer;
  transition:
    transform        80ms ease,
    opacity         150ms ease,
    background-color 180ms ease,
    border-color     180ms ease,
    box-shadow       180ms ease,
    color            180ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button:active:not(:disabled),
.btn:active:not(:disabled),
[role="button"]:active:not([aria-disabled="true"]) {
  transform: scale(0.96);
}

button:disabled,
.btn:disabled,
[disabled],
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary button glow on hover */
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   INPUTS — polished focus glow
   ═══════════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.composer-editor[contenteditable] {
  transition:
    border-color 160ms ease,
    box-shadow   160ms ease,
    background   160ms ease;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS — subtle hover lift
   ═══════════════════════════════════════════════════════════════════════ */
.cr-post,
.card,
.cr-card,
.feed-item,
.post-card,
.user-card,
.notification-item {
  transition:
    box-shadow 200ms ease,
    transform  160ms ease,
    border-color 200ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════════ */
a {
  transition: color 140ms ease, opacity 140ms ease, text-decoration-color 140ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION ITEMS
   ═══════════════════════════════════════════════════════════════════════ */
.nav-item,
.nav-link,
.sidebar-link,
.tab-btn,
.feed-filter-btn,
.profile-tab {
  transition:
    background-color 150ms ease,
    color            150ms ease,
    border-color     150ms ease,
    box-shadow       150ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTION BUTTONS (react, reply, share, etc.)
   ═══════════════════════════════════════════════════════════════════════ */
.cr-action-btn,
.composer-action-btn,
.reaction-btn {
  transition:
    transform        120ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color            140ms ease,
    background-color 140ms ease,
    opacity          140ms ease;
}

.cr-action-btn:active,
.composer-action-btn:active,
.reaction-btn:active {
  transform: scale(0.82);
}

/* Pop animation when reaction is toggled active */
.cr-action-btn.js-pop,
.reaction-btn.js-pop {
  animation: reaction-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes reaction-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — fade-slide in on route change
   ═══════════════════════════════════════════════════════════════════════ */
.view-panel,
.simple-view-content,
#content-area > div,
.feed-wrapper {
  animation: view-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility class for JS-triggered fade-in */
.js-fade-in {
  animation: view-enter 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Utility class for JS-triggered fade-out */
.js-fade-out {
  animation: fade-out-down 180ms ease forwards;
}

@keyframes fade-out-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODALS — spring entry
   ═══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  animation: modal-backdrop-in 180ms ease;
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-content,
.modal-container,
.edit-profile-modal,
.crop-modal-content {
  animation: modal-spring-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-spring-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DROPDOWNS — fast spring open
   ═══════════════════════════════════════════════════════════════════════ */
.dropdown-menu,
.nav-dropdown,
.cr-menu,
.profile-dropdown,
[class*="dropdown-"] {
  transform-origin: top;
  animation: dropdown-open 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdown-open {
  from {
    opacity: 0;
    transform: scaleY(0.82) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.toast-notification,
.toast-message,
[class*="toast-"] {
  animation: toast-enter 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-notification.removing,
.toast-notification.toast-exit {
  animation: toast-exit 200ms ease forwards;
}

@keyframes toast-enter {
  from {
    transform: translateX(110%) scale(0.88);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes toast-exit {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SKELETON / LOADING SHIMMER
   ═══════════════════════════════════════════════════════════════════════ */
.skeleton,
.skeleton-line,
.skeleton-avatar,
.skeleton-image,
[class*="skeleton-"] {
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary, #1e1e2e);
  border-radius: 6px;
  color: transparent !important;
}

.skeleton::after,
.skeleton-line::after,
.skeleton-avatar::after,
.skeleton-image::after,
[class*="skeleton-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(168, 85, 247, 0.08) 40%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(168, 85, 247, 0.08) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADING SPINNER — reusable class
   ═══════════════════════════════════════════════════════════════════════ */
.ui-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(168, 85, 247, 0.25);
  border-top-color: var(--color-secondary, #a855f7);
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
  vertical-align: middle;
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBARS — thin, branded
   ═══════════════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.28) transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.25);
  border-radius: 3px;
  transition: background 200ms ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
   IMAGES — graceful lazy load
   ═══════════════════════════════════════════════════════════════════════ */
img {
  transition: opacity 220ms ease;
}

img.lazy-loading {
  opacity: 0;
  background: var(--bg-tertiary, #1e1e2e);
}

img.lazy-loaded {
  opacity: 1;
}

/* Avatar hover */
.cr-avatar img,
.avatar-img,
.profile-avatar img {
  transition: transform 200ms ease, filter 200ms ease;
}

.cr-avatar:hover img,
.avatar-img:hover {
  transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   ONLINE PRESENCE DOT
   ═══════════════════════════════════════════════════════════════════════ */
.online-dot,
.presence-dot[data-status="online"],
.cr-online-indicator {
  animation: presence-pulse 2.4s ease-in-out infinite;
}

@keyframes presence-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   FORM — progress/submit state
   ═══════════════════════════════════════════════════════════════════════ */
.btn-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
}

.btn-loading::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9em;
  height: 0.9em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   SLIDE-IN PANEL (sidebar, drawer)
   ═══════════════════════════════════════════════════════════════════════ */
.panel-slide-in {
  animation: panel-enter 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panel-enter {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.panel-slide-in-right {
  animation: panel-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panel-enter-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGE / COUNTER update flash
   ═══════════════════════════════════════════════════════════════════════ */
.badge-flash {
  animation: badge-bump 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-bump {
  0%   { transform: scale(1);    }
  45%  { transform: scale(1.45); }
  80%  { transform: scale(0.9);  }
  100% { transform: scale(1);    }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSER — smooth expand/collapse
   ═══════════════════════════════════════════════════════════════════════ */
.composer-expanded-area {
  transition: max-height 240ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity    200ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════ */
.progress-bar,
.upload-progress-fill {
  transition: width 180ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — disable all non-essential animation
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  .skeleton::after,
  .skeleton-line::after,
  .skeleton-avatar::after,
  .skeleton-image::after,
  [class*="skeleton-"]::after {
    animation: none;
    background: rgba(168, 85, 247, 0.06);
  }
}