/* GradientText: muted violet, plum and blue; slow 14-second yoyo motion, adapted from React Bits. */
.name-gradient-border{display:inline-flex;position:relative;padding:0;background:none;border:0;box-shadow:none;line-height:1.05}
.name-gradient-border .gradient-name{background:linear-gradient(to right,#53427f,#855078,#426685,#53427f);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradient-text-slide 14s ease-in-out infinite alternate;padding-right:.04em}
.hero h1 .gradient-name{font-weight:620;font-variation-settings:'wght' 620,'wdth' 100;letter-spacing:-.025em}
.hero .avatar-window{top:0}
@keyframes gradient-text-slide{from{background-position:0% 50%}to{background-position:100% 50%}}
.discipline-cycle{display:grid;min-width:145px;text-align:center}.discipline-label{grid-area:1/1;opacity:0;transform:translateY(5px);transition:opacity 220ms ease-out,transform 220ms ease-out;white-space:nowrap}.discipline-label.is-current{opacity:1;transform:none}.tag-motion{min-width:205px;justify-content:center}
.hero .tag-motion{top:calc(50% + 11px);bottom:auto;left:0}
.project-art.real-project{padding:0;line-height:0;background:#171923}.project-art.real-project>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;mix-blend-mode:normal;transition:transform 500ms cubic-bezier(.2,.8,.2,1),filter 500ms ease}.project-art.real-project:hover>img{transform:scale(1.04);filter:saturate(1.08)}.project-art.real-project:after{background:linear-gradient(135deg,#ffffff10,transparent 42%,#18142936);opacity:1}
.project-placeholder{padding:0;border:0;overflow:hidden;isolation:isolate;color:#fff}.project-placeholder:before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(circle at 24% 22%,#fff7 0 3%,transparent 3.5%),radial-gradient(circle at 74% 62%,#ffdbb9 0 15%,transparent 15.5%),linear-gradient(135deg,#8cccdc,#b996e3 52%,#f5b690);transform:rotate(-9deg);transition:transform 650ms cubic-bezier(.2,.8,.2,1)}.project-placeholder:hover:before{transform:rotate(0) scale(1.1)}.project-placeholder.marcela-marques:before{background:radial-gradient(ellipse at 34% 40%,#f8e3d4 0 16%,transparent 16.5%),radial-gradient(circle at 74% 26%,#c9a9e7 0 20%,transparent 20.5%),linear-gradient(135deg,#3d566e,#7298a9 48%,#e8afc0)}.placeholder-title,.placeholder-subtitle{position:absolute;z-index:1;left:clamp(18px,2vw,28px);right:18px;text-align:left}.placeholder-title{top:45%;font-size:clamp(30px,3.8vw,57px);font-weight:700;letter-spacing:-.07em;line-height:.9}.placeholder-subtitle{bottom:18px;font:10px 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
@media(min-width:901px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 20px}.project-caption{padding-top:14px}.project-caption h3{font-size:17px}}
.dialog-body .project-card{max-width:640px;margin:0 auto 30px}.dialog-body .project-art{max-width:640px;aspect-ratio:1.5;margin-inline:auto}.dialog-body>.lead{max-width:640px;margin:0 auto!important}.dialog-body>.btn{display:inline-flex;margin:30px max(0px,calc((100% - 640px)/2)) 6px}
@media(max-width:700px){.dialog-body .project-art{aspect-ratio:1.28}.dialog-body>.btn{margin-top:24px}}
@media(max-width:580px){.hero .avatar-stage{margin-top:52px}}
.about .about-grid{grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);gap:clamp(40px,7vw,110px);align-items:center;margin-top:38px;max-width:1120px;margin-inline:auto}
.about-portrait{display:flex;justify-content:center}.about .portrait-slot{width:100%;max-width:345px;margin:0;padding:14px;border-radius:30px;transform:rotate(-2deg)}.about .portrait-frame{aspect-ratio:4/5}.about-copy h2{margin:0;font-size:clamp(42px,4.5vw,66px)}.about-copy .lead{margin:24px 0 18px;font-size:22px;line-height:1.45}.about-copy>p{max-width:510px}.about-copy .skill-tags{margin-top:25px}
dialog.dialog.intro.intro-sequenced{opacity:1;transition:opacity 700ms cubic-bezier(.23,1,.32,1)}
dialog.dialog.intro.intro-exiting{opacity:0;pointer-events:none}
.intro-sequenced::backdrop{transition:opacity 700ms cubic-bezier(.23,1,.32,1)}.intro-exiting::backdrop{opacity:0}
.intro-exiting .intro-copy h2{opacity:0;transform:translateY(-8px);filter:blur(2px);transition:opacity 450ms ease-out,transform 650ms ease-out,filter 450ms ease-out}
@media(max-width:650px){.about .about-grid{grid-template-columns:1fr;gap:32px;margin-top:25px}.about .portrait-slot{max-width:275px}.about-copy h2{font-size:44px}.about-copy .lead{font-size:21px}.hero h1 em{gap:16px}}
@media(max-width:800px){.hero .tag-motion{top:calc(58% + 14px);left:0}}
@media(max-width:800px){.hero .avatar-window{top:0}}
@media(prefers-reduced-motion:reduce){.name-gradient-border:before,.name-gradient-border .gradient-name{animation:none;background-position:48% 50%}dialog.dialog.intro.intro-sequenced,.intro-sequenced::backdrop{transition-duration:150ms}.intro-exiting .intro-copy h2{transform:none;filter:none}}
@media(max-width:580px){.tag-motion{min-width:180px}.discipline-cycle{min-width:120px}.name-gradient-border{padding-inline:0}h1 em{gap:10px}}
@media(prefers-reduced-motion:reduce){.discipline-label{transition:none;transform:none}}

/* Separate the hero capsules vertically around the avatar. */
.hero .tag-motion{translate:0 -20px}
.hero .avatar-sticker{translate:0 20px}
/* Keep the skills capsule above the face across hero sizes. */
.hero .tag-motion{top:22%;bottom:auto;left:0;translate:0 -20px}