/*
 * Dreamloud Motion System
 * Functional motion first: consistent timing, restrained micro-interactions,
 * progressive content reveals and explicit reduced-motion behavior.
 */
.dl-site{
  --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);
}

/* Component feedback. Movement stays on small affordances instead of scaling whole cards/buttons. */
.dl-site .dl-btn{
  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);
}
.dl-site a.dl-btn::after,
.dl-site .dl-archive-list .dl-arrow,
.dl-site .dl-ensemble-arrow{
  display:inline-block;
  transition:transform var(--dl-motion-fast) var(--dl-ease-standard);
}
.dl-site a.dl-btn:is(:hover,:focus-visible)::after,
.dl-site .dl-archive-list a:is(:hover,:focus-visible) .dl-arrow,
.dl-site .dl-ensemble-card-link:is(:hover,:focus-visible) .dl-ensemble-arrow{
  transform:translate(.1rem,-.1rem);
}
.dl-site .dl-archive-list strong{
  transition:color var(--dl-motion-fast) var(--dl-ease-standard);
}

/* Progressive editorial reveal.
   Native view-timelines are used where fully supported; IntersectionObserver
   remains the fallback. Initial-viewport content is always shown immediately. */
.dl-site [data-dl-reveal][data-dl-reveal-state="pending"]{
  opacity:0;
  transform:translateY(.4rem);
}
.dl-site [data-dl-reveal="fade"][data-dl-reveal-state="pending"],
.dl-site [data-dl-reveal="image"][data-dl-reveal-state="pending"]{
  transform:none;
}
.dl-site [data-dl-reveal][data-dl-reveal-state="visible"]{
  opacity:1;
  transform:none;
  transition:
    opacity var(--dl-motion-emphasis) var(--dl-ease-enter),
    transform var(--dl-motion-emphasis) var(--dl-ease-enter);
  transition-delay:var(--dl-reveal-delay,0ms);
}

/* Native scroll-driven editorial motion: quick, small and compositor-friendly. */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    .dl-site [data-dl-reveal][data-dl-reveal-state="native"]{
      opacity:1;
      transform:none;
      transition:none!important;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 34%;
    }
    .dl-site [data-dl-reveal="fade"][data-dl-reveal-state="native"]{
      animation-name:dl-native-reveal-fade;
    }
    .dl-site [data-dl-reveal="up"][data-dl-reveal-state="native"]{
      animation-name:dl-native-reveal-up;
    }
    .dl-site [data-dl-reveal="image"][data-dl-reveal-state="native"]{
      animation-name:dl-native-reveal-image;
    }

    @keyframes dl-native-reveal-fade{
      from{opacity:.72}
      to{opacity:1}
    }
    @keyframes dl-native-reveal-up{
      from{opacity:.72;transform:translateY(.4rem)}
      to{opacity:1;transform:none}
    }
    @keyframes dl-native-reveal-image{
      from{opacity:.86}
      to{opacity:1}
    }

    /* Production and ensemble images gain presence while entering the viewport,
       but never parallax or travel independently of their content. */
    .dl-site [data-dl-scroll-emphasis="image"]{
      transform-origin:50% 50%;
      animation:dl-image-presence auto linear both;
      animation-timeline:view(block);
      animation-range:entry 0% cover 28%;
    }
    @keyframes dl-image-presence{
      from{opacity:.94;scale:.988}
      to{opacity:1;scale:1}
    }
  }

  @supports (animation-timeline:scroll()){
    .dl-site .dl-scroll-progress{
      animation:dl-scroll-progress auto linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes dl-scroll-progress{
      from{transform:scaleX(0)}
      to{transform:scaleX(1)}
    }
  }
}

/* Long production pages get a restrained reading-progress cue. */
.dl-site .dl-scroll-progress{
  position:fixed;
  inset:0 0 auto;
  z-index:10000;
  height:2px;
  pointer-events:none;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* The FAQ height itself is controlled by WAAPI; only the content opacity is enhanced. */
.dl-site .dl-faq details > :not(summary){
  transition:opacity var(--dl-motion-base) var(--dl-ease-standard);
}
.dl-site .dl-faq details:not([open]) > :not(summary){opacity:.72}

@media (prefers-reduced-motion:reduce){
  .dl-site{
    scroll-behavior:auto!important;
    --dl-motion-instant:0ms;
    --dl-motion-fast:0ms;
    --dl-motion-base:0ms;
    --dl-motion-slow:0ms;
    --dl-motion-emphasis:0ms;
  }
  .dl-site [data-dl-reveal],
  .dl-site [data-dl-reveal][data-dl-reveal-state]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
  .dl-site [data-dl-scroll-emphasis="image"]{
    opacity:1!important;
    scale:1!important;
    animation:none!important;
  }
  .dl-site .dl-scroll-progress{display:none!important}
  .dl-site a.dl-btn::after,
  .dl-site .dl-archive-list .dl-arrow,
  .dl-site .dl-ensemble-arrow{
    transform:none!important;
    transition:none!important;
  }
}

/* Consistent disclosure affordance for public FAQ items. */
.dl-site .dl-faq summary{
  position:relative;
  list-style:none;
  padding-right:2.5rem;
}
.dl-site .dl-faq summary::-webkit-details-marker{display:none}
.dl-site .dl-faq summary::after{
  content:"";
  position:absolute;
  right:.35rem;
  top:50%;
  width:1rem;
  height:1rem;
  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);
}
.dl-site .dl-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
@media(prefers-reduced-motion:reduce){
  .dl-site .dl-faq summary::after{transition:none!important}
}