/* FONTS */

@font-face {
    font-family: 'Neue Haas Display Pro 65';
    src: url('fonts/NHaasGroteskDSPro-65Md.woff2') format('woff2');
}

@font-face {
    font-family: 'Neue Haas Display Pro 55';
    src: url('fonts/NHaasGroteskDSPro-55Rg.woff2') format('woff2');
}


/* BASE */

body {
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 8vw;
    padding-bottom: 16px;
}

#indexbody {
    gap: 16vw;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
a {
    margin: 0;
    font-family: "Neue Haas Display Pro 55", sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3pt;
    word-break: break-word;
}

h1 {
    margin: 0;
    margin-top: 8px;
    padding: 0;

    font-family: "Neue Haas Display Pro 65", sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 10vw, 156px);
    line-height: 0.85;
    letter-spacing: -1%;
}

img,
video {
    max-width: 100%;
    height: 100%;
}

.hyperlink {
    text-align: right;
    color: #4F5CD6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hyperlink:hover {
    cursor: pointer;
    text-decoration: underline;
}

/* TAGS */

.tag {
    height: 18px;
    padding: 0px 6px;
    gap: 4px;

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

.tag p {
    font-size: 10px;
}

.tag img {
    height: 8px;
}

.tagpoint {
    height: 14px;
    width: auto;
}

.taglist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
}

#identite_visuelle {
    border-radius: 50px;
    background-color: #C72D1B;
    color: #BFD3D8;
}

#webdesign {
    border-radius: 1px;
    background-color: #3B29DE;
    color: #BFD3D8;
}

#print {
    border-radius: 1 1 10px 10px;
    background-color: #606060;
    color: #D6ED17;
}

#motion_design {
    border-radius: 50px;
    background-color: #F89C1F;
    color: #02343F;
}

#design_generatif {
    border-radius: 1px;
    background-color: #91F9DC;
    color: #02343F;
}

#installation {
    border-radius: 1px;
    background-color: #FB9DF7;
    color: #02343F;
}

#illustration {
    border-radius: 50px;
    background-color: #B3EE3E;
    color: #02343F;
}

#expression_plastique {
    border-radius: 1 1 10px 10px;
    background-color: #6F5438;
    color: #BFD3D8;
}

#modelisation_3d {
    border-radius: 1px;
    background-color: #6600FF;
    color: #BFD3D8;
}

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

header {
    margin-left: 8px;
    margin-right: 8px;
    gap: 4px;

    display: flex;
    flex-direction: column;
}

/* Nom */

.name,
.name:visited,
.name:active {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 75%;
    border-bottom: 1px solid black;
    overflow: hidden;

    color: inherit;
    text-decoration: none;
}

.name h1 {
    animation: revealFromBottom 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98);
}

#arrow {
    height: clamp(32px, 8vw, 116px);
    padding-top: clamp(2px, 10vw, 7px);
}

#reveal-arrow {
    animation: 
    revealFromBottom 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98),
    arrowShake 1.5s ease-in-out 0.75s infinite;

}

.hover-text {
    display: none;
    white-space: nowrap;
}

.name:hover {
    cursor: pointer;
    color: #4F5CD6;
}

#nameoverride {
    cursor: default;
    color: black;
}

.name:hover .default-text {
    display: none;
}

.name:hover .hover-text {
    display: block;
}

.project-name, 
.project-name:visited,
.project-name:active {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 75%;
    border-bottom: 1px solid black;
    overflow: hidden;

    color: inherit;
    text-decoration: none;
}

.project-name h1 {
    animation: revealFromBottom 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98);
    animation-fill-mode:backwards;
}

.project-name:hover {
    color: #4F5CD6;
    fill: #4F5CD6;
}

.project-name:hover .default-text {
    display: none;
}

.project-name:hover .hover-text {
    display: block;
}

/* ===============================
   NAVIGATION
================================ */

nav {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    overflow: hidden;
}


/* ====== SECTIONS ====== */

.section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: -webkit-fill-available;

    animation: revealFromBottom 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98);
}

.project-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: -webkit-fill-available;

    animation: revealFromBottom 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98);
}

#tag-section {
    width: 50%;
}

.section_name {
    margin: 0;
    padding-bottom: 2px;
    border-bottom: 1px solid black;
}

.section_info {
    max-width: none;
}


/* ====== GRILLES ====== */

.section_grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
}

.section_grid .label {
    opacity: 0.5;
}

.section_grid .content {
    text-align: right;
    color: #4F5CD6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section_grid .content:hover {
    cursor: pointer;
    text-decoration: underline;
}

#blank_content {
    color: black;
    text-decoration: none;
    cursor: text;
}


/* ====== INDEX ====== */

.index_grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    column-gap: 16px;
    max-width: 600px;
}

.index_number {
    opacity: 0.5;
    font-weight: 300;
}

.index_content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.index_content:hover {
    cursor: pointer;
    color: #4F5CD6;
    text-decoration: underline;
}

/* ====== PROJECTS ====== */

.project-list {
    display: flex;
    flex-direction: column;
}

.project {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    padding-bottom: 10px;

    overflow: hidden;
    animation: revealFromBottom 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98);
}

.project-overflow {
    overflow: hidden;
}

.project:hover {
    cursor: pointer;
    background-color: #f0f0f0;
}

.project:hover .marquee .project-content-track {
    height: 203px;

    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.35s;
}

.project-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 2px;
    border-bottom: black 1px solid;
    margin-left: 8px;
    margin-right: 8px;
}

.project-header-info {
    display: flex;
    flex: row;
    gap: 16px;
}

.project-content {
    display: flex;
    margin: 0px 8px;

    overflow: hidden;
}

.project-content-track {
    height: 200px;
    display: flex;
    gap: 4px;
    width: max-content;
    overflow: hidden;

    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.35s;
}

.marquee {
    display: flex;
    width: max-content;
    gap: 4px;
    animation: marquee 25s linear infinite;

    will-change: transform;
    animation-play-state: paused;
}

/* PAGE CONTENT */

.page-content {
    height: clamp(400px, 35vw, 500px);
    gap: 4px;
    margin: 0px 8px;
    padding-bottom: 4px;

    display: flex;
    flex-direction: row;
    align-items: end;
    overflow-x: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.page-content:active {
    cursor: grabbing;
}

.page-content img {
    pointer-events: none; 
}

.page-content .img-overflow img,
.page-content .img-overflow video {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;

    animation: revealFromBottomImg 0.75s cubic-bezier(0.14, 0.46, 0.28, 0.98);
}

.img-overflow {
    overflow: hidden;
    height: 100%;
    flex-shrink: 0;
}

.songs {
    width: 100%;
    gap: 32px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* CUSTOM SCROLLBAR

    ::-webkit-scrollbar {
        width: 10px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: #c3c3c3;
    }

    ::-webkit-scrollbar-thumb:horizontal {
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #4F5CD6;
    } 
        */

/* RESPONSIVE */

@media (max-width: 960px) {
    nav .index_number {
        display: none;
        letter-spacing: 0px;
    }

    .index_grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .section:nth-child(1) {
        display: none;
    }    .name,
    .project-name {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    p,
    .section_grid .label,
    .section_grid .content,
    .section_name p {
        font-size: 16px;
        line-height: 20px;
    }

    a {
        font-size: 16px;
        line-height: 20px;
    }

    nav {
        flex-direction: column;
        gap: 12px;
    }

    .tag p {
    font-size: 12px;
    }

    .section_name {
        padding: 4px 0;
    }

    #tag-section {
        width: 100%;
    }

    .page-content {
    flex-direction: column;
    height: fit-content;
    align-items: end;
    overflow: none;
    cursor: default;

    gap: 8px;
    }

    .page-content:active {
    cursor: default;
    }

    ::-webkit-scrollbar {
    width: 0px;
    }
}

@media (hover: none) {
  .name:hover .default-text {
    display: block;
  }

  .name:hover .hover-text {
    display: none;
  }
}

/* ====== ANIMATIONS ====== */

@keyframes revealFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes revealFromBottomImg {
    from {
        transform: translateY(50%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes arrowShake {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-6px); }
    100% { transform: translateX(0); }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}