/* ApexScan fly-through, the top of the home page. One full-screen picture, one sentence at a time, readouts left and right.
   Everything is scoped to .fl so the rest of the site's styles are untouched. */
.fl{
  --text:#f2f6ff;--text-2:#c9d6f2;--muted:#9fb2d9;
  --blue:#2f6bff;--blue-2:#6aa5ff;--orange:#ff7a1a;--ink:#1a0d03;--line:rgba(160,190,255,.22);
  --ease:cubic-bezier(.22,1,.36,1);
  color:var(--text);line-height:1.5;
}
.fl h1,.fl h2,.fl h3,.fl p,.fl dl,.fl dd,.fl ol,.fl ul{margin:0;padding:0}
.fl ol,.fl ul{list-style:none}

/* Over the fly-through the site header has no bar behind it: the picture is the page. It gets its bar back below. */
body:has([data-flight]) .nav{position:fixed;left:0;right:0;top:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;transition:background .3s,border-color .3s}
body:has([data-flight]) .nav .brand,body:has([data-flight]) .nav-links a{text-shadow:0 1px 12px rgba(0,0,0,.7)}
body.fl-past .nav{background:rgba(3,6,15,.9);border-bottom-color:rgba(34,64,122,.45)}
@media (max-width:900px){body:has([data-flight]) .nav:has([aria-expanded="true"]){background:rgba(3,6,15,.96)}}

.fl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:8px;background:var(--orange);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.fl-btn:hover{background:#ff8f3d;transform:translateY(-1px)}
.fl-btn:active{transform:translateY(0)}
.fl-btn-quiet{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fl-btn-quiet:hover{background:rgba(255,255,255,.18)}

/* The pinned stage. The section is nine screens tall; the stage stays put while the scroll position drives the camera. */
.fl{position:relative;height:900vh;height:900svh}
.fl-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#0a1a3d 0%,#03060f 70%)}
.fl-film,.fl-photo,.fl-shade,.fl-tags{position:absolute;inset:0}
.fl-film{width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .6s ease}
.fl-live .fl-film{opacity:1}
.fl-photo{display:flex;align-items:center;justify-content:center;transition:opacity 1.2s ease}
.fl-photo img{width:min(120vh,120vw);height:auto;max-width:none;opacity:.5;transform:scale(calc(.55 + var(--p,0) * .1));filter:saturate(.9)}
.fl-live .fl-photo{opacity:0}
.fl-shade{pointer-events:none;background:
  linear-gradient(to top,rgba(3,6,15,.88) 0%,rgba(3,6,15,.5) 22%,rgba(3,6,15,0) 46%),
  linear-gradient(to right,rgba(3,6,15,.62) 0%,rgba(3,6,15,0) 30%,rgba(3,6,15,0) 70%,rgba(3,6,15,.62) 100%),
  linear-gradient(to bottom,rgba(3,6,15,.5) 0%,rgba(3,6,15,0) 16%)}

/* Captions */
.fl-caps{position:absolute;left:50%;bottom:clamp(54px,9vh,96px);width:min(880px,calc(100% - 40px));transform:translateX(-50%);text-align:center}
.fl-cap{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.fl-cap.on{opacity:1;transform:none;pointer-events:auto}
.fl-cap h1{font-size:clamp(34px,5.4vw,68px);line-height:1.04;font-weight:700;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.fl-cap h2{font-size:clamp(22px,2.9vw,38px);line-height:1.18;font-weight:600;letter-spacing:-.012em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.fl-count{font-size:14px;font-weight:600;color:var(--orange);margin-bottom:12px;font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.fl-addr{display:inline-flex;align-items:center;gap:2px;margin-top:22px;padding:14px 22px;min-height:56px;border-radius:8px;background:rgba(6,14,34,.72);box-shadow:inset 0 0 0 1px rgba(140,180,255,.4);font-size:clamp(17px,2vw,22px);font-weight:500;font-variant-numeric:tabular-nums}
.fl-addr i{width:2px;height:1.2em;background:var(--orange);animation:fl-blink 1s steps(2) infinite}
@keyframes fl-blink{50%{opacity:0}}
.fl-lede{margin:16px auto 0;max-width:46ch;font-size:clamp(16px,1.5vw,19px);color:var(--text-2);text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.fl-scrollcue{margin-top:18px;font-size:14px;color:var(--text-2)}
.fl-scrollcue::after{content:"";display:block;width:1px;height:26px;margin:10px auto 0;background:linear-gradient(var(--text-2),transparent);animation:fl-cue 1.8s var(--ease) infinite}
@keyframes fl-cue{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}
.fl-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* Readouts: no boxes. A hairline, a small heading, and figures in tabular numerals. */
.fl-read{position:absolute;top:50%;width:min(300px,24vw);opacity:0;transition:opacity .45s var(--ease),transform .7s var(--ease);pointer-events:none;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.fl-left{left:clamp(18px,3.4vw,56px);transform:translate(-22px,-58%);border-left:2px solid var(--orange);padding-left:18px}
.fl-right{right:clamp(18px,3.4vw,56px);transform:translate(22px,-58%);border-right:2px solid var(--blue-2);padding-right:18px;text-align:right}
.fl-read.on{opacity:1;transform:translate(0,-58%)}
.fl-read::before{content:"";position:absolute;inset:-70px -90px;z-index:-1;background:radial-gradient(closest-side,rgba(3,6,15,.86) 0%,rgba(3,6,15,.7) 45%,rgba(3,6,15,.3) 78%,rgba(3,6,15,0) 100%)}
.fl-read h3{font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:12px}
.fl-read dl>div{padding:9px 0;border-top:1px solid var(--line)}
.fl-read dl>div:first-child{border-top:0;padding-top:0}
.fl-read dt{font-size:13px;color:var(--text-2);line-height:1.35}
.fl-read dd{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.fl-read dd.fl-big{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin-top:2px}
.fl-ticks li{position:relative;padding:8px 26px 8px 0;border-top:1px solid var(--line);font-size:16px;font-weight:500;opacity:.25;transition:opacity .4s var(--ease)}
.fl-ticks li:first-child{border-top:0}
.fl-ticks li::after{content:"";position:absolute;right:2px;top:50%;width:11px;height:6px;border-left:2px solid var(--blue-2);border-bottom:2px solid var(--blue-2);transform:translateY(-70%) rotate(-45deg);opacity:0;transition:opacity .3s}
.fl-ticks li.on{opacity:1}
.fl-ticks li.on::after{opacity:1}
.fl-secs li{display:flex;justify-content:flex-end;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;opacity:0;transform:translateX(10px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.fl-secs li:first-child{border-top:0}
.fl-secs li.on{opacity:1;transform:none}
.fl-secs b{font-size:17px;font-weight:600}
.fl-secs span{font-size:13px;color:var(--muted)}
.fl-key dt{display:flex;align-items:center;gap:8px}
.fl-key i{width:18px;height:3px;border-radius:2px;flex:none}
.k-ridge{background:#ff7a1a}.k-valley{background:#ffd27a}.k-eave{background:#6aa5ff}.k-rake{background:#e6eeff}
.fl-draw{clip-path:inset(0 calc(100% - var(--draw,0) * 100%) 0 0)}
.fl-draw svg{display:block;width:100%;height:auto}

/* Text labels pinned to points in the picture. The script moves each one; the bubble sits above its point. */
.fl-tags{pointer-events:none;overflow:hidden}
.fl-tag{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s var(--ease)}
.fl-live .fl-tag.on{opacity:1}
.fl-tag b{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap;padding:7px 11px;border-radius:6px;background:rgba(6,22,51,.9);color:#fff;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.fl-tag-pin::before{content:"";position:absolute;left:-7px;top:-7px;width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid #fff}
.fl-credit{position:absolute;left:12px;bottom:12px;max-width:min(46vw,520px);font-size:11px;line-height:1.3;color:#dfe8ff;opacity:0;text-shadow:0 1px 3px rgba(0,0,0,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-live .fl-credit{opacity:.85}

/* Loading screen: a blueprint sheet. The roof plan draws itself in as the recording arrives; the figure is real progress. */
.fl-loader{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:90px 24px 40px;text-align:center;
  background-color:#061633;
  background-image:linear-gradient(rgba(79,155,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(79,155,255,.09) 1px,transparent 1px),linear-gradient(rgba(79,155,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(79,155,255,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center}
.fl-loading .fl-loader{display:flex}
.fl-loader-plan{width:min(360px,62vw);margin-bottom:6px}
.fl-loader-plan svg{display:block;width:100%;height:auto;overflow:visible}
.fl-loader-plan .fl-ink{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--load,0))}
.fl-loader-pct{font-size:clamp(44px,7vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.fl-loader-pct i{font-style:normal;font-size:.45em;font-weight:600;color:var(--blue-2);margin-left:4px}
.fl-loader-text{font-size:15px;color:var(--text-2)}
.fl-loader-bar{width:min(360px,62vw);height:3px;background:rgba(140,188,255,.2)}
.fl-loader-bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--load,0));transition:transform .2s linear}
.fl-loader-skip{margin-top:10px;font-size:14px;color:var(--text-2);padding:10px}
.fl-loader-skip:hover{color:#fff}
/* While the recording loads from the top of the page, the page holds still. */
html.fl-lock,html.fl-lock body{overflow:hidden}

.fl-status{position:absolute;left:50%;top:76px;transform:translateX(-50%);font-size:13px;color:var(--text-2);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.fl-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1)}
.fl-progress i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--p,0))}

/* Narrow screens: the readouts cannot sit beside the picture, so one shows as a compact strip above the caption. */
@media (max-width:860px){
  .fl-read{top:auto;bottom:calc(clamp(54px,9vh,96px) + 150px);left:20px;right:20px;width:auto;border:0;padding:0;text-align:left;transform:translateY(14px)}
  .fl-read.on{transform:none}
  .fl-right{display:none}
  .fl-read::before{content:"";position:absolute;inset:-70px -90px;z-index:-1;background:radial-gradient(closest-side,rgba(3,6,15,.86) 0%,rgba(3,6,15,.7) 45%,rgba(3,6,15,.3) 78%,rgba(3,6,15,0) 100%)}
.fl-read h3{margin-bottom:6px}
  .fl-read dl{display:flex;gap:18px;flex-wrap:wrap}
  .fl-read dl>div{border:0;padding:0}
  .fl-read dl>div:nth-child(n+3){display:none}
  .fl-read dd.fl-big{font-size:24px}
  .fl-shade{background:linear-gradient(to top,rgba(3,6,15,.94) 0%,rgba(3,6,15,.7) 34%,rgba(3,6,15,0) 62%),linear-gradient(to bottom,rgba(3,6,15,.5) 0%,rgba(3,6,15,0) 16%)}
  .fl-photo img{opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .fl-cap,.fl-read,.fl-film,.fl-photo,.fl-tag,.fl-loader-bar i{transition:none}
  .fl-addr i,.fl-scrollcue::after{animation:none}
}
/* The fly-through has its own progress line at the bottom; the site-wide one at the top waits until the page below. */
body:has([data-flight]):not(.fl-past) .progress{display:none}