/* Font imports */
@font-face {
    font-family: 'Noka';
    src: url('./assets/fonts/Noka-Black.otf') format('opentype');
    font-weight: 900;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter,Manrope,Syne_Tactile/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter,Manrope,Syne_Tactile/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Syne Tactile';
    src: url('./assets/fonts/Manrope,Syne_Tactile/Syne_Tactile/SyneTactile-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Manrope';
    src: url('./assets/fonts/Manrope,Syne_Tactile/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Roboto', 'Noka', sans-serif;
}

.scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    text-align: center;
    position: relative;
    overflow: visible;
}

/* LANDING SECTION */
.section-landing {
    background: #FFFFFF;
    position: relative;
    min-height: 100vh;
}

.landing-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #D9D9D9 url('./assets/background.jpeg') center/cover no-repeat;
    border-radius: 35px;
    z-index: 1;
}

/* HAMBURGER MENU */
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: #FFF6ED;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* MENU OVERLAY */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 15;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* SIDEBAR MENU */
.sidebar-menu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #1a1a1a;
    padding: 60px 30px 30px 30px;
    z-index: 25;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.sidebar-menu.active {
    right: 0;
}

.menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 40px;
    color: #FFF6ED;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.3s ease;
}

.menu-close:hover {
    opacity: 0.7;
}

.menu-items {
    list-style: none;
    padding: 0;
    margin-top: 60px;
}

.menu-items li {
    margin: 0;
    padding: 0;
}

.menu-items a {
    display: block;
    padding: 20px 0;
    font-family: 'Noka';
    font-weight: 400;
    font-size: 18px;
    color: #FFF6ED;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 246, 237, 0.1);
    transition: opacity 0.3s ease;
}

.menu-items a:hover {
    opacity: 0.7;
}

.landing-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    min-height: 100vh;
    padding: 80px 30px 40px 30px;
    text-align: center;
}

.landing-title {
    font-family: 'Noka', sans-serif;
    font-weight: 900 !important;
    font-size: clamp(48px, 12vw, 150px) !important;
    line-height: 1.1 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

.landing-subtitle {
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 35px) !important;
    line-height: 1.2;
    color: #ff6506 !important;
    margin: 0;
    max-width: 100%;
    opacity: 1 !important;
}

.landing-logos {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.logo-item {
    width: clamp(60px, 15vw, 100px);
    height: clamp(60px, 15vw, 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-mokili{
    color:#fff;
}

.logo-item img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* SECTION CONTENT */
.section-content {
    max-width: 800px;
    padding: 40px;
    position: relative;
    z-index: 5;
}

.section h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.section p {
    font-size: 1.5rem;
    opacity: 0.8;
}

.section-project {
    background: #FFFFFF;
    color: #000;
    position: relative;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible;
    padding: 40px 0 0 0;
}

@media (min-width: 769px) {
    .section-project {
        overflow: hidden;
    }
}

.project-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Title */
.project-title {
    position: relative;
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1.2;
    text-transform: uppercase;
    color: #D85402;
    margin: 0 0 20px 0;
    max-width: 100%;
    order: 1;
}

/* Description */
.project-text {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-align: left;
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.6;
    color: #000000;
    margin: 0 0 30px 0;
    max-width: 100%;
    order: 2;
}

.project-text a {
    color: #000000;
    text-decoration: underline;
}

/* Aims Container */
.aims-container {
    position: relative;
    width: 100%;
    z-index: 10;
    height: auto;
    order: 3;
    margin: 40px 0;
}

.aims-box-bg {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    background: #D85402;
    z-index: 0;
    transform: rotate(-3.49deg);
}

.aims-title {
    position: relative;
    z-index: 2;
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    margin: 90px 20px 15px 20px;
    padding: 10px 0;
}

.aims-content {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 3vw, 16px);
    line-height: 1.4;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 30px 35px 30px 35px;
    height: 100%;
}

.aims-content p {
    margin: 0;
    font-size: 0.9vw;
    opacity: 1;
}

/* Aims decorative SVGs */
.aims-deco {
    position: absolute;
    z-index: 3;
}

.aims-deco-1 {
    left: 15px;
    top: 50px;
    width: 37px;
    height: 41px;
}

.aims-deco-2 {
    right: 15px;
    top: 42%;
    width: 33px;
    height: 56px;
}

.aims-deco-3 {
    right: -5px;
    bottom: 40px;
    width: 58px;
    height: 87px;
}

/* Image 1 - Left bottom */
.project-image.image-1 {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: auto;
    min-height: 280px;
    background: #FFFFFF;
    padding: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    transform: none;
    display: flex;
    flex-direction: column;
    z-index: 3;
    margin: 0 auto;
    order: 4;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.project-image.image-1:hover {
    transform: rotate(-3deg) translateY(-5px);
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3);
}

.image-1 .image-frame {
    width: 100%;
    height: 200px;
    background: #F0F0F0;
    overflow: hidden;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-1 .image-label {
    flex: 1;
    font-family: 'Syne Tactile', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.2;
    color: #D85402;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Image 2 - Right bottom */
.project-image.image-2 {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: auto;
    min-height: 280px;
    background: #FFFFFF;
    padding: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    transform: none;
    display: flex;
    flex-direction: column;
    z-index: 2;
    margin: 0 auto;
    order: 5;
    transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.project-image.image-2:hover {
    transform: rotate(5deg) translateY(-5px);
    z-index: 10;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3);
}

.image-2 .image-frame {
    width: 100%;
    height: 200px;
    background: #F0F0F0;
    overflow: hidden;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-2 .image-label {
    flex: 1;
    font-family: 'Syne Tactile', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.2;
    color: #D85402;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Middle text container */
.middle-text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
    order: 6;
    margin: 40px 0;
}

/* Middle text */
.middle-text {
    font-family: 'Syne Tactile', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 2.5vw, 26px);
    line-height: 1.3;
    color: #D85402;
    text-align: left;
    margin: 0 0  100px 0;
    max-width: 100%;
}

/* Arrow decoration */
.arrow-decoration {
    width: 68px;
    height: 165px;
    flex-shrink: 0;
    margin-top: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
    .project-wrapper {
        padding: 40px 20px;
    }

    .project-title {
        max-width: 100%;
    }

    .aims-container {
        width: 100%;
    }

    .aims-box-bg {
        height: auto;
    }
}

@media (max-width: 768px) {
    .section {
        overflow: visible;
    }

    .landing-title {
        font-size: clamp(40px, 10vw, 80px);
    }

    .landing-subtitle {
        font-size: clamp(18px, 4vw, 28px);
    }

    .landing-logos {
        gap: 15px;
    }

    .logo-item {
        width: clamp(50px, 12vw, 80px);
        height: clamp(50px, 12vw, 80px);
    }
}

/* Mobile Styles */
@media (max-width: 600px) {
    /* General adjustments */
    .section {
        scroll-snap-stop: normal;
    }

    body {
        position: relative;
    }

    .section-landing {
        min-height: 100vh;
    }

    .section-project {
        overflow: hidden;
    }

    /* Landing */
    .landing-content {
        padding: 60px 20px 40px 20px;
        min-height: 100vh;
    }

    .landing-title {
        font-size: clamp(32px, 10vw, 60px);
    }

    .landing-subtitle {
        font-size: clamp(16px, 4vw, 22px);
    }

    .landing-logos {
        gap: 15px;
        margin-top: 20px;
    }

    .logo-item {
        width: clamp(50px, 12vw, 70px);
        height: clamp(50px, 12vw, 70px);
    }

    /* Project section */
    .project-wrapper {
        padding: 30px 16px;
        gap: 25px;
    }

    .project-title {
        font-size: clamp(26px, 7vw, 48px);
        margin-bottom: 15px;
    }

    .project-text {
        /*font-size: clamp(13px, 3.5vw, 14px) !important;   */
        font-size: clamp(16px, 3.5vw, 18px) !important;
        margin-bottom: 20px;
    }

    .project-text a {
        word-break: break-word;
    }

    .aims-container {
        margin: 40px 0;
        width: 100%;
        /* Ensure the container doesn't clip content */
        height: auto;
    }

    .aims-box-bg {
    /* Maintain the slight tilt, but ensure it covers the growing text height */
    width: 110%; 
    left: -5%;
    transform: rotate(-2deg); 
}

    .aims-title {
        font-size: clamp(24px, 6vw, 36px);
        margin: 50px 15px 10px 15px;
    }

    .aims-content {
       /* Fix the unreadable font size */
             font-size: 16px !important; 
            line-height: 1.5;
            padding: 60px 25px; /* Add more padding for a better look */
            text-align: center;
    }

    .aims-content p {
    /* Override the 0.9vw which is making it tiny */
    font-size: 16px !important; 
    max-width: 100%;
    margin: 0 auto;
}

/* Ensure decorative SVGs stay out of the way of the text on narrow screens */
.aims-deco {
    opacity: 0.6;
    transform: scale(0.8);
}


    .project-image.image-1,
    .project-image.image-2 {
        max-width: 100%;
        margin: 20px auto;
    }

    .project-image.image-1 {
        transform: rotate(-3deg);
        margin-right: -30px;
        margin-bottom: -120px;
    }

    .project-image.image-2 {
        transform: rotate(4deg);
        margin-left: -30px;
        margin-top: 60px;
    }

    .middle-text-container {
        margin: 20px 0;
        flex-direction: column-reverse;
    }

    .middle-text {
        font-size: clamp(14px, 4vw, 20px);
        max-width: 100%;
    }

    .arrow-decoration {
        transform: scaleY(-1);
    }

    /* Workshop */
    .workshop-wrapper {
        padding: 30px 16px;
        gap: 20px;
    }

    .workshop-title {
        font-size: clamp(26px, 7vw, 48px);
        margin-bottom: 15px;
    }

    .workshop-text-container {
        gap: 15px;
    }

    .workshop-text {
        font-size: clamp(13px, 3.5vw, 14px) !important;
    }


    .workshop-hint-text {
        font-size: clamp(14px, 4vw, 18px) !important;
    }


    .workshop-gallery {
        gap: 15px;
        padding: 15px 10px;
        margin-left: -20px;
        margin-right: -20px;

        width: calc(100% + 40px) !important;
    }

    .workshop-image {
        max-width: 100%;
    }

    .workshop-img-1 {
        transform: rotate(-2.92deg) !important;
    }

    .workshop-img-2 {
        transform: rotate(-4.28deg) !important;
    }

    .workshop-img-3 {
        transform: rotate(3.79deg) !important;
    }

    .workshop-img-4 {
        transform: rotate(-10.71deg) !important;
    }

    .workshop-img-5 {
        transform: rotate(8.45deg) !important;
    }

    .workshop-img-6 {
        transform: rotate(-5.43deg) !important;
    }

    .workshop-img-7 {
        transform: rotate(8.15deg) !important;
    }

    .workshop-img-8 {
        transform: rotate(-3.67deg) !important;
    }

    .workshop-img-9 {
        transform: rotate(4.89deg) !important;
    }

    .workshop-img-10 {
        transform: rotate(-7.21deg) !important;
    }

    .workshop-img-12 {
        transform: rotate(-2.98deg) !important;
    }

    .workshop-frame {
        height: 200px;
    }

    /* Craft */
    .section-craft {
        background: #FFFFFF;
        color: #000000;
        position: relative;
        overflow: visible;
        min-height: auto;
        height: auto;
    }

    .craft-wrapper {
        padding: 30px 16px;
        gap: 20px;
        height: auto;
    }

    .craft-title {
        font-size: clamp(26px, 7vw, 48px);
        margin-bottom: 15px;
    }

    .craft-text {
        font-size: clamp(13px, 3.5vw, 14px) !important;
        margin-bottom: 15px;
    }

    .craft-hint {
        font-size: clamp(16px, 4vw, 20px);
        margin: 15px 0;
        display: none;
    }

    .craft-video-container {
        height: 180px;
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 10px;
    }

    .craft-play-button {
        width: 70px;
        height: 70px;
    }

    .craft-play-button::after {
        border-left: 30px solid #D9D9D9;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
    }

    .craft-gallery {
        padding: 20px 10px;
        gap: 20px;
    }

    .craft-instrument {
        max-width: 100%;
        
    }

    .instrument-name {
        font-size: 20px;
    }

    .instrument-buttons {
        width: 100%;
    }

    .instrument-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    /* Output */
    .output-wrapper {
        padding: 30px 16px;
        gap: 25px;
    }

    .output-title {
        font-size: clamp(26px, 7vw, 48px);
        margin-bottom: 15px;
    }

    .output-text {
        font-size: clamp(13px, 3.5vw, 16px);
    }

    .output-album-cover {
        max-width: 100%;
        max-height: 300px;
    }

    .output-player {
        max-width: 100%;
    }

    /* People */
    .people-wrapper {
        padding: 30px 16px;
        gap: 25px;
    }

    .people-title {
        font-size: clamp(26px, 7vw, 48px);
        margin-bottom: 15px;
    }

    .people-description {
        font-size: clamp(13px, 3.5vw, 16px);
    }

    .credits-column {
        font-size: clamp(10px, 2vw, 11px);
    }

    .credits-column p {
        margin-bottom: 15px;
    }
}

.section-workshop {
    background: #1E1E1E;
    color: white;
    position: relative;
    overflow: visible;
    min-height: auto;
    height: auto;
}

.workshop-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.workshop-title {
    position: relative;
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1.2;
    text-transform: uppercase;
    color: #D85402;
    margin: 0 0 20px 0;
    text-align: left;
}

.workshop-text-container {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.workshop-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.6;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

.workshop-text-1 {
    grid-column: 1;
}

.workshop-text-2 {
    grid-column: 2;
}

.workshop-text a {
    word-break: break-word;
    color:#fff;
    
}


/* Workshop hint with arrow */
.workshop-hint-container {
    position: relative;
    right: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
    margin: 20px 0;
}

.workshop-hint-text {
    font-family: 'Syne Tactile', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: 1.3;
    color: #D85402;
    text-align: center;
    margin: 0;
}

.workshop-hint-arrow {
    width: 68px;
    height: 165px;
    flex-shrink: 0;
    margin-top: 20px;
}

.workshop-gallery {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* Hide scrollbars for cleaner infinite scroll effect */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.workshop-gallery::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Scroll Gallery Indicator */
.scroll-gallery-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: 0;
    position: relative;
    z-index: 5;
}

.scroll-title {
    font-family: 'Syne Tactile', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #D85402;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scroll-arrows {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
}

.scroll-arrow {
    width: 0;
    height: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.left-arrow {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid #D85402;
}

.right-arrow {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #D85402;
}

/* Shadow effect when scrolling */
.scroll-arrows.scrolling .left-arrow {
    border-right-color: transparent;
    filter: drop-shadow(-2px 2px 4px rgba(216, 84, 2, 0.8)) 
            drop-shadow(-4px 4px 8px rgba(216, 84, 2, 0.4));
    border-right: 12px solid #D85402;
}

.scroll-arrows.scrolling .right-arrow {
    border-left-color: transparent;
    filter: drop-shadow(2px 2px 4px rgba(216, 84, 2, 0.8)) 
            drop-shadow(4px 4px 8px rgba(216, 84, 2, 0.4));
    border-left: 12px solid #D85402;
}

/* Hover effects */
.scroll-arrow:hover {
    transform: scale(1.1);
}

.left-arrow:hover {
    border-right-color: rgba(216, 84, 2, 0.8);
}

.right-arrow:hover {
    border-left-color: rgba(216, 84, 2, 0.8);
}

.workshop-image {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.25);
    padding: 12px 12px 30px 12px;
    width: 100%;
    max-width: 300px;
    height: auto;
    min-width: 280px;
    flex-shrink: 0;
    transform: none;
}

.workshop-frame {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.workshop-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Image 1 */
.workshop-img-1 {
    width: 100%;
    max-width: 300px;
    height: auto;
    left: auto;
    bottom: auto;
}

.workshop-img-1 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 2 */
.workshop-img-2 {
    width: 100%;
    max-width: 300px;
    height: auto;
    left: auto;
    bottom: auto;
}

.workshop-img-2 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 3 */
.workshop-img-3 {
    width: 100%;
    max-width: 300px;
    height: auto;
    left: auto;
    bottom: auto;
}

.workshop-img-3 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 4 */
.workshop-img-4 {
    width: 100%;
    max-width: 300px;
    height: auto;
    left: auto;
    bottom: auto;
}

.workshop-img-4 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 5 */
.workshop-img-5 {
    width: 100%;
    max-width: 300px;
    height: auto;
    left: auto;
    bottom: auto;
}

.workshop-img-5 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 6 */
.workshop-img-6 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-6 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 7 */
.workshop-img-7 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-7 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 8 */
.workshop-img-8 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-8 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 9 */
.workshop-img-9 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-9 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 10 */
.workshop-img-10 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-10 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 11 */
.workshop-img-11 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-11 .workshop-frame {
    width: 100%;
    height: 250px;
}

/* Image 12 */
.workshop-img-12 {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.workshop-img-12 .workshop-frame {
    width: 100%;
    height: 250px;
}

.section-craft {
    background: #FFFFFF;
    color: #000000;
    position: relative;
    overflow: visible;
    min-height: auto;
    height: auto;
}

.craft-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.craft-title {
    position: relative;
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1.2;
    text-transform: uppercase;
    color: #D85402;
    margin: 0 0 20px 0;
}

.craft-text {
    position: relative;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 4vw, 16px) !important;
    text-align: left;
    line-height: 1.6;
    color: #000000;
    margin: 0 0 20px 0;
}


.craft-hint {
    position: relative;
    font-family: 'Syne Tactile', sans-serif;
    font-weight: 400;
    font-size: clamp(18px, 5vw, 26px);
    line-height: 1.2;
    text-align: center;
    color: #D85402;
    margin: 20px 0;
}

.craft-hint-1 {
    left: auto;
    top: auto;
    width: 100%;
}

.craft-hint-2 {
    left: auto;
    top: auto;
    width: 100%;
}

/* Video placeholder */
.craft-video-container {
    position: relative;
    right: auto;
    top: auto;
    width: 90%;
    height: 250px;
    max-width: 500px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
    border: 3px solid transparent;
    background: linear-gradient(#1E1E1E, #1E1E1E) padding-box,
                linear-gradient(45deg, #D85402, #ff6506, #FFF6ED, #D85402) border-box;
    animation: borderPulse 4s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% {
        background: linear-gradient(#1E1E1E, #1E1E1E) padding-box,
                    linear-gradient(45deg, #D85402, #ff6506, #FFF6ED, #D85402) border-box;
    }
    50% {
        background: linear-gradient(#1E1E1E, #1E1E1E) padding-box,
                    linear-gradient(45deg, #ff6506, #FFF6ED, #D85402, #ff6506) border-box;
    }
}

.craft-video-placeholder {
    width: 100%;
    height: 100%;
    background: #1E1E1E;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.craft-play-button {
    width: 100px;
    height: 100px;
    background: #FFFFFF;
    border-radius: 50%;
    position: relative;
}

.craft-play-button::after {
    content: '';
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 40px solid #D9D9D9;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

/* Arrow */
.craft-arrow , .workshop-arrow {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-width: 200px;
    margin: 20px auto;
    display: none;
}

/* Instruments gallery */
.craft-gallery {
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    width: 100%;
    height: auto;
    background: #D9D9D9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    gap: 30px;
}

.craft-instrument {
    position: relative;
    width: 100%;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.craft-instrument img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}


.instrument-name {
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 31px;
    text-align: center;
    color: #D85402;
    margin: -15px 0 10px 0;
}

/* Popup styles for instrument information */
.craft-popup {
    position: absolute;
    background: #FFF6ED;
    border: 2px solid #D85402;
    border-radius: 10px;
    padding: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    max-width: 200px;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    pointer-events: none;
}

.craft-popup.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.craft-popup-arrow {
    position: absolute;
    width: 30px;
    height: 30px;
}

.craft-popup-1 {
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
}

.craft-popup .craft-popup-arrow {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.craft-popup-2 {
    top: -60px;
    right: -20px;
}



.craft-popup-3 {
    top: -90px;
    left: -30px;
}


.craft-popup-4 {
    top: -70px;
    right: -40px;
}


.craft-popup-5 {
    top: -85px;
    left: 50%;
    transform: translateX(-50%);
}



.craft-instrument {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.craft-instrument:hover {
    transform: scale(1.02);
}

.instrument-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.instrument-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    transition: opacity 0.3s;
}

.instrument-btn:hover {
    opacity: 0.8;
}

.btn-listen {
    background: #1E1E1E;
    color: #FFFFFF;
}

.btn-watch {
    background: #FFFFFF;
    color: #1E1E1E;
    border: 1px solid #1E1E1E;
}

.section-output {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.section-people {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: white;
}

/* Scrollbar personalizado */
.scroll-container::-webkit-scrollbar {
    width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.section-output {
    background: #1E1E1E;
    color: #FFFFFF;
    position: relative;
    overflow: visible;
    min-height: auto;
    height: auto;
}

.output-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.output-title {
    position: relative;
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1.2;
    text-transform: uppercase;
    color: #D85402;
    margin: 0 0 20px 0;
}

.output-text-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.output-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.6;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    text-align: left;
}

.output-text-1 {
    width: 100%;
    margin-bottom: 20px;    
}

.output-text-2 {
    width: 100%;
    margin-left: 0;
}

.output-media {
    position: relative;
    right: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.output-album-cover {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: cover;
}

.output-player {
    width: 100%;
    max-width: 300px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s;
}


.output-player:hover {
    opacity: 0.9;
}

.output-player a {
    color:#000;
    font-weight: 400;
}

.output-player span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 3vw, 16px);
    line-height: 1.4;
    text-transform: uppercase;
    color: #000000;
}

.section-people {
    background: #D85402;
    color: #FFFFFF;
    position: relative;
    overflow: visible;
    min-height: auto;
    height: auto;
}

.people-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.people-title {
    position: relative;
    font-family: 'Noka', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1.2;
    color: #FFF6ED;
    margin: 0 0 20px 0;
    text-align: left;
}

.people-description {
    position: relative;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 1.6;
    color: #FFFFFF;
    margin: 0 0 30px 0;
    text-align: left;
}

.people-credits {
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.credits-column {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #FFFFFF;
}

.credits-column p {
    margin: 0 0 20px 0;
    font-size: 14px !important;
}

.credits-column strong {
    font-weight: 700;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Extra improvements for mobile viewing experience */
@media (max-width: 768px) {
    body {
        -webkit-touch-callout: none;
    }

    .section {
        scroll-snap-type: none;
    }

    .scroll-container {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    /* Disable scroll snapping on mobile for smoother scrolling */
    .section {
        scroll-snap-align: none;
        scroll-snap-stop: none;
    }
}

/* Desktop optimizations */
@media (min-width: 769px) {
    .section {
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .section-landing {
        min-height: 100vh;
    }

    .section-project {
        height: 100vh !important;
        min-height: 100vh !important;
    }

.section-workshop {
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex; /* Added to help align the wrapper */
    align-items: center;
}

    .section-craft {
        height: 100vh;
    }

    .section-output {
        height: 100vh;
    }

    .section-people {
        height: 100vh;
    }

    .scroll-container {
        scroll-snap-type: y mandatory;
    }

    /* Landing desktop */
    .landing-content {
        justify-content: flex-end;
        padding: 60px 20px 40px 20px;
        min-height: 100vh;
    }

    .landing-title {
        font-size: 150px;
    }

    .landing-subtitle {
        font-size: 35px;
    }

    .landing-logos {
        gap: 40px;
        margin-top: 20px;
    }

    .logo-item {
        width: 100px;
        height: 100px;
    }

    /* Project section - side by side layout */
    .project-wrapper {
        width: 100%;
        height: 100%;
        padding: 60px 40px;
        gap: 0;
        display: block;
        flex-direction: initial;
    }

    .project-title {
        position: absolute;
        left: 80px;
        top: 20px;
        max-width: 50%;
        font-size: 64px;
    }

    .project-text {
        position: absolute;
        left: 80px;
        top: 120px;
        max-width: 450px;
        font-size: 0.8vw !important;
        line-height: 1.2;

    }

    .aims-container {
        position: absolute;
        right: 100px;
        top: 50%;
        transform: translateY(-50%);
        width: 350px;
        height: 120%;
        margin: 0;
    }

    .aims-box-bg {
        width: 420px;
        right: -40px;
        transform: rotate(-3.49deg);
    }

    .project-image.image-1 {
        position: absolute;
        left: 140px;
        bottom: 40px;
        width: 300px;
        height: auto;
        min-height: 280px;
        max-width: none;
        transform: rotate(-4.28deg);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .project-image.image-1:hover {
        transform: rotate(-1deg) translateY(-5px);
        box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3);
    }

    .project-image.image-2 {
        position: absolute;
        left: 450px;
        bottom: 20px;
        width: 320px;
        height: auto;
        min-height: 280px;
        max-width: none;
        transform: rotate(3.79deg);
        transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.3s ease;
    }

    .project-image.image-2:hover {
        transform: rotate(8deg) translateY(-10px);
        z-index: 10;
        box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3);
    }

    .middle-text-container {
        position: absolute;
        left: 54%;
        top: 39%;
        transform: translate(-50%, -50%);
        flex-direction: row;
        margin: 0;
    }

    /* Workshop desktop layout */
  .workshop-wrapper {
    width: 100%;
    height: 90vh; /* Changed from 100% to allow space at bottom */
    padding: 40px;
    display: flex;
    flex-direction: column;
}

    .workshop-title {
        position: relative;
        font-size: 64px;
        margin: 0 0 30px 0;
    }

    .workshop-text-container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        width: 100%;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .workshop-text {
        text-align: left;
    }

    .workshop-hint-container {
        position: relative;
        flex-direction: row;
        margin-bottom: 30px;
    }

.workshop-gallery {
    position: relative; /* Changed from absolute to sit in the flex flow */
    width: 100%;
    height: 60vh; /* Use viewport height so it scales down on laptops */
    margin-top: auto; /* Pushes the gallery towards the middle/bottom area */
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 20px; /* Space between photos */
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center; /* Centers photos vertically in the 60vh container */
    transform: none;
    left: auto;
}

/* Adjusting the individual image containers to be responsive */
.workshop-image {
    position: relative; /* Changed from absolute to let them flow naturally */
    height: 80%; /* Images will take up 80% of the 60vh gallery height */
    width: auto;
    min-width: 250px;
    flex-shrink: 0;
    top: auto !important; /* Overriding your fixed top pixel values */
    left: auto !important; /* Overriding fixed left pixel values */
}

    .workshop-img-1 {
        width: 325px;
       /* height: 520px;*/
        height: 320px;
        left: 0;
        top: 80px;
        transform: rotate(-2.92deg);
        max-width: none;
    }

    .workshop-img-2 {
        width: 410px;
        height: 322px;
        left: 280px;
        top: 180px;
        transform: rotate(-4.28deg);
        max-width: none;
    }

    .workshop-img-3 {
        width: 492px;
        height: 378px;
        left: 600px;
        top: 130px;
        transform: rotate(3.79deg);
        max-width: none;
    }

    .workshop-img-4 {
        width: 320px;
        /*height: 507px; */
         height: 357px;
        left: 1040px;
        top: 100px;
        transform: rotate(-10.71deg);
        max-width: none;
    }

    .workshop-img-5 {
        width: 351px;
        height: 555px;
        height: 355px;
        left: 1320px;
        top: 80px;
        transform: rotate(8.45deg);
        max-width: none;
    }

    .workshop-img-6 {
        width: 350px;
        height: 320px;
        left: 1680px;
        top: 150px;
        transform: rotate(-5.43deg);
        max-width: none;
    }

    .workshop-img-7 {
        width: 420px;
        height: 320px;
        left: 2010px;
        top: 190px;
        transform: rotate(8.15deg);
        max-width: none;
    }

    .workshop-img-8 {
        width: 300px;
        height: 320px;
        left: 2420px;
        top: 80px;
        transform: rotate(-3.67deg);
        max-width: none;
    }

    .workshop-img-9 {
        width: 390px;
        height: 320px;
        left: 2700px;
        top: 160px;
        transform: rotate(4.89deg);
        max-width: none;
    }

    .workshop-img-10 {
        width: 340px;
        height: 320px;
        left: 3080px;
        top: 120px;
        transform: rotate(-7.21deg);
        max-width: none;
    }

    .workshop-img-11 {
        width: 430px;
        height: 320px;
        left: 3410px;
        top: 200px;
        transform: rotate(5.33deg);
        max-width: none;
    }

    .workshop-img-12 {
        width: 370px;
        height: 320px;
        left: 3400px;
        top: 130px;
        transform: rotate(-2.98deg);
        max-width: none;
    }

    .workshop-img-5 {
        width: 351px;
       /* height: 555px; */
        height: 355px;
        left: 1320px;
        /*bottom: 97px; */
        bottom: 0;
        transform: rotate(8.45deg);
        max-width: none;
    }

    .workshop-frame {
        width: 100%;
        height: 100%;
    }

    .workshop-img-1 .workshop-frame,
    .workshop-img-2 .workshop-frame,
    .workshop-img-3 .workshop-frame,
    .workshop-img-4 .workshop-frame,
    .workshop-img-5 .workshop-frame {
        height: 100%;
    }

    /* Craft desktop layout */
    .craft-wrapper {
        width: 100%;
        height: 100%;
        padding: 60px;
        display: block;
        flex-direction: initial;
    }

    .craft-title {
        position: absolute;
        left: 40px;
        top: 32px;
        font-size: 54px;
        margin: 0;
    }

    .craft-text {
        position: absolute;
        left: 40px;
        top: 136px;
        width: 290px;
        font-size: 16px;
        line-height: 16px;
        margin: 0;
    }

    .craft-hint-container {
        position: absolute;
        right: 800px;
        /*top: 250px;*/
        flex-direction: row;
    }

    .workshop-hint-container{
         position: absolute;
        right: 600px;
        top: 200px;
        flex-direction: row;
    }

    .craft-hint {
        position: absolute;
        font-size: 26px;
        line-height: 31px;
        margin: 0;
    }

    .craft-hint-1 {
        left: 0px;
        top: 25px;
        width: 185px;
    }

    .craft-hint-2 {
        left: 160px;
        top: 360px;
        width: 185px;
    }

    .craft-video-container {
        position: absolute;
        right: 100px;
        width: 600px;
        height: 320px;
        max-width: none;
        margin: 0;
    }

    .craft-play-button {
        width: 145px;
        height: 145px;
    }

    .craft-play-button::after {
        border-left: 50px solid #D9D9D9;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
    }

    .craft-gallery {
        position: absolute;
        left: 40px;
        bottom: 0;
        right: 40px;
        height: 190px;
        width: auto;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-around;
        padding: 0 20px;
        gap: 0;
        padding: 0;
    }

    .craft-instrument {
        margin-top: -80px;
        width: 242px;
    }

    .instrument-buttons {
        flex-direction: row;
        gap: 6px;
    }

    /* Output desktop */
    .output-wrapper {
        width: 100%;
        height: 100%;
        padding: 60px;
        display: block;
        flex-direction: initial;
    }

    .output-title {
        position: absolute;
        left: 40px;
        top: 60px;
        font-size: 38px;
        margin: 0;
    }

    .output-text-container {
        position: absolute;
        left: 40px;
        top: 190px;
        width: 600px;
        max-width: none;
    }

    .output-text-2 {
        margin-left: 100px;
    }

    .output-media {
        position: absolute;
        right: 160px;
        top: 105px;
        flex-direction: column;
    }

    .output-album-cover {
        max-width: 485px;
        width: 485px;
        height: 485px;
    }

    .output-player {
        max-width: 485px;
        width: 485px;
        height: 70px;
        margin-top: 20px;
    }

    /* People desktop */
    .people-wrapper {
        width: 100%;
        height: 100%;
        padding: 60px 40px;
        display: block;
        flex-direction: initial;
        overflow-y: auto;
    }

    .people-title {
        position: relative;
        font-size: 48px;
        margin: 0 0 30px 0;
    }

    .people-description {
        position: relative;
        width: 100%;
        font-size: 16px;
        margin: 0 0 30px 0;
    }

    .people-credits {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 60px;
        flex-wrap: wrap;
    }

    .credits-column {
        flex: 1;
        min-width: 280px;
        font-size: 10px !important;
    }

    /* Desktop - show decorative arrows */
    .arrow-decoration {
        display: block !important;
    }

    .workshop-hint-arrow {
        display: block !important;
    }

    .craft-arrow {
        display: block !important;
        left: 50px;
        top : 80px;
    }

    .workshop-arrow {
        display: block !important;
        left: 50px;
        top : 10px;
    }
}

/* Responsivo */
@media (max-width: 768px) {
    .landing-nav-items {
        display: none;
    }

    .landing-title {
        font-size: clamp(50px, 12vw, 100px);
    }

    .landing-subtitle {
        font-size: clamp(20px, 5vw, 30px);
    }

    .landing-logos {
        gap: 20px;
    }

    .logo-item {
        width: 70px;
        height: 70px;
    }
}


/* Specifically for midsize laptops */ 

@media screen and (min-width: 1025px) and (max-width: 1440px) { 
	
	.project-text { font-size: 14px; 
	} 
	
	.workshop-gallery { height: 50vh; /* Shorter gallery for cramped laptop screens */ 
	} 
	
	.output-player {

        height: 50px;
		margin-top:0;
    }
	

}