@font-face {
    font-family: "Clash Display";
    src: url("Assets/ClashDisplay_Complete/ClashDisplay_Complete/Fonts/TTF/ClashDisplay-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

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

/* Evita flash antes do GSAP */
.pre-animate {
    opacity: 0;
    visibility: hidden;
}

h1,
h3,
.statsNumber,
.popularTitle, .artistsTitle, .subscribe {
    font-family: "Clash Display", sans-serif;
}

p {
    font-family: poppins;
}

.getStarted {
    background: linear-gradient(90deg, #F7CC5D 0%, #8FC572 100%);
    opacity: 0;
}

.subscribeButton{
    background: linear-gradient(90deg, #F7CC5D 0%, #8FC572 100%);
}

.learnMore{
    opacity: 0;
}

.learnMore img, .seeAll img {
    transition: all .5s ease;
}

.learnMore:hover, .seeAll:hover {
    img {
        margin-left: 5px;
    }
}

.learnMore:active, .seeAll:active{
    img {
            margin-left: 0px;
        }
}

.stats {
    background-color: rgba(255, 255, 255, 0.024);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(114, 114, 114, 0.275);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.personOneBox {
    background: linear-gradient(90deg, #3E4434 0%, #48422E 100%);
}

.personTwoBox {
    background: linear-gradient(90deg, #394132 0%, #2D473E 100%);
}

.personThreeBox {
    background: linear-gradient(90deg, #5B5751 0%, #4B3432 100%);
}

.personFourthBox {
    background: linear-gradient(90deg, #423A2F 0%, #483B2B 100%);
}

.um{
    flex:1.5;
}

.dois{
    flex: 1;
}

.artists{
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background-color: rgba(48, 48, 48, 0.312);
}

.oculus{
    filter: brightness(0) invert(1) opacity(1);
}
.greec{
    filter: saturate(1);
}

 /* Adicionar ao seu CSS existente */
  footer {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Opcional: adicionar uma linha sutil no topo do footer */
  footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: all 0.8s ease;
  }
  
  /* Adicione esta classe via JS se quiser animar a linha */
  .footer-revealed::before {
    opacity: 1;
    transform: scaleX(1);
  }