/*
  claude-final.css — final-touches round on claude-merged.html.
  Loads LAST (after claude-mobile.css). Scope of this round:
  1. Cursor chips adapt to the surface beneath them.
  2. Pryor-difference circle intro (one glass title circle splits into two).
  3. Integrations: full-color brand logos, brand-color hover glow, compact strip.
  4. Timeline: two-line headline, retuned sub width, scroll-filled bars.
  5. Bottom CTA: spacing after the removed eyebrow.
  Log: claude-final-touches.md
*/

/* ============ 1. Surface-adaptive cursor chips ============ */

/*
  Rule: a pointer reads against the surface it floats over, not the section
  theme. Light surface below → dark cursor with a lime outline. Dark surface
  below → paper cursor (the section default already renders that).
*/
.pd-cursor--on-light svg path {
  fill: #14161c;
  stroke: var(--lime-on-dark, #e5f00b);
  stroke-width: 1.6;
}

.pd-cursor--on-light span {
  background: #14161c;
  color: var(--lime-on-dark, #e5f00b);
  border: 1px solid rgba(229, 240, 11, .5);
  box-shadow: 0 4px 12px rgba(2, 4, 10, .38);
}

.pd-cursor--on-dark svg path {
  fill: #f5f6f3;
  stroke: rgba(10, 12, 17, .55);
  stroke-width: 1.6;
}

.pd-cursor--on-dark span {
  background: var(--lime-on-dark, #e5f00b);
  color: #14161c;
  border: 1px solid rgba(10, 12, 17, .3);
}

/* ============ 2. Pryor-difference circle intro ============ */

.pd-intro {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: var(--pd-d);
  height: var(--pd-d);
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0 clamp(28px, 6%, 48px);
  background:
    linear-gradient(155deg, rgba(214, 226, 255, .09), rgba(214, 226, 255, .02) 55%),
    rgba(13, 16, 23, .58);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(220, 232, 255, .17);
  box-shadow:
    inset 0 1px 0 rgba(230, 240, 255, .2),
    inset 0 0 70px rgba(229, 240, 11, .05),
    0 30px 80px rgba(2, 4, 10, .5);
  /* The title circle is part of the resting composition: visible from the
     start, no entrance animation. It expands away when the user arrives. */
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@supports not (backdrop-filter: blur(1px)) {
  .pd-intro { background: rgba(16, 19, 27, .94); }
}

/* glass highlight sweep, upper-left */
.pd-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 38% at 30% 12%, rgba(238, 244, 255, .14), transparent 70%);
  pointer-events: none;
}

.pd-intro-title {
  position: relative;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.06;
  letter-spacing: -.028em;
  text-align: center;
  text-wrap: balance;
  color: var(--lime-on-dark, #e5f00b);
}

@media (prefers-reduced-motion: no-preference) {
  .pryor-difference.is-in .pd-intro {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
    transition: opacity .55s ease .1s, transform .8s var(--mo-ease);
  }
}

.pryor-difference.pd-intro-done .pd-intro {
  visibility: hidden;
}

/* Reduced motion shows the final two-circle composition from the start, so
   the title circle never appears there. */
@media (prefers-reduced-motion: reduce) {
  .pd-intro {
    visibility: hidden;
  }
}

/* Desktop/tablet: the two circles are born at the intro's center and split
   outward to their final overlap. Compositor-only (transform + opacity). */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .pryor-difference .pd-circle {
    transform: translate(-50%, -50%) scale(.62);
    transition:
      opacity .7s var(--mo-ease) var(--pd-split-delay, 0ms),
      transform .9s var(--spring) var(--pd-split-delay, 0ms);
  }

  .pryor-difference .pd-circle-ink { --pd-split-delay: 0ms; }
  .pryor-difference .pd-circle-glass { --pd-split-delay: 120ms; }

  .pryor-difference.is-in .pd-circle {
    transform: translate(calc(-50% + var(--pd-tx)), calc(-50% + var(--pd-ty)));
  }
}

/* Mobile stacked layout: the intro overlays the first circle's spot, then the
   stack fades in beneath it; the radar circle rises slightly into place. */
@media (max-width: 767px) {
  .pd-composition {
    position: relative;
  }

  .pd-intro {
    left: 50%;
    top: 0;
    width: min(78vw, 320px);
    height: min(78vw, 320px);
    transform: translateX(-50%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .pryor-difference.is-in .pd-intro {
      transform: translateX(-50%) scale(1.1);
    }

    .pryor-difference:not(.is-in) .pd-circle-glass {
      transform: translateY(22px);
    }

    .pryor-difference .pd-circle-glass {
      transition:
        opacity .6s var(--spring) var(--pd-delay),
        transform .6s var(--spring) var(--pd-delay);
    }

    .pryor-difference.is-in .pd-circle-glass {
      transform: none;
    }
  }
}

/* ============ 3. Integrations ============ */

/* 3a. Full-color brand marks: retire the mono re-ink filter. */
.m-light .pb-logo-mark img,
.pb-logo-mark img {
  filter: none;
}

/* 3b. Compact strip: the arc collapses into one tight centered logo row. */
.pb-logo-field {
  height: auto;
  margin: 0 auto 34px;
}

.pb-logo-horizon {
  position: static;
  inset: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 14px;
}

.pb-logo-tile,
.pb-integration-a .pb-logo-tile:nth-child(n) {
  --pb-logo-y: 0px;
  position: static;
  width: auto;
  min-width: 58px;
  transform: none;
}

.pb-logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--lime-deep, #6d7c0c);
  transition: transform .35s var(--spring), border-color .3s ease, box-shadow .3s ease;
}

.pb-logo-mark img {
  width: 22px;
  height: 22px;
}

.pb-logo-name {
  margin-top: 6px;
  font-size: 8.5px;
}

/* arc-era decoration off */
.pb-integration-a .pb-logo-mark::after,
.pb-final-glass .pb-logo-mark::before {
  display: none;
}

/* 3c. Brand-color hover glow (tap = :active on touch). Each tile carries its
   own --brand-rgb next to its logo, so the pairing is systematic. */
.pb-final-glass .pb-logo-tile:hover .pb-logo-mark,
.pb-final-glass .pb-logo-tile:active .pb-logo-mark {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-rgb, 20, 22, 28), .45);
  box-shadow:
    inset 0 1px 0 var(--c-topline),
    0 3px 9px rgba(var(--brand-rgb, 20, 22, 28), .22),
    0 12px 28px rgba(var(--brand-rgb, 20, 22, 28), .3);
}

/* Diagram chips: same brand-glow language on the rail marks. */
.pb-rail-mark--logo {
  transition: transform .25s var(--mo-ease), border-color .25s ease, box-shadow .25s ease;
}

.m-light .pb-rail-mark--logo:hover,
.m-light .pb-rail-mark--logo:active,
#night-chapter .pb-schema-v3-signal-spine.m-light .pb-rail-mark--logo:hover,
#night-chapter .pb-schema-v3-signal-spine.m-light .pb-rail-mark--logo:active {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-rgb, 20, 22, 28), .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 7px rgba(var(--brand-rgb, 20, 22, 28), .2),
    0 8px 20px rgba(var(--brand-rgb, 20, 22, 28), .26);
}

/* Salesforce is a wide cloud lockup, not a square glyph: give it room. */
.pb-rail-logo[src*="salesforce"] {
  width: 21px;
  flex-basis: 21px;
}

@media (prefers-reduced-motion: reduce) {
  .pb-logo-mark,
  .pb-rail-mark--logo {
    transition: none;
  }
}

/* ============ 4. Get-started timeline ============ */

/* Two lines, broken at the phrase boundary, at every width above the phone
   range (the phone range drops the break and balances instead). */
.pb-zone-timeline .pb-title {
  font-size: clamp(26px, 3.15vw, 44px);
}

.pb-zone-timeline .pb-sub {
  max-width: 46ch;
}

@media (max-width: 767px) {
  .pb-zone-timeline .pb-title {
    max-width: none;
    font-size: clamp(21px, 6.1vw, 32px);
    text-wrap: balance;
  }

  .claude-title-break {
    display: none;
  }
}

/* --- progress bars: faint track first, quick left→right white→lime fill --- */

.pb-zone-timeline .pb-bar {
  background: transparent;
  border: 1px solid rgba(238, 241, 246, .17);
}

.pb-zone-timeline .pb-bar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5f5f3 8%, #eef29a 58%, var(--lime-on-dark, #e5f00b));
  transform: scaleX(1);
  transform-origin: left center;
}

.pb-zone-timeline .pb-entry-3 .pb-bar::before {
  background: linear-gradient(90deg,
    #f5f5f3,
    rgba(240, 243, 190, .92) calc(100% - 250px),
    rgba(229, 240, 11, .85) calc(100% - 96px),
    rgba(229, 240, 11, 0));
}

/* the soft long-exposure shadow under each bar rides the fill, not the track */
.pb-zone-timeline .pb-bar::after {
  background: linear-gradient(90deg, rgba(245, 245, 243, .85), rgba(229, 240, 11, .5));
  opacity: .4;
}

/* armed state: each entry arms itself (.claude-bar-in, via claude-final.js)
   as the user scrolls it into view, so the three fills fire sequentially with
   the scroll, not on one shared timer. The empty-track state exists only when
   motion is allowed; reduced motion holds the final filled state with no JS
   dependency. */
@media (prefers-reduced-motion: no-preference) {
  .pb-enhanced .pb-zone-timeline .pb-entry:not(.claude-bar-in) .pb-bar::before {
    transform: scaleX(0);
  }

  .pb-enhanced .pb-zone-timeline .pb-entry:not(.claude-bar-in) .pb-bar::after {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pb-zone-timeline .pb-bar::before {
    transition: transform var(--claude-bar-dur, .9s) var(--mo-ease) var(--claude-bar-delay, 0ms);
  }

  .pb-zone-timeline .pb-bar::after {
    transition: opacity .55s ease calc(var(--claude-bar-delay, 0ms) + 300ms);
  }

  /* the first bar answers arrival immediately and a touch faster; later bars
     keep a small beat (and cascade when several arm at once after a fast
     scroll) */
  .pb-zone-timeline .pb-entry-1 .pb-bar { --claude-bar-delay: 0ms; --claude-bar-dur: .7s; }
  .pb-zone-timeline .pb-entry-2 .pb-bar { --claude-bar-delay: 140ms; }
  .pb-zone-timeline .pb-entry-3 .pb-bar { --claude-bar-delay: 280ms; }
}

/* vertical stepper (mobile): same fill, top→bottom */
@media (max-width: 767px) {
  .pb-zone-timeline .pb-bar::before {
    background: linear-gradient(180deg, #f5f5f3 8%, #eef29a 58%, var(--lime-on-dark, #e5f00b));
    transform-origin: center top;
  }

  .pb-zone-timeline .pb-entry-3 .pb-bar::before {
    background: linear-gradient(180deg,
      #f5f5f3,
      rgba(240, 243, 190, .92) calc(100% - 150px),
      rgba(229, 240, 11, .85) calc(100% - 64px),
      rgba(229, 240, 11, 0));
  }

  @media (prefers-reduced-motion: no-preference) {
    .pb-enhanced .pb-zone-timeline .pb-entry:not(.claude-bar-in) .pb-bar::before {
      transform: scaleY(0);
    }
  }
}

/* ============ 5. Bottom CTA + eyebrow-removal rhythm ============ */

/* titles open their sections now; no eyebrow above them */
.report-close__shell > .report-close__title {
  margin-top: 0;
}