/* --- BASE STYLES --- */
html {font-size: 100%;}
body {background-color: #374569; color: #ccc; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased;}

.container {max-width: 72ch; padding: 2rem;}

h2 {font-family: serif; font-size: 3rem; margin-top: 0; margin-bottom: 2rem; font-weight: normal;}
p {font-size: 1.25rem; line-height: 1.6; margin-bottom: 1.5rem;}
a {color: #ccc; text-decoration: none;}


/* --- 1. MULTILINE (Standard, robust approach) --- */
.multiline {
  border-bottom: 1px solid rgba(155, 155, 155, 0.4); /* The static gray line */
  padding-bottom: 2px;
  --bg-h: 2px; /* Thickness of the animated line */
  background: linear-gradient(0deg, orange, orange) no-repeat right bottom / 0 var(--bg-h); 
  transition: background-size 0.8s cubic-bezier(0.7, 0.3, 0, 1);
}

.multiline:hover,
.multiline:focus-visible {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}

/* --- 2. UN1 (Clean fill from left to right) --- */
.un1 {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(orange, orange);
  background-position: left bottom;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.5s cubic-bezier(0.7, 0.3, 0, 1);
}

.un1:hover,
.un1:focus-visible {
  background-size: 100% 2px;
}


/* --- 3. UN2 (Slide in from the right) --- */
.un2 {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(orange, orange);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  transition: background-position 0.6s cubic-bezier(0.7, 0.3, 0, 1);
}

.un2:hover {
  background-position: left -100% bottom 0; 
}


/* --- 4. UN3 (Seamless 3-part slide-through) --- */
.un3 {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(to right, orange 33%, transparent 33% 66%, orange 66%);
  background-position: right bottom;
  background-size: 300% 2px;
  background-repeat: no-repeat;
  transition: background-position 0.6s cubic-bezier(0.7, 0.3, 0, 1);
}

.un3:hover {
  background-position: left bottom;
}