/* ABOUT — scroll story ("Who Austin Robotics is")
   A sticky illustrated Austin stage with chapter copy scrolling over it.
   Scenes are drawn by about.js; without JS the chapters read as plain
   sections and the stage stays hidden.

   These tokens live on the in-progress site stylesheet and are not on
   the published index.css yet. Defining them here keeps this page intact. */
:root{
  --bg-elev:#FFFEFB;
  --accent-soft:#E8F1FC;
  --radius:14px;
  --shadow:0 1px 2px rgba(28,28,26,.04), 0 18px 40px rgba(28,28,26,.06);
}

.story{
  --stage-top:66px;
  --stage-h:calc(100vh - var(--stage-top));
  --story-ink:var(--ink);
  --story-muted:var(--muted);
  --story-navy:#0B1730;
  position:relative;
  background:var(--bg);
  border-top:1px solid var(--line);
}
@supports (height:100svh){ .story{--stage-h:calc(100svh - var(--stage-top))} }

.story-stage{display:none}
.about-js .story-stage{
  display:block;
  position:sticky;
  top:var(--stage-top);
  height:var(--stage-h);
  overflow:hidden;
  z-index:0;
  background:var(--bg);
  transition:background-color .8s ease;
}
.about-js .story.is-dark .story-stage{background:var(--story-navy)}
.story-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* soft scrim under the headline, like the concept piece */
.story-scrim{position:absolute;left:0;right:0;top:0;height:58%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 38%,transparent 100%);
  transition:opacity .8s ease}
.story-scrim--dark{opacity:0;background:linear-gradient(180deg,rgba(11,23,48,.92) 0%,rgba(11,23,48,.6) 40%,transparent 100%)}
.story.is-dark .story-scrim--light{opacity:0}
.story.is-dark .story-scrim--dark{opacity:1}
/* wide screens: the copy sits on the left, so fade the city behind it */
.story-scrim--side{display:none}
@media (min-width:901px) and (min-aspect-ratio:23/20){
  .story-scrim--side{display:block;top:0;bottom:0;height:auto;right:auto;width:56%;
    background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 55%,transparent 100%)}
  .story.is-dark .story-scrim--side{background:linear-gradient(90deg,rgba(11,23,48,.9) 0%,rgba(11,23,48,.72) 55%,transparent 100%)}
}

/* chapter progress — segmented bar at the top of the stage */
.story-progress{position:absolute;left:0;right:0;top:0;z-index:3;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:1280px;margin:0 auto;padding:14px 40px 0}
.story-progress button{appearance:none;border:0;background:none;padding:0 0 8px;cursor:pointer;text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--story-muted);opacity:.75;transition:color .3s,opacity .3s}
.story-progress button:hover{opacity:1}
.story-progress button.is-active{color:var(--accent);opacity:1}
.story-progress .bar{display:block;height:3px;border-radius:3px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden;margin-bottom:8px}
.story-progress .bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px}
.story.is-dark .story-progress button{color:#9FB3D6}
.story.is-dark .story-progress button.is-active{color:#7FB0FF}
.story.is-dark .story-progress .bar{background:rgba(159,179,214,.22)}
.story.is-dark .story-progress .bar i{background:#5C9BFF}

/* chapters
   One viewport each. about.js turns one trackpad or touch drag into
   one chapter while the story fills the screen. */
.story-chapters{position:relative;z-index:2}
.about-js .story-chapters{margin-top:calc(-1 * var(--stage-h))}
html.about-js{scroll-behavior:auto}
.chapter{position:relative;padding:72px 0}
.about-js .chapter{min-height:100vh;min-height:100svh;padding:0}
.about-js .story-chapters{pointer-events:none}
.about-js .chapter{pointer-events:none}
.about-js .chapter-copy{pointer-events:auto}
.chapter-copy{max-width:1280px;margin:0 auto;padding:0 40px;color:var(--story-ink)}
.about-js .chapter-copy{position:sticky;top:calc(var(--stage-top) + 64px);padding-top:8px;opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),color .6s}
.about-js .chapter.is-active .chapter-copy{opacity:1;transform:none}
.chapter-kicker{display:flex;align-items:center;gap:10px;color:var(--accent)!important;margin-bottom:18px}
.chapter-kicker::before{content:"";width:28px;height:1px;background:currentColor}
.chapter h1,.chapter h2{font-size:clamp(40px,6.6vw,92px);font-weight:700;letter-spacing:-.04em;line-height:.98;max-width:14ch}
.chapter h1 .hl,.chapter h2 .hl{color:var(--accent)}
.chapter p{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--story-muted);max-width:44ch;margin-top:22px}
.chapter p strong{color:var(--story-ink);font-weight:600}
.chapter-cue{display:inline-flex;align-items:center;gap:10px;margin-top:28px}
.chapter-cue svg{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.story.is-dark .chapter-copy{--story-ink:#fff;--story-muted:#B9C6DC}
.story.is-dark .chapter h1 .hl,.story.is-dark .chapter h2 .hl{color:#6FA8FF}
.story.is-dark .chapter-kicker{color:#7FB0FF!important}

/* stats in the ecosystem chapter */
.story-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:30px;max-width:560px;border:1px solid rgba(159,179,214,.25);border-radius:var(--radius);overflow:hidden;background:rgba(159,179,214,.25)}
.story-stats div{padding:16px 18px;background:rgba(11,23,48,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.story-stats b{display:block;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.story-stats span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9FB3D6}
.story:not(.is-dark) .story-stats div{background:var(--bg-elev)}
.story:not(.is-dark) .story-stats b{color:var(--ink)}

/* closing */
.chapter-logo{width:64px;height:64px;margin-bottom:18px;filter:drop-shadow(0 6px 18px rgba(31,111,224,.35))}
.chapter-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.story.is-dark .chapter-cta .btn:not(.btn--solid){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.story.is-dark .chapter-cta .btn:not(.btn--solid):hover{background:rgba(255,255,255,.16);border-color:#fff}

/* ROSTER — who's in the room */
.about-roster{padding:110px 0 30px;border-top:1px solid var(--line);background:var(--bg)}
.roster-head{max-width:760px}
.roster-head h2{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.035em;margin-top:18px}
.roster-head p{font-size:19px;color:var(--muted);max-width:56ch;margin-top:18px}
.roster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:52px}
.roster-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.roster-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px)}
.roster-card .num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.roster-card h3{font-size:24px;letter-spacing:-.02em}
.roster-card p{color:var(--muted);font-size:16px;line-height:1.5}
.roster-card a{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.roster-card a:hover{text-decoration:underline;text-underline-offset:3px}
.roster-card .ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.about-js .roster-card{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),border-color .2s}
.about-js .roster-card.is-in{opacity:1;transform:none}

.about-more{padding:90px 0 110px;background:var(--bg)}
.about-more .roster-grid{margin-top:44px}
.roster-card .meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.6}
.roster-card .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.roster-card .links a{margin:0;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-size:11px;letter-spacing:.06em;transition:border-color .15s,color .15s}
.roster-card .links a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.roster-card .people{display:flex;flex-direction:column;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.roster-card .people li{font-weight:600;font-size:17px;color:var(--ink)}
.roster-card--dark{background:#0B1730;border-color:#0B1730}
.roster-card--dark h3{color:#fff}.roster-card--dark p{color:#B9C0CC}
.roster-card--dark .num{color:#7FB0FF}
.roster-card a.mail{margin:0;padding:0;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.roster-card a.mail:hover{color:#7FB0FF}
.roster-card--dark .links a{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.roster-card--dark .links a:hover{border-color:#7FB0FF;color:#7FB0FF}

/* SVG scene helpers (classes set by about.js) */
.scene{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.scene.is-on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.scene .chip{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.scene .chip.on{opacity:1;transform:none}
.chip text{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.04em}

.walk{animation:walkx linear infinite;will-change:transform}
@keyframes walkx{from{transform:translateX(0)}to{transform:translateX(var(--dx))}}
.bot{animation:bob var(--half,.45s) ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
.limb{transform-box:fill-box;transform-origin:50% 0;animation:swing var(--step,.9s) ease-in-out infinite alternate}
.limb.b{animation-direction:alternate-reverse}
@keyframes swing{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.limb.q{animation-name:swingq}
@keyframes swingq{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
.wheel{transform-box:fill-box;transform-origin:50% 50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{transform-box:fill-box;transform-origin:50% 50%;animation:pulse 2.6s ease-out infinite}
.pulse.d2{animation-delay:.85s}.pulse.d3{animation-delay:1.7s}
@keyframes pulse{from{transform:scale(.4);opacity:.9}to{transform:scale(2.4);opacity:0}}
.flow{animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.bat{animation:bat var(--d,7s) cubic-bezier(.3,.1,.5,1) infinite;opacity:0}
@keyframes bat{0%{transform:translate(0,0) scale(.3);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:0}}
.flap{transform-box:fill-box;transform-origin:50% 100%;animation:flap .22s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
.twinkle{animation:twinkle 3.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.bulbs{animation:bulbs 1.2s steps(2) infinite}
@keyframes bulbs{to{stroke-dashoffset:-12}}

.story-svg.is-paused *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .walk,.bot,.limb,.wheel,.pulse,.flow,.bat,.flap,.twinkle,.bulbs,.chapter-cue svg{animation:none!important}
  .bat{opacity:.9}
  .about-js .chapter-copy,.scene,.scene .chip,.about-js .roster-card{transition:none!important}
}

@media(max-width:900px){
  .story-progress{padding:12px 22px 0;gap:4px}
  .story-progress button{font-size:0;padding-bottom:0}
  .chapter-copy{padding:0 22px}
  .about-js .chapter-copy{top:calc(var(--stage-top) + 40px)}
  .chapter h1,.chapter h2{font-size:clamp(36px,10.5vw,56px)}
  .chapter p{font-size:16.5px;margin-top:16px}
  .story-scrim{height:66%}
  .story-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
  .story-stats div{padding:10px 8px}
  .story-stats b{font-size:20px}
  .story-stats span{font-size:9px;letter-spacing:.04em;margin-top:6px}
  .roster-grid{grid-template-columns:1fr}
  .about-roster{padding:80px 0 10px}
  .chapter-logo{width:48px;height:48px}
}
@media(min-width:901px) and (max-width:1100px){
  .roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}