/* Motion direction: open the canvas, compose the scenes, settle for reading. */
.home-page{--motion-ease:cubic-bezier(.22,.61,.36,1)}
#inicio .piece{transform:translate(var(--spread-x,0px),var(--spread-y,0px))}
#inicio .mood:hover,#inicio .folder:hover{transform:translate(var(--spread-x,0px),var(--spread-y,0px))}
#inicio .mood img{transition:transform 220ms var(--motion-ease)}
#inicio .mood>span:last-child{display:block;transition:opacity 200ms ease;color:var(--muted)}
#inicio.nature .mood>span:last-child{color:#fff;text-shadow:0 1px 3px #0009}
#inicio .folder .folder-icon{transition:transform 220ms var(--motion-ease)}
.project-art.has-image{overflow:hidden}
.project-art.has-image img,.case-cta .action-icon{transition:transform 220ms var(--motion-ease)}
.experiment-tile{position:relative;transition:transform 220ms var(--motion-ease)}
.experiment-tile strong{position:absolute;width:auto;height:auto;clip:auto;clip-path:none;left:8px;right:8px;bottom:8px;padding:5px 7px;background:#ffffffe6;color:var(--ink);font:400 12px/1.3 var(--font);white-space:normal;opacity:0;transition:opacity 200ms}
.experiment-tile:focus-visible{transform:translateY(-4px)}
.experiment-tile:focus-visible strong{opacity:1}
#inicio .mood:focus-visible img{transform:translateY(-4px)}
@media(hover:hover) and (pointer:fine){
 #inicio .mood:hover img{transform:translateY(-4px)}
 #inicio .folder:hover .folder-icon{transform:translateY(-4px) scale(1.03)}
 .project-feature:hover .project-art.has-image img{transform:scale(1.025)}
 .project-feature:hover .case-cta .action-icon{transform:translateX(3px)}
 .experiment-tile:hover{transform:translateY(-4px)}
 .experiment-tile:hover strong{opacity:1}
}
.contact-main h2{display:flex;align-items:center;gap:clamp(24px,3vw,44px);position:relative}
.contact-flower{width:clamp(40px,5vw,68px);height:auto;flex:none;pointer-events:none}
.contact-title-link{position:relative}


@media(max-width:700px){.contact-main h2{gap:24px}.contact-flower{width:40px}.experiment-tile strong{opacity:1}#inicio .mood>span:last-child{font-size:9px}}
@media(max-width:360px){.contact-main h2{gap:12px;font-size:57px}.contact-flower{width:28px}}
@media(prefers-reduced-motion:reduce){
 #inicio .piece,#inicio .mood:hover,#inicio .folder:hover{transform:none!important}
 #inicio .mood img,#inicio .folder .folder-icon,.project-art.has-image img,.case-cta .action-icon,.experiment-tile{transform:none!important;transition:none!important}
 
}

/* Contact keeps its flower in the pointer, leaving the title uncluttered. */

#contacto .contact-main{gap:32px;flex-wrap:wrap}
#contacto .contact-links>a{overflow-wrap:anywhere;max-width:100%}
#contacto .contact-links .action-icon{flex-shrink:0}
@media(min-width:701px){#inicio .hero-title{z-index:3}}

#contacto .contact-title-link:hover,#contacto .contact-title-link:focus-visible{color:#809ED2;text-decoration:none}

.carryon-placeholder{position:relative;isolation:isolate;background:transparent}
.carryon-placeholder::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--surface);clip-path:inset(0 var(--carryon-inset,0%))}
.carryon-placeholder>.project-overline,.carryon-placeholder>figcaption{opacity:var(--carryon-label-opacity,1)}
@media(prefers-reduced-motion:reduce){.carryon-placeholder::before{clip-path:none}.carryon-placeholder>.project-overline,.carryon-placeholder>figcaption{opacity:1}}

/* Same overlapping chapters as About: native scroll, no pinning timeline. */
.home-page .projects-section{overflow:visible}
.projects-chapter,.watching-chapter{position:sticky;top:var(--chapter-top,82px);background:var(--paper);isolation:isolate}
.projects-chapter{z-index:1;padding-bottom:32px}
.watching-chapter{z-index:2;padding:32px 0 24px;border-radius:28px 28px 0 0;box-shadow:0 -15px 40px #20211f05}
.watching-chapter .people-watching{margin-top:0}
.projects-section>.ai-experiments{position:relative;z-index:3;border-radius:28px 28px 0 0;box-shadow:0 -15px 40px #20211f05;background-color:var(--paper)}
@media(prefers-reduced-motion:reduce){.projects-chapter,.watching-chapter{position:relative;top:auto}}