/* Brief, event-driven feedback only. Questions, recordings and portrait never animate. */
.btn,.editorial-home .primary,.menu,.lang button,.footer-contacts a,
.bottom-nav a,.bottom-nav button,.editorial-home .goal-options button{
 transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease,transform 200ms ease;
}
.btn:not(:disabled):active,.editorial-home .primary:not(:disabled):active,.menu:not(:disabled):active,.lang button:not(:disabled):active,
.footer-contacts a:not(:disabled):active,.bottom-nav a:not(:disabled):active,.bottom-nav button:not(:disabled):active,
.editorial-home .goal-options button:not(:disabled):active{transform:scale(.95)}
.btn:not(:disabled):active,.editorial-home .primary:not(:disabled):active{background-color:#102f25}
.btn.secondary:not(:disabled):active{background-color:var(--editorial-soft);color:var(--green)}
.bottom-nav a,.bottom-nav button{position:relative}
.bottom-nav a::after,.bottom-nav button::after{
 content:"";position:absolute;bottom:2px;left:calc(50% - 8px);width:16px;height:2px;
 border-radius:2px;background:currentColor;opacity:0;transform:scaleX(.45);
 transition:opacity 220ms ease,transform 220ms ease;
}
.bottom-nav [aria-current=page]::after,.bottom-nav button[aria-expanded=true]::after{opacity:1;transform:scaleX(1)}
#nav.open{animation:yh-menu-enter 240ms ease-out both}
.course-faq details[open]>p,.dark .steps details[open]>p,.resource details[open]>p{animation:yh-soft-reveal 220ms ease-out both}
.course-faq .faq-toggle{transition:transform 220ms ease,color 220ms ease}
.course-faq details[open] .faq-toggle{transform:rotate(45deg)}
.path,.resource,.diag-test{animation:yh-soft-reveal 240ms ease-out both}
@keyframes yh-menu-enter{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes yh-soft-reveal{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .editorial-home .primary:hover,.btn:hover,.btn:not(:disabled):active,.editorial-home .primary:not(:disabled):active,.menu:not(:disabled):active,.lang button:not(:disabled):active,
 .footer-contacts a:not(:disabled):active,.bottom-nav a:not(:disabled):active,.bottom-nav button:not(:disabled):active,
 .editorial-home .goal-options button:not(:disabled):active,.course-faq details[open] .faq-toggle{transform:none}
 .bottom-nav a::after,.bottom-nav button::after{transform:none}
}

/* The navigation container persists across route changes; its marker has a prior state to animate from. */
@media(max-width:760px){
 .bottom-nav::before{content:"";position:absolute;left:calc(12.5% - 10px);top:4px;width:20px;height:3px;border-radius:2px;background:var(--green);transform:translateX(calc(var(--active-slot,0) * 25vw));transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
 .bottom-nav a::after,.bottom-nav button::after{content:none}
}
.tap-feedback{animation:yh-tap-feedback 240ms ease-out}
@keyframes yh-tap-feedback{0%{transform:scale(.95)}55%{transform:scale(.975)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
 .tap-feedback{animation:none!important;transform:none!important}
 .bottom-nav::before{transition:none!important}
}

.bottom-nav[data-active-slot="0"]{--active-slot:0}.bottom-nav[data-active-slot="1"]{--active-slot:1}.bottom-nav[data-active-slot="2"]{--active-slot:2}.bottom-nav[data-active-slot="3"]{--active-slot:3}
.bottom-nav:has(button[aria-expanded=true]){--active-slot:3}