/* ==========================================================
   MSK STUDIO
   Página: Sobre / Bio
   Arquivo: bio.css

   Exclusivo da Bio:
   não altera menu, rodapé ou Home.
   ========================================================== */


/* ==========================================================
   BASE
   ========================================================== */

.msk-bio {

    --bio-ink: #202321;
    --bio-accent: #C8F542;

    color: var(--bio-ink);

    background: #fff;

    font-family: "Space Grotesk", Arial, sans-serif;

}


.msk-bio .bio-wrap {

    width: min(1170px, calc(100% - 48px));

    margin-inline: auto;

}


.msk-bio h1,
.msk-bio h2,
.msk-bio h3 {

    font-family: inherit;
    font-weight: 700;

}


.msk-bio .bio-eyebrow {

    margin: 0 0 24px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

}


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

.msk-bio .bio-hero {

    padding: 140px 0 80px;

    color: #fff;

    background: #1d201f;

}


.msk-bio .bio-hero-grid {

    display: grid;

    grid-template-columns: 1.15fr 1fr;

    align-items: center;

    gap: 64px;

}


.msk-bio h1 {

    margin: 0 0 32px;

    color: #fff;

    font-size: clamp(48px, 7vw, 96px);

    line-height: 1;

    letter-spacing: -.055em;

    text-transform: none;

}


.msk-bio h1 span {

    color: var(--bio-accent);

}


.msk-bio .bio-lead {

    margin: 0;

    color: #d3d7d3;

    font-size: clamp(17px, 2vw, 22px);

    line-height: 1.6;

}


/* ==========================================================
   PAINEL DA MARCA
   ========================================================== */

.msk-bio .bio-brand-panel {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 380px;

    border: 1px solid #535a52;

    background-image:
        linear-gradient(
            #ffffff08 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #ffffff08 1px,
            transparent 1px
        );

    background-size: 40px 40px;

}


.msk-bio .bio-brand-panel::before {

    content: "";

    position: absolute;

    top: -5px;
    right: -5px;

    width: 10px;
    height: 10px;

    background: var(--bio-accent);

}


.msk-bio .bio-brand-panel img {

    width: 300px;
    max-width: 80%;

    height: auto;

    margin: 50px 0;

}


.msk-bio .bio-panel-label,
.msk-bio .bio-panel-signature {

    position: absolute;

    left: 20px;

    color: #ccd2cc;

    font-size: 11px;

    letter-spacing: .1em;

    text-transform: uppercase;

}


.msk-bio .bio-panel-label {

    top: 18px;

}


.msk-bio .bio-panel-signature {

    bottom: 18px;

}


/* ==========================================================
   HISTÓRIA / PROCESSO
   ========================================================== */

.msk-bio .bio-story {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 80px;

    padding-block: 88px;

}


.msk-bio h2 {

    margin: 0 0 28px;

    color: var(--bio-ink);

    font-size: clamp(30px, 3.4vw, 46px);

    line-height: 1.12;

    letter-spacing: -.035em;

}


.msk-bio .bio-copy {

    color: #454c46;

    font-size: 16px;

    line-height: 1.85;

}


.msk-bio .bio-copy p {

    margin-bottom: 22px;

}


/* ==========================================================
   PRINCÍPIOS
   ========================================================== */

.msk-bio .bio-principles {

    padding-block: 72px;

    background: #f2f4ef;

}


.msk-bio .bio-cards {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    margin-top: 40px;

}


.msk-bio .bio-card {

    padding: 28px;

    border-top: 3px solid var(--bio-ink);

    background: #fff;

}


.msk-bio .bio-letter {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin: 4px 0 36px;

    font-size: 64px;
    font-weight: 700;

    line-height: 1;

}


.msk-bio .bio-letter > span {

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    background: var(--bio-accent);

    font-size: 26px;

}


.msk-bio h3 {

    margin: 0 0 8px;

    font-size: 26px;

}


.msk-bio .bio-card-tag {

    font-size: 14px;
    font-weight: 600;

}


.msk-bio .bio-card p:last-child {

    margin: 0;

    color: #454c46;

    font-size: 15px;

    line-height: 1.75;

}


/* ==========================================================
   CONTATO
   ========================================================== */

.msk-bio .bio-contact {

    margin-top: 30px;

    padding-top: 24px;

    border-top: 1px solid #d6dbd4;

}


.msk-bio .bio-contact-link {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--bio-ink);

    font-weight: 600;

    text-decoration-thickness: 1px;

}


.msk-bio .bio-contact .social-links {

    justify-content: flex-start;

}


/* ==========================================================
   MARCAS / EXPERIÊNCIA
   ========================================================== */

.msk-bio .brands-showcase {

    --brands-bg: #181718;
    --brands-bg-light: #1d1b1c;

    --brands-white: #f3f1ef;
    --brands-text: #aaa7a9;

    --brands-green: #b0dc37;

    --brands-line: rgba(255, 255, 255, 0.11);


    position: relative;

    overflow: hidden;

    padding: 95px 0 55px;

    color: var(--brands-white);

    background-color: var(--brands-bg);

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

}


/* brilho discreto */

.msk-bio .brands-showcase::before {

    content: "";

    position: absolute;

    top: 0;
    left: 35%;

    width: 600px;
    height: 400px;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            rgba(176, 220, 55, 0.035),
            transparent 65%
        );

}


/* ==========================================================
   MARCAS — CABEÇALHO
   ========================================================== */

.msk-bio .brands-showcase__header {

    position: relative;

    z-index: 2;

    width: calc(100% - 40px);
    max-width: 1170px;

    margin: 0 auto 65px;

}


/* etiqueta */

.msk-bio .brands-showcase__eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: var(--brands-green);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;

}


.msk-bio .brands-showcase__eyebrow i {

    display: block;

    width: 115px;
    height: 1px;

    background: var(--brands-green);

}


.msk-bio .brands-showcase__eyebrow b {

    display: block;

    width: 7px;
    height: 7px;

    margin-left: -10px;

    background: var(--brands-green);

    transform: rotate(45deg);

}


/* título */

.msk-bio .brands-showcase__header h2 {

    position: relative;

    max-width: 850px;

    margin: 0;

    color: var(--brands-white) !important;

    font-family: "Space Grotesk", Arial, sans-serif;

    font-size: clamp(2.2rem, 4vw, 4.2rem);
    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -0.045em;

}


/* marca abaixo do título */

.msk-bio .brands-showcase__header h2::after {

    content: "";

    display: block;

    width: 120px;
    height: 4px;

    margin-top: 18px;

    background: var(--brands-green);

    transform: rotate(-1deg);

}


/* descrição */

.msk-bio .brands-showcase__header p {

    max-width: 760px;

    margin: 32px 0 0;

    color: var(--brands-text);

    font-size: 1rem;

    line-height: 1.75;

}


/* ==========================================================
   MARCAS — ÁREA DAS DUAS FAIXAS
   ========================================================== */

.msk-bio .brands-showcase__rows {

    position: relative;

    z-index: 2;

    border-top: 1px solid var(--brands-line);
    border-bottom: 1px solid var(--brands-line);

}


/* fades das laterais */

.msk-bio .brands-showcase__rows::before,
.msk-bio .brands-showcase__rows::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 5;

    width: clamp(45px, 10vw, 180px);

    pointer-events: none;

}


.msk-bio .brands-showcase__rows::before {

    left: 0;

    background:

        linear-gradient(
            to right,
            var(--brands-bg) 0%,
            rgba(24, 23, 24, 0) 100%
        );

}


.msk-bio .brands-showcase__rows::after {

    right: 0;

    background:

        linear-gradient(
            to left,
            var(--brands-bg) 0%,
            rgba(24, 23, 24, 0) 100%
        );

}


/* ==========================================================
   MARCAS — FAIXAS
   ========================================================== */

.msk-bio .brands-row {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 22px 0;

}


.msk-bio .brands-row + .brands-row {

    border-top: 1px solid var(--brands-line);

}


.msk-bio .brands-row--right {

    background: rgba(255, 255, 255, 0.012);

}


/* ==========================================================
   MARCAS — TRILHO
   ========================================================== */

.msk-bio .brands-row__track {

    display: flex;

    width: max-content;

    will-change: transform;

}


/* linha 1 → esquerda */

.msk-bio
.brands-row--left
.brands-row__track {

    animation:
        brands-scroll-left 52s linear infinite;

}


/* linha 2 → direita */

.msk-bio
.brands-row--right
.brands-row__track {

    animation:
        brands-scroll-right 65s linear infinite;

}


/* pausa ao passar o mouse */

.msk-bio
.brands-row:hover
.brands-row__track {

    animation-play-state: paused;

}


/* ==========================================================
   MARCAS — GRUPOS
   ========================================================== */

.msk-bio .brands-row__group {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    gap: clamp(55px, 6vw, 95px);

    padding-right: clamp(55px, 6vw, 95px);

}


/* ==========================================================
   MARCAS — CADA LOGO
   ========================================================== */

.msk-bio .brands-logo {

    display: flex;

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

    flex: 0 0 150px;

    width: 150px;
    height: 84px;

}


/* ==========================================================
   MARCAS — IMAGEM
   ========================================================== */

.msk-bio .brands-logo img {

    display: block;

    width: auto;
    height: auto;

    max-width: 145px;
    max-height: 58px;

    object-fit: contain;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);

    opacity: 0.55;

    transition:
        opacity 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;

}


/* cor original no hover */

.msk-bio .brands-logo:hover img {

    filter: none;

    opacity: 1;

    transform: scale(1.08);

}


/* ==========================================================
   MARCAS — ANIMAÇÕES
   ========================================================== */

@keyframes brands-scroll-left {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}


@keyframes brands-scroll-right {

    from {

        transform: translateX(-50%);

    }

    to {

        transform: translateX(0);

    }

}


/* ==========================================================
   MARCAS — RODAPÉ
   ========================================================== */

.msk-bio .brands-showcase__footer {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: calc(100% - 40px);
    max-width: 1170px;

    margin: 24px auto 0;

    color: #777477;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.13em;

}


.msk-bio .brands-showcase__footer span {

    display: flex;

    align-items: center;

    gap: 9px;

}


.msk-bio .brands-showcase__footer i {

    display: block;

    width: 6px;
    height: 6px;

    background: var(--brands-green);

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .msk-bio .bio-hero-grid {

        gap: 32px;

    }


    .msk-bio .bio-brand-panel {

        min-height: 320px;

    }


    .msk-bio .bio-story {

        gap: 32px;

    }


    .msk-bio .bio-cards {

        gap: 16px;

    }


    .msk-bio .bio-card {

        padding: 20px;

    }


    /* marcas */

    .msk-bio .brands-showcase {

        padding-top: 75px;

    }


    .msk-bio .brands-showcase__header {

        margin-bottom: 50px;

    }


    .msk-bio .brands-row__group {

        gap: 55px;

        padding-right: 55px;

    }


    .msk-bio .brands-logo {

        flex-basis: 135px;

        width: 135px;
        height: 75px;

    }


    .msk-bio .brands-logo img {

        max-width: 130px;
        max-height: 52px;

    }


    .msk-bio
    .brands-row--left
    .brands-row__track {

        animation-duration: 46s;

    }


    .msk-bio
    .brands-row--right
    .brands-row__track {

        animation-duration: 57s;

    }

}


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

@media (max-width: 680px) {

    .msk-bio .bio-wrap {

        width: calc(100% - 40px);

    }


    .msk-bio .bio-hero {

        padding: 112px 0 48px;

    }


    .msk-bio .bio-hero-grid,
    .msk-bio .bio-story,
    .msk-bio .bio-cards {

        grid-template-columns: 1fr;

    }


    .msk-bio .bio-brand-panel {

        min-height: 290px;

    }


    .msk-bio .bio-brand-panel img {

        width: 250px;

    }


    .msk-bio .bio-story {

        gap: 8px;

        padding-block: 52px;

    }


    .msk-bio .bio-principles {

        padding-block: 48px;

    }


    .msk-bio .bio-cards {

        margin-top: 28px;

    }


    /* ======================================================
       MARCAS — MOBILE
       ====================================================== */

    .msk-bio .brands-showcase {

        padding: 55px 0 38px;

        background-size: 24px 24px;

    }


    .msk-bio .brands-showcase__header {

        width: calc(100% - 40px);

        margin-bottom: 40px;

    }


    .msk-bio .brands-showcase__eyebrow {

        margin-bottom: 20px;

    }


    .msk-bio .brands-showcase__eyebrow i {

        width: 75px;

    }


    .msk-bio .brands-showcase__header h2 {

        font-size: clamp(2rem, 10vw, 3rem);

    }


    .msk-bio .brands-showcase__header p {

        margin-top: 28px;

        font-size: 0.95rem;

    }


    .msk-bio .brands-row {

        padding: 15px 0;

    }


    .msk-bio .brands-row__group {

        gap: 38px;

        padding-right: 38px;

    }


    .msk-bio .brands-logo {

        flex-basis: 110px;

        width: 110px;
        height: 65px;

    }


    .msk-bio .brands-logo img {

        max-width: 105px;
        max-height: 43px;

    }


    .msk-bio .brands-showcase__rows::before,
    .msk-bio .brands-showcase__rows::after {

        width: 35px;

    }


    .msk-bio .brands-showcase__footer {

        width: calc(100% - 40px);

    }


    .msk-bio
    .brands-showcase__footer
    span:last-child {

        display: none;

    }


    /* velocidade mobile */

    .msk-bio
    .brands-row--left
    .brands-row__track {

        animation-duration: 39s;

    }


    .msk-bio
    .brands-row--right
    .brands-row__track {

        animation-duration: 48s;

    }

}


/* ==========================================================
   ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .msk-bio .brands-row {

        overflow-x: auto;

        scrollbar-width: thin;

    }


    .msk-bio .brands-row__track {

        animation: none !important;

    }


    .msk-bio
    .brands-row__group[aria-hidden="true"] {

        display: none;

    }

}