html {
    scroll-behavior: smooth;
  }
nav{
    display: flex;
    justify-content: space-between;
}


nav ul{
    list-style-type: none; 
    margin-right: 50px;

}

nav ul li{
    text-align: end;
    margin-top: 10px;
}

nav a{
    color: white;
    text-decoration-line: none;
    
}
#loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.load {
    width: 400px;
    height: 250px;
    transform-origin: center;
}

.load path {
    fill: none;
    stroke: black;
    stroke-width: 10;
    stroke-linejoin: round;
}


.portfolio{
    font-size: 250px;
    color: white;
    margin:0;
    font-weight: 400;
}

.folio{
    text-align: end;
}

.homefolio{
 
    width: 150px;
    height: 200px;
    font-weight: 600;
    transition: transform 0.5s ease-in-out;
    
}

.homefolio:hover{
 transform: rotate(180deg);
}

.homefolio1{
    fill: none;
    stroke: white;
    stroke-width: 20;
    stroke-linejoin: round;
    transition: stroke 0.5s ease-in-out;
}

.port{
    display: flex;
    align-items: center;
}




.subcontainer{
    display: flex;
    gap:25px;

}


.fita_texto {
    animation: scrollText 10s linear infinite;
    display: flex;
    gap:25px;
    white-space: nowrap;
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100vw; /* Ocupa a largura total da janela */
    margin-left: calc(-100px); /* Ajusta isto se o teu body tiver margem lateral (ex: 100px) */
    background: #222;
    padding: 30px 0;
    margin-top: 100px;
    position: relative;
    left: 0;
}

.marquee-content {
    display: inline-block;
    will-change: transform; /* Torna a animação mais suave */
    scroll-margin-top: 100px;
}

.marquee-content span {
    display: inline-block;
    font-size: 40px; /* A tua fonte desejada */
  
    text-transform: uppercase;
    color: white;
    padding-right: 20px; /* Ajusta o espaço final de cada bloco */
}
.item {
    display: flex;
    align-items: center;
    gap:25px;
}

.ponto{
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 100px;
}

.fita_texto p{
    font-size:40px;
    text-transform: uppercase;
    color: white;
}
@keyframes scrollText {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

.contact{
    color: white;
    
    text-align: center;
}

.container-contact{
    display: flex;
    justify-content: space-around;
    overflow-x: hidden;
    margin-top: 200px;
}

.brain{
    display: flex;
    justify-self: end;
}

.text, .text1 {
    font-size: 40px;
    margin: 10px 0 0 0;
    color: white;
    text-transform: uppercase;
    justify-content: center;
}

.text{
    font-weight: 700;
}


.fixed-text {
    color: white;
    font-size: 2rem;
}

.animated-text {
    color: white;
    font-size: 2rem;
    height: 2.5rem;
    overflow: hidden;
}

.animated-text span {
    padding-bottom: 0.5rem;
    display: block;
     animation: textLoop 12s infinite; 
    font-weight: 600;
}

@keyframes textLoop {
    0% { transform: translateY(0%); }
    12.5% { transform: translateY(-100%); }
    25% { transform: translateY(-200%); }
    37.5% { transform: translateY(-300%); }
    50% { transform: translateY(-400%); }
    62.5% { transform: translateY(-500%); }
    75% { transform: translateY(-600%); }
    87.5% { transform: translateY(-700%); }
    100% { transform: translateY(0%); }
}

.mind{
    font-size: 40px;
    font-weight: 600;
}

.mind p{
    margin: 0;
}

 /* --- Estabilização da Secção Final --- */

/* Layout em duas colunas */
.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.footer-left {
    flex: 1;
}

.footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Brain e as palavras lá dentro */
.brain-container {
    position: relative;
    width: 451px;
    height: 531px;
}

.words-inside-brain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* AS TUAS ROTAÇÕES ORIGINAIS */
#got { position: absolute; top: 30px; left: 100px; transform: rotate(-15deg); font-size: 45px; font-weight: 800; color: black; transition: color 0.3s ease;}
#something { position: absolute; top: 100px; left: 130px; transform: rotate(5deg); font-size: 45px; font-weight: 800; color: black; transition: color 0.3s ease;}
#on { position: absolute; top: 170px; left: 120px; transform: rotate(-10deg); font-size: 45px; font-weight: 800; color: black; transition: color 0.3s ease;}
#your { position: absolute; top: 230px; left: 240px; font-size: 45px; font-weight: 800; color: black; transition: color 0.3s ease;}
#mind { position: absolute; top: 300px; left: 120px; transform: rotate(5deg); font-size: 45px; font-weight: 800; color: black; transition: color 0.3s ease;}

/* Contactos na esquerda */
.sub-quote { margin-bottom: 30px; color: white; }
.container-contact { display: flex; flex-direction: column; }
.contact { display: flex; align-items: center; gap: 15px; }


/* Contactos organizados abaixo do Brain */
.container-contact-footer {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.container-contact-footer .contact {
    display: flex;
    align-items: center;
}

.container-contact-footer i {
    font-size: 24px;
    color: #E0955C;
}

#crafting{
    margin-top: 100px;
}

/* .cv{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background-color: #E0955C;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 10px;
    margin-left: -100px;
} */

.btn:hover{
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);;
}


.quote{
    width: 50%;
    font-size: 24px;
    margin-top: 100px;
    text-align: justify;
}


#text-container{
    margin-bottom: -250px;
    z-index: 1;
}

.foto1{
 width: 220px;
 height: 220px;
 object-fit: cover;
 margin-left: -50px;
 border-radius: 10px;
 transform:  rotate(-10deg) ;
}

.foto2{
    width: 250px;
 height: 250px;
 object-fit: cover;
 border-radius: 10px;
 transform:rotate(10deg);
 margin-left: 50px;
}
 
.meet{
    margin-top: 100px;
}



.tangram{
    margin-top: 200px;
    overflow: visible;
    display: flex;
    justify-self: center;
    border-radius: 10px;
    cursor: pointer;
}


.projetos{
    width: 440;
    height: 440;
    fill: #E7D8AA;    
}

.tri-azul{
   fill: #8BE7D8;
   transition: transform 0.7s ease-in-out;
   
}

.tangram:hover .tri-azul {
    transform: translate(-300px, -100px) rotate(-15deg);
    
    transform-box: fill-box;
    transform-origin: center;
}

.tri-roxo{
    fill: #B27DC5 ;
    transition: transform 0.7s ease-in-out;
}

.tangram:hover .tri-roxo {
    transform: translate(100px, -150px) rotate(15deg);
    transform-box: fill-box;
    transform-origin: center;
}

.tri-amarelo{
    fill: #DBD97C;
    transition: transform 0.7s ease-in-out;
}

.tangram:hover .tri-amarelo {
    transform: translate(300px, -100px) rotate(20deg);
    transform-box: fill-box;
    transform-origin: center;
}

.tri-laranja{
   
    fill: #E0955C;
    transition: transform 0.7s ease-in-out;
}

.tangram:hover .tri-laranja {
    transform: translate(200px, 100px) rotate(-10deg);
    transform-box: fill-box;
    transform-origin: center;
}

.tri-verde{
    fill: #91DE7F;
    transition: transform 0.7s ease-in-out;
}

.tri-verde path, .tri-amarelo path, .tri-laranja path, .tri-azul path, .quadr rect, .paral path, .tri-roxo path {
    stroke: black; 
    stroke-width: 2px;
}

.tangram:hover .tri-verde {
    transform: translate(-150px, 250px) rotate(-30deg);
    
    transform-box: fill-box;
    transform-origin: center;
}

.quadr{
    fill: #748ACC; 
    transition: transform 0.7s ease-in-out;
}

.tangram:hover .quadr {
    transform: translate(-100px,-250px) ;
   
}

.paral{
    fill: #C95454;
    transition: transform 0.7s ease-in-out;
    
}

.tangram:hover .paral {
    transform: translate(-250px, 50px) rotate(10deg);
   
    transform-box: fill-box;
    transform-origin: center;
}

.tangram:hover{
    margin-top: 0;
    padding: 200px 300px 200px 300px;
}


.tangram text{
 font-size: 18px;
 font-weight: 500;
 text-transform: uppercase;
fill: black;
}

.projetos + text{
    font-size: 40px;
}


.container-tools {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Garante que a secção ocupa o ecrã todo durante o pin */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#tools {
    font-size: 80px;
    margin-bottom: 50px;
    position: relative; /* Mudamos de absolute para relative */
    z-index: 10;
    width: 100%;
    text-align: left;
}

.tools {
    display: flex;
    gap: 30px;
    padding-left: 0;
    will-change: transform; /* Otimiza a performance da animação */
}

/* Garante que as imagens não quebrem o layout */
.tool1, .tool2 {
    flex-shrink: 0; /* Impede que as boxes encolham */
    width: 250px;
    height: 250px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.tool1 img, .tool2 img{
    width: 50px;
    max-height: 120px;
    margin-bottom: 10px;
    object-fit: contain;
    border-radius: 0;
    
} 
.tool1 p, .tool2 p{
    margin: 0;
    font-size: 24px;
    text-align: center;
} 

#tools{
    font-size: 50px;
}

.container-tools{
    margin-top: 200px;
    margin-bottom: 200px;
    overflow: hidden;
}







.flip-card {
    
    background-color: transparent;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    margin: 50px 0 0 -30px;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    border-radius: 100px;
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    border-radius: 100px;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #E0955C;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 10px;
    
  }
  
  /* Style the back side */
  .flip-card-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E0955C;
    color: white;
    transform: rotateY(180deg);
  }
    

.outro{
    font-size: 12px;
    text-align: center;
    margin-top: 100px;
}



/* --- ADAPTAR O INDEX.CSS PARA MOBILE --- */

@media (max-width: 768px) {
    
    /* 1. Ajustar o Marquee (Fitas de texto) */
    .marquee-container {
        margin-left: -20px; /* Alinhado com a nova margem do body */
        padding: 15px 0;    /* Mais fino no telemóvel */
        margin-top: 50px;
    }

    .marquee-content span {
        font-size: 24px;    /* Texto menor para não ocupar a altura toda */
    }

    /* 2. O Título "PORTFOLIO" */
    /* Como usas flex no .port, vamos empilhar no mobile */
    .port {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .portfolio {
        font-size: 80px; /* Tamanho muito menor que os 250px originais */
    }

    .homefolio {
        width: 80px;
        height: 100px;
    }

    /* 3. O Tangram (MUITO IMPORTANTE) */
    /* No mobile, o hover de 300px faz as peças desaparecerem do ecrã */
    .tangram {
        margin-top: 50px;
        transform: scale(0.8); /* Encolhe um pouco o SVG para caber */
    }

    /* Reduzimos drasticamente a "explosão" das peças no hover */
    .tangram:hover .tri-azul { transform: translate(-40px, -40px) rotate(-5deg); }
    .tangram:hover .tri-roxo { transform: translate(20px, -50px) rotate(5deg); }
    .tangram:hover .tri-amarelo { transform: translate(60px, -40px) rotate(10deg); }
    .tangram:hover .tri-laranja { transform: translate(40px, 40px) rotate(-5deg); }
    .tangram:hover .tri-verde { transform: translate(-30px, 60px) rotate(-10deg); }
    .tangram:hover .quadr { transform: translate(-20px, -60px); }
    .tangram:hover .paral { transform: translate(-50px, 20px) rotate(5deg); }

    /* Diminuir o tamanho do texto dentro das peças */
    .tangram text {
        font-size: 22px; 
    }
    .projetos + text {
        font-size: 30px;
    }

    /* 4. Tools & Skills */
    .container-tools {
        min-height: auto;
        margin-top: 100px;
    }

    #tools {
        font-size: 40px;
        text-align: center;
    }

    /* Se o teu JS faz scroll horizontal, isto garante que as boxes não encolhem */
    .tool1, .tool2 {
        width: 180px;
        height: 180px;
    }

    .tool1 p, .tool2 p {
        font-size: 18px;
    }

    /* 5. A Secção "Meet Me" e a Citação */
    .quote {
        width: 100%; /* Ocupa a largura toda */
        margin-top: 40px;
        font-size: 18px;
        padding: 0 10px;
    }

    .foto1, .foto2 {
        width: 180px;
        height: 180px;
    }
}