/* Progressive immersive scroll. Motion follows content, never blocks accessibility. */
.immersive-progress{
 position:fixed;top:0;left:0;z-index:100;pointer-events:none;
 width:100%;height:2px;transform-origin:0 50%;transform:scaleX(0);
 background:linear-gradient(90deg,#777,#ddd);opacity:.65;
}
:root[data-theme="dark"] .immersive-progress{background:linear-gradient(90deg,#888,#fff)}
@media(prefers-reduced-motion:no-preference){
 html.immersive-ready [data-immersive]{
  opacity:0;transform:translate3d(0,30px,0);
  filter:blur(4px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--immersive-delay,0ms);
 }
 html.immersive-ready [data-immersive].is-visible{
  opacity:1;transform:none;filter:none;
 }
 html.immersive-ready .portfolio-hero-copy>*{
  animation:hero-enter .92s both cubic-bezier(.16,1,.3,1);
 }
 html.immersive-ready .portfolio-hero-copy>*:nth-child(2){animation-delay:.1s}
 html.immersive-ready .portfolio-hero-copy>*:nth-child(3){animation-delay:.18s}
 html.immersive-ready .portfolio-hero-copy>*:nth-child(4){animation-delay:.25s}
 html.immersive-ready .portfolio-hero-copy>*:nth-child(5){animation-delay:.32s}
 @keyframes hero-enter{
  from{opacity:0;transform:translate3d(0,22px,0);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
 }
}
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
 html.immersive-ready [data-immersive]{
  transform:translate3d(0,15px,0);filter:none;transition-duration:.55s;
 }
}
@media(prefers-reduced-motion:reduce){
 .immersive-progress{opacity:.38}
 html.immersive-ready [data-immersive]{
  opacity:1!important;transform:none!important;filter:none!important;
  animation:none!important;transition:none!important;
 }
 .db-story-media{transition:none!important}
}