Name: Sobes.tech
Rating: 4.9 (250 reviews)

Объясните, как функционирует следующий фрагмент кода, описав роль каждой части и взаимодействие стилей:

<html>
<head>
    <style>
    :root {
    --target-y: 100wh
    }

    @media(max-height:500px) {
    :root {
    --target-y: 400px
    }
    }

    @keyframes fromTarget {
    0% { transform: translate3d(0,var(--target-y),0); }
    100% { transform: translate3d(0,0,0); }
    }

    #target {
    animation: fromTarget ls ease-in;
    }
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>

Разбор работы представленного HTML‑CSS кода