/* Team page — motion & interaction enhancements (scoped to Team.html) */ /* Founder cards start hidden; team.js reveals them (or CSS fallback shows them) */ .founders .fcard { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .45s ease; will-change: transform; } .js-reveal .founders .fcard { opacity: 0; } .no-js-reveal .founders .fcard { opacity: 1; } /* Avatar: subtle ring + hover pulse */ .founders .fcard .avatar { transition: box-shadow .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .founders .fcard .avatar img { transition: filter .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .tw-avatar-mono .founders .fcard .avatar img { filter: grayscale(1) contrast(1.02); } .tw-avatar-mono .founders .fcard:hover .avatar img { filter: grayscale(0); } .founders .fcard:hover .avatar { box-shadow: 0 0 0 5px var(--pf-cyan-dim); } .founders .fcard:hover .avatar img { transform: scale(1.06); } /* Role tag: reveal a hairline underline sweep on hover */ .founders .fcard .frole { position: relative; } .founders .fcard .frole::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--pf-cyan); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.7,.2,1); } .founders .fcard:hover .frole::after { transform: scaleX(1); } /* Hover variants (driven by data-card-hover on ) */ [data-card-hover="lift"] .founders .fcard:hover { transform: translateY(-6px); border-color: var(--pf-cyan-border); box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 0 1px var(--pf-cyan-border); } [data-card-hover="glow"] .founders .fcard:hover { border-color: var(--pf-cyan-border); box-shadow: 0 0 0 1px var(--pf-cyan-border), 0 12px 44px var(--pf-cyan-dim); } /* tilt handled in JS; give it a snappy origin */ [data-card-hover="tilt"] .founders .fcard { transform-style: preserve-3d; } [data-card-hover="tilt"] .founders .fcard.is-tilting { transition: box-shadow .35s ease, border-color .35s ease; } [data-card-hover="tilt"] .founders .fcard.is-tilting { border-color: var(--pf-cyan-border); box-shadow: 0 22px 60px rgba(0,0,0,.32), 0 0 0 1px var(--pf-cyan-border); } /* Cyan-band CTA: magnetic + sheen */ .band .btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), background .15s ease; will-change: transform; } /* Respect reduced motion for JS-driven auto animation, keep hover affordances */ @media (prefers-reduced-motion: reduce) { .js-reveal .founders .fcard { opacity: 1; } .founders .fcard, .founders .fcard .avatar, .founders .fcard .avatar img { transition: none; } }