/* Ergaenzung zum gemeinsamen Motion-Paket (../motion.css) fuer die
   vietnamesischen Seiten. Wird NACH motion.css eingebunden. motion.css selbst
   bleibt unveraendert (gleiche Datei wie auf der deutschen Seite). */

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

  /* Wortweises Einblenden: motion.css schneidet jedes Wort oben am Zeilenrand
     ab (overflow:hidden). Vietnamesische Akzente stehen gestapelt ueber dem
     Buchstaben (ể, ầu, ố) und ragen darueber hinaus. Mehr Luft nach oben,
     per negativem Rand ausgeglichen, daher keine Layoutverschiebung. */
  .w{padding-top:.3em;margin-top:-.3em}

  /* Fuell-Hover der Knoepfe. Die Seiten setzen beim Ueberfahren die
     Kurzform "background", die das Fuellbild aus motion.css loeschen wuerde;
     deshalb hier vollstaendig. Text auf Messing in #231A0F statt --ink:
     Kontrast rund 5,1:1 statt 4,1:1. */
  .btn-primary:hover{background:var(--ink) linear-gradient(var(--brass),var(--brass)) no-repeat left center/100% 100%;color:#231A0F}
  .btn-ghost:hover{background:transparent linear-gradient(var(--ink),var(--ink)) no-repeat left center/100% 100%;color:var(--cream)}
  .btn-brass:hover{background:var(--brass) linear-gradient(var(--ink),var(--ink)) no-repeat left center/100% 100%;color:var(--cream)}
  .sec-dark .btn-ghost{background-image:linear-gradient(var(--cream),var(--cream))}
  .sec-dark .btn-ghost:hover{background:transparent linear-gradient(var(--cream),var(--cream)) no-repeat left center/100% 100%;color:var(--ink)}

  /* Auftritt im Seitenkopf, wie auf der deutschen Startseite: einmalig beim
     Laden, reines CSS, nur opacity und translate. Ohne JavaScript und nach
     Ende der Animation ist alles sichtbar. Reihenfolge ueber data-auftritt. */
  [data-auftritt]{animation:auftritt .9s cubic-bezier(.2,.7,.2,1) both}
  [data-auftritt="1"]{animation-delay:.05s}
  [data-auftritt="2"]{animation-delay:.12s}
  [data-auftritt="3"]{animation-delay:.26s}
  [data-auftritt="4"]{animation-delay:.4s}
  [data-auftritt="5"]{animation-delay:.55s}
  [data-auftritt="6"]{animation-delay:.68s}
  [data-auftritt="7"]{animation-delay:.82s}
  [data-auftritt="8"]{animation-delay:.95s;animation-name:auftritt-blende}
  .zeile[data-auftritt]{display:inline-block}
}
@keyframes auftritt{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}
@keyframes auftritt-blende{from{opacity:0}to{opacity:1}}