@font-face { 
    font-family: 'Bree';
    src: 
        url("./assets/Bree-Regular.otf") format("otf"),
        url("./assets/Bree-SemiBold.woff2") format("woff2"),
        url("./assets/Bree-SemiBold.woff") format("woff");
}

:root{
    --color-white: #fff;
    --color-base-20: #E9E0CA20;
    --color-base: #E9E0CA;
    --color-energy: #6B8C5C;
    --color-direction: #72BED3;
    --color-conscious: #FAC371;
    --color-radiant: #C889BB;
    --width-text-base: 60rem;
}

[white] {
    background-color: var(--color-white);
}
[base] {
    background-color: var(--color-base);
}
[base-20] {
    background-color: var(--color-base-20);
    position: relative;
}
[base-20]:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left:0;
    top:0;
    background-color: white;
}
[energy] {
    background-color: var(--color-energy);
}
[direction] {
    background-color: var(--color-direction);
}
[conscious] {
    background-color: var(--color-conscious);
}
[radiant] {
    background-color: var(--color-radiant);
}

[color-white] {
    color: var(--color-white);
}
[color-base] {
    color: var(--color-base);
}
[color-energy] {
    color: var(--color-energy);
}
[color-direction] {
    color: var(--color-direction);
}
[color-conscious] {
    color: var(--color-conscious);
}
[color-radiant] {
    color: var(--color-radiant);
}
[nowrap] {
    white-space: nowrap;
}
[center] {
    text-align: center;
}
[right] {
    text-align: right;
}

h1, h2, h3, h4,p {
    z-index: 9;
    position: relative;
}
h1[inline], h2[inline], h3[inline], h4[inline] {
    margin:0 1rem 0 0;
    display: inline-block;
}
p[inline] {
    /* margin-top:1rem; */
    display: unset;
    text-wrap: wrap;
}
html, body{
    height:fit-content;
}
section, div{
    overflow: hidden;
}
html, body{
    margin:0;
    padding:0;
    max-width: 100vw;
    overflow-x:hidden;
}
body {
    position: relative;
    font-family: 'Bree';
    font-weight: 100;
    background-color: var(--color-base-20);
    word-break:break-word;
    white-space: wrap;
    scroll-timeline-name: --bubbleTimeLine;
}

header{ 
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    height:80vh;
    padding-bottom:3rem;
    background-image: url('./assets/boom.svg');
    background-repeat: no-repeat;
    background-size: 1420px;
    background-position: top left;
}
header a {
    display: contents;
}
header img.logo {
    width: 75%;
    height:60%;
}
@media ( max-width: 720px ) {
    header img.logo {
        width: 100%;
        max-height:80%;
        height: unset;
        aspect-ratio: 2 / 1;
    }
}
main{ 
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
p{
    letter-spacing: 2;
    line-height: 2;
}
h1{
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 11;
}
h2{
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 4;
}
h3{
    font-size: 2rem;
    font-weight: 600;
}
h4{
    font-size: 1.6rem;
    font-weight: 400;
}
[medium] {
    font-size: 3rem;
    margin:1rem 0;
    letter-spacing: 2;
}
[midmedium] {
    font-size: 1.4rem;
    margin:1rem 0;
    letter-spacing: 2;
}
[connect-next-line] {
    margin-bottom:-1rem;
}
[large] {
    font-size: 5rem;
    margin:1rem 0;
}

@media (max-width:720px) {
    h1{
        font-size: 3rem;
    }
    h2{
        font-size: 2.2rem;
    }
    h3{
        font-size: 1.8rem;
    }
    h4{
        font-size: 1.4rem;
    }
    [medium] {
        font-size: 1.6rem;
        margin:1rem 0;
    }
    [large] {
        font-size: 4rem;
        margin:1rem 0;
    }
} 
@media (max-width:480px) {
    h1{
        font-size: 2.6rem;
    }
    h2{
        font-size: 2rem;
    }
    h3{
        font-size: 1.4rem;
    }
    h4{
        font-size: 1.2rem;
    }
} 

.container { 
    width: calc(100% - 3rem);
    padding: 3rem 1.5rem;   
}

.container > .inner__text{
    max-width: var(--width-text-base);
    margin:1.6rem auto;
}

.container[columns] > .inner__text {
    display: flex;
    justify-content: flex-start;
    gap:1.6rem;
    margin: 1.6rem auto;
}
@media (max-width: 600px) {
    .container[columns] > .inner__text {
        flex-wrap: wrap;
    }
}
.banner__image{
    position: relative;
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}
.banner__image  img{
    width:100%;
    height: 100%;
}

body, html {
    height:100vh;
}

.contact-bar{
    height:62px;
    width: 100%;
}
.contact-bar .inner__content {
    z-index: 999;
    /* transform: translateY(-100%); */
    width: 100%;
    /* padding:1rem 0; */
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: visible;
}
.contact-bar.stick .inner__content{
    position: fixed;
    bottom:0;
}

.contact-bar .button{
    padding:.4rem 1.6rem;
    border:0;
    background-color: var(--color-energy);
    color:var(--color-base);
    text-decoration: none;
    font-size: 1.4rem;
    padding:1rem;
    width: 100%;
    height: 100%;
    text-align: center;
}
.contact-bar .button.reverse{
    color: var(--color-energy);
    background-color:var(--color-base);
}


[min-90] {
    min-height: 90px;
    margin-top:4rem;
    marign-bottom:1rem;
}

.grid--4{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 25%);
}
.grid--4 div:nth-child(2){
    animation-delay: .1s;
}
.grid--4 div:nth-child(3){
    animation-delay: .2s;
}
.grid--4 div:nth-child(4){
    animation-delay: .3s;
}
@media (max-width: 1200px){
    .grid--4{
        grid-template-columns: repeat(2, 50%);
    }
    .grid--4 div:nth-child(2){
        animation-delay: .1s;
    }
    .grid--4 div:nth-child(3){
        animation-delay: 0s;
    }
    .grid--4 div:nth-child(4){
        animation-delay: .1s;
    }
}
@media (max-width: 600px){
    .grid--4{
        grid-template-columns: 100%;
    }
    .grid--4 div:nth-child(2){
        animation-delay: 0s;
    }
    .grid--4 div:nth-child(3){
        animation-delay: 0s;
    }
    .grid--4 div:nth-child(4){
        animation-delay: 0s;
    }
}
.grid--4 > div {
    width: 100%;
}

[full-images] {
    position: relative;
}
[full-images] img {
    position: relative;
    display: block;
    width: calc(100% + 4rem);
    left:-2rem;
    object-fit: cover;
    height: 220px;
}

[bubbles] {

    position: relative;
    overflow: hidden;
}
[bubbles] .base,
[bubbles] .conscious,
[bubbles] .energy,
[bubbles] .overlay{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    aspect-ratio: 1 / 1;       
}
[bubbles] .base{
    background-image: url('./assets/bubble-base.svg');
}
[bubbles] .conscious{
    background-image: url('./assets/bubble-conscious.svg');
}
[bubbles] .energy{
    background-image: url('./assets/bubble-energy.svg');
}
[bubbles] .overlay{
    background-image: url('./assets/bubble-overlay.svg');
}
[bubbles][right] > div {
    left:auto;
    right:0;
}

[bubbles][bottom]  > div {
    top:auto;
    bottom:0;
}

[bubbles] [bubble-in] {
    transform: 
        translate(-100%, -50%)
        rotate(calc(var(--scroll) * .25deg));
}

[bubbles] [bubble-rotate] {
    /* firefox and safari fallback */
    /* transform: rotate(calc(var(--scroll) * 1deg * 2)); */
    transform: 
        rotate(calc(var(--scroll) * .25deg));
}
[bubbles] [bubble-rotate-2] {
    transform: 
        rotate(calc(var(--scroll) * .12deg));
}
[bubbles] [bubble-rotate-3] {
    transform: 
        rotate(calc(var(--scroll) * -.12deg));
}
wrap{
    white-space: wrap;
    word-break: keep-all;
}

[title-small]{
    font-size: 1.8rem;
}


[pass-trough],
[bubbles][pass-trough]{
    overflow: visible;
}

[background-bubble-energy]{
   
    background-image: url('./assets/bubble-conscious.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 75%;
    /* background-position: center right; */
    background-position: center right;
    padding-bottom: 4rem;
}
[background-bubble-base]{
    background-image: url('./assets/bubble-base.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center right;
    padding-bottom:4rem;
}
[background-bubble-overlay]{
    position: relative;
}
[background-bubble-overlay]:after{
    content:'';
    position: absolute;
    z-index: 1;
    top:0;
    top:0;
    width:100%;
    height:100%;
    opacity: .1;
    background-image: url('./assets/bubble-overlay.svg');
    background-repeat: no-repeat;
    background-size: 140% 140%;
    background-position: center right;
    transform: rotate(calc(5deg * var(--rotate)));
    padding-bottom:4rem;
}
[bubbles-right] {
    background-size: unset;
    background-position: center right;
}

img[src="fallback"] {
    background-color: red;
    width: 100%;
    height: 100%;
    min-height: 200px;
    min-width: 200px;
    aspect-ratio: 1 / 1;
    display: block;
}
img[rounded] {
    border-radius: 100%;
}
img[profile] {
    width:100%;
    min-width: 240px;
    aspect-ratio: 1 / 1;
    display: block;
    position: relative;
    z-index: 1;
}
[overflow-visible] {
    overflow: visible;
}
[translate-up] {
    translate: 0 -80%;
    overflow: visible;
}

footer {
    padding: 3rem 0 6rem;
    width: 100%;
}
footer img.logo{
    width: calc(100% - 3rem);
    max-width: 500px;
    margin-left:auto;
    margin-right:auto;
}
@keyframes bubbeling {
    0% {
        opacity: 0;
        rotate: -80deg;
    }
    100% {
        opacity: 1;
        rotate: 0deg;
    }
}

@keyframes bubbeling-scale {
    0% {
        scale:0;
    }
    100% {
        scale:1;
    }
}

@keyframes bubbeling-up {
    0% {
        transform: translate(100%, 50%) rotate(-90deg);
    }
    100% {
        transform: translate(0%, 0%) rotate(0);
    }
}

@keyframes bubbeling-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

@keyframes bubbeling-rotate-2 {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes bubbeling-rotate-3 {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

[fade-up], [fade-up-parent] {
    /* opacity fallback */
    /* animation-timeline: view(); */
    animation-fill-mode: forwards;
    opacity: 0;
    transform:translateY(min(100%, 300px));

    animation-duration: 600ms; /* Firefox requires this to apply the animation */
    /* animation-name: fade-up; */
}
[fade-up].animate-in, [fade-up-parent].animate-in {
    animation-name: fade-up;
}

[paralex-10] {
    transition: transform 10ms;
    transform: translateY(calc(100% - calc(5% * var(--percentage) / 5)));
}
[paralex-20] {
    transition: transform 10ms;
    transform: translateY(calc(125% - calc(5% * var(--percentage) / 4)));
}
[paralex-30] {
    transition: transform 10ms;
    transform: translateY(calc(250% - calc(5% * min(var(--percentage) / 2, 100))));
}
[paralex-40] {
    transition: transform 10ms;
    transform: translateY(calc(500% - calc(5% * min(var(--percentage) / 1, 100))));
}



[fade-up-0] {
    animation-timeline: view();
    animation-fill-mode: forwards;

    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-name: fade-up-0;
    
    @media (max-width: 1200px){
        animation-name: fade-up-0;
    }
    @media (max-width: 600px){
        animation-name: fade-up-0;
    }
}
[fade-up-10] {
    animation-timeline: view();
    animation-fill-mode: both;

    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-name: fade-up-10;
    
    @media (max-width: 1200px){
        animation-name: fade-up-10;
    }
    @media (max-width: 600px){
        animation-name: fade-up-0;
    }
}
[fade-up-10] {
    animation-timeline: view();
    animation-fill-mode: both;

    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-name: fade-up-10;
    
    @media (max-width: 1200px){
        animation-name: fade-up-10;
    }
    @media (max-width: 600px){
        animation-name: fade-up-0;
    }
}
[fade-up-20] {
    animation-timeline: view();
    animation-fill-mode: both;

    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-name: fade-up-20;
    @media (max-width: 1200px){
        animation-name: fade-up-0;
    }
    @media (max-width: 600px){
        animation-name: fade-up-0;
    }
}
[fade-up-30] {
    animation-timeline: view();
    animation-fill-mode: both;

    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-name: fade-up-30;
    @media (max-width: 1200px){
        animation-name: fade-up-10;
    }
    @media (max-width: 600px){
        animation-name: fade-up-0;
    }
}
@keyframes fade-up {
    0% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    100% { 
        opacity: 1; 
        transform: translate(0, 0%);
    }
}

@keyframes fade-up-0 {
    0% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    35% { 
        opacity: 1; 
        transform: translate(0, 0%);
    }
}

@keyframes fade-up-10 {
    0% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    10% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    45% { 
        opacity: 1; 
        transform: translate(0, 0%);
    }
}
@keyframes fade-up-20 {
    0% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    20% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    55% { 
        opacity: 1; 
        transform: translate(0, 0%);
    }
}
@keyframes fade-up-30 {
    0% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    30% { 
        opacity: 0; 
        transform: translate(0, 33%);
    }
    65% { 
        opacity: 1; 
        transform: translate(0, 0%);
    }
}