/* =============================================================================
   case-study.css — shared components for case-study + cut pages
   -----------------------------------------------------------------------------
   Loaded by every page in /work/<slug>.html and /work/<slug>-cut-*.html.
   Intentionally narrow scope: only universal patterns used across multiple
   case studies. Page-specific styling stays inline in each file's <style>.

   Tokens are NOT redeclared here — each page declares :root tokens and this
   file uses them via var().

   Components codified:
     · .thread / .thread-fill     scroll-progress strip
     · .reveal / .delay-N         intersection-observer reveal
     · .proto-tag                 short-cut pill (links back to parent)
     · .ctas / .cta / .cta-primary / .cta-ghost   bottom CTA strip
     · @prefers-reduced-motion    motion guard

   Future case studies should @link this and only style what's truly unique.
   ============================================================================= */

/* ---------- scroll thread (progress bar) ---------- */
.thread {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 499;
  pointer-events: none;
}
.thread-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--cyan), var(--yellow));
  width: 0;
  transition: width 0.1s linear;
}

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 100ms; }
.reveal.delay-2 { transition-delay: 220ms; }
.reveal.delay-3 { transition-delay: 340ms; }
.reveal.delay-4 { transition-delay: 460ms; }
.reveal.delay-5 { transition-delay: 580ms; }

/* ---------- proto-tag — small pill in corner of cuts, links back to parent ---------- */
.proto-tag {
  position: fixed;
  top: 5.5rem;
  right: 1.25rem;
  z-index: 480;
  font-family: var(--hand);
  font-size: 1.05rem;
  color: var(--pink);
  background: var(--paper);
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  transform: rotate(2deg);
  box-shadow: 0 10px 24px -10px rgba(44, 53, 68, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
}
.proto-tag:hover {
  transform: rotate(2deg) translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--pink), 0 10px 24px -10px rgba(44, 53, 68, 0.18);
}
@media (max-width: 720px) {
  .proto-tag {
    top: auto;
    bottom: 1rem;
    right: 1rem;
  }
}

/* ---------- bottom CTA strip — used at bottom of cuts and (in places) full case studies ---------- */
.ctas {
  padding: 6rem var(--x);
  background: var(--paper);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.ctas h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.25s, box-shadow 0.25s;
  font-size: 1rem;
  text-decoration: none;
}
.cta-primary {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 0 #9a1453;
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #9a1453;
}
.cta-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(44, 53, 68, 0.3);
}
.cta-ghost:hover { border-color: var(--ink); }

/* ---------- motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .proto-tag,
  .cta-primary,
  .cta-ghost {
    transition-duration: 0.01ms !important;
  }
}