/* Motion is an enhancement: the document stays visible without JavaScript. */
html{scroll-padding-top:68px}
.chapnav a[aria-current="location"]{background:var(--vio-t);color:var(--vio)}
.case .go{transition:translate .25s ease,color .25s ease}
.case:hover .go,.case:focus-visible .go{translate:5px 0}
.case:focus-visible .t{color:var(--vio)}

@media(prefers-reduced-motion:no-preference){
  [data-depth]{translate:0 var(--depth-y,0px)}
  nav a{position:relative}
  nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;
    height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease}
  nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
}

@media(prefers-reduced-motion:reduce){
  [data-depth],.case .go{translate:none!important}
  .case:hover .shot,.case:focus-visible .shot{transform:none}
  .row,.frame{opacity:1!important;transform:none!important}
  .rail-fill{height:100%!important}
}

@media print{
  [data-depth]{translate:none!important}
  .row,.frame{opacity:1!important;transform:none!important}
  .rail-fill{height:100%!important}
}

/* Hero element initial state — only when JS is running and motion is on */
@media(prefers-reduced-motion:no-preference){
  .js .hero .hola,.js .hero h1,.js .hero .meta{opacity:0}
}