/* =========================================================
   Section 02: The Toolbox — Motion (prototype)
   "The pieces fit together." Every hidden state below is keyed to an
   attribute that js/modules/toolbox-motion.js sets only when motion is
   allowed, so the section renders complete without the script.
   Movement uses the individual `translate` / `scale` / `rotate` properties
   so it composes with the vignettes' own `transform` positioning.
   ========================================================= */

:root {
  --tb-ease: var(--transition-smooth-reveal, cubic-bezier(0.16, 1, 0.3, 1));
  --tb-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes tb-up       { from { opacity: 0; translate: 0 16px; }    to { opacity: 1; translate: 0 0; } }
@keyframes tb-fade     { from { opacity: 0; translate: 0 6px; }     to { opacity: 1; translate: 0 0; } }
@keyframes tb-appear   { from { opacity: 0; }                       to { opacity: 1; } }
@keyframes tb-in-right { from { opacity: 0; translate: 26px 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes tb-in-left  { from { opacity: 0; translate: -22px 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes tb-pop      { from { opacity: 0; scale: 0.82; }          to { opacity: 1; scale: 1; } }
@keyframes tb-nudge    { from { opacity: 0; translate: -6px 0; }    to { opacity: 1; translate: 0 0; } }
@keyframes tb-draw-x   { from { scale: 0 1; }                       to { scale: 1 1; } }

/* Lifecycle: one lead routed HubSpot -> Salesforce -> Klaviyo -> Zapier, once */
@keyframes tb-route-tile {
  0%, 100% { translate: 0 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
  35%      { translate: 0 -3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-orange-glow) 70%, transparent), 0 6px 14px rgba(0, 0, 0, 0.08); }
}
@keyframes tb-route-arrow {
  0%, 100% { translate: 0 0; color: rgba(255, 255, 255, 0.35); }
  40%      { translate: 4px 0; color: var(--color-orange-glow); }
}

/* Group dividers draw across in slate mist, then settle to the resting hairline */
@keyframes tb-rule {
  0%   { scale: 0 1; background-color: color-mix(in srgb, var(--color-accent-on-dark) 60%, transparent); }
  65%  { scale: 1 1; background-color: color-mix(in srgb, var(--color-accent-on-dark) 40%, transparent); }
  100% { scale: 1 1; background-color: var(--color-tech-border); }
}

@keyframes tb-sheet-rise { from { transform: translateY(100%); } to { transform: none; } }


/* ---------- 1. Cards: visible by default, enter per card on arrival ---------- */
.toolbox-section.proof-layer .toolbox-group-grid .toolbox-card {
  opacity: 1;
  transform: none;
  transition: transform 0.35s var(--tb-ease),
              border-color 0.3s ease,
              opacity 0.6s var(--tb-ease),
              translate 0.8s var(--tb-ease);
}

.toolbox-section.proof-layer .toolbox-group-grid .toolbox-card[data-tb-card="pending"] {
  opacity: 0;
  translate: 0 28px;
}

.toolbox-section.proof-layer .toolbox-group-grid .toolbox-card[data-tb-card="in"] {
  transition-delay: 0s, 0s, calc(var(--tb-i, 0) * 90ms), calc(var(--tb-i, 0) * 90ms);
}


/* ---------- 2. Vignettes assemble ---------- */

/* Hidden parts while pending */
.proof[data-tb="pending"] :is(
  .narrative-console-window, .narrative-verbatim-card, .narrative-contrast-item,
  .narrative-contrast-arrow, .narrative-floating-battlecard,
  .abm-accounts-card, .abm-channel-card, .abm-channel-row, .abm-targeting-card,
  .target-pill, .pill-check-icon,
  .logo-grid-3x2 .tile,
  .live-metric-card, .floating-pill,
  .crm-tile, .crm-pipeline-arrow,
  .paid-gads-card, .paid-keyword-box, .paid-li-card,
  .google-search-bar, .serp-query-chips, .serp-rank-card,
  .local-gbp-card, .local-stars svg, .local-telemetry-item, .local-rank-card
) {
  opacity: 0;
}

.proof[data-tb] .abm-bar-fill { transform-origin: left center; }
.proof[data-tb="pending"] .abm-bar-fill { scale: 0 1; }

/* Narrative: the discarded line gets struck through, then the owned POV lands */
.proof[data-tb] .contrast-val.struck {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  position: relative;
  text-decoration: none;
}
.proof[data-tb] .contrast-val.struck::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1.5px;
  background: currentColor;
  transform-origin: left center;
}
.proof[data-tb="pending"] .contrast-val.struck::after { scale: 0 1; }

.proof[data-tb="assembling"] .narrative-console-window               { animation: tb-up 0.6s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .narrative-verbatim-card                { animation: tb-fade 0.5s var(--tb-ease) 140ms both; }
.proof[data-tb="assembling"] .narrative-contrast-item.is-discarded   { animation: tb-fade 0.5s var(--tb-ease) 260ms both; }
.proof[data-tb="assembling"] .contrast-val.struck::after             { animation: tb-draw-x 0.42s var(--tb-ease) 460ms both; }
.proof[data-tb="assembling"] .narrative-contrast-arrow               { animation: tb-nudge 0.45s var(--tb-ease) 620ms both; }
.proof[data-tb="assembling"] .narrative-contrast-item.is-winner      { animation: tb-pop 0.5s var(--tb-ease) 700ms both; }
.proof[data-tb="assembling"] .narrative-floating-battlecard          { animation: tb-in-right 0.65s var(--tb-ease) 820ms both; }
.proof[data-tb="assembling"] .narrative-floating-battlecard .floating-pill { animation: tb-pop 0.45s var(--tb-ease) 1080ms both; }

/* ABM: accounts land, the four bars fill in order, filters tick on */
.proof[data-tb="assembling"] .abm-accounts-card                                   { animation: tb-up 0.6s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .abm-progress-item:nth-child(1) .abm-bar-fill         { animation: tb-draw-x 0.6s var(--tb-ease) 260ms both; }
.proof[data-tb="assembling"] .abm-progress-item:nth-child(2) .abm-bar-fill         { animation: tb-draw-x 0.6s var(--tb-ease) 330ms both; }
.proof[data-tb="assembling"] .abm-progress-item:nth-child(3) .abm-bar-fill         { animation: tb-draw-x 0.6s var(--tb-ease) 400ms both; }
.proof[data-tb="assembling"] .abm-progress-item:nth-child(4) .abm-bar-fill         { animation: tb-draw-x 0.6s var(--tb-ease) 470ms both; }
.proof[data-tb="assembling"] .abm-channel-card                                    { animation: tb-in-right 0.6s var(--tb-ease) 180ms both; }
.proof[data-tb="assembling"] .abm-channel-row:nth-child(1)                        { animation: tb-fade 0.45s var(--tb-ease) 320ms both; }
.proof[data-tb="assembling"] .abm-channel-row:nth-child(2)                        { animation: tb-fade 0.45s var(--tb-ease) 375ms both; }
.proof[data-tb="assembling"] .abm-channel-row:nth-child(3)                        { animation: tb-fade 0.45s var(--tb-ease) 430ms both; }
.proof[data-tb="assembling"] .abm-channel-row:nth-child(4)                        { animation: tb-fade 0.45s var(--tb-ease) 485ms both; }
.proof[data-tb="assembling"] .abm-channel-row:nth-child(5)                        { animation: tb-fade 0.45s var(--tb-ease) 540ms both; }
.proof[data-tb="assembling"] .abm-targeting-card                                  { animation: tb-up 0.6s var(--tb-ease) 480ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(1)                            { animation: tb-fade 0.4s var(--tb-ease) 600ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(2)                            { animation: tb-fade 0.4s var(--tb-ease) 650ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(3)                            { animation: tb-fade 0.4s var(--tb-ease) 700ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(4)                            { animation: tb-fade 0.4s var(--tb-ease) 750ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(1) .pill-check-icon           { animation: tb-pop 0.35s var(--tb-ease) 780ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(2) .pill-check-icon           { animation: tb-pop 0.35s var(--tb-ease) 860ms both; }
.proof[data-tb="assembling"] .target-pill:nth-child(3) .pill-check-icon           { animation: tb-pop 0.35s var(--tb-ease) 940ms both; }

/* Analytics: tiles come on in turn, like tags firing */
.proof[data-tb="assembling"] .logo-grid-3x2 .tile:nth-child(1) { animation: tb-pop 0.5s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .logo-grid-3x2 .tile:nth-child(2) { animation: tb-pop 0.5s var(--tb-ease) 70ms both; }
.proof[data-tb="assembling"] .logo-grid-3x2 .tile:nth-child(3) { animation: tb-pop 0.5s var(--tb-ease) 140ms both; }
.proof[data-tb="assembling"] .logo-grid-3x2 .tile:nth-child(4) { animation: tb-pop 0.5s var(--tb-ease) 210ms both; }
.proof[data-tb="assembling"] .logo-grid-3x2 .tile:nth-child(5) { animation: tb-pop 0.5s var(--tb-ease) 280ms both; }
.proof[data-tb="assembling"] .logo-grid-3x2 .tile:nth-child(6) { animation: tb-pop 0.5s var(--tb-ease) 350ms both; }

/* Web: the page result lands, then the two outcomes */
.proof[data-tb="assembling"] .live-metric-card                             { animation: tb-up 0.6s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .conversion-pills-row .floating-pill:nth-child(1) { animation: tb-pop 0.45s var(--tb-ease) 300ms both; }
.proof[data-tb="assembling"] .conversion-pills-row .floating-pill:nth-child(2) { animation: tb-pop 0.45s var(--tb-ease) 420ms both; }

/* Lifecycle: tools arrive, then one lead is routed through them */
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(1) { animation: tb-pop 0.5s var(--tb-ease) 0ms both, tb-route-tile 0.6s ease 640ms both; }
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(2) { animation: tb-appear 0.4s ease 40ms both, tb-route-arrow 0.5s ease 730ms both; }
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(3) { animation: tb-pop 0.5s var(--tb-ease) 80ms both, tb-route-tile 0.6s ease 820ms both; }
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(4) { animation: tb-appear 0.4s ease 120ms both, tb-route-arrow 0.5s ease 910ms both; }
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(5) { animation: tb-pop 0.5s var(--tb-ease) 160ms both, tb-route-tile 0.6s ease 1000ms both; }
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(6) { animation: tb-appear 0.4s ease 200ms both, tb-route-arrow 0.5s ease 1090ms both; }
.proof[data-tb="assembling"] .crm-pipeline-flow > :nth-child(7) { animation: tb-pop 0.5s var(--tb-ease) 240ms both, tb-route-tile 0.6s ease 1180ms both; }

/* Paid: search campaign lands, the social audience slides in beside it */
.proof[data-tb="assembling"] .paid-gads-card    { animation: tb-in-left 0.6s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .paid-keyword-box  { animation: tb-fade 0.45s var(--tb-ease) 280ms both; }
.proof[data-tb="assembling"] .paid-li-card      { animation: tb-in-right 0.65s var(--tb-ease) 400ms both; }

/* Content: the buyer's question types itself, then the answer rises */
.proof[data-tb="assembling"] .google-search-bar { animation: tb-up 0.5s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .serp-query-chips  { animation: tb-fade 0.45s var(--tb-ease) 160ms both; }
.proof[data-tb="assembling"]:not(.is-typed) .serp-rank-card { opacity: 0; }
.proof[data-tb="assembling"].is-typed .serp-rank-card       { animation: tb-up 0.55s var(--tb-ease) both; }

.proof[data-vignette="content"] .serp-rank-card {
  transition: opacity 0.35s var(--tb-ease), translate 0.5s var(--tb-ease);
}
.proof.is-retyping .serp-rank-card {
  opacity: 0;
  translate: 0 8px;
  transition-duration: 0.12s;
}
.google-search-query.is-typing::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
}

/* Local: the profile lands, stars fill in order, the call comes last */
.proof[data-tb="assembling"] .local-gbp-card                         { animation: tb-in-left 0.6s var(--tb-ease) 0ms both; }
.proof[data-tb="assembling"] .local-stars svg:nth-child(1)           { animation: tb-pop 0.35s var(--tb-ease) 260ms both; }
.proof[data-tb="assembling"] .local-stars svg:nth-child(2)           { animation: tb-pop 0.35s var(--tb-ease) 320ms both; }
.proof[data-tb="assembling"] .local-stars svg:nth-child(3)           { animation: tb-pop 0.35s var(--tb-ease) 380ms both; }
.proof[data-tb="assembling"] .local-stars svg:nth-child(4)           { animation: tb-pop 0.35s var(--tb-ease) 440ms both; }
.proof[data-tb="assembling"] .local-stars svg:nth-child(5)           { animation: tb-pop 0.35s var(--tb-ease) 500ms both; }
.proof[data-tb="assembling"] .local-telemetry-item:nth-child(1)      { animation: tb-fade 0.4s var(--tb-ease) 420ms both; }
.proof[data-tb="assembling"] .local-telemetry-item:nth-child(2)      { animation: tb-fade 0.4s var(--tb-ease) 480ms both; }
.proof[data-tb="assembling"] .local-telemetry-item:nth-child(3)      { animation: tb-fade 0.4s var(--tb-ease) 540ms both; }
.proof[data-tb="assembling"] .local-rank-card                        { animation: tb-in-right 0.65s var(--tb-ease) 560ms both; }
.proof[data-tb="assembling"] .local-rank-card .floating-pill         { animation: tb-pop 0.45s var(--tb-ease) 820ms both; }


/* ---------- 3. Group headers rise, dividers draw across ---------- */
.toolbox-group[data-tb-group] :is(.toolbox-group-title, .toolbox-group-subhead) {
  transition: opacity 0.6s var(--tb-ease), translate 0.8s var(--tb-ease);
}
.toolbox-group[data-tb-group="pending"] :is(.toolbox-group-title, .toolbox-group-subhead) {
  opacity: 0;
  translate: 0 14px;
}
.toolbox-group[data-tb-group="in"] .toolbox-group-subhead { transition-delay: 110ms; }

.toolbox-group[data-tb-group]:not(:first-child) {
  position: relative;
  border-top-color: transparent;
}
.toolbox-group[data-tb-group]:not(:first-child)::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-tech-border);
  transform-origin: left center;
  scale: 0 1;
}
.toolbox-group[data-tb-group="in"]:not(:first-child)::before {
  scale: 1 1;
  animation: tb-rule 1.2s var(--tb-ease) both;
}


/* ---------- 4. Hover: the layers separate; the card stays flat ---------- */
.toolbox-section.proof-layer .toolbox-group-grid .toolbox-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}
.toolbox-section.proof-layer .toolbox-group-grid .toolbox-card:not(.is-featured-engine):hover {
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .toolbox-group-grid :is(.paid-gads-card, .paid-li-card, .local-gbp-card, .local-rank-card,
    .conversion-pills-row, .live-metric-card, .crm-pipeline-arrow) {
    transition: translate 0.5s var(--tb-ease);
  }
  .toolbox-group-grid .logo-grid-3x2 .tile {
    transition: transform 0.2s var(--tb-ease), border-color 0.2s ease, background-color 0.2s ease, translate 0.45s var(--tb-ease);
  }
  .toolbox-group-grid .toolbox-card:hover :is(.paid-li-card, .local-rank-card) { translate: 6px -8px; }
  .toolbox-group-grid .toolbox-card:hover :is(.paid-gads-card, .local-gbp-card) { translate: -3px 2px; }
  .toolbox-group-grid .toolbox-card:hover :is(.serp-rank-card, .conversion-pills-row) { translate: 0 -6px; }
  .toolbox-group-grid .toolbox-card:hover .live-metric-card { translate: 0 -2px; }
  .toolbox-group-grid .toolbox-card:hover .crm-pipeline-arrow { translate: 3px 0; }
  .toolbox-group-grid .toolbox-card:hover .logo-grid-3x2 .tile { translate: 0 -3px; }
  .toolbox-group-grid .toolbox-card:hover .logo-grid-3x2 .tile:nth-child(2) { transition-delay: 0s, 0s, 0s, 30ms; }
  .toolbox-group-grid .toolbox-card:hover .logo-grid-3x2 .tile:nth-child(3) { transition-delay: 0s, 0s, 0s, 60ms; }
  .toolbox-group-grid .toolbox-card:hover .logo-grid-3x2 .tile:nth-child(4) { transition-delay: 0s, 0s, 0s, 30ms; }
  .toolbox-group-grid .toolbox-card:hover .logo-grid-3x2 .tile:nth-child(5) { transition-delay: 0s, 0s, 0s, 60ms; }
  .toolbox-group-grid .toolbox-card:hover .logo-grid-3x2 .tile:nth-child(6) { transition-delay: 0s, 0s, 0s, 90ms; }
}


/* ---------- Mobile rows (the list/grid split lives in main.css) ---------- */

/* 5. Rows arrive as a list */
.toolbox-mobile-list[data-tb-rows] .toolbox-module-row {
  transition: background 0.2s var(--tb-ease),
              border-color 0.2s var(--tb-ease),
              transform 0.15s var(--transition-spring-weighty),
              box-shadow 0.2s ease,
              opacity 0.5s var(--tb-ease),
              translate 0.65s var(--tb-ease);
}
.toolbox-mobile-list[data-tb-rows="pending"] .toolbox-module-row {
  opacity: 0;
  translate: 0 12px;
}
.toolbox-mobile-list[data-tb-rows="in"] .toolbox-module-row {
  transition-delay: 0s, 0s, 0s, 0s, calc(var(--tb-r, 0) * 45ms), calc(var(--tb-r, 0) * 45ms);
}

/* 6. Tap: the disc fills and the arrow turns to point up at the rising sheet */
.toolbox-module-row .module-row-chevron {
  transition: transform 0.2s var(--tb-ease), rotate 0.34s var(--transition-spring-weighty);
}
.toolbox-module-row[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--color-orange-glow) 55%, transparent);
}
.toolbox-module-row[aria-expanded="true"] .module-row-action-disc {
  background: var(--color-orange-glow);
  border-color: var(--color-orange-glow);
  color: var(--color-ink-primary);
}
.toolbox-module-row[aria-expanded="true"] .module-row-chevron {
  rotate: -90deg;
}

/* 7. The row becomes the sheet header (View Transitions) */
.toolbox-drawer-portal.is-vt .toolbox-drawer,
.toolbox-drawer-portal.is-vt .toolbox-drawer-backdrop {
  transition: none;
}

::view-transition-group(tb-title),
::view-transition-old(tb-title),
::view-transition-new(tb-title) {
  animation-duration: 0.46s;
  animation-timing-function: var(--tb-sheet-ease);
}
::view-transition-new(tb-sheet) {
  animation: tb-sheet-rise 0.46s var(--tb-sheet-ease) both;
}
/* The sheet exists only in the new state, so it would stack above the title
   that flies into it; pin the order explicitly. */
::view-transition-group(tb-sheet) { z-index: 1; }
::view-transition-group(tb-title) { z-index: 2; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* 8. Close is quicker than open; copy fades up once the sheet settles */
.toolbox-drawer-portal:not(.is-active) .toolbox-drawer {
  transition-duration: 0.26s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.toolbox-drawer-portal:not(.is-active) .toolbox-drawer-backdrop {
  transition-duration: 0.22s;
}

.tb-motion .toolbox-drawer :is(.toolbox-drawer-desc, .toolbox-drawer-quote-wrap) {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.45s var(--tb-ease), translate 0.6s var(--tb-ease);
}
.tb-motion .toolbox-drawer.is-settled .toolbox-drawer-desc {
  opacity: 1;
  translate: 0 0;
  transition-delay: 120ms;
}
.tb-motion .toolbox-drawer.is-settled .toolbox-drawer-quote-wrap {
  opacity: 1;
  translate: 0 0;
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .toolbox-module-row .module-row-chevron { transition: none; }
}