/*
 * Four-step evidence rail.
 *
 * The live journey still owns the tile transforms, crop and stage hand-offs.
 * This layer gives the overview state one shared piece of visual grammar:
 * a numbered evidence band whose colour identifies each part of the system.
 */

.system-journey{
  --evidence-radius:16px;
  /* Desktop journey cards are full-stage elements scaled down to the rail.
     These are source-space values, landing at a 68-78px visible band. */
  --evidence-band-h:clamp(250px,21vw,292px);
  --evidence-band-pad:clamp(52px,5vw,72px);
  --evidence-keyline:rgb(25 23 28 / .12);
  --evidence-shadow:drop-shadow(0 22px 28px rgb(25 23 28 / .13));
}

.system-journey .journey-gallery{
  perspective:2200px;
  perspective-origin:50% 52%;
}

.system-journey .journey-tile{
  border-radius:var(--evidence-radius);
  box-shadow:none;
  filter:
    blur(var(--enter-blur,0))
    saturate(calc(.88 + var(--card-focus,.7)*.12))
    var(--evidence-shadow);
  transform-origin:center 58%;
}

/* The card face is only the overview label. Expanded scenes retain their own
   composition and the face clears promptly as a tile takes the stage. */
.system-journey .journey-step-face{
  padding:0;
  background:none;
}

/* Draw the keyline around the visible crop rather than the full-screen tile.
   It clears as soon as the crop starts opening, before top/bottom crop values
   diverge on the portrait journey. */
.system-journey .journey-step-face::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:var(--face-inset-y,0px) var(--face-inset,0px);
  border:1px solid var(--evidence-keyline);
  border-radius:var(--evidence-radius);
  opacity:clamp(0,calc(1 - var(--stage-fill,0)*4),1);
  pointer-events:none;
}

.system-journey .journey-step-copy{
  --evidence-band-bg:var(--mist);
  --evidence-band-fg:var(--ink);
  --evidence-band-rule:rgb(25 23 28 / .22);
  position:absolute;
  z-index:4;
  left:var(--face-inset,0px);
  right:var(--face-inset,0px);
  bottom:var(--face-inset-y,0px);
  min-height:var(--evidence-band-h);
  display:grid;
  grid-template-columns:minmax(154px,auto) minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  gap:2px var(--evidence-band-pad);
  padding:42px var(--evidence-band-pad);
  border-radius:0 0 var(--evidence-radius) var(--evidence-radius);
  background:var(--evidence-band-bg);
  color:var(--evidence-band-fg);
  opacity:clamp(0,calc(1 - var(--stage-fill,0)*4),1);
}

.system-journey .journey-step--film .journey-step-copy{
  --evidence-band-bg:var(--mist);
  --evidence-band-fg:var(--ink);
  --evidence-band-rule:rgb(25 23 28 / .22);
}

.system-journey .journey-step--website .journey-step-copy{
  --evidence-band-bg:var(--signal-blue);
  --evidence-band-fg:var(--ink);
  --evidence-band-rule:rgb(25 23 28 / .28);
}

.system-journey .journey-step--google .journey-step-copy{
  --evidence-band-bg:var(--teal);
  --evidence-band-fg:var(--white);
  --evidence-band-rule:rgb(255 255 255 / .34);
}

.system-journey .journey-step--bookings .journey-step-copy{
  --evidence-band-bg:var(--signal-yellow);
  --evidence-band-fg:var(--ink);
  --evidence-band-rule:rgb(25 23 28 / .26);
}

.system-journey .journey-step-number{
  grid-column:1;
  grid-row:1 / 3;
  min-width:154px;
  align-self:stretch;
  display:flex;
  align-items:center;
  padding-right:var(--evidence-band-pad);
  border-right:1px solid var(--evidence-band-rule);
  color:inherit;
  font-size:clamp(100px,9.4vw,124px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}

.system-journey .journey-step-copy>small{
  display:none;
}

.system-journey .journey-step-copy strong{
  grid-column:2;
  grid-row:1;
  min-width:0;
  color:inherit;
  font-size:clamp(64px,6.2vw,82px);
  font-weight:750;
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.system-journey .journey-step-subline{
  grid-column:2;
  grid-row:2;
  display:block;
  color:color-mix(in srgb,var(--evidence-band-fg) 76%,transparent);
  font-size:clamp(36px,3.3vw,44px);
  font-weight:650;
  line-height:1.2;
  letter-spacing:0;
}

/* Card 4 starts as evidence, not as a celebration. The Guru enters only once
   booking-keep takes over, which keeps all four overview cards equally weighted. */
.system-journey:not([data-keep-active]) .journey-wave-guru{
  visibility:hidden;
}

@media(max-width:900px){
  .system-journey{
    --evidence-band-h:88px;
    --evidence-band-pad:14px;
    --evidence-shadow:drop-shadow(0 16px 22px rgb(25 23 28 / .12));
  }

  .system-journey .journey-tile{
    border-radius:var(--evidence-radius);
    transform-origin:center 62%;
  }

  .system-journey .journey-step-copy{
    grid-template-columns:42px minmax(0,1fr);
    padding:12px 14px;
  }

  .system-journey .journey-step-number{
    min-width:42px;
    padding-right:14px;
    font-size:27px;
  }

  .system-journey .journey-step-copy strong{
    font-size:19px;
    line-height:1.08;
  }

  .system-journey .journey-step-subline{
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .system-journey{
    --evidence-band-h:78px;
    --evidence-band-pad:18px;
  }

  .system-journey .journey-gallery{
    gap:18px;
    perspective:none;
  }

  .system-journey .journey-tile{
    aspect-ratio:4 / 3;
    border-radius:var(--evidence-radius);
    filter:none;
    box-shadow:0 18px 42px -30px rgb(25 23 28 / .28);
  }

  .system-journey .journey-step-face::after{
    inset:0;
    opacity:1;
  }

  .system-journey .journey-step-copy{
    grid-template-columns:46px minmax(0,1fr);
    left:0;
    right:0;
    bottom:0;
    padding:12px 18px;
    opacity:1;
  }

  .system-journey .journey-step-number{
    min-width:46px;
    padding-right:18px;
    font-size:30px;
  }

  .system-journey .journey-step-copy strong{font-size:20px}
  .system-journey .journey-step-subline{font-size:12px}
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .system-journey[data-ready] .journey-gallery{
    grid-template-columns:1fr;
    gap:20px;
  }

  .system-journey[data-ready] .journey-step{
    width:min(86vw,360px);
    aspect-ratio:4 / 5;
  }
}