/* motion.css — reveals, micro-interactions, reduced-motion guard */

@layer motion {
  /* ------ Reveal on scroll ------ */
  .reveal {
    --reveal-delay: 0ms;
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--dur-standard) var(--ease-out) var(--reveal-delay),
      transform var(--dur-standard) var(--ease-out) var(--reveal-delay);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal--strong {
    transform: translateY(48px);
    clip-path: inset(0 0 12% 0);
    transition:
      opacity var(--dur-emphatic) var(--ease-out) var(--reveal-delay),
      transform var(--dur-emphatic) var(--ease-out) var(--reveal-delay),
      clip-path var(--dur-emphatic) var(--ease-out) var(--reveal-delay);
  }
  .reveal--strong.is-visible {
    clip-path: inset(0 0 0 0);
  }

  .reveal--subtle { transform: translateY(10px); }

  .reveal[data-delay="1"] { --reveal-delay: 80ms; }
  .reveal[data-delay="2"] { --reveal-delay: 160ms; }
  .reveal[data-delay="3"] { --reveal-delay: 240ms; }
  .reveal[data-delay="4"] { --reveal-delay: 320ms; }
  .reveal[data-delay="5"] { --reveal-delay: 400ms; }

  /* ------ Hover micro-interactions ------ */
  .hover-lift {
    transition: transform var(--dur-short) var(--ease-out),
                box-shadow var(--dur-short) var(--ease-out);
  }
  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-mid);
  }

  /* Arrow in CTA: slide on hover */
  .cta-arrow {
    display: inline-block;
    transition: transform var(--dur-short) var(--ease-out);
  }
  .btn:hover .cta-arrow,
  .btn:focus-visible .cta-arrow,
  .sticky-cta__btn:hover .cta-arrow,
  .cta:hover .cta-arrow,
  .cta:focus-visible .cta-arrow { transform: translateX(4px); }

  /* ------ Variable font weight shift on hover ------ */
  .wt-shift {
    transition: font-variation-settings var(--dur-short) var(--ease-out);
  }
  .wt-shift:hover {
    font-variation-settings: "SOFT" 80, "WONK" 1;
  }

  /* ------ Marquee (proof rail) ------ */
  .marquee {
    display: flex;
    gap: var(--s-8);
    animation: marquee 40s linear infinite;
    width: max-content;
  }
  .marquee:hover { animation-play-state: paused; }

  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ------ Signal pulse (used on diagnostic result) ------ */
  .pulse-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    position: relative;
  }
  .pulse-dot::after {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.35;
    animation: pulse 2.2s var(--ease-out) infinite;
  }
  @keyframes pulse {
    0%   { transform: scale(0.6); opacity: 0.45; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* ------ Number tick-up (applied by JS when visible) ------ */
  .count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* ------ Sticky CTA band enter ------ */
  .sticky-cta {
    transform: translateY(140%);
    opacity: 0;
    transition:
      transform var(--dur-standard) var(--ease-out),
      opacity var(--dur-short) var(--ease-out);
  }
  .sticky-cta.is-active {
    transform: translateY(0);
    opacity: 1;
  }

  /* ------ Accordion (objections, FAQ) ------ */
  .disclosure {
    border-top: 1px solid var(--border);
  }
  .disclosure:last-child { border-bottom: 1px solid var(--border); }

  .disclosure__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-5);
    padding-block: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    color: var(--fg);
    transition: color var(--dur-micro) var(--ease-out);
  }
  .disclosure__summary::-webkit-details-marker { display: none; }
  .disclosure__summary:hover { color: var(--accent); }

  .disclosure__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    margin-top: 0.25em;
    transition: background var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
  }
  .disclosure__icon::before {
    content: "";
    width: 10px; height: 1.5px;
    background: currentColor;
  }
  .disclosure__icon::after {
    content: "";
    width: 1.5px; height: 10px;
    background: currentColor;
    margin-left: -10px;
    transition: transform var(--dur-short) var(--ease-out);
    transform-origin: center;
  }

  details[open] > .disclosure__summary .disclosure__icon {
    background: var(--ink-900);
    color: var(--bone-50);
    border-color: var(--ink-900);
    transform: rotate(45deg);
  }
  details[open] > .disclosure__summary .disclosure__icon::after { transform: scaleY(0); }

  .disclosure__body {
    padding-block: 0 var(--s-6);
    padding-right: calc(28px + var(--s-5));
    color: var(--fg-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    max-width: 62ch;
    animation: discOpen var(--dur-short) var(--ease-out);
  }
  @keyframes discOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ------ Magnetic CTA (JS-driven) ------ */
  .magnet {
    transition: transform var(--dur-short) var(--ease-out);
  }

  /* ------ Reduced motion guard ------ */
  @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;
    }
    .reveal, .reveal--strong { opacity: 1; transform: none; clip-path: none; }
    .marquee { animation: none; }
    .pulse-dot::after { animation: none; display: none; }
    .magnet { transform: none !important; }
  }
}