/*
 * Dreamloud Portal Motion System
 * Shared timing tokens for public dialogs and portal feedback. Portal motion is
 * deliberately functional: state, feedback and orientation before decoration.
 */
:root{
  --dl-motion-instant:80ms;
  --dl-motion-fast:110ms;
  --dl-motion-base:160ms;
  --dl-motion-slow:190ms;
  --dl-motion-emphasis:230ms;
  --dl-ease-standard:cubic-bezier(.2,.8,.2,1);
  --dl-ease-enter:cubic-bezier(.16,1,.3,1);
  --dl-ease-exit:cubic-bezier(.4,0,1,1);
}

/* Public integration feedback. */
.dlp-header-link,
.dlp-site-links :is(a,button),
.dlp-public-dialog :is(a,button){
  transition:
    background-color var(--dl-motion-fast) var(--dl-ease-standard),
    color var(--dl-motion-fast) var(--dl-ease-standard),
    border-color var(--dl-motion-fast) var(--dl-ease-standard);
}
.dlp-teaser{
  transition:transform var(--dl-motion-fast) var(--dl-ease-standard);
}
.dlp-teaser:is(:hover,:focus-visible){transform:translateY(-1px)}

/* Portal micro-interactions: avoid whole-card scaling and keep movement small. */
.dlp :is(button,.dlp-button,.dlp-tabs a,.dlp-progress-step a,.dlp-list-row){
  transition:
    background-color var(--dl-motion-fast) var(--dl-ease-standard),
    color var(--dl-motion-fast) var(--dl-ease-standard),
    border-color var(--dl-motion-fast) var(--dl-ease-standard),
    opacity var(--dl-motion-fast) var(--dl-ease-standard);
}
/* Generic form handoff feedback for normal POST forms. */
.dlp form.dlp-is-submitting{cursor:progress}
.dlp form.dlp-is-submitting [data-dlp-submit-active]{
  opacity:.72;
  pointer-events:none;
}

/* Signature / WebAuthn / OTP processing. */
.dlp form[data-dlp-signature][aria-busy="true"]{cursor:progress}
.dlp form[data-dlp-signature][aria-busy="true"] :is(input,select,textarea){opacity:.82}
.dlp form[data-dlp-signature] button:disabled{cursor:not-allowed;opacity:.62}
.dlp form[data-dlp-signature] .dlp-is-processing{
  position:relative;
  padding-right:3rem;
}
.dlp form[data-dlp-signature] .dlp-is-processing::after{
  content:"";
  position:absolute;
  right:1rem;
  top:50%;
  width:1rem;
  height:1rem;
  margin-top:-.5rem;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:dlp-motion-spin .7s linear infinite;
}
@keyframes dlp-motion-spin{to{transform:rotate(360deg)}}

/* Notices are state changes, so keep the transition short and non-spatial. */
.dlp .dlp-notice{
  transition:
    background-color var(--dl-motion-fast) var(--dl-ease-standard),
    border-color var(--dl-motion-fast) var(--dl-ease-standard),
    opacity var(--dl-motion-fast) var(--dl-ease-standard);
}

@media(prefers-reduced-motion:reduce){
  :root{
    --dl-motion-instant:0ms;
    --dl-motion-fast:0ms;
    --dl-motion-base:0ms;
    --dl-motion-slow:0ms;
    --dl-motion-emphasis:0ms;
  }
  .dlp-teaser{transform:none!important}
  .dlp form[data-dlp-signature] .dlp-is-processing::after{
    animation:none!important;
    border-right-color:currentColor;
  }
}

/* Visible + announced handoff state for classic POST forms. */
.dlp .dlp-submit-status{
  display:block;
  width:max-content;
  max-width:100%;
  margin:.75rem auto 0;
  padding:.45rem .7rem;
  border:1px solid var(--dlp-border,#63708a);
  border-radius:999px;
  font-size:.875rem;
  font-weight:700;
}
.dlp .dlp-submit-status::before{content:"●";margin-right:.45rem}

/* Disclosure affordance for ordinary portal/admin details.
   Mobile navigation details have their own menu labels/icons and are excluded. */
.dlp details:not(.dlp-admin-mobile-nav):not(.dlp-mobile-more):not(.dlp-backstage-mobile-nav)>summary{
  position:relative;
  list-style:none;
  padding-right:2.5rem;
}
.dlp details:not(.dlp-admin-mobile-nav):not(.dlp-mobile-more):not(.dlp-backstage-mobile-nav)>summary::-webkit-details-marker{display:none}
.dlp details:not(.dlp-admin-mobile-nav):not(.dlp-mobile-more):not(.dlp-backstage-mobile-nav)>summary::after{
  content:"";
  position:absolute;
  right:.7rem;
  top:50%;
  width:.95rem;
  height:.95rem;
  transform:translateY(-50%);
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:transform var(--dl-motion-fast) var(--dl-ease-standard);
}
.dlp details:not(.dlp-admin-mobile-nav):not(.dlp-mobile-more):not(.dlp-backstage-mobile-nav)[open]>summary::after{
  transform:translateY(-50%) rotate(45deg);
}
@media(prefers-reduced-motion:reduce){
  .dlp details:not(.dlp-admin-mobile-nav):not(.dlp-mobile-more):not(.dlp-backstage-mobile-nav)>summary::after{transition:none!important}
}