/* Selected direction C: six aligned steps above one continuous reflective stage. */
#process .process {
  --process-image-height: clamp(300px, calc(100dvh - var(--header-height) - 304px), 620px);
  gap: 12px;
}
#process .process-overview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}
#process .process-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 32px;
  margin: 0;
}
#process .process-heading h2 {
  max-width: none;
  font-size: clamp(37px, 3.5vw, 60px);
  line-height: 1.1;
}
#process .process-heading h2 em { font-weight: 400; }
#process .process-heading .section-kicker { margin-bottom: 14px; }
#process .process-heading > p { max-width: none; margin: 0; font-size: 12px; line-height: 1.75; }
#process .process-intro-line { display: block; white-space: nowrap; }
#process .process-card {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
}
#process .process-list article,
#process .process-list article:first-child,
#process .process-list article:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  align-content: start;
  gap: 10px;
  padding: 16px 12px;
  border: 0;
  border-right: 1px solid #ffffff26;
}
#process .process-list article:last-child { border-right: 0; }
#process .process-list article > span { grid-row: auto; padding: 0; font-size: 11px; letter-spacing: .1em; line-height: 1.3; }
#process .process-list h3 {
  grid-column: 1;
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.25;
  white-space: nowrap;
}
#process .process-list p {
  grid-column: 1;
  max-width: 28ch;
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
}
#process .process-list p .process-description-line {
  display: block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* Contour masks keep the original tiles and reflections, without the photograph’s
   green rectangular surrounds. Mask and photo share the same crop and scaling. */
#process .process-study::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 78%, #ffffff09, transparent 72%),
    repeating-linear-gradient(178deg, transparent 0 7px, #ffffff04 8px, transparent 9px 14px);
  opacity: .65;
  mask-image: linear-gradient(180deg, transparent 48%, #000 80%);
  mask-composite: add;
}
#process .process-study::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 60% 0 0;
  background: repeating-linear-gradient(178deg, transparent 0 9px, #0003 10px, transparent 11px 17px);
  opacity: .45;
  mask-image: linear-gradient(180deg, transparent, #000 30%);
  pointer-events: none;
}
#process .process-tile-lineup {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  pointer-events: none;
}
#process .process-photo-tile {
  display: block;
  width: min(86%, 44.8625cqh);
  height: 100%;
  background-image: url('./images/winter-five-directions-user.png');
  background-size: 539.35484% auto;
  background-repeat: no-repeat;
  background-position: var(--source-x) bottom;
  mask-image: var(--tile-contour);
  mask-size: 100% auto;
  mask-position: center bottom;
  mask-repeat: no-repeat;
}
#process .process-photo-tile:nth-child(1) { --source-x: 3.9648%; --tile-contour: url('./images/process-tile-mask-1.svg'); }
#process .process-photo-tile:nth-child(2) { --source-x: 26.9457%; --tile-contour: url('./images/process-tile-mask-2.svg'); }
#process .process-photo-tile:nth-child(3) { --source-x: 49.7063%; --tile-contour: url('./images/process-tile-mask-3.svg'); }
#process .process-photo-tile:nth-child(4) { --source-x: 72.6138%; --tile-contour: url('./images/process-tile-mask-4.svg'); }
#process .process-photo-tile:nth-child(5) { --source-x: 95.4479%; --tile-contour: url('./images/process-tile-mask-5.svg'); }

/* Copy reveals downward first; the complete photograph then fades in together. */
@property --process-reveal-edge {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 118%;
}
.fp-ready #process.fp-active .process-overview {
  mask-image: linear-gradient(180deg, #000 calc(var(--process-reveal-edge) - 18%), transparent var(--process-reveal-edge));
  mask-repeat: no-repeat;
  animation: process-copy-reveal 1.05s linear both;
  animation-delay: calc(var(--fp-duration, 650ms) + 100ms);
}
.fp-ready #process.fp-active .process-study {
  animation: process-image-reveal 1.05s ease-in-out both;
  animation-delay: calc(var(--fp-duration, 650ms) + 950ms);
}
@keyframes process-copy-reveal {
  from { --process-reveal-edge: 0%; }
  to { --process-reveal-edge: 118%; }
}
@keyframes process-image-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-ready #process.fp-active .process-overview,
  .fp-ready #process.fp-active .process-study { animation: none; mask-image: none; }
}

@media (min-width: 761px) and (max-width: 1199px) {
  #process .process { --process-image-height: 350px; }
  #process .process-heading { grid-template-columns: 1fr; gap: 20px; }
  #process .process-heading > p { justify-self: end; }
  #process .process-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #process .process-list article:nth-child(-n+3) { border-bottom: 1px solid #ffffff26; }
  #process .process-list article:nth-child(3) { border-right: 0; }
  #process .process-list h3 { font-size: 19px; }
}
@media (max-width: 760px) {
  #process .process-overview { gap: 24px; }
  #process .process-heading { grid-template-columns: 1fr; gap: 20px; }
  #process .process-heading h2 { font-size: clamp(34px, 7.5vw, 46px); }
  #process .process-heading > p { max-width: none; }
  #process .process-intro-line { white-space: normal; }
  #process .process-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #process .process-list article,
  #process .process-list article:first-child,
  #process .process-list article:last-child { padding: 18px 14px; border-bottom: 1px solid #ffffff26; }
  #process .process-list article:nth-child(even) { border-right: 0; }
  #process .process-list article:nth-last-child(-n+2) { border-bottom: 0; }
  #process .process-list h3 { font-size: clamp(14px, 3.15vw, 19px); }
  #process .process-list p { max-width: 32ch; font-size: 12px; }
  #process .process-study { aspect-ratio: 2.65; }
}
@media (max-width: 440px) {
  #process .process-card { grid-template-columns: 1fr; }
  #process .process-list article { border-right: 0; }
  #process .process-list article:nth-last-child(2) { border-bottom: 1px solid #ffffff26; }
  #process .process-list h3 { font-size: 21px; }
  #process .process-list p { font-size: 13px; }
}