/* Brand palette: 300 preserves Carmen's original signature green. */
:root{
 --accent-50:#f5fff0;--accent-100:#eaffdf;--accent-200:#cefcb5;--accent-300:#a0fb82;--accent-400:#6fe74d;--accent-500:#44cc29;--accent-600:#2fa41c;--accent-700:#287d1d;--accent-800:#24631c;--accent-900:#1d501a;
 --accent:var(--accent-300);--focus:var(--accent-700);--hover:var(--accent-700);--panel-hover:var(--accent-100);--interactive-pressed:var(--accent-200);--interactive-border:var(--accent-600);
 --motion-fast:150ms;--motion-standard:250ms;--motion-enter:500ms;--motion-stagger:80ms;
 --ease-standard:cubic-bezier(.22,1,.36,1);--ease-feedback:cubic-bezier(.2,0,0,1);
 --feedback-shadow:0 8px 20px #20351b14;
}
:root[data-theme=dark]{--accent:var(--accent-300);--focus:var(--accent-300);--hover:var(--accent-200);--panel-hover:color-mix(in srgb,var(--accent-900) 35%,var(--panel));--interactive-pressed:color-mix(in srgb,var(--accent-800) 50%,var(--panel));--interactive-border:var(--accent-400);--feedback-shadow:0 8px 20px #0004}
/* Feedback uses scale, leaving positioning and existing transforms intact. */
.icon-control,.pill,.model-load-button,.resume-bubble a{
 transition:background-color var(--motion-fast) var(--ease-feedback),border-color var(--motion-fast) var(--ease-feedback),color var(--motion-fast) var(--ease-feedback),scale var(--motion-fast) var(--ease-feedback)!important;
}
.site-header nav>a,.contact-email,.case-visit,.experience-timeline summary{transition:color var(--motion-fast) var(--ease-feedback),background-color var(--motion-fast) var(--ease-feedback)}
.contact-resume-icon,footer .footer-actions>:before{transition:background-color var(--motion-fast) var(--ease-feedback),border-color var(--motion-fast) var(--ease-feedback)}
:is(button,a,summary):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.icon-control:focus-visible{outline-color:var(--focus)}
.experience-timeline summary:focus-visible{outline-offset:-4px}
:is(.pill,.model-load-button,.resume-bubble a):active{scale:.97;background:var(--interactive-pressed)}
.icon-control:not(:disabled):active{scale:.94;background:var(--interactive-pressed)}
.project-card,.case-card{transition:transform var(--motion-standard) var(--ease-standard),scale var(--motion-fast) var(--ease-feedback),box-shadow var(--motion-standard) var(--ease-standard),border-color var(--motion-fast) var(--ease-feedback)}
.project-card img{transition:scale var(--motion-standard) var(--ease-standard)}
.project-arrow{transition:translate var(--motion-standard) var(--ease-standard)}
.project-card:active,.case-card:active{scale:.99}
.experience-timeline details{transition:border-color var(--motion-standard) var(--ease-standard),box-shadow var(--motion-standard) var(--ease-standard)}
.experience-timeline details[data-expanded=true]{border-color:var(--interactive-border)}
.experience-disclosure:before,.experience-disclosure:after{transition:transform var(--motion-standard) var(--ease-standard),opacity var(--motion-standard) var(--ease-standard)}
.site-header nav>a:after{transition:opacity var(--motion-fast) var(--ease-feedback),translate var(--motion-fast) var(--ease-feedback)}
.character-reaction{transition:opacity var(--motion-standard) var(--ease-standard),translate var(--motion-standard) var(--ease-standard)}
@media(hover:hover) and (pointer:fine){
 .pill:hover,.model-load-button:hover{background:var(--panel-hover);border-color:var(--interactive-border)}
 .icon-control:not(:disabled):hover{border-color:var(--interactive-border)}
 .case-card:hover{transform:translateY(-3px);border-color:var(--interactive-border);box-shadow:var(--feedback-shadow)}
 .project-card:hover{transform:perspective(850px) translateY(-3px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:var(--feedback-shadow)}
 .project-card:hover img{scale:1.025}
}
@media(hover:none),(pointer:coarse){.case-card:hover,.project-card:hover{transform:none;box-shadow:none}.project-card:hover img{scale:1}.project-card:hover .project-arrow{translate:none}}
/* Keep the mobile footer's 36px circle within its 44px touch target. */
@media(max-width:760px){footer .footer-actions>.icon-control:active{background:transparent}footer .footer-actions>.icon-control:active:before{background:var(--interactive-pressed)}}
.motion-paused :is(.icon-control,.pill,.model-load-button,.case-card,.project-card,.project-card img,.project-arrow,.experience-disclosure:before,.experience-disclosure:after){transition:none!important}
.motion-paused :is(.case-card,.project-card):hover{transform:none}.motion-paused .project-card:hover img{scale:1}
@media(prefers-reduced-motion:reduce){
 :is(.icon-control,.pill,.model-load-button,.case-card,.project-card,.project-card img,.project-arrow,.experience-disclosure:before,.experience-disclosure:after){transition:none!important}
 :is(.case-card,.project-card):hover{transform:none}.project-card:hover img{scale:1}
 :is(.icon-control,.pill,.model-load-button,.case-card,.project-card):active{scale:1!important}
}

/* An opaque preview covers the ready renderer, avoiding a double-opacity dip. */
.hero-model.character-model{transition:none}
.hero-avatar.hero-preview{z-index:6;transition:opacity 500ms var(--ease-standard);pointer-events:none}
.hero-avatar.hero-preview.preview-dismissed{transition:opacity 500ms var(--ease-standard),visibility 0s 500ms}
@media(prefers-reduced-motion:reduce){.hero-avatar.hero-preview,.hero-avatar.hero-preview.preview-dismissed{transition:none}}