/* =====================================================================
   Motion layer styles. Paired with /assets/motion.js.
   Everything degrades to a plain static page without the script.
   ===================================================================== */

/* --- pointer light: a gold bloom that tracks the cursor -------------- */
.hub-card, .fb-card, .detail, .ps-item, .ww-out-row, .ww-in-row,
.article-card, .hp-card, .tier, .plan {
  position: relative;
  isolation: isolate;
}
.hub-card::before, .fb-card::before, .detail::before, .ps-item::before,
.ww-out-row::before, .ww-in-row::before, .article-card::before,
.hp-card::before, .tier::before, .plan::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(201, 163, 90, 0.085),
    rgba(201, 163, 90, 0.028) 40%,
    transparent 68%
  );
}
.hub-card.lit::before, .fb-card.lit::before, .detail.lit::before,
.ps-item.lit::before, .ww-out-row.lit::before, .ww-in-row.lit::before,
.article-card.lit::before, .hp-card.lit::before,
.tier.lit::before, .plan.lit::before { opacity: 1; }

/* the border catches the light too, a shade only */
.hub-card, .fb-card, .detail, .article-card {
  transition: border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .fb-card.lit, .hub-card.lit, .article-card.lit { border-color: rgba(201,163,90,0.24); }
}

/* --- magnetic buttons: the script moves them, this eases the return -- */
.btn-primary, .nav-join, .hp-cta, .cta-actions .btn {
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              background-color .3s ease, border-color .3s ease, color .3s ease;
  will-change: transform;
}

/* --- headline settle ------------------------------------------------- */
.settle {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
.settle.settled { opacity: 1; transform: none; }

/* --- depth elements need a compositor layer -------------------------- */
[data-depth] { will-change: transform; }

/* --- link underlines that draw rather than appear -------------------- */
@media (hover: hover) and (pointer: fine) {
  .p-body a:not(.btn), .chapter-body a:not(.btn), .cbody a:not(.btn) {
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size .4s cubic-bezier(.22,.61,.36,1);
  }
  .p-body a:not(.btn):hover, .chapter-body a:not(.btn):hover, .cbody a:not(.btn):hover {
    background-size: 100% 1px;
  }
}

/* Nothing above runs for anyone who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  .settle { opacity: 1; transform: none; transition: none; }
  [data-depth] { transform: none !important; }
  .hub-card::before, .fb-card::before, .detail::before, .ps-item::before,
  .ww-out-row::before, .ww-in-row::before, .article-card::before,
  .hp-card::before, .tier::before, .plan::before { display: none; }
  .btn-primary, .nav-join, .hp-cta, .cta-actions .btn {
    transition: background-color .2s ease, color .2s ease;
    transform: none !important;
  }
}

/* =====================================================================
   Mobile legibility.
   Tracked uppercase labels sit at 8px to 10px on desktop, which is fine
   at arm's length on a large screen and unreadable on a phone. Nothing
   here changes the desktop setting.
   ===================================================================== */
@media (max-width: 760px) {
  .brand-sub,
  .hero-eyebrow,
  .eyebrow,
  .foot-tag,
  .fb-who, .fb-by, .fb-idx,
  .card-meta span,
  .tag,
  .hp-eyebrow, .hp-shared-h,
  .brand-text em,
  .fb-tags span,
  .fb-av + div b, .fb-av + div span,
  .fb-who b, .fb-who span,
  .hero-copy > p:last-of-type,
  .hub-card > span,
  .hp-term-label, .hp-tier,
  .f-role, .f-quals li,
  .chapter-label,
  footer em, footer small {
    font-size: 11px !important;
    letter-spacing: 0.14em;
  }
  /* the tag chips need the room once the type grows */
  .tag, .fb-tags span { padding: 5px 9px; }
}

/* The "read the full review" toggles and the standalone email links are
   real controls, so they get a real tap area on touch. */
@media (max-width: 760px) {
  .fb-more summary {
    min-height: 34px;
    display: flex;
    align-items: center;
  }
  .hp-note a[href^="mailto"],
  .detail a[href^="mailto"],
  .foot-contact a,
  .closer-contact a,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}

/* =====================================================================
   Reading face coverage.
   Headings keep Satoshi. Everything a person reads or clicks uses the
   reading stack, so a link inside a sentence does not change typeface
   halfway through the line.
   ===================================================================== */
:root{
  --font-read: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;
}

/* everything a person reads runs on the reading face */
p, li, dd, dt, td, th, figcaption, blockquote{
  font-family: var(--font-read);
}

/* form controls are not prose */
label, input, textarea, select{
  font-family: var(--font-ui);
}

/* links sitting inside body copy */
p a, li a, dd a, .answer a, .cbody a, .chapter-body a,
.p-body a, .p-lead a, .foot-contact a, .footer-contact a,
.closer-contact a, .hp-note a, .detail a{
  font-family: var(--font-read);
}

/* buttons and calls to action are controls, not headings */
.btn, .btn-primary, .btn-ghost, .hp-cta, .nav-join,
.cta-actions .btn, button, summary{
  font-family: var(--font-ui);
}

/* headings keep the display face, including the gold span inside them */
h1, h2, h3, h4,
h1 span, h2 span, h3 span,
.sec-h2, .sec-h2 span, .hero-h1, .hero-h1 span{
  font-family: 'Satoshi', 'Instrument Sans', sans-serif;
}