body{width:100%;margin:0;padding:0;scroll-behavior:smooth}@keyframes scaleTransitions{0%{opacity:0;scale:.5}to{opacity:1;scale:1}}@keyframes transformTransitions{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes clipPathAnimation{0%{opacity:0;-webkit-clip-path:inset(100% 100% 0 0);clip-path:inset(100% 100% 0 0)}to{opacity:1;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}.main_container{flex-direction:column}.main_container,.main_container__header{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.main_container__header{height:100dvh}.main_container__section{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5rem;padding:1rem}.main_container footer{height:50vh}.main_container .section-1 .block{animation:scaleTransitions 10s ease-in-out;animation-timeline:view();animation-range:entry 0 cover 40%}.main_container .section-2 .block{animation:transformTransitions 10s ease-in-out;animation-timeline:view();animation-range:entry 0 cover 40%}.main_container .section-3 .block{animation:clipPathAnimation 10s ease-in-out;animation-timeline:view();animation-range:entry 0 cover 40%}.one{width:200px;background-color:red}.one,.two{height:100px;border:1px solid #000}.two{width:400px;background-color:#c97f7f}.three{background-color:#e1ff00}.four,.three{width:200px;height:100px;border:1px solid #000}.four{background-color:#d900ff}.five{width:600px;background-color:#0d00ff}.five,.six{height:100px;border:1px solid #000}.six{width:200px;background-color:#1eff00}.seven{width:100px;height:100px;border:1px solid #000;background-color:#0ef}