/* animate skill: feedback + state changes + one-time marketing entrances.
   Reuses --ease / --ease-drawer; no dependencies, loops or scroll hijacking. */
:root{--motion-press:130ms;--motion-ui:200ms;--motion-dialog:250ms;--motion-reveal:480ms}

/* Existing native dialogs retain focus containment, Escape and no-JS fallback.
   Browsers without discrete transitions simply close immediately. */
@supports (transition-behavior:allow-discrete){
  dialog.modal,dialog.mobile-menu{opacity:0;transform:translateY(8px) scale(.96);transition:opacity var(--motion-dialog) var(--ease),transform var(--motion-dialog) var(--ease),display var(--motion-dialog) allow-discrete,overlay var(--motion-dialog) allow-discrete}
  dialog.mobile-menu{transform:translateX(100%);transition-timing-function:var(--ease-drawer)}
  dialog[open].modal,dialog[open].mobile-menu{opacity:1;transform:none}
  dialog::backdrop{opacity:0;transition:opacity var(--motion-dialog) var(--ease),display var(--motion-dialog) allow-discrete,overlay var(--motion-dialog) allow-discrete}
  dialog[open]::backdrop{opacity:1}
  @starting-style{
    dialog[open].modal{opacity:0;transform:translateY(8px) scale(.96)}
    dialog[open].mobile-menu{opacity:0;transform:translateX(100%)}
    dialog[open]::backdrop{opacity:0}
  }
}

/* A restrained first impression; all content exists and works at every frame. */
.hero-copy>h1,.hero-description,.hero-actions,.hero-caption{transition:opacity var(--motion-reveal) var(--ease),transform var(--motion-reveal) var(--ease);opacity:1;transform:none}
.hero-description{transition-delay:50ms}.hero-actions{transition-delay:100ms}.hero-caption{transition-delay:150ms}
@starting-style{
  .hero-copy>h1,.hero-description,.hero-actions,.hero-caption{opacity:0;transform:translateY(8px)}
}
[data-reveal]{transition:opacity var(--motion-reveal) var(--ease),transform var(--motion-reveal) var(--ease)}
.reveal-pending{opacity:0;transform:translateY(8px)}
.reveal-visible{opacity:1;transform:none}
.reveal-pending:focus-within{opacity:1;transform:none;transition:none}

/* Occasional quiz navigation: incoming content gets a short, legible entrance. */
.quiz-step-enter{opacity:1;transform:none;transition:opacity var(--motion-ui) var(--ease),transform var(--motion-ui) var(--ease)}
@starting-style{.quiz-step-enter{opacity:.35;transform:translateY(6px)}.quiz-step-enter[data-direction=back]{transform:translateY(-6px)}}
.quiz-progress-track{display:block;position:relative;height:4px;width:100%;margin-top:14px;overflow:hidden;background:var(--line);border-radius:5px}
.quiz-progress-fill{display:block;position:absolute;inset:0;background:var(--yellow);transform-origin:left;transition:transform var(--motion-ui) linear}
.quiz-progress progress.sr-only{position:absolute;width:1px;height:1px;margin:0;clip:rect(0,0,0,0)}

/* Fast press feedback; hover enhancements are strictly pointer-only. */
.button,.icon-button{transition:transform var(--motion-press) var(--ease),background-color 160ms ease,border-color 160ms ease}
.service-card{transition:border-color 180ms ease,opacity var(--motion-reveal) var(--ease),transform var(--motion-reveal) var(--ease)}
.service-card .image-frame img,.article-card .image-frame img{transition:transform var(--motion-ui) ease}
@media(hover:hover) and (pointer:fine){
  .service-card:hover .image-frame img,.article-card:hover .image-frame img{transform:scale(1.02)}
}
@media(max-width:1000px){.quiz-progress-track{flex:1;margin-top:0}}

/* Reduced motion keeps a gentle opacity cue; no scaling, travel or delayed text. */
@media(prefers-reduced-motion:reduce){
  .hero-copy>h1,.hero-description,.hero-actions,.hero-caption,[data-reveal]{transform:none!important;opacity:1!important;transition:none!important}
  dialog.modal,dialog.mobile-menu,.quiz-step-enter{transform:none!important;transition-property:opacity,display,overlay!important;transition-duration:140ms!important;transition-delay:0s!important}
  dialog::backdrop{transition-duration:140ms!important}
  .quiz-progress-fill{transition:none!important}
  .service-card:hover .image-frame img,.article-card:hover .image-frame img{transform:none!important}
  .faq-list summary>.icon{transition:none!important}
  @starting-style{dialog[open].modal,dialog[open].mobile-menu,.quiz-step-enter{transform:none!important}}
}
/* Keyboard interactions, including Enter/Space/Escape, are immediate. */
.keyboard-input .button:active,.keyboard-input .icon-button:active{transform:none}
.keyboard-input *, .keyboard-input *::before,.keyboard-input *::after,.keyboard-input dialog::backdrop{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
.keyboard-input .reveal-pending{opacity:1;transform:none}
@media print{[data-reveal],.hero-copy>h1,.hero-description,.hero-actions,.hero-caption{opacity:1!important;transform:none!important;transition:none!important}}