/* Encore Curtain Underline — zero-JS, a11y-first
   Opt-in via class .encore-curtain on links/headings
   Respects prefers-reduced-motion; strong focus; HC/print friendly
*/
:root{
  --encore-underline-color: currentColor;
  --encore-accent-color: color-mix(in srgb, currentColor 30%, transparent);
  --encore-underline-thickness: 2px;
  --encore-gap: 2px;
  --encore-radius: 2px;
}

.encore-curtain,
.encore-curtain a{ text-decoration:none; background:none; position:relative }

.encore-curtain,
.encore-curtain a{
  background-image:
    linear-gradient(var(--encore-underline-color), var(--encore-underline-color)),
    linear-gradient(var(--encore-accent-color), var(--encore-accent-color));
  background-repeat:no-repeat,no-repeat;
  background-size:0% var(--encore-underline-thickness), 0% var(--encore-underline-thickness);
  background-position:50% calc(100% - var(--encore-underline-thickness) - var(--encore-gap)), 50% 100%;
  border-radius:0 0 var(--encore-radius) var(--encore-radius);
  transition:background-size .28s ease-out, background-position .28s ease-out;
}

.encore-curtain:hover,
.encore-curtain:focus,
.encore-curtain a:hover,
.encore-curtain a:focus{
  background-size:100% var(--encore-underline-thickness), 100% var(--encore-underline-thickness);
  background-position:0% calc(100% - var(--encore-underline-thickness) - var(--encore-gap)), 0% 100%;
}

.encore-curtain:focus,
.encore-curtain a:focus{ outline:2px solid currentColor; outline-offset:2px }

@media (prefers-reduced-motion: reduce){
  .encore-curtain,
  .encore-curtain a{ transition:none !important }
}
@media (forced-colors: active){
  .encore-curtain,
  .encore-curtain a{ background:none; text-decoration:underline; text-underline-offset:2px }
}
@media print{
  .encore-curtain,
  .encore-curtain a{ background:none !important; text-decoration:underline }
}