/* =========================================================
   RESET


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #070710;
    color: #f5f5f5;
    overflow-x: hidden;

    font-family: 'Satoshi', sans-serif;

}
========================================================= */

/* =========================================================
   HERO
========================================================= */

@font-face {
    font-family: 'Canela';
    src: url('../assets/fonts/canela/Canela-Light.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'CeraPro';
    src: url('../assets/fonts/cerapro/CeraPro-Medium.woff2') format('woff2');
    font-weight: 200;
}



.hero {
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}


/* =========================================================
   TRACE CANVAS
========================================================= */

#traceCanvas {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: 9999;

    overflow: hidden;
}



/* =========================================================
   BRAND
========================================================= */

.brand {
    display: flex;
    align-items: center;

    font-size: .95rem;
    letter-spacing: -0.03em;
}

.brand-light {
    font-weight: 300;
    opacity: .75;
}

.brand-bold {
    font-weight: 700;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-link,
.lang-switch {
    width: 34px;
    height: 34px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, .03);

    color: #fff;

    cursor: pointer;

    transition: .3s ease;
}

.social-link:hover,
.lang-switch:hover {
    background: #fff;
    color: #070710;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 5;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-inline: 60px;
}

.hero-content h1 {
    mix-blend-mode: screen;
}

/* =========================================================
   TAGLINE TOP
========================================================= */

.hero-tagline-top {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 40px;

    opacity: .7;
}

.hero-tagline-top .line {
    width: 60px;
    height: 1px;

    background: #fff;
}

.hero-tagline-top p {
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}


/* =========================================================
   TITLE WRAPPER
========================================================= */

.hero-title-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;

    gap: 20px;

    position: relative;
}


/* =========================================================
   TITLE BLOCKS
========================================================= */

.title-block {
    position: relative;
}


.trace-word span,
.form-word span,
.motion-word span,
.title-connector span {

    opacity: 0;

    transform:
    translateY(80px) scale(.8);
    filter: blur(10px);

}

/* =========================================================
   TRACE WORD
========================================================= */

.trace-word {
    font-family: 'CeraPro';
        
    font-size: 8.9rem;
    font-weight: 400;
    line-height: .9;
}


/* Technical Guides

.trace-guides {
    position: absolute;
    inset: -40px;
    opacity: .12;
}

.trace-guides span {
    position: absolute;
    background: #fff;
}

.trace-guides span:nth-child(1) {
    width: 1px;
    height: 140%;

    left: 20%;
    top: -20%;
}

.trace-guides span:nth-child(2) {
    width: 120%;
    height: 1px;

    top: 40%;
    left: -10%;
}

.trace-guides span:nth-child(3) {
    width: 1px;
    height: 120%;

    right: 10%;
    top: -10%;
}
 */

/* =========================================================
   FORM WORD
========================================================= */

.form-word {
    font-family: 'CeraPro';
        
    font-size: 8.9rem;
    font-weight: 400;

    line-height: .9;
}


/* Construction Geometry */

.form-construction {
    position: absolute;
    inset: -50px;

    opacity: .08;
}

.form-construction .circle {
    position: absolute;

    width: 220px;
    height: 220px;

    border: 1px solid #fff;
    border-radius: 50%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

.form-construction .vertical {
    position: absolute;

    width: 1px;
    height: 150%;

    background: #fff;

    left: 50%;
    top: -25%;
}

.form-construction .horizontal {
    position: absolute;

    width: 140%;
    height: 1px;

    background: #fff;

    left: -20%;
    top: 50%;
}


/* =========================================================
   CONNECTOR
========================================================= */

.title-connector {
    transform: translateY(-18px);
}

.title-connector span {
    font-family: "Big Shoulders", sans-serif;
    color: #f5f5f5;
    font-size: 4rem;
    font-weight: 300;
    margin-left: 10px;
}


/* =========================================================
   MOTION WORD
========================================================= */

.motion-word {
    font-family: 'CeraPro';

    font-size: 8.9rem;
    font-weight: 400;

    line-height: .8;
}


/* Motion Paths */

.motion-paths {
    position: absolute;

    inset: -60px;

    opacity: .18;

    pointer-events: none;
}

.motion-paths svg {
    width: 100%;
    height: 100%;
}

.motion-paths path {
    fill: none;

    stroke: #ffffff;
    stroke-width: 1;

    stroke-linecap: round;

    stroke-dasharray: 12 8;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
    max-width: 100%;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(-20px);
}

.hero-description p {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.5px;

    font-size: 1.1rem;
    line-height: 1.7;

    opacity: .9;
}


/* =========================================================
   CTA
========================================================= */

.hero-actions {
    margin-top: 40px;
    opacity: 0;
    transform: translateY(50px);
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 10px 10px 10px 24px;

    border-radius: 999px;

    background: #f5f5f5;

    color: #070710;

    text-decoration: none;

    transition: .35s ease;
}

.hero-cta:hover {
    transform: translateY(-3px);
}

.hero-cta span {
    font-size: .95rem;
    font-weight: 500;
}

.cta-icon {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #1b1b2d;

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   FOOTER
========================================================= */

.hero-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;

    width: 100%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;

    gap: 40px;

    padding: 40px 60px;
}


/* =========================================================
   FOOTER LEFT
========================================================= */

.footer-left {
    display: flex;
    align-items: center;
    gap: 14px;

    opacity: .7;
}

.footer-symbol {
    font-size: 1rem;
}

.footer-left p {
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}


/* =========================================================
   FOOTER LINE
========================================================= */

.footer-line {
    width: 40vw;
}

.footer-line span {
    display: block;

    width: 100%;
    height: 1px;

    background: rgba(255, 255, 255, .2);
}


/* =========================================================
   FOOTER RIGHT
========================================================= */

.footer-right {
    max-width: 320px;

    justify-self: end;
}

.footer-right p {
    font-size: .9rem;
    line-height: 1.7;

    opacity: .65;
}


/* =========================================================
   MOBILE HERO
========================================================= */

@media (max-width: 768px) {

    /* HERO */

    .hero {
        position: relative;
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
    }

    /* CONTEÚDO */

    .hero-content {

        position: absolute;
        z-index: 10;

        left: 0;
        right: 0;
        bottom: 60px;

        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;

        padding: 0 24px;

        text-align: left;
    }

    /* REMOVER ANIMAÇÕES DAS LETRAS */

    .trace-word span,
    .form-word span,
    .motion-word span,
    .title-connector span {

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;
    }

    /* WRAPPER DO TÍTULO */

    .hero-title-wrapper {

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 0;
    }

    /* ESCONDER CONECTOR */

    .title-connector {
        display: none;
    }

    /* TÍTULOS */

    .trace-word,
    .form-word,
    .motion-word {

        font-size: clamp(3.2rem, 11vw, 4.2rem);

        line-height: .92;

        margin: 0;
        padding: 0;
    }

    /* AJUSTE FINO ENTRE LINHAS */

    .trace-block,
    .form-block,
    .motion-block {

        margin: 0;
        padding: 0;
    }

    /* DESCRIÇÃO */

    .hero-description {

        margin-top: 20px;

        max-width: 320px;

        opacity: 1 !important;
        transform: none !important;
    }

    .hero-description p {

        text-align: left;

        font-size: clamp(.9rem, 1vw, 1.1rem);
        line-height: 1.4;

        letter-spacing: 0;

        margin: 0;
    }

    /* CTA */

    .hero-actions {

        margin-top: 24px;

        opacity: 1 !important;
        transform: none !important;
    }

    /* HEADER */

    .header {

        padding: 24px;
    }

    .brand {

        font-size: .95rem;
    }

    .header-actions {

        gap: 8px;
    }

    .social-link,
    .lang-switch {

        width: 32px;
        height: 32px;
    }

    /* OCULTAR ELEMENTOS DESNECESSÁRIOS */

    .hero-tagline-top,
    .hero-footer {

        display: none;
    }

}