/* Deskrune — interactive enhancements (v20260509a)
 *
 * Three calm, on-brand polish layers:
 *
 *   1. Theatrical reveal for AI tool result panels — staggered slide-up
 *      with a clay shimmer sweep on the first panel.
 *
 *   2. Brand-glyph nav pulse — when an AI tool successfully returns,
 *      the nav SVG glyph briefly pulses clay color to celebrate.
 *
 *   3. Animated stats counter — `.dr-stats-now` and `.dr-stats-week`
 *      get a count-up entrance the first time they appear.
 *
 * All effects honor prefers-reduced-motion.
 */

/* ─── 1. AI tool result theatrical reveal ─────────────────────────── */

/* Each .tool-result inside the output gets a staggered slide-up.
 *
 * Specificity: ai-tools-shared.css already defines `.tool-result { animation: t-rise }`
 * and loads AFTER dr-interactive on tool pages. To win the cascade we use
 * `body[data-tool] .tool-result` (specificity 0,1,1 > 0,1,0). The bare
 * `.tool-result` rule below still applies on non-tool pages (e.g., /stuck/
 * embedded result blocks) for consistency.
 */
.tool-result,
body[data-tool] .tool-result {
  position: relative;  /* needed for shimmer pseudo */
}

body[data-tool] .tool-result:nth-of-type(1) { animation: dr-result-rise 600ms cubic-bezier(0.25, 0, 0.2, 1) 0ms forwards !important; opacity: 0; }
body[data-tool] .tool-result:nth-of-type(2) { animation: dr-result-rise 600ms cubic-bezier(0.25, 0, 0.2, 1) 200ms forwards !important; opacity: 0; }
body[data-tool] .tool-result:nth-of-type(3) { animation: dr-result-rise 600ms cubic-bezier(0.25, 0, 0.2, 1) 400ms forwards !important; opacity: 0; }
body[data-tool] .tool-result:nth-of-type(4) { animation: dr-result-rise 600ms cubic-bezier(0.25, 0, 0.2, 1) 600ms forwards !important; opacity: 0; }

@keyframes dr-result-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Clay shimmer sweep — only on the FIRST result panel. Reads as a quiet
 * "result is here" moment without being loud.
 */
.tool-result:nth-of-type(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(201, 97, 63, 0.12) 50%,
    transparent 65%,
    transparent 100%
  );
  opacity: 0;
  animation: dr-result-shimmer 1100ms cubic-bezier(0.25, 0, 0.2, 1) 200ms forwards;
  border-radius: inherit;
}

@keyframes dr-result-shimmer {
  0%   { opacity: 0; transform: translateX(-30%); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(30%); }
}

/* ─── 2. Brand-glyph nav pulse ────────────────────────────────────── */

/* Add `.dr-nav-pulse` to the nav <a class="brand"> element to trigger.
 * The SVG inside fills with clay for ~600ms, then fades back to currentColor.
 */
nav .brand .brand-glyph {
  transition: color 280ms cubic-bezier(0.45, 0, 0.55, 1);
}
nav .brand.dr-nav-pulse .brand-glyph {
  animation: dr-nav-pulse 720ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dr-nav-pulse {
  0%   { color: currentColor; transform: scale(1); }
  35%  { color: var(--dr-clay, #c9613f); transform: scale(1.08); }
  60%  { color: var(--dr-clay, #c9613f); transform: scale(1); }
  100% { color: currentColor; transform: scale(1); }
}

/* ─── 3. Animated stats counter ───────────────────────────────────── */

/* The number portion of the badge gets the count-up. We use a CSS
 * counter+content trick driven by a CSS variable, so the JS just sets
 * `--dr-stats-num` from 0 to N over 800ms.
 *
 * This is a progressive enhancement — if the JS never runs, the static
 * `<span>` text inside .dr-stats-now still shows the final number.
 */
.dr-stats-now[data-dr-counting] {
  display: inline-block;
}

.dr-stats-now[data-dr-counting] .dr-stats-num {
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-block;
  min-width: 1ch;
  transition: color 200ms ease;
}

/* When counting, momentarily highlight in clay then fade back */
.dr-stats-now[data-dr-counting].dr-stats-active .dr-stats-num {
  color: var(--dr-clay, #c9613f);
}

/* ─── 4. Reduced motion: respect ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tool-result,
  .tool-result:nth-of-type(1),
  .tool-result:nth-of-type(2),
  .tool-result:nth-of-type(3),
  .tool-result:nth-of-type(4) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .tool-result:nth-of-type(1)::before {
    animation: none !important;
    display: none !important;
  }
  nav .brand.dr-nav-pulse .brand-glyph {
    animation: none !important;
  }
  .dr-stats-now[data-dr-counting].dr-stats-active .dr-stats-num {
    color: inherit !important;
  }
}