/*
  claude-polish.css — polish round on claude-merged.html.
  Loads last. Everything reads the existing token families (--c-*, --pb-*,
  --lime-*, --spring); new motion values live in the --mo-* tokens below.
*/

/* ============ 0. Motion tokens ============ */

:root {
  --mo-fast: .22s;
  --mo-med: .5s;
  --mo-ease: cubic-bezier(.16, 1, .3, 1);
  --mo-drift: 76s;       /* statement glow drift (transform-only) */
  --mo-drift-slow: 110s; /* radar rings, code stream */
}

/* ============ 1. Headline line-count fixes + alignment rule ============ */

/* "From install to continuous improvement / in three steps." — exactly two
   lines, broken at the phrase boundary. On phones the break is dropped and the
   headline flows naturally. */
.pb-zone-timeline .pb-title {
  max-width: none;
  font-size: clamp(28px, 3.3vw, 46px);
  text-wrap: wrap;
}

@media (max-width: 700px) {
  .claude-title-break {
    display: none;
  }

  .pb-zone-timeline .pb-title {
    text-wrap: balance;
  }
}

/* Platform tiles carry real brand marks (Simple Icons). The source SVGs are
   white; on the light chapter's light chips they re-ink via filter. */
.pb-logo-mark img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.m-light .pb-logo-mark img {
  filter: brightness(0) opacity(.82);
}

/* "Pryor fits into the website and systems you already run." — two lines. */
.pb-integration-head .pb-title {
  max-width: 30ch;
  font-size: clamp(28px, 3.6vw, 46px);
}

/* Playbooks heading: centered like every other non-left-column section. */
.pb-zone-playbooks .pb-zone-head {
  text-align: center;
}

.pb-zone-playbooks .pb-head-copy .pb-title {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(30px, 3.8vw, 48px);
}

.pb-zone-playbooks .pb-head-copy .pb-sub {
  margin-inline: auto;
}

/* ============ 2. Text-focus chapter: soft drifting color fields on light ============ */

.decision-rail.m-light[data-motion-style="scroll-highlight"] .decision-statement-stage {
  background: transparent; /* the pseudo layers below own the color now */
}

.decision-rail.m-light .decision-statement-stage::before,
.decision-rail.m-light .decision-statement-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

/* Cool field, upper left of the text. */
.decision-rail.m-light .decision-statement-stage::before {
  top: 6%;
  left: 16%;
  width: min(46vw, 620px);
  aspect-ratio: 1.35;
  background:
    radial-gradient(closest-side, rgba(151, 183, 226, .44), rgba(151, 183, 226, .14) 62%, transparent);
}

/* Warm field with a quiet lime under-note, lower right, tucked under the text. */
.decision-rail.m-light .decision-statement-stage::after {
  bottom: -4%;
  right: 14%;
  width: min(42vw, 560px);
  aspect-ratio: 1.3;
  background:
    radial-gradient(closest-side at 38% 42%, rgba(224, 170, 140, .36), transparent 68%),
    radial-gradient(closest-side at 66% 64%, rgba(197, 214, 60, .24), transparent 62%);
}

.decision-statement-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .decision-rail.m-light .decision-statement-stage::before {
    animation: claude-glow-drift-a var(--mo-drift) ease-in-out infinite alternate;
  }

  .decision-rail.m-light .decision-statement-stage::after {
    animation: claude-glow-drift-b calc(var(--mo-drift) * 1.2) ease-in-out infinite alternate;
  }
}

@keyframes claude-glow-drift-a {
  from { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(34px, 22px) scale(1.05); }
  to   { transform: translate(-22px, 10px) scale(.97); }
}

@keyframes claude-glow-drift-b {
  from { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-30px, -18px) scale(1.06); }
  to   { transform: translate(18px, -8px) scale(.96); }
}

/* ============ 3. Live GTM Signals radar: barely-perceptible ring drift ============ */

.pd-sonar path {
  transform-origin: 240px 240px;
}

@media (prefers-reduced-motion: no-preference) {
  .pd-sonar path:nth-of-type(odd) {
    animation: claude-rotate-cw calc(var(--mo-drift-slow) * 1.6) linear infinite;
  }

  .pd-sonar path:nth-of-type(even) {
    animation: claude-rotate-ccw calc(var(--mo-drift-slow) * 2.2) linear infinite;
  }

  .pd-sonar path:nth-of-type(3n) {
    animation-duration: calc(var(--mo-drift-slow) * 1.9);
  }
}

@keyframes claude-rotate-cw {
  to { transform: rotate(360deg); }
}

@keyframes claude-rotate-ccw {
  to { transform: rotate(-360deg); }
}

/* ============ 4. Integrations diagram ============ */

/* The central Pryor stage becomes the anchor: dark glass card, lime label,
   hairline light border, soft grounded shadow. Sits inside a light chapter. */
#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage {
  border-color: rgba(229, 240, 11, .38);
  background:
    radial-gradient(ellipse at 50% 118%, rgba(229, 240, 11, .09), transparent 52%),
    linear-gradient(150deg, rgba(255, 255, 255, .07), transparent 46%),
    rgba(17, 19, 26, .93);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 10px 26px rgba(28, 38, 64, .22),
    0 34px 80px rgba(28, 38, 64, .3);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage > .pb-stage-label {
  color: var(--lime-on-dark);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage .pb-component-label {
  color: rgba(238, 241, 246, .56);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage .pb-component-name {
  color: #eef1f6;
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage .pb-component-copy {
  color: rgba(238, 241, 246, .66);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage .pb-component + .pb-component {
  border-left-color: rgba(238, 241, 246, .12);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-pryor-stage .pb-component::before {
  background: linear-gradient(90deg, transparent, rgba(238, 241, 246, .14), transparent);
}

/* Connector geometry now derives from measured element positions (claude-polish.js
   writes the custom properties); these are the static fallbacks. */
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-runtime::before {
  bottom: var(--claude-spine-bottom, 142px);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-output-stage::before {
  top: var(--claude-drop-top, -18px);
  height: var(--claude-drop-h, 64px);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-output-stage::after {
  top: var(--claude-dot-top, 41px);
}

#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-route-in,
#night-chapter .pb-schema-v3-signal-spine.pb-schema-v3-refined .pb-route-out {
  top: var(--claude-route-top, 50%);
  width: var(--claude-route-w, clamp(20px, 3vw, 43px));
}

/* Logo chips: real marks on a soft gradient surface, one consistent size. */
.pb-rail-mark--logo {
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
}

.m-light .pb-rail-mark,
#night-chapter .pb-schema-v3-signal-spine.m-light .pb-rail-mark {
  border-color: var(--c-hairline);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 246, 250, .78));
  color: var(--c-text-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 10px rgba(28, 38, 64, .08);
  transition: transform var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease);
}

.m-light .pb-rail-mark:hover,
#night-chapter .pb-schema-v3-signal-spine.m-light .pb-rail-mark:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 7px 18px rgba(28, 38, 64, .12);
}

.pb-rail-logo {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.m-light .pb-rail-mark img {
  filter: none;
}

/* Diagram nodes: soft glow on hover, in each side's own hue. */
#night-chapter .pb-schema-v3-signal-spine .pb-output,
#night-chapter .pb-schema-v3-signal-spine .pb-website-stage {
  transition: box-shadow var(--mo-med) var(--mo-ease), border-color var(--mo-med) var(--mo-ease);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-output:hover {
  border-color: rgba(var(--c-duo-human-rgb), .38);
  box-shadow: inset 0 1px 0 var(--c-topline), 0 10px 30px rgba(var(--c-duo-human-rgb), .14);
}

#night-chapter .pb-schema-v3-signal-spine.m-light .pb-output + .pb-output:hover {
  border-color: rgba(var(--c-duo-agent-rgb), .46);
  box-shadow: inset 0 1px 0 var(--c-topline), 0 10px 30px rgba(var(--c-duo-agent-rgb), .2);
}

/* ============ 5. Navbar: hero-wide / post-hero-narrow, smooth width change ============ */

.nav-glass,
.site-header.is-compact .nav-glass {
  animation: none; /* retire the one-way settle keyframe */
  transition:
    width var(--mo-med) var(--mo-ease),
    min-height var(--mo-med) var(--mo-ease),
    padding var(--mo-med) var(--mo-ease),
    border-radius var(--mo-med) var(--mo-ease),
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.brand img {
  transition: width var(--mo-med) var(--mo-ease), opacity .35s ease;
}

/* Dark chapters: the nav CTA flips to filled lime so it can never sit dark-on-dark. */
.site-header[data-nav-mode="dark"] .nav-cta {
  background: var(--lime-on-dark);
  color: #14161c;
  box-shadow: 0 2px 10px rgba(2, 4, 10, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.site-header[data-nav-mode="dark"] .nav-cta span:last-child {
  color: #14161c;
}

@media (prefers-reduced-motion: reduce) {
  .nav-glass,
  .site-header.is-compact .nav-glass,
  .brand img {
    transition: none;
  }
}

/* ============ 6. Panel system: sections as rounded panels on one canvas ============ */

/*
  amigo.ai model: no background transitions anywhere. One static dark canvas
  (claude-merged.css §3); every chapter is a rounded panel floating on it.
  ONE radius, ONE inset, ONE gap for every panel — zero per-section values.
*/
:root {
  --panel-radius: 32px;
  --panel-inset: clamp(10px, 1.6vw, 24px);
  --panel-gap: clamp(14px, 2vw, 26px);
}

main {
  padding: var(--panel-gap) var(--panel-inset) 0;
  background: transparent;
}

/* Light panels + the elevated dark-glass panel. overflow: clip (NOT hidden)
   keeps the in-panel sticky choreography working while rounding the corners
   and containing every internal glow. */
.hero.m-light,
.decision-rail.m-light,
.pryor-difference.m-dark,
#night-chapter .pb-zone-playbooks,
#night-chapter .pb-zone-integration {
  border-radius: var(--panel-radius);
  overflow: clip;
  margin-bottom: var(--panel-gap);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px rgba(0, 0, 0, .3);
}

/* The dark island reads as elevated dark glass: hairline above the canvas. */
.pryor-difference.m-dark {
  border: 1px solid rgba(220, 232, 255, .08);
}

#night-chapter {
  background: transparent;
}

/* Closing act (get-started + CTA): one region sitting directly ON the canvas —
   no panel fill, no radius. Their transparent backgrounds + shared dot grid let
   the canvas carry both as a single closing chapter. (They stay inside the main
   inset; on dark-on-dark the edge is invisible and #night-chapter's overflow
   clip stays intact.) */

@media (max-width: 700px) {
  :root {
    --panel-radius: 22px;
  }
}

/* ============ 7. Micro-interactions ============ */

/* Bottom CTA: arrow + nudge, matching the navbar language. */
.report-close__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dr-button-arrow {
  display: inline-block;
  transition: transform var(--mo-fast) var(--mo-ease);
}

.report-close__submit:hover .dr-button-arrow {
  transform: translateX(2px);
}

/* Playbook cards: colored shadow in the card's own accent. */
.pb-final-glass .pb-card {
  box-shadow:
    0 30px 60px -26px rgba(var(--pb-c), .4),
    0 12px 28px -14px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .04) inset;
}

.pb-final-glass .pb-card:hover {
  box-shadow:
    0 38px 74px -26px rgba(var(--pb-c), .55),
    0 14px 32px -14px rgba(0, 0, 0, .55),
    0 1px 0 rgba(255, 255, 255, .07) inset;
}

/* Founder link: arrow nudge on hover. */
.founder-arrow {
  display: inline-block;
  transition: transform var(--mo-fast) var(--mo-ease), color .2s ease;
}

.founder-link:hover .founder-arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .dr-button-arrow,
  .founder-arrow {
    transition: none;
  }
}

/* ============ 8. Performance: viewport gate for remaining animations ============ */

/* claude-polish.js toggles this on animated sections while they are off-screen
   or the tab is hidden. Everything inside freezes; compositor + CPU go idle. */
.claude-anim-off,
.claude-anim-off *,
.claude-anim-off ::before,
.claude-anim-off ::after {
  animation-play-state: paused !important;
}