/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

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

/* GERAL */
body {
font-family: "Poppins", sans-serif;
height: 100vh;
width: 100%;
overflow: hidden;
}

#wrapper {
background-color: #9DD38B;
height: 100vh;
max-height: 100vh;
width: 100%;
color: #4D4E94;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* HOME */
.homepage {
width: 100%;
min-height: 100vh;
font-weight: 900;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
animation: cicloDeCores 4s infinite alternate step-end;
cursor: pointer;
text-decoration: none;
}

.cmp-gigante {
font-size: 600px;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 80px;
color: inherit;
}

.tap {
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
color: inherit;
}

@keyframes cicloDeCores {
0% {
background-color: #9DD38B;
color: #4D4E94;
}
14.285% {
background-color: #F1E463;
color: #D93487;
}
28.57% {
background-color: #C41515;
color: #7BF4E0;
}
42.855% {
background-color: #0076B5;
color: #F77100;
}
57.14% {
background-color: #8AA000;
color: #1C1A9B;
}
71.425% {
background-color: #00F5DC;
color: #C20845;
}
85.71% {
background-color: #CF6440;
color: #292F63;
}
100% {
background-color: #EDCDBC;
color: #BA4ABD;
}
}

/* HEADER */
header {
font-size: 30px;
font-weight: 900;
width: 100%;
display: flex;
height: 100px;
justify-content: center;
align-items: center;
background-image: url("./Images/header.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #4D4E94;
position: relative;
}

header a {
text-decoration: none;
color: #4D4E94;
}

.back-arrow {
position: absolute;
left: 40px;
font-size: 40px;
font-weight: 400;
color: inherit;
text-decoration: none;
}

.img-seta {
width: 50px; /* Aumenta ou diminui este valor para o tamanho pretendido */
height: auto; /* Mantém a proporção */
display: block;
}

/* FOOTER */
footer {
font-size: 10px;
font-weight: 400;
width: 100%;
display: flex;
height: 80px;
justify-content: center;
align-items: center;
background-color: #9DD38B;
color: #4D4E94;
text-align: center;
margin-top: auto;
}

/* MENU */
.flores {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 92px;
gap: 81px;
}

.cat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 35px;
text-decoration: none;
color: inherit;
}

.img-flor {
width: 395px;
height: 332px;
}

.titulos-menu {
font-weight: 900;
font-size: 40px;
}

/* ABOUT */

.about-container {
display: flex;
flex-direction: row;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 20px 80px;
gap: 100px;
flex: 1;
min-height: 0;
}

.about-text {
flex: 1;
display: flex;
flex-direction: column;
width: 40%;
}

.about-text h1 {
font-size: 30px;
font-weight: 900;
margin-bottom: 25px;
}

.about-text p {
flex: 1;
display: flex;
flex-direction: column;
max-width: 450px;
}

.about-images {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
gap: 40px;
height: 100%;
min-height: 0;
}

.film-strip {
background-color: #111111;
width: 300px;
height: 100%;
padding: 30px 35px;
display: flex;
flex-direction: column;
gap: 20px;
background-image:
linear-gradient(to bottom, #ffffff 10px, transparent 10px),
linear-gradient(to bottom, #ffffff 10px, transparent 10px);
background-size: 12px 20px;
background-position: 10px top, calc(100% - 10px) top;
background-repeat: repeat-y;
overflow-y: auto;
scrollbar-width: none;
cursor: ns-resize;
}

.film-strip::-webkit-scrollbar {
display: none;
}

.film-strip img {
width: 100%;
height: auto;
background-color: #fff;
object-fit: cover;
cursor: ns-resize;
}

/* ABOUT ME / RESUME STYLING */

.bio-passport {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1.5px solid rgba(77, 78, 148, 0.3);
}

.passport-line {
font-size: 12px;
line-height: 1.6;
margin-bottom: 6px;
color: inherit;
}

.quote-signature {
font-size: 13px;
line-height: 1.5;
opacity: 0.9;
}

.timeline-entry {
margin-bottom: 16px;
}

.timeline-date {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 3px;
opacity: 0.75;
}

.timeline-institution,
.timeline-role {
font-size: 13px;
line-height: 1.4;
margin-bottom: 2px;
}

.timeline-desc {
font-size: 12px;
line-height: 1.4;
opacity: 0.85;
}

/* PORTFOLIO */
.portfolio-container {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
padding: 30px 80px 30px 40px;
gap: 50px;
flex: 1;
min-height: 0;
}

.portfolio-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
height: 45%;
}

.film-strip-horizontal {
background-color: #111111;
flex: 1.2;
height: 100%;
padding: 30px 20px;
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
background-image:
linear-gradient(to right, #ffffff 10px, transparent 10px),
linear-gradient(to right, #ffffff 10px, transparent 10px);
background-size: 24px 12px;
background-position: 0 10px, 0 calc(100% - 10px);
background-repeat: repeat-x;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
cursor: ew-resize;
}

.film-strip-horizontal img {
height: 100%;
width: auto;
max-height: 100%;
background-color: #fff;
object-fit: cover;
border-radius: 2px;
cursor: ew-resize;
}

.film-strip-horizontal a {
display: inline-block; /* ou flex, dependendo de como estruturaste */
height: 100%;
}

.film-strip-horizontal a img {
display: block;
height: 100%;
width: auto;
}

.film-strip-horizontal::-webkit-scrollbar {
display: none;
}

.portfolio-desc {
flex: 1;
display: flex;
align-items: center;
}

.portfolio-desc p {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
text-align: justify;
color: inherit;
margin: 0;
}

.vertical-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 24px;
white-space: nowrap;
color: inherit;
text-align: center;
}

.vertical-text h1 {
font-weight: 900;
}

.vertical-text p {
margin: 0;
padding-right: 10px;
font-weight: 500;
}

/* CONTACTS */

.contacts-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 20px 80px 40px 80px;
flex: 1;
min-height: 0;
}

.lets-work-wrapper {
margin-bottom: auto;
}

.lets-work {
display: flex;
align-items: center;
gap: 15px;
}

.contact-flower {
width: 60px;
height: auto;
}

.lets-work h2 {
font-size: 24px;
font-weight: 900;
}

.contacts-content {
display: flex;
flex-direction: row;
gap: 80px;
width: 100%;
}

.photo-and-details {
display: flex;
flex-direction: column;
gap: 15px;
flex: 1;
}

.contact-photo {
width: 362px;
height: 362px;
object-fit: cover;
border-radius: 2px;
}

.contact-details p {
font-size: 14px;
font-weight: 500;
margin-bottom: 5px;
}

.contacts-form {
display: flex;
flex-direction: row;
flex: 1.5;
gap: 20px;
}

.form-left-col, .form-right-col {
display: flex;
flex-direction: column;
flex: 1;
gap: 20px;
}

.form-input, .form-btn {
height: 60px;
padding: 0 25px;
border-radius: 30px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 400;
outline: none;
}

.form-input {
background-color: transparent;
border: 2px solid #4D4E94;
color: #4D4E94;
}

.form-input::placeholder, .form-textarea::placeholder {
color: #4D4E94;
opacity: 0.7;
}

.form-textarea {
flex: 1;
background-color: transparent;
border: 2px solid #4D4E94;
border-radius: 20px;
padding: 20px 25px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 400;
color: #4D4E94;
outline: none;
resize: none;
}

.form-btn {
margin-top: auto;
background-color: #4D4E94;
color: #9DD38B;
border: none;
font-size: 16px;
font-weight: 900;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
}

.form-btn:hover {
transform: scale(1.02);
opacity: 0.9;
}

/* ARK LAB */

.project-details {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}

.project-subtitle {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: inherit;
}

.project-meta {
font-size: 12px;
line-height: 1.4;
margin-bottom: 25px;
opacity: 0.85;
}

/* Área de scroll suave para os textos descritivos */
.project-scroll {
    overflow-y: auto;
    padding-right: 15px;
    scrollbar-width: none; /* Firefox */
    
    /* Máscara inicial com transição suave */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    transition: -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
}

.project-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Quando chega ao fundo, o gradiente desaparece por completo */
.project-scroll.is-at-bottom {
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
}

.text-block {
margin-bottom: 20px;
}

.text-block h2 {
font-size: 15px;
font-weight: 800;
margin-bottom: 6px;
color: inherit;
}

.text-block p {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
text-align: justify;
color: inherit;
margin: 0;
}


/* =========================================================
   ADAPTAÇÃO RESPONSIVA PARA DISPOSITIVOS MÓVEIS (MOBILE)
   ========================================================= */

@media (max-width: 900px) {

    /* 1. Libertar o scroll de todo o site no telemóvel */
    body, #wrapper {
        height: auto !important;
        min-height: 100vh;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* 2. Cabeçalho e Rodapé */
    header {
        height: 75px;
        font-size: 22px;
    }

    .back-arrow {
        left: 20px;
    }

    .img-seta {
        width: 34px;
    }

    footer {
        height: auto;
        padding: 30px 20px;
        margin-top: 30px;
    }

    /* 2. Homepage */
    .cmp-gigante {
        font-size: 26vw; /* Escala perfeitamente para qualquer largura de telemóvel */
        padding-bottom: 20px;
        line-height: 1;
    }

    .tap {
        font-size: 13px;
        text-align: center;
        padding: 0 20px;
    }
    /* Mantém o ecrã inteiro e o CMP centrado no meio exato */
    .homepage {
        position: relative;
        height: 100vh;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
    }

    /* Fixa o texto na base do ecrã sem interferir com o CMP */
    .tap {
        position: absolute;
        bottom: 50px; /* Altera este valor se quiseres mais perto ou longe da borda inferior */
        left: 0;
        width: 100%;
        text-align: center;
    }

    /* 3. Menu Principal das Flores */
    .flores {
        flex-direction: column;
        padding: 40px 20px;
        gap: 45px;
    }

    .img-flor {
        width: 200px;
        height: auto;
    }

    .titulos-menu {
        font-size: 26px;
    }

    .cat {
        gap: 15px;
    }

    /* 4. About Me e Páginas de Projetos: Texto à esquerda e rolos à direita */
    .about-container {
        flex-direction: row; /* Mantém lado a lado */
        align-items: flex-start;
        padding: 20px 14px;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Coluna do texto à esquerda */
    .about-text {
        width: 58%;
        flex: none;
    }

    .about-text h1 {
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .project-subtitle {
        font-size: 14px;
        line-height: 1.3;
    }

    .project-meta {
        font-size: 11px;
        margin-bottom: 15px;
    }

    /* O texto flui de forma corrida com o scroll geral */
    .project-scroll {
        overflow: visible;
        padding-right: 0;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .about-text p, 
    .text-block p {
        font-size: 11.5px;
        line-height: 1.45;
        text-align: left;
    }

    .text-block h2 {
        font-size: 13px;
    }

    .passport-line, 
    .timeline-desc, 
    .timeline-institution, 
    .timeline-role {
        font-size: 11px;
    }

    /* Coluna das imagens à direita: tiras unidas de forma contínua */
    .about-images {
        width: 42%;
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 0; /* Remove a distância entre os rolos */
        height: auto;
    }

    .film-strip {
        width: 100%;
        max-width: 150px;
        height: auto;
        padding: 12px 14px; /* Espaçamento interior padrão */
        gap: 12px;
        overflow: visible;
        background-size: 7px 12px;
        background-position: 4px top, calc(100% - 4px) top;
    }

    /* O primeiro rolo não tem folga no fundo */
    .film-strip:first-child {
        padding-bottom: 6px;
    }

    /* O segundo rolo não tem folga no topo, mantendo o espaçamento uniforme das fotos */
    .film-strip:last-child {
        padding-top: 6px;
    }

    .film-strip img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    /* 5. Menu do Portfólio (IADE e NABA) */
    .portfolio-container {
        padding: 20px 16px;
        gap: 40px;
    }

    .portfolio-row {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 15px;
    }

    .vertical-text {
        writing-mode: horizontal-tb;
        transform: none;
        display: flex;
        align-items: baseline;
        gap: 10px;
        text-align: left;
        width: 100%;
    }

    .vertical-text h1 {
        font-size: 26px;
    }

    .vertical-text p {
        font-size: 13px;
        padding-right: 0;
    }

    .film-strip-horizontal {
        width: 100%;
        height: 190px;
        flex: none;
        padding: 18px 12px;
        background-size: 16px 8px;
        background-position: 0 5px, 0 calc(100% - 5px);
        -webkit-overflow-scrolling: touch;
    }

    .film-strip-horizontal img,
    .film-strip-horizontal a img {
        height: 100%;
        width: auto;
    }

    .portfolio-desc {
        width: 100%;
    }

    .portfolio-desc p {
        text-align: left;
        font-size: 12px;
    }

    /* 6. Página de Contactos */
    .contacts-container {
        padding: 20px 24px;
    }

    /* Espaçamento entre o título "Let's work!!" e o bloco dos contactos */
    .lets-work-wrapper {
        margin-bottom: 35px; /* Aumenta este valor se quiseres ainda mais distância */
    }

    .contacts-content {
        flex-direction: column;
        gap: 25px;
    }
    /* Alinhamento estrito à esquerda para o bloco da foto e dados */
    .photo-and-details {
        width: 100%;
        align-items: flex-start; /* Alinha tudo à esquerda */
        text-align: left;
    }

    .contact-details {
        text-align: left;
        width: 100%;
    }

    .contact-details p {
        font-size: 13px;
        text-align: left;
    }

    .contact-photo {
        width: 100%;
        max-width: 260px;
        height: 260px;
        margin: 0; /* Garante que não centraliza */
    }

    .contacts-form {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .form-left-col, 
    .form-right-col {
        width: 100%;
        gap: 15px;
    }

    .form-textarea {
        min-height: 110px;
    }

    .form-input, .form-btn {
        height: 50px;
    }
}