@keyframes burger-hover {
0% {
width: 24px;
}
50% {
width: 12px;
}
100% {
width: 24px;
}
}
@keyframes gear-clock-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes plant-float {
0% {
bottom: 20.5%;
left: 0%;
transform: rotate(0deg);
}
20% {
bottom: 30%;
left: 20%;
}
30% {
bottom: 40%;
left: 40%;
}
40% {
bottom: 50%;
left: 60%;
}
50% {
bottom: 60%;
left: 80%;
}
60% {
bottom: 50%;
left: 100%;
}
70% {
bottom: 40%;
left: 80%;
}
80% {
bottom: 30%;
left: 60%;
}
90% {
bottom: 20%;
left: 30%;
}
100% {
bottom: 20.5%;
left: 0%;
transform: rotate(360deg);
}
}
@keyframes about-bubbles {
0% {
top: 5%;
}
50% {
top: 15%;
}
100% {
top: 5%;
}
}
@keyframes about-triangle {
0% {
right: -12px;
}
50% {
right: -15px; }
100% {
right: -12px;
}
}
.fall-down {
cursor: pointer;
transform-style: preserve-3d;
perspective: 1000px;
}
.fall-down .char {
color: rgba(var(--color-primary), 1);
}
.fall-down .char::before {
content: atr(data-char);
visibility: visible;
color: rgba(var(--color-secondary), 1);
transition: transform 0.5s cubic-bezier(0.14, 0.71, 0.96, 0.59);
transition-delay: calc(0.1s * var(--char-percent));
transform: none;
transform-origin: bottom;
}
.fall-down:hover .char::before {
transition-timing-function: cubic-bezier(1, 0.01, 0.56, 1);
}
.fall-down:hover .char:nth-child(odd)::before {
transform: rotateX(90deg) scaleY(0);
}
.fall-down:hover .char:nth-child(even)::before {
transform: rotateX(-90deg) scaleY(0);
}
@keyframes floating-bag {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, -0px);
}
}
.zip-it .char,
.split-it .char {
color: rgba(var(--color-primary), 1);
}
.zip-it .char,
.zip-it .char:before,
.zip-it .char:after,
.split-it .char,
.split-it .char:before,
.split-it .char:after {
transition: transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
transition-delay: calc(0.2s * var(--distance-percent));
}
.zip-it .char:before,
.zip-it .char:after,
.split-it .char:before,
.split-it .char:after {
visibility: visible;
color: rgba(var(--color-secondary), 1);
}
.zip-it:hover .char:before,
.split-it:hover .char:before {
transform: translateY(-45%) scaleY(0);
}
.zip-it:hover .char:after,
.split-it:hover .char:after {
transform: translateY(45%) scaleY(0);
}
.zip-it .char,
.zip-it .char:before,
.zip-it .char:after {
transition-delay: calc(0.5s * (1 - var(--char-percent)));
}
.zip-it:hover .char,
.zip-it:hover .char:before,
.zip-it:hover .char:after {
transition-delay: calc(0.5s * var(--char-percent));
} .title-text {
position: relative;
}
.title-text .line {
content: "";
position: absolute;
height: 2px;
width: 100%;
display: block;
background-color: rgba(var(--color-secondary), 1);
bottom: calc(50% - 1px);
-webkit-animation: line 2000ms;
animation: line 2000ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: left;
transform: translateX(0) scaleX(0);
}
.title-text .char {
display: inline-block;
position: relative;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: kern;
animation-name: kern;
-webkit-animation-delay: calc(var(--char-index) * 5ms);
animation-delay: calc(var(--char-index) * 5ms);
-webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
}
@-webkit-keyframes line {
45% {
transform: translateX(0) scaleX(0);
}
70% {
transform: translateX(0) scaleX(0.8);
}
100% {
transform: translateX(100%) scaleX(0);
}
}
@keyframes line {
45% {
transform: translateX(0) scaleX(0);
}
70% {
transform: translateX(0) scaleX(0.8);
}
100% {
transform: translateX(100%) scaleX(0);
}
}
@-webkit-keyframes kern {
0%,
70% {
transform: translateX(calc((var(--char-index)) * 40px));
opacity: 0;
}
80% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
-webkit-animation-timing-function: none;
animation-timing-function: none;
}
}
@keyframes kern {
0%,
70% {
transform: translateX(calc((var(--char-index)) * 40px));
opacity: 0;
}
80% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
-webkit-animation-timing-function: none;
animation-timing-function: none;
}
} .space-cadet {
transition: letter-spacing 350ms ease-out;
}
.space-cadet:hover {
font-weight: 600;
letter-spacing: 0.05em;
} .btn-hf {
position: relative;
}
.aromatic-home2 .btn-hf:hover,
.aromatic-home2 .btn-hf:focus {
color: rgba(var(--color-primary), 1);
background-color: rgba(var(--color-primary), 0.1);
box-shadow: none;
}
.btn-hf:before,
.btn-hf:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
background-color: rgba(var(--color-secondary), 1);
transition: 400ms ease-in-out all;
}
.btn-hf:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-hf:hover:before,
.btn-hf:hover:after,
.btn-hf:focus:before,
.btn-hf:focus:after {
width: 100%; } .wave {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.wave:hover,
.wave:focus {
color: white;
box-shadow: 0 0 30px 0 rgba(var(--color-primary), 0.5);
background-color: rgba(var(--color-primary), 1);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.wave:hover:before,
.wave:focus:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.wave:hover:after,
.wave:focus:after {
-webkit-animation: shine 0.5s 0.2s linear;
-moz-animation: shine 0.5s 0.2s linear;
animation: shine 0.5s 0.2s linear;
}
.wave:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.wave:before,
.wave::after {
content: "";
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: white;
box-shadow: 0 0 15px 3px white;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.wave.w2:before,
.wave.w2::after {
box-shadow: 0 0 15px 3px rgba(var(--color-primary), 1);
}
@-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes color-wave {
0% {
color: violet;
}
10% {
color: indigo;
}
20% {
color: blue;
}
30% {
color: green;
}
40% {
color: yellow;
}
50% {
color: orange;
}
60% {
color: red;
}
70% {
color: rgb(32, 199, 46);
}
80% {
color: rgb(52, 1, 235);
}
90% {
color: rgb(70, 18, 61);
}
100% {
color: rgb(241, 9, 79);
}
} .run-out {
width: 100%;
overflow: hidden;
pointer-events: none;
}
.run-out .word {
pointer-events: auto;
}
.run-out .char {
color: transparent;
}
.run-out .char:before,
.run-out .char:after {
visibility: visible;
color: rgba(var(--color-primary), 1);
transition: transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
transition-delay: calc(0.04s * var(--char-total) + (0.08s * var(--char-index)));
}
.run-out .char:before {
transform: translateX(-100vw) rotate(-35deg);
transition-delay: calc(0.04s * var(--char-index));
}
.run-out:hover .char:before {
transform: translateX(0) rotate(0deg);
transition-delay: calc(0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))));
}
.run-out:hover .char:after {
transform: translateX(100vw) rotate(35deg);
transition-delay: calc((0.04s * (var(--char-total) - var(--char-index))));
} .pull-in .char {
transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
transition-delay: calc(0.2s * (1 - var(--distance-percent)));
}
.pull-in:hover .char {
transition-delay: calc(0.2s * var(--distance-percent));
transform: scale(1.1) translateX(calc(+0.3em * var(--distance-sine)));
} .button {
--background: #275efe;
--text: #fff;
--font-size: 16px;
--duration: 0.5s;
--move-hover: -4px;
--shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);
--shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
transition: box-shadow var(--duration) ease;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
.button div {
display: flex;
}
.button div span {
display: block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-style: normal;
}
.button div span:nth-child(1) {
--d: 0.05s;
}
.button div span:nth-child(2) {
--d: 0.1s;
}
.button div span:nth-child(3) {
--d: 0.15s;
}
.button div span:nth-child(4) {
--d: 0.2s;
}
.button div span:nth-child(5) {
--d: 0.25s;
}
.button div span:nth-child(6) {
--d: 0.3s;
}
.button div span:nth-child(7) {
--d: 0.35s;
}
.button div span:nth-child(8) {
--d: 0.4s;
}
.button div span:nth-child(9) {
--d: 0.45s;
}
.button div span:nth-child(10) {
--d: 0.5s;
}
.button div span:nth-child(11) {
--d: 0.55s;
}
.button:hover {
--y: var(--move-hover);
--shadow: var(--shadow-hover);
--move: -4px;
--shadow-active: 0 3px 1px rgba(0, 0, 0, 0.2);
}
.button:hover span {
-webkit-animation: move var(--duration) linear var(--d);
animation: move var(--duration) linear var(--d);
}
.button.smoke {
--move: 12px;
--move-y: -8px;
--blur: 4px;
}
.button.smoke:hover span {
--duration: 1s;
-webkit-animation: smoke var(--duration) linear var(--d);
animation: smoke var(--duration) linear var(--d);
}
.button.drive {
--move: 16px;
--skew: 25deg;
--skew-fast: 40deg;
--skew-bounce: -12px;
}
.button.drive:hover span {
--duration: 1s;
transform-origin: 50% 100%;
-webkit-animation: drive var(--duration) linear var(--d);
animation: drive var(--duration) linear var(--d);
}
@-webkit-keyframes move {
40% {
transform: translateY(var(--move));
text-shadow: var(--shadow-active);
}
}
@keyframes move {
40% {
transform: translateY(var(--move));
text-shadow: var(--shadow-active);
}
}
@-webkit-keyframes smoke {
45%,
55% {
filter: blur(var(--blur));
}
50%,
50.1% {
opacity: 0;
}
25%,
75% {
transform: translateX(0);
}
50% {
transform: translateX(var(--move)) translateY(var(--move-y));
}
50.1% {
transform: translateX(calc(var(--move) * -1));
}
}
@keyframes smoke {
45%,
55% {
filter: blur(var(--blur));
}
50%,
50.1% {
opacity: 0;
}
25%,
75% {
transform: translateX(0);
}
50% {
transform: translateX(var(--move)) translateY(var(--move-y));
}
50.1% {
transform: translateX(calc(var(--move) * -1));
}
}
@-webkit-keyframes drive {
40% {
opacity: 1;
}
55% {
transform: skewX(var(--skew)) translateX(var(--move));
}
56% {
transform: skewX(var(--skew-fast)) translateX(calc(var(--move) * -1));
}
55%,
56% {
opacity: 0;
}
75% {
transform: skewX(var(--skew));
}
85% {
transform: skewX(var(--skew-bounce));
}
}
@keyframes drive {
40% {
opacity: 1;
}
55% {
transform: skewX(var(--skew)) translateX(var(--move));
}
56% {
transform: skewX(var(--skew-fast)) translateX(calc(var(--move) * -1));
}
55%,
56% {
opacity: 0;
}
75% {
transform: skewX(var(--skew));
}
85% {
transform: skewX(var(--skew-bounce));
}
} @-webkit-keyframes thinking {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
}
@keyframes thinking {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
}
@-webkit-keyframes qrleafflow {
0%,
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@keyframes qrleafflow {
0%,
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-webkit-keyframes leafflows {
0%,
100% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@keyframes leafflows {
0%,
100% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-webkit-keyframes leafrflow {
0%,
100% {
-webkit-transform: rotate(-5deg) scale(-1, 1);
transform: rotate(-5deg) scale(-1, 1);
}
50% {
-webkit-transform: rotate(10deg) scale(-1, 1);
transform: rotate(10deg) scale(-1, 1);
}
}
@keyframes leafrflow {
0%,
100% {
-webkit-transform: rotate(-5deg) scale(-1, 1);
transform: rotate(-5deg) scale(-1, 1);
}
50% {
-webkit-transform: rotate(10deg) scale(-1, 1);
transform: rotate(10deg) scale(-1, 1);
}
}
@-webkit-keyframes q1 {
0% {
bottom: 0;
left: 0%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 100%;
left: 100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes q1 {
0% {
bottom: 0;
left: 0%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 100%;
left: 100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes q2 {
0% {
bottom: 20%;
left: 100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 100%;
left: 0%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes q2 {
0% {
bottom: 20%;
left: 100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 100%;
left: 0%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes qxs {
0% {
bottom: 50%;
left: 0%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 30%;
left: 100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes qxs {
0% {
bottom: 50%;
left: 0%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 30%;
left: 100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes qb {
0% {
bottom: 100%;
left: 50%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 0%;
left: 30%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes qb {
0% {
bottom: 100%;
left: 50%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 0%;
left: 30%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes qm {
0% {
bottom: 50%;
left: 50%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
bottom: 0%;
left: 80%;
}
100% {
bottom: 50%;
left: 30%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes qm {
0% {
bottom: 50%;
left: 50%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
bottom: 0%;
left: 80%;
}
100% {
bottom: 50%;
left: 30%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}  @keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes ripples {
to {
box-shadow: 0 0 0 5px rgba(var(--color-primary), 0.2), 0 0 0 10px rgba(var(--color-primary), 0.2),
0 0 0 15px rgba(var(--color-primary), 0.2), 0 0 0 20px rgba(var(--color-primary), 0.2);
transform: scale(1);
}
}