/* Small, event-driven finishing touches. No autoplay media or animation loop. */
@media(prefers-reduced-motion:no-preference) {
  body #app :is(.service-choice,.extra-choice,.home-badge,.studio-card,.accounting-period) {transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
  body #app :is(input,select,textarea) {transition:border-color .18s ease,box-shadow .18s ease}
  body #app :is(.empty,.profile-wallet-glance) {animation:seli-surface-arrive .35s ease-out both}
  body #app :is(.accounting-period,.control-fold)[open]>:not(summary) {animation:seli-surface-arrive .22s ease-out both}
  @media(hover:hover) and (pointer:fine) {
    body #app :is(.service-choice,.home-badge,.studio-card):hover {border-color:#63cddd70;box-shadow:0 8px 24px #0002,inset 0 1px #ceffff09}
    body #app .service-choice:hover {background-color:#16313b}
  }
}
@keyframes seli-surface-arrive {from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {
  body #app :is(.service-choice,.extra-choice,.home-badge,.studio-card,.accounting-period,.empty,.profile-wallet-glance,input,select,textarea),
  body #app :is(.accounting-period,.control-fold)[open]>:not(summary) {animation:none!important;transition:none!important}
}
@media (prefers-reduced-motion:no-preference) {
  .service-card,.sample-card,.visual-product,.wide-sample {
    transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
  }
  .service-art .concept-art {
    transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s;
  }
  .hero .button,.top-actions .button {
    position:relative;isolation:isolate;overflow:hidden;
  }
  .hero .button::after,.top-actions .button::after {
    content:"";position:absolute;inset:-60% auto -60% -70%;width:40%;
    background:linear-gradient(90deg,transparent,#ffffff55,transparent);
    transform:skewX(-22deg);pointer-events:none;z-index:-1;
  }
  .hero .button:focus-visible::after,.top-actions .button:focus-visible::after {
    animation:seli-light-pass .65s ease both;
  }
  .catalog-tabs button.selected {
    animation:seli-tab-select .4s ease-out;
  }
  .advantages details[open] p {animation:seli-detail-in .3s ease-out}
  .brand-intro img {animation:seli-logo-reveal 1.1s cubic-bezier(.2,.7,.3,1) both}
  .brand-intro strong {animation:seli-wordmark-reveal .8s .5s both}
  @media (hover:hover) and (pointer:fine) {
    .service-card:hover,.sample-card:hover,.visual-product:hover,.wide-sample:hover {
      transform:translateY(-5px);border-color:#39d9ed60;
      box-shadow:0 15px 32px #0005,0 0 22px #17d5ec0c;
    }
    .service-card:hover .concept-art {
      transform:translateY(-3px) scale(1.055);
      filter:drop-shadow(0 6px 14px #40ccf23d);
    }
    .hero .button:hover::after,.top-actions .button:hover::after {
      animation:seli-light-pass .65s ease both;
    }
  }
}
@keyframes seli-light-pass {to{left:145%}}
@keyframes seli-tab-select {from{box-shadow:0 0 0 4px #1ee5f32b}to{box-shadow:0 0 0 0 transparent}}
@keyframes seli-detail-in {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes seli-logo-reveal {
  from{opacity:0;transform:translateY(14px) scale(.88);filter:drop-shadow(0 0 0 #10d9ef00)}
  to{opacity:1;transform:none;filter:drop-shadow(0 0 26px #10d9ef65)}
}
@keyframes seli-wordmark-reveal {
  from{opacity:0;letter-spacing:.35em;transform:translateY(8px)}
  to{opacity:1;letter-spacing:.2em;transform:none}
}
@media (prefers-reduced-motion:reduce) {
  .service-card,.sample-card,.visual-product,.wide-sample,.concept-art{transform:none!important}
}
/* Panel polish: short reactions to an action, never a new animation loop. */
@media (prefers-reduced-motion:no-preference) {
  body #app :is(.member-nav a,.profile-hub-nav a,.admin-category-tabs button,.admin-nav-groups button) {
    transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  }
  body #app .member-nav a.selected>.nav-icon,
  body #app .profile-hub-nav a.selected>span[aria-hidden=true],
  body #app .admin-category-tabs button[aria-expanded=true]>.nav-icon {
    animation:seli-panel-mark .24s cubic-bezier(.2,.7,.3,1) both;
  }
  body #app .profile-hub :is(details.box,.personal-settings)[open]>:not(summary),
  body #app .control-fold[open]>:not(summary) {
    animation:seli-panel-detail .2s ease-out both;
  }
  body #app .profile-hub :is(.studio-card,details.box,.personal-settings)>summary,
  body #app .profile-hub .studio-card {
    transition:border-color .18s ease,background-color .18s ease,color .18s ease;
  }
  @media (hover:hover) and (pointer:fine) {
    body #app .profile-hub :is(details.box,.personal-settings)>summary:hover,
    body #app .control-fold>summary:hover {color:#a9edf6}
  }
}
@keyframes seli-panel-mark {from{opacity:.6;transform:translateY(2px) scale(.94)}to{opacity:1;transform:none}}
@keyframes seli-panel-detail {from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce) {
  body #app :is(.member-nav a,.profile-hub-nav a,.admin-category-tabs button,.admin-nav-groups button),
  body #app .member-nav .nav-icon,
  body #app .profile-hub-nav a>span[aria-hidden=true],
  body #app .admin-category-tabs .nav-icon,
  body #app .profile-hub :is(.studio-card,details.box,.personal-settings)>summary,
  body #app .profile-hub .studio-card,
  body #app .profile-hub :is(details.box,.personal-settings)>:not(summary),
  body #app .control-fold>:not(summary) {animation:none!important;transition:none!important;transform:none!important}
}