/* Shared motion: presentation only; never delay an action or change layout. */
:root{--motion-fast:160ms;--motion-enter:220ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
:where(button,a[href],summary,[role="button"]){transition:opacity var(--motion-fast) ease-out}
:where(button,a[href],summary,[role="button"]):not(:disabled):not([aria-disabled="true"]):active{opacity:.8}
:is(button,a[href],summary,[role="button"]):focus-visible{outline:2px solid #146c68;outline-offset:3px}
:is(.btn,.icon-button,.text-link,.tab,.app-nav-link,.organisation-navigation a,.student-card,.payment-menu-action,.calendar-event,.desktop-month-event,.month-day,.slot){transition:opacity var(--motion-fast) ease-out,scale var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out}
@media(hover:hover) and (pointer:fine){
    :is(.btn,.icon-button,.student-card,.payment-menu-action):not(:disabled):not([aria-disabled="true"]):hover{scale:1.008}
    :is(.calendar-event,.desktop-month-event,.month-day,.slot):not(:disabled):hover{opacity:.88}
}
:is(.calendar-event,.desktop-month-event,.month-day,.slot):not(:disabled):active{opacity:.75}
:is(.btn,.icon-button,.text-link,.tab,.app-nav-link,.organisation-navigation a,.student-card,.payment-menu-action):not(:disabled):not([aria-disabled="true"]):active{scale:.99}
button:disabled,[aria-disabled="true"]{scale:1}

@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ui-menu-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ui-panel-in{from{opacity:.5;transform:translateX(24px)}to{opacity:1;transform:none}}
.auth-card{animation:ui-fade-in var(--motion-enter) var(--motion-ease)}
:is(.app-date-picker,.address-suggestions:not([hidden]),[role="tooltip"],.marker-picker[open] .marker-presets){animation:ui-menu-in var(--motion-fast) var(--motion-ease)}
:is(.upcoming,.month-course)[open]>.course-actions{animation:ui-menu-in var(--motion-fast) var(--motion-ease)}
#lesson-panel{animation:ui-fade-in var(--motion-enter) var(--motion-ease)}
@media(min-width:761px){#lesson-panel{animation-name:ui-panel-in}}
/* Background refreshes must not fade the whole workspace. */
.interpreting,.boot-message{animation:ui-fade-in var(--motion-enter) var(--motion-ease)}
#toast,#notice,#admin-notice{transition:opacity var(--motion-fast) ease-out,transform var(--motion-enter) var(--motion-ease)}
/* The old waveform changed height every frame. Keep its dimensions stable. */
@keyframes wave{to{transform:scaleY(.34)}}
.teacher-main .card.profile-highlight{animation:ui-fade-in var(--motion-enter) var(--motion-ease)}

/* Native dialog lifecycle and focus management stay synchronous. Unsupported
   browsers retain their existing opening animation and immediate dismissal. */
@supports (transition-behavior:allow-discrete){
    dialog{
        animation:none!important;
        opacity:0;transform:translateY(8px);
        transition:opacity var(--motion-fast) ease-out,transform var(--motion-enter) var(--motion-ease),display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete;
    }
    dialog[open]{opacity:1;transform:none;animation:none!important}
    dialog:not([open]),dialog:not([open])::backdrop{pointer-events:none}
    dialog::backdrop{opacity:0;transition:opacity var(--motion-fast) ease-out,display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
    dialog[open]::backdrop{opacity:1}
    @starting-style{
        dialog[open]{opacity:0;transform:translateY(8px)}
        dialog[open]::backdrop{opacity:0}
    }
    @media(min-width:761px){
        dialog[data-presentation="drawer"]{transform:translateX(24px)}
        dialog[data-presentation="drawer"][open]{transform:none}
        @starting-style{dialog[data-presentation="drawer"][open]{transform:translateX(24px)}}
    }
    @media(max-width:760px){
        dialog[data-presentation],dialog.availability-editor{transform:translateY(20px)}
        dialog[data-presentation][open],dialog.availability-editor[open]{transform:none}
        @starting-style{dialog[data-presentation][open],dialog.availability-editor[open]{transform:translateY(20px)}}
    }
}
/* Disable CSS motion, including older effects and pseudo-elements, throughout
   the app when requested. Keyboard focus remains clearly visible. */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    :is(button,a[href],summary,[role="button"]){scale:1!important}
}