/* Rebrief Studios — shared polish layer.
   Loaded on every page after the page's own <style> block.
   Micro-interactions and accessibility only — no layout or colour changes. */

/* ---------- Typography refinements ---------- */
h1, h2, h3, .deck, .hero-side { text-wrap: balance; }
p, li { text-wrap: pretty; }
body { text-rendering: optimizeLegibility; }

::selection { background: var(--yellow, #f2cc55); color: #090909; }

/* ---------- Focus: visible for keyboard, invisible for mouse ---------- */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green, #1f5d45);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Buttons: subtle lift, never bouncy ---------- */
.btn-primary, .btn-secondary, .submit-btn, .cta-callout-btn,
.hero-cta, .offer-submit, .offer-trigger, .promo-cta {
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              box-shadow .18s ease,
              background-color .18s ease,
              color .18s ease,
              border-color .18s ease;
  will-change: transform;
}
.btn-primary:hover, .submit-btn:hover, .cta-callout-btn:hover,
.hero-cta:hover, .offer-submit:hover, .offer-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(9,9,9,.18);
}
.btn-primary:active, .submit-btn:active, .cta-callout-btn:active,
.offer-submit:active, .offer-trigger:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(9,9,9,.14);
}
.btn-secondary:hover, .promo-cta:hover { opacity: .72; }

/* ---------- Cards: quiet lift + slow image push-in ---------- */
.capability-card, .read-card, .flow-step, .deliverable, .stat, .price-card {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.capability-card:hover, .read-card:hover, .flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(9,9,9,.10);
}
.price-card:hover { box-shadow: 0 22px 60px rgba(9,9,9,.14); }

.capability-visual, .read-image, .flow-step .img, .hero-art, .ease-media, .trust-media {
  overflow: hidden;
}
.capability-visual img, .read-image img, .flow-step .img img {
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.capability-card:hover .capability-visual img,
.read-card:hover .read-image img,
.flow-step:hover .img img {
  transform: scale(1.035);
}

/* ---------- Links ---------- */
.tiny-link, .learn, .article-nav, .top-nav a {
  transition: opacity .18s ease, text-decoration-color .18s ease;
}
.tiny-link:hover, .learn:hover { opacity: .62; }

/* ---------- Service rows: reveal the row on hover ---------- */
.service-row { transition: background-color .25s ease, padding-left .25s ease; }
.service-row:hover { background: rgba(9,9,9,.028); }

/* ---------- Form fields ---------- */
.field input, .field select, .field textarea, form input, form select, form textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus,
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--green, #1f5d45);
  box-shadow: 0 0 0 3px rgba(31,93,69,.10);
}
/* :user-invalid only flags a field the visitor has actually interacted with —
   an untouched required field must never look like an error. */
input:user-invalid, textarea:user-invalid { border-color: var(--orange, #e87549); }

/* ---------- Images never render as broken boxes mid-load ---------- */
img { max-width: 100%; }

/* ---------- Scroll reveal.
   Only active once JS confirms support, so content is never hidden
   if the script fails to run. ---------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .promo-bar, .offer-bar, .offer-trigger, .offer-modal, .hero-art { display: none !important; }
  body { background: #fff; }
}