/* Torn-paper bottom edge on the trip banner.
   Instead of painting a strip over the image, the image is MASKED so its
   bottom is torn away following paper-torn.webp — the real page background
   shows through the gap, so it blends perfectly with no fill colour. */
.single-banner-img{
    position: relative;

    /* 2 mask layers: the image body (faded only at the bottom) minus the
       torn shape at the bottom → bottom torn away, real page shows through. */
    -webkit-mask-image:
        linear-gradient(to top, transparent 0px, #000 40px),
        url("../img/paper-torn.webp");
    mask-image:
        linear-gradient(to top, transparent 0px, #000 40px),
        url("../img/paper-torn.webp");
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: center, center bottom;
    mask-position: center, center bottom;
    -webkit-mask-size: 100% 100%, 108% 120px;
    mask-size: 100% 100%, 108% 120px;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
}

@media screen and (max-width: 767px) {
    .single-banner-img {
        -webkit-mask-size: 100% 100%, 108% 72px;
        mask-size: 100% 100%, 108% 72px;
    }
}

/* Site-wide paper texture — fixed, tiled layer behind all content */
body{
    position: relative;
}
body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../img/paper.webp");
    background-repeat: repeat;
    pointer-events: none;
    opacity: 0.8;
}

/* Floating trekking bag — hero (top-left) & about (top-right) */
@keyframes bagFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -24px;
    }
}

.hero-luxury__inner{
    position: relative;
    &::before {
        content: "";
        position: absolute;
        background: url("../img/mountain-contour.webp") center/cover no-repeat;
        pointer-events: none;
        z-index: 9999;
        object-fit: contain;
        width: 100%;
        height: 100%;
        top: -200px;
        left: 50%;
        transform: translatex(-50%);
        opacity: 0.07;
    }
}
.hero-luxury::before,
.hero-luxury::after,
.about::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: url("../img/trekking-bag.webp") center/contain no-repeat;
    opacity: 0.6;
    pointer-events: none;
    animation: bagFloat 5s ease-in-out infinite;
    z-index: 0;
}

    .hero-luxury::before {
        top: 22%;
        left: 5%;
        rotate: -18deg;
    }

    /* Tent — hero right side */
    .hero-luxury::after {
        top: 16%;
        right: 5%;
        background-image: url("../img/tent.webp");
        rotate: 12deg;
        animation-delay: -2.5s; /* out of sync with the bag on the left */
    }

    /* Pull the objects in tighter on mid-size screens so they don't crowd the title */
    @media screen and (max-width: 1200px) {
        .hero-luxury::before { left: 1%; }
        .hero-luxury::after { right: 1%; }
    }

.about {
    z-index: 0;
}

.about::before {
    top: 0;
    left: 4%;
    animation-delay: -2.5s; /* offset so the two bags don't bob in sync */
    rotate: 24deg;
}

@media screen and (max-width: 767px) {

    .hero-luxury::before,
    .hero-luxury::after,
    .about::before {
        width: 50px;
        height: 50px;
        opacity: 0.35;
    }

    .about::before {
        top: 60px;
    }
}

.footer__mountain {
    position: absolute;
    bottom: 100%;
}

.fullscreen-nav__panel-left {
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../img/bg-mountain.png") center/cover no-repeat;
        opacity: 0.05;
        mix-blend-mode: screen;
        pointer-events: none;
        filter: brightness(0) invert(1);
    }

    > * {
        position: relative;
        z-index: 1;
    }
}


.fullscreen-nav__panel-right {
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../img/tree-branch.png") center/cover no-repeat;
        pointer-events: none;
        z-index: 9999;
        transform: rotate(140deg);
        object-fit: contain;
        width: 800px;
        height: 800px;
        top: -80px;
        opacity: 0.2;
    }

    > * {
        position: relative;
        z-index: 1;
    }
}

body {
    min-height: 100vh;
    /* Changed from height: 100% for better behavior */
    background-color: #Fdf7f3;
    background-size: 20px;
    background-repeat: repeat;
    margin: 0px;
    /* Removed absolute positioning from body as it's usually unnecessary
       and causes layout issues with scrolling */
}

.trip-card-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
}





/* Active State (after scroll) */
.header-scrolled .site-header-video-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}


/* Visible State */
.header-scrolled .content-after-scroll {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}


/* Ensure the parent container can hold the overlay */
.desktop-navigation.active {
    overflow: hidden;
    /* Prevents overlay overflow */
}

/* Background image layer */
.desktop-navigation.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../img/navbar-overlay.png") no-repeat center center;
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
    /* Places it behind navbar content */
}

/* Ensure navbar content stays above overlay */
.desktop-navigation>* {
    position: relative;
    z-index: 2;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 150%;
        /* End far enough to the right to clear the container */
    }
}

.about-page {
    position: relative;

}

.about-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../../assets/img/mountain-line2.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.08;
    z-index: -1;
}

.hero-overlay-text {
    text-align: center;
    max-width: 740px;
    margin: 0 auto;
}

.hero-overlay-text p {
    color: #fff;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}


@media screen and (max-width: 767px) {

    .hero-overlay-text p {
        font-size: 20px;
    }

    .site-header-video {
        height: 850px;
    }

    .content-after-scroll .section-tagline {
        text-align: center;
    }

    .content-after-scroll .section-title {
        text-align: center;
    }

    .site-header-video-content {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 0 15px;
    }

    .site-header-video-content .section-title {
        color: #fff;
        font-size: 30px;
    }

    .site-header-top.is-sticky {
        padding: 12px 15px;
    }

    .mobile-toggle span {
        background: #fff;
    }


    .site-header-top.is-sticky .mobile-toggle span {
        background: #292929;
    }


}

/* =============================================================
   FIX: Hide normal sub-menu on initial load (desktop only)
   Prevents PageSpeed from seeing open menus before JS loads.
   Smooth rotateX fold-down animation matches the mega menu.
   ============================================================= */
@media screen and (min-width: 992px) {
    #primary-menu>li>.sub-menu {
        display: none !important;
    }

    #primary-menu>li.frc-active>.sub-menu {
        display: block !important;
        animation: frcSubMenuReveal 0.35s ease-in-out forwards;
        transform-origin: top;
        visibility: visible;
    }

    /* Nested sub-menus (depth 2+) */
    #primary-menu .sub-menu .sub-menu {
        display: none !important;
    }

    #primary-menu .sub-menu li.frc-active>.sub-menu {
        display: block !important;
        animation: frcSubMenuReveal 0.35s ease-in-out forwards;
        transform-origin: top;
    }
}

@keyframes frcSubMenuReveal {
    from {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    to {
        opacity: 1;
        transform: rotateX(0);
    }
}