/* Leichte Bewegungen aus dem Werkzeugkasten (siehe ../werkzeugkasten-check.md). Bei reduzierter Bewegung aus. */

/* Pfeile in Zweitknöpfen, auch ohne Bewegung sichtbar */
.btn.outline::after,.btn.ghost::after{content:"→";content:"→" / "";display:inline-block;font-weight:400}
.btn.outline[target="_blank"]::after,.btn.ghost[target="_blank"]::after{content:"↗";content:"↗" / ""}

@media (prefers-reduced-motion: no-preference){

  /* A-317 Passepartout: Rahmen zieht sich ein, Foto wächst nach außen */
  .grid figure,.gal a{clip-path:inset(0 round 4px);transition:clip-path .5s cubic-bezier(.6,0,.1,1)}
  .grid figure img,.gal a img{transition:transform .5s cubic-bezier(.6,0,.1,1)}
  .grid figure:hover,.gal a:hover,.gal a:focus-visible{clip-path:inset(7px round 6px)}
  .grid figure:hover img,.gal a:hover img,.gal a:focus-visible img{transform:scale(1.07)}

  /* A-309 Pfeil rückt weiter */
  .btn.outline::after,.btn.ghost::after{transition:transform .25s cubic-bezier(.7,0,.3,1)}
  .btn.outline:hover::after,.btn.ghost:hover::after{transform:translateX(3px)}
  .btn.outline[target="_blank"]:hover::after,.btn.ghost[target="_blank"]:hover::after{transform:translate(3px,-3px)}

  /* A-335 Unterstrich wischt durch: wächst von links, läuft beim Verlassen nach rechts weg */
  main :is(p,li,dd,.note,.incl) a:not(.btn){background:linear-gradient(var(--moss),var(--moss)) no-repeat 100% 100%/0 2px;
    transition:background-size .45s cubic-bezier(.6,0,.1,1),text-decoration-color .2s}
  main :is(p,li,dd,.note,.incl) a:not(.btn):hover{background-position:0 100%;background-size:100% 2px;text-decoration-color:transparent}
}

/* D-419 FAQ klappt weich auf (moderne Browser; ältere öffnen wie bisher sofort) */
@media (prefers-reduced-motion: no-preference){
  .faq{interpolate-size:allow-keywords}
  .faq::details-content{block-size:0;overflow:hidden;transition:block-size .5s cubic-bezier(.3,1,.3,1),content-visibility .5s allow-discrete}
  .faq[open]::details-content{block-size:auto}

  /* A-508 Großansicht auf /bilder/ wächst leicht gekippt herein */
  .lightbox[open] img{animation:lbKipp .5s cubic-bezier(.3,1,.3,1) both}
  @keyframes lbKipp{from{opacity:0;transform:scale(.88) rotate(2.5deg)}to{opacity:1;transform:none}}
}