.animated-text{opacity:0;animation:1.5s ease-out .3s forwards fade-in;transform:translateY(64px)}@keyframes fade-in{to{opacity:1;transform:translateY(0)}}
.background-mountain{filter:brightness(50%);z-index:-1;background-image:url(/asset/background.jpg);background-position:50%;background-size:cover;width:100%;height:100%;box-shadow:8px 10px 12px #0e214b80}.foreground-mountain{filter:brightness(55%);z-index:1;background-image:url(/asset/foreground.png);background-position:50%;background-size:cover;width:100%;height:100%;animation:.25s ease-in-out 1.8s forwards change-opacity;box-shadow:8px 10px 12px #0e214b80}@keyframes change-opacity{0%{opacity:1;display:block}to{opacity:0;display:none}}.section{width:100%;padding-block:calc(var(--spacing) * 16);padding-inline:calc(var(--spacing) * 8)}
@property --percent-1{syntax:"<percentage>";inherits:false;initial-value:0%}@property --decorator-color{syntax:"<color>";inherits:false;initial-value:oklab(0% 0 0)}.bg-transition{border:1px solid var(--card);background:linear-gradient(115deg, var(--decorator-color) 0%, var(--decorator-color) var(--percent-1), var(--card) calc(var(--percent-1) + 0.1%), var(--card) 100%);transition:--percent-1 .3s ease-in-out,--decorator-color}.bg-transition.green{--decorator-color:color-mix(in oklab, var(--color-green-500) 20%, var(--color-card))}.bg-transition.blue{--decorator-color:color-mix(in oklab, var(--color-blue-500) 20%, var(--color-card))}.bg-transition.amber{--decorator-color:color-mix(in oklab, var(--color-amber-500) 20%, var(--color-card))}.bg-transition.pink{--decorator-color:color-mix(in oklab, var(--color-pink-500) 20%, var(--color-card))}.bg-transition.hovered{--percent-1:40%}.bg-transition.clicked{--percent-1:100%;transition:--percent-1 .1s ease-in-out,--decorator-color}