/* Scroll motion. Link after styles.css and night-shift.css. Hidden states only apply once scroll-motion.js adds .sm-ready to , so the page reads normally without JavaScript, in print and with reduced motion. */ :root{--sm-ease:cubic-bezier(.2,.8,.2,1);--sm-stamp:cubic-bezier(.3,1.5,.5,1)} /* ---------- reveal on scroll ---------- */ @media screen{ .sm-ready [data-sm]:not(.is-shown){opacity:0;transform:translateY(14px)} .sm-ready [data-sm="stamp"]:not(.is-shown){transform:scale(1.35) rotate(-6deg)} .sm-ready [data-sm="mark"]:not(.is-shown){opacity:1;transform:none} } [data-sm]{transition:opacity .6s var(--sm-ease),transform .7s var(--sm-ease);transition-delay:var(--sm-delay,0ms)} [data-sm="stamp"]{transition:opacity .25s ease,transform .45s var(--sm-stamp);transition-delay:var(--sm-delay,0ms)} /* Sheet header rules are plotted left to right. */ .sm-ready .sheethead,.sm-ready .experience-head{position:relative;border-bottom-color:transparent} .sm-ready .sheethead::after,.sm-ready .experience-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left} .sm-ready .sheethead.is-shown::after,.sm-ready .experience-head.is-shown::after{animation:sm-draw-x .9s var(--sm-ease) .15s both} /* Experience: each role gets a rust tick drawn down its left edge, in career order. */ .sm-ready .experience-list article::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rust);transform:scaleY(0);transform-origin:top} .sm-ready .experience-list li.is-shown article::after{animation:sm-draw-y .7s var(--sm-ease) calc(var(--sm-delay,0ms) + .2s) both} .sm-ready .experience-list li.is-shown .experience-when{animation:sm-fade-right .5s var(--sm-ease) calc(var(--sm-delay,0ms) + .3s) both} /* Drawing references (A–H) are stamped on as their block arrives. */ .sm-ready .is-shown .capno{animation:sm-stamp .5s var(--sm-stamp) calc(var(--sm-delay,0ms) + .25s) both} /* Process sequence flows unit by unit; replays when a different setting is selected. */ .sm-ready .focus.is-shown .sequence>*{animation:sm-unit .55s var(--sm-ease) both} .sm-ready .focus.is-shown .sequence>.arrow{animation-name:sm-fade-right} .sm-ready .focus.is-shown .sequence>:nth-child(2){animation-delay:.18s} .sm-ready .focus.is-shown .sequence>:nth-child(3){animation-delay:.3s} .sm-ready .focus.is-shown .sequence>:nth-child(4){animation-delay:.48s} .sm-ready .focus.is-shown .sequence>:nth-child(5){animation-delay:.6s} .sm-ready .focus.is-shown .sequence>:nth-child(6){animation-delay:.78s} .sm-ready .focus.is-shown .sequence>:nth-child(7){animation-delay:.9s} .sm-ready .focus.is-shown .sequence>:nth-child(8){animation-delay:1.08s} .sm-ready .focus.is-shown .sequence>:nth-child(9){animation-delay:1.2s} /* Count-up figures keep a fixed width while they run. */ .sm-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:right} @keyframes sm-draw-x{to{transform:scaleX(1)}} @keyframes sm-draw-y{to{transform:scaleY(1)}} @keyframes sm-fade-right{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} @keyframes sm-stamp{0%{opacity:0;transform:scale(1.8) rotate(-12deg)}60%{opacity:1;transform:scale(.9) rotate(0)}100%{opacity:1;transform:none}} @keyframes sm-unit{0%{opacity:0;transform:translateX(-8px)}55%{opacity:1;border-color:var(--rust)}100%{opacity:1;transform:none}} /* ---------- reading progress + current section ---------- */ .sm-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none} .sm-progress span{display:block;height:100%;background:var(--rust);transform:scaleX(var(--sm-p,0));transform-origin:left} .links .navl{padding-bottom:2px;background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0% 1px;transition:background-size .3s var(--sm-ease),color .2s} .links .navl:hover,.links .navl:focus-visible{background-size:100% 1px} .links .navl.is-current{color:var(--rust-text);background-size:100% 1px} /* Phone nav is a row of tabs: the current one gets a heavier bar. */ @media(max-width:620px){.links .navl{padding-bottom:0}.links .navl.is-current{background-size:100% 2px}} /* ---------- hover ---------- */ .btn{background-image:linear-gradient(var(--rust-strong),var(--rust-strong));background-repeat:no-repeat;background-position:left;background-size:0% 100%;transition:background-size .35s var(--sm-ease),border-color .2s,color .2s} .btn:hover,.btn:focus-visible{background-color:var(--ink);background-size:100% 100%} .btn.ghost:hover,.btn.ghost:focus-visible{background-color:transparent} @media (hover:hover){ .tool,.lab-project,.ai-card{transition:transform .3s var(--sm-ease),box-shadow .3s var(--sm-ease)} .tool:hover,.lab-project:hover,.ai-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #39362e24} :root[data-night-shift="true"] .tool:hover,:root[data-night-shift="true"] .lab-project:hover,:root[data-night-shift="true"] .ai-card:hover{box-shadow:0 12px 28px #0000006b} /* Cells that share borders take a rust edge instead of lifting. */ .cap,.experience-list article,.ai-flow li{transition:box-shadow .3s var(--sm-ease)} .cap:hover,.experience-list article:hover,.ai-flow li:hover{box-shadow:inset 0 3px 0 var(--rust)} } /* "Checked" stamp lands on each sheet header after its rule is drawn. */ .sheethead,.experience-head{position:relative} .sm-check{position:absolute;right:0;bottom:-11px;z-index:1;padding:3px 7px;border:1.5px solid var(--rust);background:var(--paper);color:var(--rust-text);font:700 10px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-4deg);transform-origin:100% 50%;box-shadow:inset 0 0 0 1px #c9563424} .site{overflow-x:clip} .sm-ready .sm-check{opacity:0} .sm-ready .is-shown>.sm-check{animation:sm-check .5s var(--sm-stamp) 1.1s both} @keyframes sm-check{0%{opacity:0;transform:scale(1.9) rotate(-14deg)}60%{opacity:1;transform:scale(.94) rotate(-3deg)}100%{opacity:1;transform:rotate(-4deg)}} /* AI steps: a rust line runs across the flow as it arrives. */ .sm-ready .ai-flow{position:relative} .sm-ready .ai-flow::before{content:"";position:absolute;z-index:2;left:-1px;right:-1px;top:-1px;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left} .sm-ready .ai-flow.is-shown::before{animation:sm-draw-x 1.4s var(--sm-ease) .2s both} @media(max-width:900px){ .sm-ready .ai-flow::before{right:auto;bottom:-1px;width:2px;height:auto;transform:scaleY(0);transform-origin:top} .sm-ready .ai-flow.is-shown::before{animation-name:sm-draw-y} } /* Hero figures count up alongside the stats bar. */ .hero-proof .sm-num{text-align:right} /* Compact nav once the hero has scrolled away. */ .nav{transition:box-shadow .3s ease} .nav .brand{transform-origin:left center;transition:transform .3s var(--sm-ease)} .nav.is-compact{box-shadow:0 8px 22px #39362e26} .nav.is-compact .brand{transform:scale(.92)} :root[data-night-shift="true"] .nav.is-compact{box-shadow:0 8px 24px #00000066} @media print{.sm-check{display:none}} @media (prefers-reduced-motion:reduce){ [data-sm],.btn,.links .navl,.nav,.nav .brand,.tool,.lab-project,.ai-card,.cap,.experience-list article,.ai-flow li{transition:none!important} .tool:hover,.lab-project:hover,.ai-card:hover{transform:none} } @media print{.sm-progress{display:none}}