/* GENERAL */
@font-face {
    font-family: 'title-font';
    src: url(../fonts/PortaFont-Title.ttf) format('truetype');
}
@font-face {
    font-family: 'text-font';
    src: url(../fonts/PortaFont-Text.otf) format('truetype');
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'text-font', sans-serif;
    cursor: url('/assets/LB_cursor.webp'), auto;
}

button:hover, input:hover, a:hover {
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
  }

html {
    scroll-behavior: smooth;
}

/* BARRA DE NAVEGACIÓN */

nav {
    font-family: 'title-font', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}

.logo {
    padding: 0px 161px 0px 28px;
    display: flex;
    gap: 55px;
    letter-spacing: 2.5px;
}

.logo-home{
    padding-left: 28px;
    display: flex;
    gap: 55px;
    letter-spacing: 2.5px;
}

.nav-links {
    display: flex;
    gap: 55px;
    list-style: none;
    letter-spacing: 2.5px;
}

.nav-links a.active {
    color: rgb(100, 255, 137);
}

.right-side {
    padding: 10px 55px;
    display: flex;
    gap: 40px;
    list-style: none;
    text-decoration: none;
    letter-spacing: 2.5px;
}

/* HOME ICON */

.LB-logo-anim {
    height: 130px;
    position: relative;
    top: -22px;
    left: -20px;
}

.LB-logo {
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    height: auto;
    width: 53px;
    position: relative;
    top: 2px;
}

/* TOGGLE DE IDIOMAS */

.lang-toggle {
    display: flex;
    flex-direction: inherit;
    gap: 11px;
    list-style: none;
    letter-spacing: 2.5px;
}

.lang-toggle .check {
    order: 1;
  }

.lang-toggle .lang-en {
    order: 0;
  }

.lang-toggle .lang-esp {
    order: 2;
  }

.lang-esp {
    transition: color 0.3s;
}

.lang-en {
    color: rgb(100, 255, 137);
    transition: color 0.3s;
}

.check:checked ~ .lang-en {
    color: rgb(246, 241, 231);
}

.check:checked ~ .lang-esp{
    color: rgb(100, 255, 137);
}

.check {
    position: relative;
    height: 6px;
    width: 30px;
    top: 1px;
}

.check:before {
    content: '';
    position: absolute;
    width: 32px;
    height: 17px;
    background: #5B5B5B;
    border-radius: 25px;
    right: 0px;
}

.check:checked:before {
    background: #5B5B5B;
}

.check:after {
    content: '';
    position: absolute;
    left: 1px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 25px;
    box-sizing: border-box;
    top: 2.5px;
    transition: 0.15s;
}

/* TOGGLE BALL DESPLAZAMIENTO */
.check:checked:after {
    left: 14px;
}

/* LINKEDIN BUTTON */

.icon {
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    height: 21px;
    position: relative;
    top: -3px;
}

a {
    text-decoration: none;
    color: rgb(246, 241, 231);
    transition: color 0.3s ease;
}

a:hover {
    color: rgb(100, 255, 137);
}

/* TV DISPLAY GENERAL*/ 

/* Main Content */
.home-content {
    position: static;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: auto;
}

/* TV Display */
.tv-display {
    position: relative;

    width: 99vh;
    /* width: 50%; Resize */

    max-width: 1228px;
    padding-top: 0.5vw;
    padding-bottom: 2.8vw;
    aspect-ratio: 18 / 11.1;

    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;

    align-items: center;
}

/* TV Frame */
.tv-frame-off {
    position: absolute;
    z-index: 1;

    width: 100vh;
    /* width: 100%;
    height: auto; */

    display: block;
    z-index: 2;
    pointer-events: none; /* passthrough clicks */
}

/* Channel Images */
.channels-images {
    /* position: absolute; */
    width: 100%;
    height: auto;
    display: flex;
    /* display: block; */
    justify-content: center;
    /* align-items: center; */
}

.channel-image {

    width: 100vh;
    /* width: 100%;
    height: auto; */

    position: absolute;
    opacity: 0;
}

.channel-image.active {
    opacity: 1;
}

/* TV Buttons */

.tv-buttons-container {
    display: flex;

    width: 35%;

    justify-content: space-between;
    align-items: flex-end;
}

.tv-button {
    background-color: #33333300;
    border: none;
    aspect-ratio: 3 / 2;
    padding-inline: 0.9vw;
    margin: 0px;
    font-size: 0.9vw;
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    z-index: 3;
    position: relative;
}

.tv-button:hover {
    background-color: #33333300;
}


/* SECCIÓN DE SCROLLING */

.scrolling-section {
    position: fixed;
    bottom: 5vh;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.scrolling-text {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
}

.scrolling-content {
    white-space: nowrap;
    padding: 1.4vh 2.1vh;
    /* padding: 15px 20px; */
    animation: move-rtl 20000ms linear infinite;
    font-size: 3.5vh;
}

@keyframes move-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* CONTACT FOOTER */

.contact-section {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    overflow: hidden;
}

.contact-header {
    line-height: 4rem;
    font-size: 2.5rem
}

.highlight-word {
    color: rgb(100, 255, 137);
}

.contact-info {
    list-style: none;
    margin: 1rem;
    line-height: 4rem;
    padding-top: 40px;
    padding-bottom: 120px;
    font-size: 1.4rem;
}

.contact-icon {
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    height: 21px;
    position: relative;
    bottom: -7px;
}

.skate-telephone {
    display: flex;
    justify-content: center;
}

#scrollAnimation {
    position: absolute;
    overflow: hidden;
    width: 70%;
    height: 100%;
  }

.spacing {
    height: 70px;
    width: auto;
}

.footer-link {
    line-height: 1.8rem;
}

/* PIE DE PÁGINA */

footer {
    text-align: center;
    padding-bottom: 2vh;
    margin-top: 1.5vh;
    font-size: 1.45vh;
}

.LB-icon {
    height: 2.8vh;
    padding: 0px 10px;
    position: relative;
    bottom: -5px;
}

/* GALERÍA DE PROYECTOS */

.content-padding {
    padding: 20px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 50px;
    padding: 0px;
    justify-items: center;
    max-width: 70%;
    margin: 0 auto;
}

.project-container {
    width: 100%;
    display: block;
}

.project-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* background-color: rgb(100, 255, 137); */
    display: block;
    border-radius: 16px;
    overflow: hidden;
    transition: opacity 0.8s ease-in-out, transform 1s ease-in-out;
    transition-delay: 0.09s;
    opacity: 1;
}

.project-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    top: 0; /* top aligned w container */
}

.project-thumbnail.hidden-state {
    opacity: 0;
    transform: translateY(100px);
}

.project-thumbnail:hover {
    transition: transform 0.4s;
    transform: scale(1.012);
}

.project-title {
    margin-top: 1.1rem;
    margin-bottom: 0.5rem;
}

.project-about {
    margin-bottom: 2rem;
    opacity: 0.5;
}

/* SEPARATOR */

.separator {
    width: 74%;
    margin: 20px auto;
    border: none;
    height: 1px;
    background-color: #ffffff;
}

/* ABOUT ME TAB */

.about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-right: 20vw;
    padding-left: 20vw;
}

.me-section {
    display: flex;
    align-items: flex-end;
    padding-top: 58px;
    padding-bottom: 58px;
}

.me-photo {
    width: 420px;
    height: auto;
    padding: 0 3.25rem 0 3.25rem;
}

.about-text {
    max-width: 500px;
    min-width: 330px;
    text-align: left;
    padding: 0 3.25rem 0 3.25rem;
    line-height: 1.35rem;
    font-size: 13px;

    display: flex;
    flex-direction: column;
}

.yo-about {
    width: 150px;
    height: auto;
}

.arrow-about {
    width: 120px;
    height: auto;
    padding-bottom: 16px;
}

.about-paragraph {
    padding: 0.5rem 0 0.5rem 0;
}

.exp-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 0 0;
}

.agencies {
    display: flex;
}

.agency-img {
    width: 130px;
    height: auto;
    image-rendering: auto;
    padding: 20px 1vw 50px 1vw;
}

.process-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 30px 0;
}

.creative-process {
    display: flex;
}

.process-img {
    width: auto;
    height: 170px;
    object-fit: contain;
    padding: 24px;
    padding-bottom: 90px;
}

/* CONTACT TAB */

.contact-tab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

.contact-form {
    margin-top: 18px;
}

.mail-send {
    padding-left: 6vw;
    margin-top: 90px;
    margin-bottom: 100px;
    padding-right: 3vw;
}

.form-input {
    padding-top: 8px;
    padding-bottom: 8px;
}

input, textarea {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    color: inherit;
    border: 1px solid rgb(246, 241, 231);
    border-radius: 2px;
    width: 500px;
    border-color: rgb(246, 241, 231);
    padding: 11px 11px;
    padding-left: 18px;
}

textarea {
    resize: none;
    height: 60px;
}

.form-button {
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    background-color: rgb(100, 255, 137);
    border: 1px solid rgb(100, 255, 137);
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    color: rgb(25, 25, 25);
    padding-top: 11px;
    padding-bottom: 11px;
    width: 100%;
    margin-top: 4px;
    transition: 0.15s ease-in-out;
}

.form-button:hover {
    color: rgb(246, 241, 231);
    background-color: rgba(100, 255, 136, 0.75);
    border: 1px solid rgba(100, 255, 136, 0.75);
}

.contact-title {
    font-size: 39px;
    font-weight: normal;
}

.skate-telephone-flip {
    display: flex;
    /* justify-content: flex-end; */
    /* margin-right: 2vw; */
}

#animloop {
    width: 700px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -90px;
    pointer-events: none;
}

.skate-telephone-space {
    width: 700px;
    height: 680px;
}

/* LINK TRANSITION */

.transition-in {
    animation: fadeIn 0.15s ease-in forwards;
}

.transition-out {
    animation: fadeOut 0.1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* PROJECT PAGE TEMPLATE */

.main-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 300px 0px 300px; /* top,right,bottom,left */
}

.banner {
    width: 1300px;
    height: 420px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
}

.project-content {
    padding: 70px 80px 80px 80px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.project-content h1 {
    font-size: 3.6rem;
    font-weight: normal;
}

.project-content p {
    opacity: 0.8;
    padding: 28px 0px 28px 0px;
    line-height: 1.6rem;
    font-size: 15px;
}

.project-content img {
    width: 100%;
    height: auto;
    object-fit: contain;
    text-align: center;
}

.img-spacing {
    padding: 10px 0px 10px 0px;
}

.project-content p.subtitle {
    text-align: center;
    font-size: 2rem;
}

.project-content p.image-hint{
    text-align: center;
    padding: 20px 0px 30px 0px;
    font-weight: lighter;
    font-size: 14px;
    opacity: 0.5;
}

/* BACK TO TOP BUTTON */

.rocket {
    width: 24px;
    height: auto;
    transition: transform 0.3s ease, fill 0.3s ease;
    padding-left: 0.5rem;
    pointer-events: none;
}

.back-to-top {
    font-size: 18px;
    padding-top: 90px;
    padding-bottom: 60px;
}

.back-to-top a{
    display: flex;
    align-items: flex-end;
}

.back-to-top a:hover .rocket {
    transform: translateY(-5px);
}

/* MORE WORKS SLIDER */

.more-works {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.more-works span {
    font-size: 22px;
    font-weight: lighter;
    opacity: 0.8;
    padding-top: 40px;
    padding-bottom: 40px;
}

.swiper {
    width: 1256px;
    height: 228px;
    margin-left: 0px;
    margin-right: 0px;
  }

.card-wrapper {
    overflow: hidden;
}

.card-list .card-item {
    list-style: none;
}

.card-list .card-item .card-link {
    user-select: none;
    height: 228px;
    display: block;
    border-radius: 18px;
    text-decoration: none;
    transition: 0.2s ease;
    overflow: hidden;
}

.card-list .card-link .card-image {
    width: 100%;
    object-fit: cover;
    transition: 0.2s ease;
}

.card-list .card-link .card-image:hover {
    opacity: 40%;
}

/* SLIDER BUTTONS */

.custom-prev {
    position: absolute;
    top: 39%;
    aspect-ratio: 1 / 1;
    width: 50px;
    z-index: 10;
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(25, 25, 25);
    border-radius: 50%;
    left: 10px;
}

.custom-prev object{
    width: 26px;
    height: auto;
    pointer-events: none;
    transform: rotate(-90deg);
    user-select: none;
}

.custom-next {
    position: absolute;
    top: 39%;
    aspect-ratio: 1 / 1;
    width: 50px;
    z-index: 10;
    cursor: url('/assets/LB_cursor_hover.webp'), pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(25, 25, 25);
    border-radius: 50%;
    right: 10px;
}

.custom-next object{
    width: 26px;
    height: auto;
    pointer-events: none;
    transform: rotate(90deg);
    user-select: none;
}

/* MOBILE ADDED */

.skate-telephone-mobile{
    display: none;
}

.exp-section p {
    font-size: 20px;
    opacity: 0.4;
    padding: 10px;
}

.process-section p {
    opacity: 0.4;
    padding: 10px;
}

.yt-video-container {
    display: block;
    text-align: center;
}

.yt-video-container iframe {
    width: 560px;
    height: 315px;
}

.mobile-only {
    display: none;
}

.mobile-tv-frame-off {
    display: none;
}

/* MOBILE NAVIGATION BAR */

#mobile-nav {
    display: none;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    transition: top 0.2s ease-in-out;
}

#mobile-nav.hidden-bar {
    top: -12%;
}

.mobile-nav {
    padding-bottom: 2rem;
    background: linear-gradient(rgb(25, 25, 25) 0,rgba(0,0,0,0) 100%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.4em;
    padding-right: 1.3em;
}

.menu-icon {
    width: 1.65rem;
    height: auto;
    padding-top: 3px;
}

.LB-logo-anim-mobile {
    height: 5.5rem;
    position: relative;
    bottom: 13px;
}

.remote-screen.active-menu {
    opacity: 0.9;
}

.remote-screen {

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: block;
    height: 101vh;
    width: 101vw;
    background: #000;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.15s linear;
    pointer-events: none;
}

#remote-menu {
    display: block;
    align-items: unset;
}

.remote-img-container.active-menu, .remote-buttons-container.active-menu {
    transform: translate(-50%, -45%);
}

.remote-img {
    max-width: 79vw;
    max-height: 84vh;
    display: block;
}

.remote-img-container, .remote-buttons-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 90%);
    max-height: 84vh;
    aspect-ratio: 875 / 1522;
    transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.remote-buttons-container {
    width: 79vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    pointer-events: auto;
}

.remote-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 67%; /* Only cover top 60% of the remote */
    width: 100%;
    max-width: 28rem;
}

.button_row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex: 1;
    gap: 0;
}

.remote-button, .remote-lan-toggle-container {
    flex: 1;
    background-color: transparent;
    border: none;
    pointer-events: auto;
}

.b_row_1 {
    margin-top: 13vw;
}

.b_row_2 {
    margin-top: 0%;
}

.b_row_3 {
    margin-top: 0%;
}

.remote-lan-toggle-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    pointer-events: auto;
}

.remote-lan-toggle {
    appearance: none;
    width: 100%;
    height: 100%;
    opacity: 0.001; /* NOT 0 to keep it clickable in Safari */
    cursor: pointer;
}

body.active-menu {
    overflow: hidden;
}

.bars-button-container {
    display: flex;
    pointer-events: all;
    margin-right: 0.1em;
}

.bars-button {
    bottom: 0;
    left: 0;
    top: 0;
    position: relative;
    height: 1.4em;
    width: 1.6em;
}

.bars-button.active-menu {
    transform: scale(1.2);
}

.bars-button.active-menu span {
    height: 5px;
}

.bars-button span {
    background: rgb(100, 255, 137);
    display: block;
    height: 6px;
    position: absolute;
    transform-origin: center;
    width: 100%;
}

.bars-button.home span {
    background: rgb(246, 241, 231);
}

.bars-button span:nth-of-type(1) {
    top: 0;
}

.bars-button span:nth-of-type(2) {
    top: calc(50%);
}

.bars-button span:nth-of-type(3) {
    top: calc(100%);
}

/* ACTIVE BARS BUTTON CLOSE READY */

.bars-button.active-menu span:nth-of-type(1) {
    top: calc(50%);
    transform: rotate(45deg);
}

.bars-button.active-menu span:nth-of-type(2) {
    opacity: 0;
}

.bars-button.active-menu span:nth-of-type(3) {
    top: calc(50%);
    transform: rotate(-45deg);
}