/* About page (2026-10-06): letter-by-letter headline, rolling links, a label that follows the cursor over photos.
   Ideas taken from mariajoaoabrantes.work, kept light: no WebGL, no video, only transform/opacity. */
.ab-hero{padding-block:clamp(2.5rem,6vw,5rem);border-bottom:1px solid var(--line)}
.ab-hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
.ab-h{font-size:clamp(2.8rem,7vw,6.2rem);font-weight:800;letter-spacing:-.035em;font-stretch:112%;line-height:1;margin:0 0 1.2rem}
.ab-lede{max-width:34rem;font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--muted);margin:0}
.ab-mark{max-width:24rem;justify-self:center}
@media (min-width:56rem){
  .ab-hero{min-height:calc(100svh - 4.5rem);display:flex;align-items:center}
  .ab-hero-grid{width:100%;grid-template-columns:7fr 4fr}
}
.ab-stats{grid-template-columns:1fr}
@media (min-width:40rem){.ab-stats.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:56rem){.ab-stats.stats{grid-template-columns:repeat(4,1fr)}}
.ab-story{max-width:52rem}
.ab-story .lead{margin-top:1rem}

/* 1. letter-by-letter headline: each letter rises in, one after another (set up by about.js) */
.ab-h .ch{display:inline-block;opacity:0;transform:translateY(.45em);animation:ab-in .55s var(--ease) forwards}
.ab-h .ws{white-space:nowrap}
@keyframes ab-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ab-h .ch{animation:none;opacity:1;transform:none}}

/* 2. rolling links: on hover the words slide up and a copy rolls in from below */
.roll-t,.nav a .roll-t{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.25}
.roll-t>span{display:block;transition:transform .35s var(--ease)}
.roll-t>span+span{position:absolute;left:0;top:100%}
a:hover>.roll-t>span,a:focus-visible>.roll-t>span{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.roll-t>span{transition:none}}

/* 3. photos of the works, with a label that follows the mouse */
.works{display:grid;grid-template-columns:1fr;gap:1rem;margin:2.5rem 0 0;padding:0;list-style:none}
@media (min-width:36rem){.works{grid-template-columns:repeat(2,1fr)}}
@media (min-width:56rem){.works{grid-template-columns:repeat(3,1fr)}}
.work{position:relative;display:block;aspect-ratio:3/2;border-radius:var(--btn-radius);overflow:hidden;background:#000;color:#fff;text-decoration:none}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .3s}
.work:hover img{transform:scale(1.04)}
.work-name{position:absolute;left:.75rem;bottom:.75rem;padding:.35rem .7rem;border-radius:var(--btn-radius);background:rgba(255,255,255,.94);color:var(--ink);font:700 .95rem var(--display);font-stretch:112%}
.work .shield{display:none}
.works-more{margin:2rem 0 0}
.cursor-label{position:fixed;left:0;top:0;z-index:80;pointer-events:none;padding:.5rem .85rem;border-radius:999px;background:var(--teal);color:#fff;font:700 .85rem var(--display);font-stretch:112%;white-space:nowrap;box-shadow:0 0 0 6px rgba(15,118,110,.14),0 8px 24px rgba(0,0,0,.18);opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .2s,transform .2s var(--ease)}
.cursor-label.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.cursor-label{display:none}}