/* ===== Front-end upgrades: page transitions, scroll progress, data charts ===== */

/* smooth cross-page fade (Home <-> About <-> Team); browsers without support simply navigate as before */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s cubic-bezier(.4,0,1,1) both vt-out}
::view-transition-new(root){animation:.42s cubic-bezier(.2,0,0,1) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* always-visible header: slides in once the hero's own header has scrolled away (fx.js stickyHeader) */
.sh{position:fixed;left:0;right:0;top:0;z-index:55;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
 padding:calc(.7rem + env(safe-area-inset-top,0px)) max(1.5rem,env(safe-area-inset-right,0px)) .7rem max(1.5rem,env(safe-area-inset-left,0px));
 background:rgb(9 10 11/.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgb(255 255 255/.1);color:#fff;
 transform:translateY(-105%);visibility:hidden;transition:transform .45s cubic-bezier(.2,0,0,1),visibility 0s linear .45s}
.sh.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,0,0,1),visibility 0s}
.sh-lg{display:flex;align-items:center;gap:.65rem;font-family:"Oswald",Impact,sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:1rem}
.sh-lg img{width:2.6rem;height:2.6rem;border-radius:50%;background:#fff}
.sh nav{display:flex;gap:2.5rem}
.sh nav a{font-size:.875rem;text-transform:uppercase;line-height:.9;transition:color .15s}
.sh nav a:hover,.sh nav a:focus-visible,.sh-lg:hover{color:var(--accent,#02d2e3)}
.sh-bg{display:none;background:0;border:0;padding:.5rem;margin-right:-.5rem;cursor:pointer}
.sh-bg i{display:block;width:1.5rem;height:1px;background:#fff}.sh-bg i+i{margin-top:.3125rem}
@media(max-width:1279px){.sh nav{display:none}.sh-bg{display:block}}
@media(prefers-reduced-motion:reduce){.sh{transition:none}}

/* scroll progress line */
#sp{position:fixed;left:0;top:0;right:0;height:3px;z-index:70;pointer-events:none;background:var(--accent,#02d2e3);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .25s}
#sp.on{opacity:1}

/* ---- data charts (Experience) ---- */
.viz{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;margin-top:20px}
.viz[hidden]{display:none}
.vz{border:1px solid var(--border-dark,#2a2d36);background:var(--surface-dark,#0e0f14);padding:clamp(16px,2vw,24px);min-width:0}
.vz .eb{margin:0 0 18px;font-size:12px;text-transform:uppercase;letter-spacing:-.02em;color:var(--accent,#02d2e3)}

.area{position:relative;touch-action:pan-y;cursor:crosshair}
.area svg{display:block;width:100%;height:auto;overflow:visible}
.area .gl{fill:none;stroke:rgb(255 255 255/.09);stroke-width:1;stroke-dasharray:4 6}
.area .fill{opacity:0;transition:opacity 1.3s ease .5s}
.area .ln{fill:none;stroke:var(--accent,#02d2e3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s cubic-bezier(.2,.8,.2,1)}
.area .dt{fill:var(--surface-dark,#0e0f14);stroke:var(--accent,#02d2e3);stroke-width:2;opacity:0;transition:opacity .4s calc(var(--n)*70ms + 1.1s)}
.area .cur{opacity:0;transition:opacity .2s}
.area .cur line{stroke:rgb(255 255 255/.28);stroke-width:1}
.area .cur circle{fill:var(--accent,#02d2e3);stroke:#fff;stroke-width:2}
.viz.in .area .ln{stroke-dashoffset:0}
.viz.in .area .fill{opacity:1}
.viz.in .area .dt{opacity:1}
.viz.in .area .cur{opacity:1}
.area .tip{position:absolute;pointer-events:none;white-space:nowrap;padding:6px 10px;background:#fff;color:#090a0b;font-size:12px;line-height:1.1;text-transform:uppercase;font-weight:700;transform:translate(-50%,-135%);opacity:0;transition:opacity .3s 1.6s,left .18s ease,top .18s ease}
.area .tip.l{transform:translate(-10%,-135%)}
.area .tip.r{transform:translate(-90%,-135%)}
.viz.in .area .tip{opacity:1}
.area .ax{position:relative;height:18px;margin-top:8px}
.area .ax span{position:absolute;top:0;transform:translateX(-50%);font-size:11px;line-height:1;color:var(--on-dark-muted,#b6c1c8);white-space:nowrap}
.area .ax span.on{color:#fff}
.kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:20px 0 0;border-top:1px solid var(--border-dark,#2a2d36)}
.kp div{padding:14px 12px 0 0;min-width:0}
.kp dt{font-size:11px;line-height:1.15;text-transform:uppercase;color:var(--on-dark-muted,#b6c1c8)}
.kp dd{margin:6px 0 0;font-family:var(--font-display,Oswald,sans-serif);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:.95;color:#fff}

.vz-ring{display:flex;flex-direction:column}
.ringw{position:relative;width:min(210px,62%);margin:0 auto 16px;aspect-ratio:1}
.ringw svg{display:block;width:100%;height:100%}
.ringw .seg{transition:opacity .2s}
.ringw.hv .seg:not(.hot){opacity:.22}
.rc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.rc b{font-family:var(--font-display,Oswald,sans-serif);font-size:clamp(34px,4vw,46px);font-weight:700;line-height:.9}
.rc small{margin-top:6px;font-size:11px;text-transform:uppercase;color:var(--on-dark-muted,#b6c1c8)}
.leg{list-style:none;margin:0;padding:0}
.leg li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--border-dark,#2a2d36);font-size:13px;text-transform:uppercase;line-height:1.1;transition:opacity .2s}
.leg li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg i{width:10px;height:10px;background:var(--c)}
.leg b{font-family:var(--font-display,Oswald,sans-serif);font-weight:500;color:var(--accent,#02d2e3)}
.leg.hv li:not(.hot){opacity:.4}

@media(max-width:900px){.viz{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.area .ax span.hm{display:none}.kp dt{font-size:10px}}
@media(prefers-reduced-motion:reduce){.viz *{transition:none!important}}