/* The final shot is a navigable scene. Each anchor is the sign face itself. */
#products {
  container-type:inline-size;
  isolation:isolate;
  overflow:hidden;
  padding:0;
  background:linear-gradient(180deg,#15182d0a,#17152a35 68%,#1118268a),url(sunline-future.jpg) center / cover;
}
#products .city-sign {
  position:absolute;display:grid;place-items:center;min-height:48px;
  padding:.45em .65em;width:25%;z-index:1;
  color:var(--letter);background:var(--face);border:3px solid var(--frame);
  text-align:center;font:700 clamp(.82rem,2cqw,1.45rem)/1.12 system-ui,sans-serif;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;
  box-shadow:3px 5px 0 #162032;
}
.city-sign::before,.city-sign::after {content:"";position:absolute;pointer-events:none;z-index:-1}
#products .city-sign:hover,#products .city-sign:focus-visible {
  outline:3px solid white;outline-offset:3px;background:var(--face);color:var(--letter);z-index:3;
}
.billboard {--face:#e9dbbb;--letter:#253047;--frame:#454459;left:6%;top:17%;transform:rotate(-3deg)}
.billboard::after {top:100%;left:20%;width:58%;height:2em;border-inline:6px solid #394052;background:linear-gradient(25deg,transparent 46%,#394052 47% 52%,transparent 53%)}
.archive {--face:#28324a;--letter:#d4f1ff;--frame:#849bb0;left:39%;top:40%;transform:skewY(-4deg)}
.archive::after {top:100%;left:6%;right:6%;height:.36em;background:repeating-linear-gradient(90deg,#a0c1cf 0 12%,#293248 12% 17%)}
.beacon {--face:#fbe6b8;--letter:#303046;--frame:#55475a;left:10%;bottom:15%;border-radius:1em 1em .45em .45em}
.beacon::before {bottom:100%;width:65%;height:.32em;background:#fff3ca;box-shadow:0 0 .5em #ffd398}
.beacon::after {top:100%;height:9em;width:.42em;background:#35394c;border-right:2px solid #8899a7}
.shop {--face:#442e48;--letter:#fff1df;--frame:#b69bac;right:7%;bottom:11%}
.shop::before {bottom:100%;left:-4%;width:108%;height:.6em;background:repeating-linear-gradient(100deg,#eed1bc 0 13%,#ac7080 13% 26%);transform:skewX(-12deg)}
#products .shuttle {--face:#edf0df;--letter:#203549;--frame:#344c61;right:7%;top:11%;border-radius:60% 90% 25% 28% / 1.1em 2.2em .7em .7em;padding:.8em 1.05em .55em;transform:rotate(4deg)}
.shuttle::before {bottom:96%;left:23%;width:50%;height:.75em;background:#6598a8;border:3px solid #344c61;border-radius:100% 100% 0 0}
.shuttle::after {top:100%;left:19%;width:65%;height:.28em;border-inline:.85em solid #b3fffa;background:#314457;box-shadow:0 .15em .35em #70c8cb}
@media(max-width:620px){
  .screen:has(#products:target),#roadmap:target {min-height:27rem}
  #products .city-sign {width:40%;font-size:clamp(.8rem,3.35cqw,.97rem);padding:.5em;min-height:48px}
  .billboard {left:4%;top:19%}.archive {left:49%;top:41%}.beacon {left:5%;bottom:25%}.shop {right:5%;bottom:7%}
  #products .shuttle {right:4%;top:8%;padding:.65em .55em .4em}
}
/* During the tracking shot, the same live links follow the Blender camera. */
.screen[data-mode="motion"] #products {
  display:block;background:transparent;pointer-events:none;
}
.screen[data-mode="motion"] #products .city-sign {
  left:var(--track-x);top:var(--track-y);bottom:auto;right:auto;
  translate:-50% -50%;scale:var(--track-scale);pointer-events:auto;
}
.screen[data-mode="motion"] .city-sign:not([data-onscreen="true"]) {visibility:hidden}
.screen[data-mode="motion"] video {visibility:visible!important}
.screen[data-mode="motion"]:is(:has(#products:target),#roadmap:target) {min-height:0}
.projection:has(#roadmap[data-mode="motion"]) .play {display:inline-flex}
@media(max-width:620px){
  .screen[data-mode="motion"] #products .city-sign {width:34%;min-height:44px;font-size:clamp(.75rem,3.1cqw,.95rem)}
}

.screen[data-mode="motion"] #products .city-sign {opacity:var(--sign-opacity,0)}