/* ============================================================
   POLISH LAYER: Microinteractions, Focus-Rings, Loading States
   ============================================================ */

@layer components {

  /* ===== ENHANCED FOCUS RINGS (a11y) ===== */
  .ds-btn:focus-visible,
  .ds-input:focus-visible,
  .ds-textarea:focus-visible,
  .ds-select:focus-visible,
  .ds-link:focus-visible,
  .ds-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--brand-primary);
  }
  .ds-card:focus-within {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-md);
  }

  /* ===== BUTTON LOADING STATE ===== */
  .ds-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }
  .ds-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    top: 50%; left: 50%;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    color: var(--btn-fg);
    opacity: 0.6;
    animation: ds-spin 700ms linear infinite;
  }
  .ds-btn--primary.is-loading::after { color: var(--brand-primary-fg); opacity: 1; }
  @keyframes ds-spin { to { transform: rotate(360deg); } }

  /* ===== SKELETON LOADER ===== */
  .ds-skeleton {
    background: linear-gradient(
      90deg,
      var(--neutral-100) 0%,
      var(--neutral-50) 50%,
      var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: ds-skeleton-shimmer 1.4s infinite ease-in-out;
    border-radius: var(--radius-sm);
    color: transparent;
  }
  @keyframes ds-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ===== IMAGE FADE-IN ON LOAD ===== */
  .ds-card__media img,
  .ds-hero__media img {
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
  }
  .ds-card__media img.loaded,
  .ds-hero__media img.loaded,
  .ds-card__media img[src]:not([src=""]),
  .ds-hero__media img[src]:not([src=""]) {
    opacity: 1;
  }

  /* ===== INTERACTIVE CARDS RIPPLE ===== */
  .ds-card--hoverable {
    cursor: pointer;
    will-change: transform, box-shadow;
  }
  .ds-card--hoverable:active {
    transform: translateY(0) scale(0.995);
    transition: transform 80ms var(--ease-out);
  }

  /* ===== NAV ACTIVE STATE GLOW ===== */
  .ds-nav__link {
    position: relative;
  }
  .ds-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 12px; right: 12px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 2px;
  }

  /* ===== BADGE PULSE FOR NEW ITEMS ===== */
  .ds-badge--pulse::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ds-pulse 1.6s ease-in-out infinite;
    margin-right: 4px;
  }
  @keyframes ds-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  /* ===== INPUT VALIDATION STATES ===== */
  .ds-input:invalid:not(:placeholder-shown),
  .ds-textarea:invalid:not(:placeholder-shown) {
    border-color: var(--danger-border);
  }
  .ds-input:invalid:not(:placeholder-shown):focus,
  .ds-textarea:invalid:not(:placeholder-shown):focus {
    box-shadow: 0 0 0 3px rgba(233, 133, 114, 0.25);
  }

  /* ===== SCROLLBAR STYLING (subtle) ===== */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
  }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-page);
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

  /* ===== SELECTION ===== */
  ::selection {
    background: var(--green-200);
    color: var(--green-900);
  }

  /* ===== PAGE TRANSITION ===== */
  .app__main {
    animation: ds-page-enter 320ms var(--ease-out) both;
  }
  @keyframes ds-page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ===== REDUCED MOTION (a11y) ===== */
@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;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .ds-tbar, .ds-header, .ds-footer, .ds-fab, .ds-btn { display: none !important; }
  body { background: white; color: black; }
  .ds-card { box-shadow: none; border: 1px solid #ccc; }
}