.marker { --marker-color: #D9F952; padding: 0 .12em; background-image: linear-gradient( transparent calc(100% - .5em), var(--marker-color) 0 ); background-repeat: no-repeat; background-size: 0% 100%;  -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; transition: background-size 1.4s ease-out; }  .marker.is-visible { background-size: 100% 100%;  } .marker-full { --marker: #D9F952; padding: 0 .2em; background: var(--marker) no-repeat; background-size: 100% 1.4em;  background-position: 0 55%;  -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; } .project-item { position: relative; overflow: hidden; cursor: pointer; border-radius: var(--at-radius--m); }  .project-image { display: block; width: 100%; height: auto; transition: transform .4s ease; position: relative; z-index: 1; border-radius: inherit;  }  .project-overlay { position: absolute; inset: 0; background: rgba(217, 249, 82, 0.85); display: flex; justify-content: center; align-items: center; opacity: 0; transform: scale(1.05); transition: opacity .35s ease, transform .35s ease; z-index: 2; pointer-events: none; border-radius: inherit;  }  .project-meta { text-align: center; color: #000; font-weight: 500; transform: translateY(10px); opacity: 0; transition: opacity .35s ease, transform .35s ease; }  .project-item:hover .project-overlay { opacity: 1; transform: scale(1); } .project-item:hover .project-meta { opacity: 1; transform: translateY(0); } .project-item:hover .project-image { transform: scale(1.06); }  html { scroll-behavior: smooth; }  :target { scroll-margin-top: 140px; }  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }