@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');

html {
    height: 100%;
    font-family: "Golos Text", sans-serif;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

:root {
    --main-text-color: #00060B;
    --main-text-color-2: #030f1a;
    --main-text-color-light: #424950;
    --screenshot-width: 230px;
}

body {
    background-image: url(./assets/images/background.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: var(--main-text-color);
}

a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none;
    color: inherit;
    outline: none;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* header */
header {
    padding: 1.5rem 1.5rem 0 1.5rem;
}

header .logo {
    display: flex;
    align-items: center;
    gap: .5rem;
}

header .logo img {
    height: 35px;
}

header .logo {
    color: #2196F3;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

/* box principal */
main {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    padding: 0 1rem;
}

/* content */
.hero-content {
    padding: 0 1rem 2rem 3rem;
}

.hero-content h1 {
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin: 1rem 0;
}

.hero-content h3 {
    color: var(--main-text-color-2);
    font-weight: 400;
    font-style: normal;
    margin: 1rem 0;
    max-width: 550px;
}

/* download links */
.download-links {
    margin-top: 3rem;
}

.download-links a {
    margin-right: .5rem;
}

.download-links img {
    height: 45px;
    transition: all .3s ease;
    border-radius: 5px;
}

.download-links img:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 10px 5px #2195f315;
}

.download-apk-button {
    display: none;
}

.download-links-box .download-apk-button {
    display: block;
    margin-top: .5rem;
}

.download-apk-button {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;

    color: var(--main-text-color-light);
    font-weight: lighter;
    text-decoration: underline;
    font-size: .75rem;
}

/* Hero img */
.hero-img {
    user-select: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.app-image {
    position: absolute;
    transition: transform .5s cubic-bezier(0.86,0,0.07,1);

    transform-origin: center;
}

.app-image {
    transform: rotate(-10deg) translate(-170px, -30px) scale(.6);
}

.app-image:not(.center)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.377);
    border-radius: 20px;
}

.app-image.left {
    transform: rotate(-10deg) translate(-170px, -30px) scale(.6);
    z-index: 97;
}

.app-image.center {
    transform: rotate(0) translate(0, 0) scale(1);
    z-index: 99;
}

.app-image.right {
    transform: rotate(10deg) translate(170px, -20px) scale(.6);   
    z-index: 98;
}

.app-image img {
    width: var(--screenshot-width);
}

/* alterna as imagens de menssagem entre imagem limpa(sem menssagens) e com menssagem como secundária */
.app-image.messages > img {
    display: none;
}

.app-image:not(.center) .messages-img {
    display: block;
}

.app-image.center .messages-clean-img {
    display: block;
}

/* complementos(icones flutuantes etc) */
.complements-box {
    top: 0;
    width: var(--screenshot-width);
    z-index: 999;
}

.complements {
    position: relative;
    transition: opacity .4s;
}

.complements .complement {
    opacity: 0;
    position: absolute;
}

/* themes */
.app-image.themes.center ~ .complements-box .complements.themes .light {
    animation: light-theme-icon-anim .5s .1s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.themes.center ~ .complements-box .complements.themes .moon {
    animation: dark-theme-icon-anim .5s .2s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.themes.center ~ .complements-box .complements.themes .stars {
    animation: dark-theme-icon-anim .5s .3s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

@keyframes light-theme-icon-anim {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translateY(50px) scale(1);
    }
}

@keyframes dark-theme-icon-anim {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }
}

.complements .complement.light {
    top: -220px;
    left: -110px;
    width: 100px;
}

.complements .complement.moon {
    top: 110px;
    right: -110px;
    width: 100px;
}

.complements .complement.stars {
    top: 110px;
    right: -110px;
    width: 50px;
}

/* messages */
.app-image.messages.center ~ .complements-box .complements.messages .message-box-1 {
    animation: message-box-anim .5s .1s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.messages.center ~ .complements-box .complements.messages .message-code-1 {
    animation: message-box-anim .5s .15s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.messages.center ~ .complements-box .complements.messages .message-box-2 {
    animation: message-box-anim .5s .2s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.messages.center ~ .complements-box .complements.messages .message-code-2 {
    animation: message-box-anim .5s .25s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

@keyframes message-box-anim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.complement.message-box {
    height: 50px;
    width: auto;
}

.complement.message-code {
    height: 30px;
    width: auto;
}

.complement.message-box-1 {
    top: -129px;
    left: 11px;
}

.complement.message-code-1 {
    top: -73px;
    left: 11px;
}

.complement.message-box-2 {
    top: -33px;
    right: 11px;
}

.complement.message-code-2 {
    top: 23px;
    left: 11px;
}

/* services */
.app-image.services.center ~ .complements-box .complements.services .facebook {
    animation: service-box-anim-1 .5s .25s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.services.center ~ .complements-box .complements.services .whatsapp {
    animation: service-box-anim-2 .5s .15s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.services.center ~ .complements-box .complements.services .wechat {
    animation: service-box-anim-1 .5s .25s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.services.center ~ .complements-box .complements.services .telegram {
    animation: service-box-anim-1 .5s .15s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

.app-image.services.center ~ .complements-box .complements.services .tiktok {
    animation: service-box-anim-2 .5s .25s cubic-bezier(0.18,0.89,0.32,1.27) forwards;
}

@keyframes service-box-anim-1 {
    0% {
        opacity: 0;
        transform: rotate(10deg) scale(0.5) translateY(0);
    }

    100% {
        opacity: 1;
        transform: rotate(10deg) scale(1) translateY(-50px);
    }
}

@keyframes service-box-anim-2 {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scale(0.5) translateY(0);
    }

    100% {
        opacity: 1;
        transform: rotate(-10deg) scale(1) translateY(-50px);
    }
}

.complements .complement.facebook {
    transform: rotate(10deg) scale(1) translateY(0);

    top: -190px;
    right: -50px;
    width: 80px;
}

.complements .complement.whatsapp {
    transform: rotate(-10deg) scale(1) translateY(0);

    top: -125px;
    left: -70px;
    width: 70px;
}

.complements .complement.telegram {
    transform: rotate(10deg) scale(1) translateY(0);

    top: 150px;
    right: -80px;
    width: 90px;
}

.complements .complement.wechat {
    transform: rotate(10deg) scale(1) translateY(0);

    top: -25px;
    right: -110px;
    width: 100px;
}

.complements .complement.tiktok {
    transform: rotate(-10deg) scale(1) translateY(0);
    
    top: 70px;
    left: -100px;
    width: 90px;
    z-index: -1;
}

/* footer */
footer {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

footer .menu a {
    color: var(--main-text-color-light);
    display: inline-block;
    margin: 0 .5rem;
    font-size: 0.8rem;
    text-decoration: none;
}

.mobile-download-links {
    display: none;
}

@media (max-width: 1024px) {
    header {
        padding-top: 3rem;
    }

    header .logo {
        display: flex;
        justify-content: center;
    }

    main {
        padding: 0;
        grid-template-columns: 1fr;
    }

    .hero-content {
        padding: 1rem;
        margin: 1rem 0;
    }

    .hero-content .text {
        text-align: center;
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }

    .hero-content h3 {
        font-size: 1rem;
    }

    .hero-img {
        min-height: 527px;
    }

    .download-links-box  {
        display: none;
    }

    .mobile-download-links {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 0;
    }

    .mobile-download-links .download-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .mobile-download-links .download-apk-button {
        display: block;
        margin-top: 1rem;
    }

    footer .menu {
        text-align: center;
    }
}

@media (max-width: 400px) {
    /* complements */
    /* messages */
    .complement.message-box {
        height: 45px;
    }

    /* themes */
    .complements .complement.light {
        left: -70px;
    }

    .complements .complement.moon {
        right: -70px;
    }

    .complements .complement.stars {
        right: -70px;
    }

    /* services */
    .complements .complement.whatsapp {
        left: -50px;
    }

    .complements .complement.telegram {
        right: -50px;
    }

    .complements .complement.wechat {
        right: -85px;
    }

    .complements .complement.tiktok {
        left: -50px;
    }

    .complements .complement.facebook {
        right: -50px;
    }
}

@media (max-width: 330px) {
    .mobile-download-links .download-links {
        flex-direction: column;
        align-items: center;
    }

    .mobile-download-links .download-links a {
        margin: 0 0 1rem 0;
    }
}