/* Bridge journey hero. One scroll story in three beats:
   1. the bridge is built (film)   2. we walk onto it (film, the headline flies past us)   3. we arrive: the promise appears.
   Frames come from the Magnific videos (assets/bridge). */
.jr{position:relative;height:520svh}
.jr-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.jr-film{position:absolute;inset:0;z-index:0}
.jr-film canvas{width:100%;height:100%;display:block}
.jr-shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--shade,1);
  background:linear-gradient(to bottom,rgba(0,8,20,.85),rgba(0,8,20,.25) 26%,rgba(0,8,20,0) 45%,rgba(0,8,20,0) 70%,rgba(0,8,20,.75))}

/* the poster: a light line, then the giant line */
.jr-poster{position:absolute;z-index:3;inset-inline:0;top:clamp(92px,13svh,140px);text-align:center;pointer-events:none;
  transform:translateY(var(--ty,0)) scale(var(--sc,1));opacity:var(--op,1);filter:blur(var(--bl,0));transform-origin:50% 40%;will-change:transform,opacity}
.jr h1{font-family:var(--head);font-weight:400;line-height:.9;letter-spacing:-.01em;text-align:center;white-space:nowrap}
.jr h1 .l-a{display:block;font-weight:300;font-size:clamp(30px,3.6vw,68px);margin-bottom:.12em}
.jr h1 .l-b{display:block;font-size:clamp(46px,6.8vw,128px);color:var(--y);text-shadow:0 0 .12em rgba(var(--y-rgb),.3),0 4px 40px rgba(0,8,20,.6)}

/* micro world, anchored to the corners */
.jr-lead{position:absolute;z-index:4;inset-inline-start:var(--gut);bottom:calc(clamp(16px,2.2vw,32px) + 80px);max-width:min(36ch,30vw);margin:0;
  font-size:clamp(15px,1.1vw,18px);line-height:1.6;color:var(--muted);opacity:var(--lop,1)}
.jr-lead b{color:var(--w);font-weight:600}
.jr-steps{position:absolute;z-index:4;inset-inline-end:var(--gut);bottom:clamp(24px,4svh,40px);list-style:none;display:grid;gap:10px;font-size:14px;color:var(--muted);counter-reset:s}
.jr-steps li{display:flex;align-items:center;gap:12px;transition:color .4s}
.jr-steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--head);font-size:13px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line);transition:background .4s,color .4s,box-shadow .4s}
.jr-steps li.on{color:var(--w)}
.jr-steps li.on::before{background:var(--y);color:var(--bg);box-shadow:0 0 18px -2px var(--glow)}

/* arrival: the promise appears near the people */
.jr-arrive{position:absolute;z-index:4;inset-inline:var(--gut);top:24%;text-align:center;opacity:var(--aop,0);transform:translateY(calc((1 - var(--aop,0)) * 24px))}
.jr-arrive p{font-family:var(--head);font-size:clamp(28px,3.6vw,64px);line-height:1.12;text-shadow:0 4px 40px rgba(0,8,20,.8)}
.jr-arrive .y{color:var(--y)}

.jr-hint{position:absolute;z-index:4;left:50%;bottom:clamp(20px,3svh,32px);translate:-50% 0;display:grid;justify-items:center;gap:8px;font-size:13px;color:var(--muted);opacity:var(--hop,1)}
.jr-hint i{width:22px;height:34px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--muted);position:relative}
.jr-hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--y);animation:jr-wheel 1.8s ease-in-out infinite}
@keyframes jr-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
.jr-load{position:absolute;z-index:4;left:50%;bottom:12px;translate:-50% 0;width:120px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;transition:opacity .5s}
.jr-load i{display:block;height:100%;width:0;background:var(--y)}

@media (max-width:860px){
  .jr-poster{top:104px;inset-inline:var(--gut)}
  .jr h1 .l-a{font-size:clamp(24px,7.4vw,36px)}
  .jr h1 .l-b{font-size:clamp(28px,8.6vw,52px);line-height:1}
  .jr-lead{inset-inline:var(--gut);max-width:none;bottom:92px;text-align:center;font-size:15px;text-shadow:0 2px 16px rgba(0,8,20,.9);text-wrap:balance}
  .jr-steps,.jr-hint{display:none}
  .jr-arrive{top:20%}
}
@media (prefers-reduced-motion:reduce){ .jr{height:auto} .jr-pin{position:relative} .jr-hint{display:none} }
/* the alternate het from Oscar's alternate set, on the headline only */
.jr h1 .alt{font-feature-settings:"ss01" 1}

@media (max-width:860px){ .jr-lead span{display:block;text-wrap:balance} }