:root{--text-color:hsl(230 16% 28%);--header-bg:hsl(0 0% 100%/75%);--section:hsl(0 0% 93%);--section-even:hsl(210deg 15% 92%);--tile-gradient-1:var(--chakra-root-gradient);--tile-gradient-2:var(--chakra-sacral-gradient);--tile-gradient-3:var(--chakra-solar-gradient);--tile-gradient-4:var(--chakra-heart-gradient);--tile-gradient-5:var(--chakra-throat-gradient);--tile-gradient-6:var(--chakra-third-eye-gradient);--tile-gradient-7:var(--chakra-crown-gradient);--cubic:cubic-bezier(0.25,0.1,0,2.05)}*{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{margin:0;display:grid;overflow-x:hidden;font-family:Righteous,sans-serif;timeline-scope:--masthead-s,--tiles-s,--text-s,--two-columns-s,--subscribe-s}header{position:sticky;top:0;z-index:2;width:100%;background-color:var(--header-bg);backdrop-filter:blur(6px);transition:all .2s linear}.menu{position:fixed;top:.25rem;left:.25rem;z-index:3;cursor:pointer}.menu input[type=checkbox]{display:none}.burger{background-color:var(--header-bg)}.burger path{fill:none;stroke:currentcolor;stroke-width:3;transition:stroke-dasharray .4s,stroke-dashoffset .4s}.burger .top{stroke-dasharray:40 172}.burger .middle{stroke-dasharray:40 111}.burger .bottom{stroke-dasharray:40 172}.menu input[type=checkbox]:checked~.burger .top{stroke-dashoffset:-132px}.menu input[type=checkbox]:checked~.burger .middle{stroke-dashoffset:-71px}.menu input[type=checkbox]:checked~.burger .bottom{stroke-dashoffset:-132px}ul.animated-nav{list-style-type:none;display:flex;gap:3rem;padding:0}ul.animated-nav li{position:relative;padding:.5rem 1rem;text-transform:uppercase;color:var(--text-color);transition:transform .25s var(--cubic)}ul.animated-nav li:after{position:absolute;content:"";left:0;bottom:0;z-index:-1;width:100%;height:10%;background-color:var(--yellow);transition:all .25s var(--cubic)}ul.animated-nav li:hover:after{height:70%}section{min-block-size:var(--app-full-height);background-color:var(--section);view-timeline-name:var(--name);&:nth-child(2n){--section:var(--section-even)}}.flying-squares{position:absolute;z-index:1;width:100%;height:var(--app-full-height);pointer-events:none}.square{position:absolute;width:15vw;height:15vw;opacity:.3;animation:flying 2s infinite alternate both}.square.red{top:17vh;left:8vw;background-color:var(--red);animation-delay:1s}.square.purple{top:8vh;left:76vw;background-color:var(--purple)}.square.green{top:60vh;left:40vw;background-color:var(--green);animation-delay:.5s}@keyframes flying{to{transform:translateY(-5vh)}}.tile-section{position:sticky;top:0;max-inline-size:100%;block-size:var(--app-full-height);overflow:hidden;& .tile-container{position:absolute;top:50%;left:50%;translate:-50% -50%;scale:2.5;inline-size:100%;block-size:var(--app-full-height);display:grid;grid-template:repeat(4,1fr) /repeat(5,1fr);rotate:.12turn;& .tile{inline-size:100%;block-size:100%;background-color:var(--tile);animation:tile linear both;animation-timeline:var(--name);animation-range:entry 0 exit 100%;&:nth-of-type(5n+2),&:nth-of-type(5n+4){--tile:var(--green);--vertical:100%;--horizontal:100%;&:nth-of-type(odd){--tile:var(--red);--vertical:100%;--horizontal:-100%}}&:nth-of-type(5n+1),&:nth-of-type(5n+3),&:nth-of-type(5n+5){--tile:var(--blue);--vertical:-100%;--horizontal:100%;&:not(:nth-of-type(odd)){--tile:var(--yellow);--vertical:-100%;--horizontal:-100%}}}}}@keyframes tile{0%{translate:0 0}50%{translate:0 var(--vertical)}to{translate:var(--horizontal) var(--vertical)}}.two-columns{max-width:80ch;margin:0 auto;min-height:var(--app-full-height);padding:3rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;overflow-x:clip}.cards{display:flex;flex-direction:column;gap:2rem}.card{box-shadow:inset 0 0 .125rem var(--text-color);padding:1rem;background:#fff;contain:layout paint}.card .title{font-weight:700;margin-bottom:.5rem}.card .subtitle{opacity:.5;margin-bottom:1rem}.preview{display:flex;align-items:center;justify-content:center}.preview .img{width:100%;min-height:24rem;background:var(--red)}.scroll-indicator{position:fixed;top:50%;left:.35rem;transform:translateY(-50%);writing-mode:vertical-lr;rotate:.5turn;display:flex;align-items:center;gap:.5rem;opacity:.5}.scroll-indicator .divider{width:2rem;height:2px;background-color:currentColor;opacity:.5}.scroll-indicator span{text-transform:lowercase;font-weight:700}.scroll-arrow{display:inline-block;animation:bounce-arrow 1.2s infinite}@keyframes bounce-arrow{0%,to{transform:translateY(0)}50%{transform:translateY(12px)}}footer.animated-footer{display:grid;place-content:center;padding-block:1rem}footer.animated-footer a{padding:.5rem 1rem;background-color:var(--black);color:#fff;text-decoration:none;border-radius:4px}footer.animated-footer a span{filter:invert(75%)}.text{max-inline-size:80ch;margin-inline:auto;padding:3rem 1rem}.text>:not(h2){text-wrap:pretty;animation:show-text linear both;animation-timeline:view(y 80vh auto)}.text>:not(h2):before{content:none}@keyframes show-text{0%{opacity:0}to{opacity:1}}.read{position:fixed;top:68px;left:0;z-index:3;inline-size:0;max-inline-size:100%;text-align:right;white-space:nowrap;padding-block:.125rem;padding-inline-end:.5rem;background-image:linear-gradient(to top,var(--purple),var(--blue),var(--green),var(--yellow),var(--red));opacity:0;transition:opacity .2s linear}.read div{filter:invert(100%)}