/* ════════════════════════════════════════════════════════════════════
   FRAMEWORK — Brand First Experience Framework (5-step process)
   BEM block: .framework
   Structure: .section.framework > .container > content

   Layout: sticky arc on left, scrolling steps on right.
   Arc is an SVG circle positioned off-screen left — only the
   right edge is visible, curving outward (convex).
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .framework {
    background-color: var(--surface-page);
  }


  /* ── Header ───────────────────────────────────────────────────── */

  .framework__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-gap);
    margin-block-end: var(--container-gap);
  }

  .framework__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .framework__eyebrow-dash {
    inline-size: var(--space-s);
    block-size: var(--line-medium);
    background-color: var(--secondary);
    border-radius: var(--radius-full);
  }

  .framework__eyebrow-text {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .framework__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
  }

  .framework__desc {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    text-align: center;
    max-inline-size: var(--text-width-s);
  }

  .framework__divider {
    border: none;
    border-block-start: var(--line-thin) solid var(--neutral-light);
  }


  /* ── Body — two-column layout ─────────────────────────────────── */

  .framework__body {
    display: grid;
    grid-template-columns: calc(var(--space-3xl) * 1.5) 1fr;
    gap: var(--space-2xl);
    view-timeline: --fw-scroll block;
  }


  /* ── Arc column — sticky sidebar ──────────────────────────────── */

  .framework__arc-col {
    position: relative;
  }

  .framework__arc-sticky {
    position: sticky;
    top: var(--header-height);
    block-size: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
  }

  .framework__arc-svg {
    position: absolute;
    inset: 0;
    block-size: 100%;
    inline-size: 100%;
  }

  .framework__arc-circle {
    fill: none;
    stroke: var(--neutral-light);
    stroke-width: var(--line-thin);
  }

  .framework__arc-progress {
    fill: none;
    stroke: var(--secondary);
    stroke-width: var(--line-thick);
    stroke-linecap: round;
    /* CSS scroll-driven animation — draws the arc as user scrolls */
    animation: draw-arc linear both;
    animation-timeline: --fw-scroll;
    animation-range: entry 20% exit 80%;
  }

  @keyframes draw-arc {
    from { stroke-dashoffset: var(--arc-length); }
    to   { stroke-dashoffset: 0; }
  }


  /* ── Arc dot indicators ───────────────────────────────────────── */

  .framework__dot-group {
    position: absolute;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    transition: opacity var(--duration-normal) var(--ease-default);
  }

  .framework__dot {
    inline-size: var(--space-2xs);
    block-size: var(--space-2xs);
    border-radius: var(--radius-round);
    background-color: var(--neutral-semi-light);
    transition: background-color var(--duration-normal) var(--ease-default),
                transform var(--duration-normal) var(--ease-default);
  }

  .framework__dot-num {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-semibold);
    color: var(--neutral-semi-light);
    transition: color var(--duration-normal) var(--ease-default);
  }

  /* Active dot state — set by JS */
  .framework__dot-group.is-active .framework__dot {
    background-color: var(--secondary);
    transform: scale(1.3);
  }

  .framework__dot-group.is-active .framework__dot-num {
    color: var(--text-heading);
  }


  /* ── Steps column ─────────────────────────────────────────────── */

  .framework__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
  }


  /* ── Individual step ──────────────────────────────────────────── */

  .framework__step {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    /* CSS scroll-driven fade — step reveals as it enters viewport */
    animation: step-reveal linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }

  @keyframes step-reveal {
    from { opacity: var(--opacity-muted); }
    to   { opacity: 1; }
  }

  .framework__step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    background-color: var(--secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-on-primary);
    inline-size: fit-content;
  }

  .framework__step-title {
    font-family: var(--font-heading);
    font-size: var(--heading-2xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
  }

  .framework__step-desc {
    font-size: var(--text-m);
    line-height: var(--leading-loose);
    color: var(--text-muted);
    max-inline-size: var(--text-width-m);
  }


  /* ── Step bullets ─────────────────────────────────────────────── */

  .framework__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .framework__bullet {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .framework__bullet-dot {
    inline-size: var(--space-2xs);
    block-size: var(--space-2xs);
    border-radius: var(--radius-round);
    background-color: var(--secondary);
    flex-shrink: 0;
  }

  .framework__bullet-text {
    font-size: var(--text-s);
    color: var(--text-body);
  }


  /* ── Measure step — special treatment ─────────────────────────── */

  .framework__step--measure {
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: var(--line-medium) solid var(--secondary);
    border-radius: var(--radius-m);
    padding: var(--space-l);
    opacity: 1;
  }

  .framework__step--measure .framework__step-badge {
    background-color: var(--secondary);
  }

  .framework__step--measure .framework__step-title {
    color: var(--white);
  }

  .framework__step--measure .framework__step-desc {
    color: var(--text-on-dark-secondary);
  }


  /* ── Stats grid inside Measure ────────────────────────────────── */

  .framework__stats {
    display: grid;
    grid-template-columns: var(--grid-3);
    gap: var(--grid-gap);
  }

  .framework__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .framework__stat-number {
    font-family: var(--font-heading);
    font-size: var(--heading-l);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--white);
  }

  .framework__stat-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    color: var(--text-on-dark-subtle);
  }


  /* ── Tablet ───────────────────────────────────────────────────── */

  @media (max-width: 63.99em) {
    .framework__body {
      grid-template-columns: var(--space-3xl) 1fr;
      gap: var(--space-m);
    }

    .framework__steps {
      gap: var(--space-2xl);
    }

    .framework__step-title {
      font-size: var(--heading-xl);
    }

    .framework__dot-num {
      font-size: var(--text-m);
    }

    .framework__stat-number {
      font-size: var(--heading-m);
    }
  }


  /* ── Mobile ───────────────────────────────────────────────────── */

  @media (max-width: 47.99em) {
    .framework__heading {
      font-size: var(--heading-l);
    }

    .framework__body {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Hide arc column on mobile — badges serve as indicators */
    .framework__arc-col {
      display: none;
    }

    .framework__steps {
      gap: var(--space-2xl);
    }

    .framework__step-title {
      font-size: var(--heading-l);
    }

    .framework__step--measure {
      padding: var(--space-m);
    }

    .framework__stats {
      gap: var(--space-s);
    }

    .framework__stat-number {
      font-size: var(--heading-s);
    }
  }

}