/*
 * ShopDPA — Motion + animation system
 * --------------------------------------------------------------
 * All animation values reference motion tokens defined in tokens.css
 * (--t-fast, --t-base, --t-slow, --ease, --ease-out).
 *
 * Two principles:
 *   1. Subtle. Movements should feel inevitable, not flashy.
 *   2. Accessible. Every keyframe + transition respects
 *      prefers-reduced-motion via the cascade in tokens.css
 *      (which already collapses motion vars to 0ms).
 */

/* ============================================================ */
/* SCROLL REVEAL — applied via JS Intersection Observer         */
/* Add data-reveal to any element. JS adds .is-revealed when    */
/* it scrolls into view. CSS handles the animation.             */
/* ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal variants — opt in via data-reveal="<variant>" */
[data-reveal="fade"]            { transform: none; }
[data-reveal="fade"].is-revealed { transform: none; }

[data-reveal="up"]               { transform: translateY(24px); }
[data-reveal="up"].is-revealed   { transform: translateY(0); }

[data-reveal="left"]             { transform: translateX(-24px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }

[data-reveal="right"]            { transform: translateX(24px); }
[data-reveal="right"].is-revealed{ transform: translateX(0); }

[data-reveal="scale"]            { transform: scale(0.98); }
[data-reveal="scale"].is-revealed{ transform: scale(1); }

/* Staggered reveal — child indexes get delayed via inline style or this util */
[data-reveal-stagger] > * { transition-delay: calc(var(--stagger-delay, 0ms)); }
[data-reveal-stagger] > *:nth-child(1) { --stagger-delay: 0ms; }
[data-reveal-stagger] > *:nth-child(2) { --stagger-delay: 80ms; }
[data-reveal-stagger] > *:nth-child(3) { --stagger-delay: 160ms; }
[data-reveal-stagger] > *:nth-child(4) { --stagger-delay: 240ms; }
[data-reveal-stagger] > *:nth-child(5) { --stagger-delay: 320ms; }
[data-reveal-stagger] > *:nth-child(6) { --stagger-delay: 400ms; }
[data-reveal-stagger] > *:nth-child(7) { --stagger-delay: 480ms; }
[data-reveal-stagger] > *:nth-child(8) { --stagger-delay: 560ms; }

/* ============================================================ */
/* HOVER + INTERACTION STATES                                   */
/* ============================================================ */

/* Card lift — applied to anything with .card-interactive */
.card-interactive {
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
  will-change: transform;
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.card-interactive:focus-within {
  border-color: var(--c-primary);
  box-shadow: var(--ring-focus);
}

/* Button press — subtle scale on active */
.btn:active { transform: translateY(0) scale(0.98); }

/* Link underline grow */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================================================ */
/* COUNT-UP STAT — used for "X programs" / "$X average DPA"     */
/* JS animates the data-target value into the .stat__value text */
/* ============================================================ */

.stat {
  text-align: center;
}

.stat__value {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
  /* v1.22.0 — was `display: block;` which stretched the value to fill   */
  /* the grid column (~393px). The amber ::after underline (width:100%) */
  /* then ran off the end of short numbers like "6,084". Switching to   */
  /* inline-block sizes the value to its text content; the parent .stat */
  /* keeps `text-align: center` (line ~112) so it stays centered.        */
  display: inline-block;
}

.stat__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-start: var(--sp-1);
  display: block;
}

/* ============================================================ */
/* PROGRESS BAR (used in calculators, multi-step quiz)          */
/* ============================================================ */

.progress {
  position: relative;
  height: 6px;
  background-color: var(--c-bg-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: linear-gradient(
    90deg,
    var(--c-accent) 0%,
    var(--c-accent-hover) 100%
  );
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}

/* ============================================================ */
/* SKELETON LOADING STATE                                       */
/* ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-bg-alt) 0%,
    var(--c-surface-alt) 50%,
    var(--c-bg-alt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  color: transparent;
  user-select: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--c-bg-alt); }
}

/* ============================================================ */
/* SUBTLE PULSE — for "live" or new badges                      */
/* ============================================================ */

.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background-color: var(--c-success);
  position: relative;
}

.pulse-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background-color: inherit;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::before { animation: none; display: none; }
}

/* ============================================================ */
/* FORM FIELD FOCUS — animated label "float"                    */
/* ============================================================ */

.field-floating {
  position: relative;
}

.field-floating input,
.field-floating select,
.field-floating textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  min-height: 56px;
}

.field-floating label {
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-base);
  color: var(--c-ink-muted);
  pointer-events: none;
  transition:
    transform var(--t-base) var(--ease),
    font-size var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
  background-color: var(--c-surface);
  padding-inline: var(--sp-half);
}

.field-floating input:focus + label,
.field-floating input:not(:placeholder-shown) + label,
.field-floating select:focus + label,
.field-floating select:not([value=""]) + label,
.field-floating textarea:focus + label,
.field-floating textarea:not(:placeholder-shown) + label {
  transform: translateY(-30px) scale(0.85);
  color: var(--c-primary);
}

.field-floating input:focus,
.field-floating select:focus,
.field-floating textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--ring-focus);
}

/* ============================================================ */
/* CARD FLIP — used by myth-buster cards (optional enhancement) */
/* ============================================================ */

.flip-card {
  perspective: 1000px;
  height: 200px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease);
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-card__back {
  transform: rotateY(180deg);
  background-color: var(--c-success-soft);
}

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition: none; }
}

/* ============================================================ */
/* SCROLL-LINKED HEADER (already implemented in patterns.css    */
/* via .site-header.is-stuck) — animation values consolidated   */
/* here for review                                              */
/* ============================================================ */

/* (See patterns.css §Header for the actual rules.) */

/* ============================================================ */
/* SMOOTH SCROLL with header offset                             */
/* ============================================================ */

/* v1.28.2 — header is now one consistent height across all scroll states
 * (see patterns.css §Header). The .is-stuck override at 64px previously
 * compensated for the skinny scrolled state; with the height now locked
 * to ~80px, the base 80px scroll-padding-top applies at every position. */
html { scroll-padding-top: 80px; }

/* For specific anchor targets that need extra space */
.scroll-anchor { scroll-margin-top: 100px; }