/* Each surface has its own behavior; reading and playback never depend on motion. */
:root{--spring:cubic-bezier(.22,1,.36,1);--glide:cubic-bezier(.16,1,.3,1)}
body,.about-section,.why-section{transition:background-color .55s ease,color .4s ease}
.wordmark{display:inline-block;transition:letter-spacing .5s var(--spring)}
.wordmark span{display:inline-block;transform-origin:50% 80%;transition:transform .65s var(--spring)}
.wordmark:hover,.wordmark:focus-visible{letter-spacing:-.035em}
.wordmark:hover span,.wordmark:focus-visible span{transform:scale(1.7)}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--spring)}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.theme-toggle{transition:rotate .7s var(--spring),background-color .3s,border-color .3s}
.theme-toggle:hover{rotate:90deg}.theme-toggle[aria-pressed=true]{rotate:180deg}.theme-toggle[aria-pressed=true]:hover{rotate:270deg}
/* The name stretches like expressive type, rather than lifting the whole heading. */
.hero h1 em,h2 em{display:inline-block;transform-origin:left center;transition:transform .7s var(--spring),color .4s,letter-spacing .7s var(--spring)}
.hero h1:hover em{transform:scaleX(1.045) skewX(-4deg);letter-spacing:-.045em}
h2:hover em{color:var(--accent)}
/* Photos: the frame stays fixed while a small lens follows the pointer inside it. */
.portrait-frame,.portrait-collage figure{position:relative;isolation:isolate;transform:none}
.portrait-frame::after,.portrait-collage figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 170px at var(--light-x,50%) var(--light-y,45%),#fff9,transparent 85%);opacity:0;mix-blend-mode:soft-light;transition:opacity .5s}
.portrait-frame img,.portrait-collage img{transform-origin:var(--light-x,50%) var(--light-y,50%);transition:transform .9s var(--glide),filter .65s ease}
.portrait-frame.is-pointed::after,.portrait-collage figure.is-pointed::after,.portrait-frame.is-touched::after,.portrait-collage figure.is-touched::after{opacity:.65}
.portrait-frame.is-pointed img,.portrait-collage figure.is-pointed img,.portrait-frame.is-touched img,.portrait-collage figure.is-touched img{transform:scale(1.09);filter:saturate(1.08) contrast(1.025)}
/* Videos: camera focus brackets close around the frame. Controls never move. */
.video-shell,.intro-media{position:relative;isolation:isolate}
.video-shell::after,.intro-media::after{content:"";position:absolute;inset:-7px;pointer-events:none;border-radius:12px;background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;background-repeat:no-repeat;background-size:0 2px,2px 0,0 2px,2px 0,0 2px,2px 0,0 2px,2px 0;opacity:0;transform:scale(1.035);transition:background-size .45s var(--spring),transform .55s var(--spring),opacity .25s}
.project-card:is(:hover,:focus-within,.is-playing) .video-shell::after,.intro-media:is(:hover,:focus-within)::after{background-size:24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px;opacity:1;transform:scale(1)}
.inline-video{transition:outline-color .3s;outline:1px solid transparent;outline-offset:4px}
.project-card{transform:none}.project-meta h3{display:inline-block;position:relative;transition:color .3s}
.project-meta h3::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--glide)}
.project-card:is(:hover,:focus-within,.is-playing) .project-meta h3{color:var(--accent)}
.project-card:is(:hover,:focus-within,.is-playing) .project-meta h3::after{transform:scaleX(1)}
.project-card.is-playing .inline-video{outline-color:var(--line)}
/* Testimonials: a marker sweeps under the words and a paper corner folds in. */
.testimonial{position:relative;isolation:isolate;overflow:hidden;transition:background-color .4s}
.testimonial::after{content:"";position:absolute;top:0;right:0;width:33px;height:33px;pointer-events:none;background:linear-gradient(225deg,var(--green) 47%,#24272022 49%,var(--testimonial-paper) 56%);transform:scale(0);transform-origin:100% 0;transition:transform .55s var(--spring)}
.quote-ink{background-image:linear-gradient(transparent 57%,#e8bd5670 57%,#e8bd5670 93%,transparent 93%);background-repeat:no-repeat;background-size:0 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-size .8s var(--glide)}
.testimonial:is(:hover,:focus-within,.is-touched) .quote-ink{background-size:100% 100%}
.testimonial:is(:hover,:focus-within,.is-touched)::after{transform:scale(1)}
/* Social links: two layers roll through a fixed window, like a small split-flap sign. */
.hero-socials a,.social-links a{position:relative;transition:color .3s}
.link-roll{position:relative;display:inline-grid;overflow:hidden;vertical-align:middle;line-height:1.65}
.link-roll>span{grid-area:1/1;transition:transform .6s var(--spring),opacity .35s}
.link-roll .roll-next{transform:translateY(115%) rotate(5deg);transform-origin:left;color:var(--accent)}
.social-links .roll-next{color:var(--yellow)}
:is(.hero-socials,.social-links) a:is(:hover,:focus-visible) .roll-current{transform:translateY(-115%) rotate(-5deg);opacity:0}
:is(.hero-socials,.social-links) a:is(:hover,:focus-visible) .roll-next{transform:translateY(0) rotate(0)}
.social-links .link-roll,.social-links .link-roll span{font-size:inherit;color:inherit;line-height:1.65;margin:0}
.social-links .link-roll .roll-next{color:var(--yellow)}
/* Reasons: a rule draws across the column, leaving text stationary. */
.why-points article{position:relative}
.why-points article::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--glide)}
.why-points h3{transition:color .35s}
.why-points article:hover::before{transform:scaleX(1)}
.why-points article:hover h3{color:var(--accent)}
/* Contact: the arrow launches and comes back; the copy button fills with ink. */
.hero-email,.email-link{position:relative;transition:color .3s}
.hero-email::after,.email-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--glide)}
.hero-email:is(:hover,:focus-visible)::after,.email-link:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.hero-email span,.email-link span{display:inline-block}
.hero-email:is(:hover,:focus-visible) span,.email-link:is(:hover,:focus-visible) span{animation:arrow-launch .65s var(--spring)}
@keyframes arrow-launch{0%,100%{transform:translate(0,0);opacity:1}45%{transform:translate(9px,-9px);opacity:0}46%{transform:translate(-7px,7px);opacity:0}}
.copy-row button{position:relative;isolation:isolate;overflow:hidden;transition:color .3s,border-color .3s}
.copy-row button::before{content:"";position:absolute;inset:0;background:var(--yellow);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring)}
.copy-row button:is(:hover,:focus-visible){color:#242720;border-color:var(--yellow)}
.copy-row button:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.copy-row button:active{transform:scale(.97)}
@media(hover:none){a:active{color:var(--accent)}.contact-section a:active{color:var(--yellow)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .wordmark,.wordmark span,.theme-toggle,.hero h1 em,h2 em,.portrait-frame,.portrait-collage figure,.portrait-frame img,.portrait-collage img,.project-card,.testimonial,.hero-email span,.email-link span,.copy-row button{transform:none!important;translate:none!important;rotate:none!important}
  .link-roll .roll-current{transform:none!important;opacity:1!important}.link-roll .roll-next{opacity:0!important}
  :is(.hero-socials,.social-links) a:is(:hover,:focus-visible){color:var(--accent)}.social-links a:is(:hover,:focus-visible){color:var(--yellow)}
  .video-shell::after,.intro-media::after{transform:none!important}
}