/* =============================================================
   PROCESS.CSS
   40/60 sticky layout: left heading block pins while right
   timeline scrolls. The vertical rail fills with a gradient
   as the user scrolls (driven by process.js).
   Depends on: global.css
   ============================================================= */

/* ----------------------------------------------------------
   1. SECTION

   this is main process css 
   ---------------------------------------------------------- */
.process-section {
  background-color: var(--color-neutral-canvas);
  background-image:
    linear-gradient(var(--color-neutral-grid-gray) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-neutral-grid-gray) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: var(--space-48) var(--space-16);
}

/* ----------------------------------------------------------
   2. LAYOUT
   ---------------------------------------------------------- */
.process-grid {
  display:        flex;
  flex-direction: column;
  gap:            40px;
}

 /*.process-left { /* stacks above timeline on mobile  }*/

/* ----------------------------------------------------------
   3. LEFT COLUMN — HEADING BLOCK
   ---------------------------------------------------------- */
.process-eyebrow {
  color:          var(--color-primary-orange);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin:         0 0 12px;
}

.process-heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size:   28px;
  line-height: 1.2;
  color:       var(--color-primary-black);
  margin:      0 0 16px;
 /* max-width:   420px;*/
  max-width:   100%;
}

.process-subtext {
  font-size:   15px;
  line-height: 1.65;
  color:       var(--color-neutral-text-gray);
 /* max-width:   360px;*/
   max-width:   100%;
  margin:      0;
}

/* ----------------------------------------------------------
   4. RIGHT COLUMN — TIMELINE TRACK
   ---------------------------------------------------------- */
.process-track { position: relative; }

/* Static gray rail */
.process-rail {
  position:         absolute;
  top:              14px;
  bottom:           14px;
  left:             14px;
  width:            2px;
  background-color: color-mix(in srgb, var(--color-black-soft) 12%, transparent);
  z-index:          0;
}

/* Scroll-driven gradient fill (height set by process.js) */
.process-rail-fill {
  position:         absolute;
  top:              14px;
  left:             14px;
  width:            2px;
  height:           0;
  background-image: linear-gradient(var(--color-primary-orange), var(--color-primary-indigo));
  z-index:          0;
  transition:       height 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .process-rail-fill { transition: none; }
}

/* Step list */
.process-steps {
  display:        flex;
  flex-direction: column;
  gap:            40px;
  position:       relative;
  z-index:        1;
}

/* ----------------------------------------------------------
   5. INDIVIDUAL STEP
   ---------------------------------------------------------- */
.process-step {
  display:     flex;
  gap:         18px;
  align-items: flex-start;
}

/* Numbered circle node */
.process-node-col {
  width:           28px;
  flex-shrink:     0;
  display:         flex;
  justify-content: center;
}

.process-node {
  width:            28px;
  height:           28px;
  border-radius:    50%;
  background-color: var(--color-primary-orange);
  color:            var(--color-white);
  font-family:      var(--font-sans);
  font-weight:      700;
  font-size:        13px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

/* ----------------------------------------------------------
   6. STEP CARD
   ---------------------------------------------------------- */
.process-card {
  flex:             1;
  min-width:        0;
  border:           1px solid var(--color-primary-black);
  background-color: var(--color-neutral-canvas);
  padding:          22px;
}

.process-card-heading {
  font-family: var(--font-serif);
  font-style:var(--font-style-heading,italic);
  font-weight: 600;
  font-size:   19px;
  color:       var(--color-primary-black);
  margin:      0 0 8px;
}

.process-card-desc {
  font-size:   14px;
  line-height: 1.6;
  color:       var(--color-neutral-text-gray);
  margin:      0;
}

/* Crux mini-list (2-column "+ item" grid) */
.process-card-crux {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px 14px;
  margin:                16px 0 0;
  padding:               0;
  list-style:            none;
}
.process-card-crux li {
  display:     flex;
  align-items: flex-start;
  gap:         6px;
  font-size:   13px;
  line-height: 1.4;
  color:       var(--color-primary-black);
}
.process-crux-plus {
  color:       var(--color-primary-orange);
  font-weight: 700;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   7. DESKTOP OVERRIDES — sticky 40/60 split
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
 /* .process-section { padding: 96px var(--grid-desktop-margins); } */
 .process-section { 
    padding-right: 96px ; 
    padding-left: 40px ;
  
  }

  .process-grid {
    flex-direction: row;
    align-items:    flex-start;
    gap:            var(--space-48);
    max-width:      var(--grid-desktop-max);
    margin:         0 auto;
  }

  .process-left {
    flex:       0 0 40%;
    position:   sticky;
    top:        calc(var(--header-height) + 48px);
    align-self: flex-start;
  }

  .process-heading      { font-size: 40px; }
  .process-right        { flex: 0 0 60%; min-width: 0; }
  .process-card         { padding: 28px 32px; }
  .process-card-heading { font-size: 21px; }
}




/* ----------------------------------------------------------
   8. ANIMATION (only active once Process-Section.js adds
      .process-anim; reduced-motion users never get it)
   ---------------------------------------------------------- */
.process-anim .process-card {
  opacity:    0;
  transform:  translateY(36px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.process-anim .process-step.is-in .process-card {
  opacity:   1;
  transform: none;
}

/* Node: outlined until the rail reaches it, then fills + pops */
.process-anim .process-node {
  position:   relative;
  background: var(--color-neutral-canvas);
  color:      var(--color-primary-orange);
  box-shadow: inset 0 0 0 2px var(--color-primary-orange);
  transform:  scale(.7);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
              background-color .3s ease,
              color .3s ease;
}
.process-anim .process-step.is-in .process-node { transform: scale(1); }
.process-anim .process-step.is-reached .process-node {
  background: var(--color-primary-orange);
  color:      var(--color-white);
}
.process-anim .process-step.is-reached .process-node { transform: scale(1.12); }

/* Pulsing ring on the step currently being "drawn" */
.process-anim .process-step.is-current .process-node::after {
  content:       "";
  position:      absolute;
  inset:         -2px;
  border-radius: 50%;
  border:        2px solid var(--color-primary-orange);
  animation:     process-pulse 1.8s ease-out infinite;
}
@keyframes process-pulse {
  from { transform: scale(1);   opacity: .7; }
  to   { transform: scale(1.9); opacity: 0;  }
}

/* Reached cards get an orange offset shadow; hover lifts them */
.process-anim .process-step.is-reached .process-card { box-shadow: 6px 6px 0 var(--color-primary-orange); }
.process-anim .process-step.is-in .process-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--color-primary-orange); }

/* "+ item" bullets stagger in after their card */
.process-anim .process-card-crux li {
  opacity:    0;
  transform:  translateX(-12px);
  transition: opacity .5s ease, transform .5s ease;
}
.process-anim .process-step.is-in .process-card-crux li { opacity: 1; transform: none; }
.process-anim .process-step.is-in .process-card-crux li:nth-child(1) { transition-delay: .35s; }
.process-anim .process-step.is-in .process-card-crux li:nth-child(2) { transition-delay: .45s; }
.process-anim .process-step.is-in .process-card-crux li:nth-child(3) { transition-delay: .55s; }
.process-anim .process-step.is-in .process-card-crux li:nth-child(4) { transition-delay: .65s; }
.process-anim .process-step.is-in .process-card-crux li:nth-child(n+5) { transition-delay: .75s; }

@media (prefers-reduced-motion: reduce) {
  .process-anim .process-card,
  .process-anim .process-node,
  .process-anim .process-card-crux li { opacity: 1; transform: none; transition: none; }
  .process-anim .process-step.is-current .process-node::after { animation: none; display: none; }
}