/* =========================
   RESET
========================= */

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


/* =========================
   BODY
========================= */

body {

    margin: 0;

    background: black;

    font-family: Arial, Helvetica, sans-serif;

    color: white;

}


/* =========================
   HERO
========================= */

.hero {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}


/* =========================
   BACKGROUND VIDEO
========================= */

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}


/* =========================
   DARK OVERLAY
========================= */

.overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.18);

    z-index: 1;

    pointer-events: none;
}


/* =========================
   NAVBAR
========================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 72px;

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;

    z-index: 99999;

    background: transparent;

    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);

    box-shadow: none;

    transition:
        background 2.7s ease,
        backdrop-filter 2.7s ease,
        box-shadow 2.7s ease;
}


/* Scroll wela passe */
.navbar.scrolled {
    background: rgba(5, 8, 25, 0.45);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);
}


/* =========================
   LOGO
========================= */

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 120px;
    height: auto;
    display: block;
}

.main-logo {
    position: relative;

    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

/* LOGO */
.main-logo img {
    width: clamp(240px, 34vw, 430px);
    height: auto;
    display: block;

    animation: goldenLogo 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;

    transform-origin: center center;
    will-change: transform, opacity, filter;
}
/* =========================
   HERO CENTER CONTENT
========================= */

.hero-center {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(92%, 1000px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    z-index: 2;
}


/* ========================= 
   HERO EVENT TEXT 
========================= */ 

.hero-event-text { 
    width: 100%; 

    margin-top: clamp(-55px, -4vw, -28px); 

    text-align: center; 
    color: white;

    padding: 20px 30px;

    background: radial-gradient(
        ellipse at center,
        rgba(5, 0, 12, 0.68) 0%,
        rgba(5, 0, 12, 0.22) 55%,
        transparent 78%
    );
}


/* EVENT NAME */

.hero-event-text h1 {
    font-family: 'Cinzel', decorative;

    font-size: clamp(34px, 5vw, 68px);
    font-weight: 600;

    letter-spacing: clamp(3px, 0.5vw, 7px);
    line-height: 1.1;

    margin: 0 0 clamp(8px, 1vw, 14px);

   color: #cb910a;

    -webkit-text-stroke: 0.4px rgba(35, 15, 0, 0.65);

    text-shadow:
        0 3px 8px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(242, 201, 109, 0.45),
        0 0 24px rgba(242, 201, 109, 0.22);
}


/* TAGLINE */

.hero-tagline {
    font-family: 'Poppins', sans-serif;

    font-size: clamp(12px, 1.6vw, 19px);
    font-weight: 600;

    letter-spacing: clamp(2px, 0.35vw, 5px);
    line-height: 1.7;

    margin: 0 auto clamp(8px, 1vw, 12px);

    max-width: 750px;

    color: #FFFFFF;

    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.7);

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 1),
        0 0 10px rgba(255, 255, 255, 0.20);
}


/* PRESENTED BY */

.hero-presented {
    font-family: 'Poppins', sans-serif;

    font-size: clamp(9px, 1.1vw, 13px);
    font-weight: 500;

    letter-spacing: clamp(1.5px, 0.3vw, 4px);
    line-height: 1.6;

    color: #E5DCF5;

    -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.7);

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(220, 205, 245, 0.16);
}


@keyframes goldenLogo {

    /* START */
    0% {
        transform: scale(1) translateY(0);
        opacity: 0.92;

        filter:
            drop-shadow(0 0 3px rgba(218, 165, 70, 0.18));
    }


    /* Logo slowly grows */
    25% {
        transform: scale(1.02) translateY(-4px);
        opacity: 0.96;

        filter:
            drop-shadow(0 0 5px rgba(218, 165, 70, 0.25));
    }


    /* ⭐ Maximum size + golden aura */
   50% {
    transform: scale(1.045) translateY(-10px);
    opacity: 1;

    filter:
        drop-shadow(0 0 8px rgba(218, 165, 70, 0.50))
        drop-shadow(0 0 18px rgba(218, 165, 70, 0.28))
        drop-shadow(0 0 32px rgba(218, 165, 70, 0.12));
}


    /* Slowly comes back */
    75% {
        transform: scale(1.02) translateY(-4px);
        opacity: 0.96;

        filter:
            drop-shadow(0 0 5px rgba(218, 165, 70, 0.25));
    }


    /* BACK TO NORMAL */
    100% {
        transform: scale(1) translateY(0);
        opacity: 0.92;

        filter:
            drop-shadow(0 0 3px rgba(218, 165, 70, 0.18));
    }
}

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

.nav-links {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    display: flex;

    gap: 30px;

}


.nav-links a {

    color: white;

    text-decoration: none;

    font-family: 'Poppins', Arial, sans-serif;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: 0.3s;

}


.nav-links a:hover {

    opacity: 0.6;

}


/* =========================
   NAV TICKET BUTTON
========================= */

.nav-ticket {

    color: white;

    text-decoration: none;

    border: 2px solid white;

    padding: 12px 20px;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;

    letter-spacing: 1px;

    transition: 0.3s;

    margin-left: auto;

}


.nav-ticket:hover {

    background: white;

    color: black;

}




/* MOBILE MENU BUTTON */
.menu-button {
    display: none;
    width: 32px;
    height: 32px;
    padding: 0;

    border: none;
    background: transparent;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

    cursor: pointer;
}

.menu-button span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: white;

    transition: all 0.4s ease;
}


/* =========================
   HERO CONTENT
========================= */

.hero-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    text-align: center;

    color: white;

    z-index: 10;

}


/* =========================
   SMALL TEXT
========================= */

.small-text {

    font-size: 13px;

    letter-spacing: 4px;

    margin-bottom: 20px;

}


/* =========================
   MAIN TITLE
========================= */

.hero-content h1 {

    font-size: clamp(60px, 10vw, 140px);

    font-weight: bold;

    letter-spacing: 10px;

    line-height: 1;

    margin-bottom: 25px;

}


/* =========================
   DESCRIPTION
========================= */

.description {

    font-size: 16px;

    letter-spacing: 4px;

    margin-bottom: 15px;

}


/* =========================
   DATE
========================= */

.date {

    font-size: 14px;

    letter-spacing: 3px;

    margin-bottom: 30px;

}


/* =========================
   TICKET BUTTON
========================= */

.ticket-button {

    display: inline-block;

    color: white;

    text-decoration: none;

    border: 1px solid white;

    padding: 15px 35px;

    font-size: 13px;

    letter-spacing: 2px;

    transition: 0.3s;

}


.ticket-button:hover {

    background: white;

    color: black;

}



/* =========================================
   MOBILE MENU BACKDROP
========================================= */

.menu-backdrop {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.65);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

    z-index: 100000;
}

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

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.mobile-menu-title {
    font-family: 'Poppins', sans-serif;

    font-size: 16px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #e8c56a;
}

.mobile-menu-close {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.04);

    color: white;

    font-size: 32px;
    font-weight: 300;

    cursor: pointer;

    transition: 0.3s ease;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(232, 197, 106, 0.45);
}

.mobile-menu-links {
    margin-top: 28px;
}

.mobile-menu-links a {
    display: block;

    padding: 24px 0;

    font-family: 'Poppins', sans-serif;

    font-size: 20px;
    font-weight: 600;

    letter-spacing: 0.5px;

    color: rgba(255, 255, 255, 0.92);

    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.mobile-menu-links a:hover {
    color: #e8c56a;
    padding-left: 8px;
}
.mobile-ticket {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: 38px;

    padding: 15px 20px;

    border-radius: 10px;

    border: 1px solid #e8c56a;

    background: #e8c56a;

    color: #110b15;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-decoration: none;

    transition: 0.3s ease;
}

.mobile-ticket:hover {
    background: transparent;
    color: #e8c56a;

    box-shadow:
        0 0 20px rgba(232, 197, 106, 0.15);
}


/* =========================================
   MOBILE SIDE MENU
========================================= */

.mobile-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: min(72vw, 320px);
    height: 100svh;

    padding: 32px 30px 40px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 6, 10, 0.98),
            rgba(12, 6, 18, 0.98)
        );

    border-left: 1px solid rgba(232, 197, 106, 0.12);

    box-shadow:
        -20px 0 50px rgba(0, 0, 0, 0.55);

    transform: translateX(100%);

    transition:
        transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);

    z-index: 100001;

    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}


/* =========================
   SCROLL INDICATOR
========================= */

.scroll-down {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: white;

    z-index: 10;

}


.scroll-down span {

    font-size: 9px;

    letter-spacing: 3px;

    opacity: 0.8;

}


.scroll-line {

    width: 1px;

    height: 40px;

    background: white;

    opacity: 0.7;

}


/* =========================
   ABOUT/SECTION
========================= */

.about-section {
    position: relative;
    min-height: 100vh;

    padding: 90px 8% 120px;

    background: transparent;

    z-index: 20;
    color: white;
    overflow: hidden;
}

/* =========================
   ABOUT HEADING
========================= */

.about-heading {
    text-align: center;
    margin-bottom: 55px;
}

.about-heading .section-label {
    width: 100%;
    text-align: center;
    margin: 0 0 18px;

    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;

    color: #e8c56a;
}

.about-heading h2 {
    position: relative;

    width: 100%;
    text-align: center;
    margin: 0;

    font-family: 'Cinzel', serif;
    font-size: clamp(30px, 4.5vw, 58px);
    font-weight: 800;
    letter-spacing: clamp(4px, 0.8vw, 10px);
    line-height: 1;

    color: white;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.65);

    z-index: 1;
}

.about-heading h2::before {
    content: attr(data-title);

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) scale(1.28);

    white-space: nowrap;
    color: transparent;

    -webkit-text-stroke: 1px rgba(232, 197, 106, 0.07);

    z-index: -1;
    pointer-events: none;
}

.about-title-line {
    width: min(360px, 72vw);
    margin: 24px auto 0;

    display: grid;
    grid-template-columns: 1fr 8px 1fr;
    align-items: center;
    gap: 12px;
}

.about-title-line span {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e8c56a);
}

.about-title-line span:last-child {
    background: linear-gradient(90deg, #e8c56a, transparent);
}

.about-title-line i {
    width: 7px;
    height: 7px;

    border: 1px solid #e8c56a;
    transform: rotate(45deg);

    box-shadow: 0 0 10px rgba(232, 197, 106, 0.45);
}
/* =========================
   ABOUT CONTENT LAYOUT
========================= */

.about-content {
    display: grid;
    grid-template-columns: 1.2fr 0.85fr;
    align-items: center;
    gap: 60px;
}

.about-text {
    max-width: 760px;
}

.about-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 300;
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.82);

    margin-bottom: 28px;
}

.about-text strong {
    color: #ffffff;
    font-weight: 600;
}

/* =========================
   ABOUT IMAGE
========================= */

.about-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image-frame {
    position: relative;

    width: min(440px, 100%);
    border-radius: 28px;
    overflow: hidden;

    border: 1px solid rgba(232, 197, 106, 0.22);

    background: rgba(18, 8, 24, 0.72);

    box-shadow:
        0 0 35px rgba(110, 40, 160, 0.18),
        0 0 80px rgba(232, 197, 106, 0.08);
}

.about-image-frame::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(50, 15, 75, 0.18),
            rgba(10, 8, 18, 0.12)
        );

    pointer-events: none;
    z-index: 2;
}

.about-image-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;
    pointer-events: none;

    box-shadow:
        inset 0 0 45px rgba(120, 50, 170, 0.20),
        inset 0 0 90px rgba(232, 197, 106, 0.06);
    z-index: 2;
}

.about-image-frame img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: center;

    display: block;

    filter:
        brightness(0.88)
        contrast(1.06)
        saturate(0.92);
        

    transform: scale(1.02);
}


/* =========================
   TABLET / MOBILE
========================= */

@media (max-width: 900px) {

    .navbar {
        height: 65px;
        padding: 0 5%;
        justify-content: space-between;
    }

    .logo img {
        width: 85px;
    }

    .nav-links {
        display: none;
    }

    .nav-ticket {
        padding: 8px 13px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .menu-button {
        display: flex;
        margin-left: auto;
    }
}



/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 500px) {

    .hero {
        width: 100%;
        height: 100svh;
        min-height: 0;
    }

    .navbar {
        height: 62px;
        padding: 0 5%;
    }

    .logo img {
        width: 75px;
    }

    .nav-ticket {
        padding: 7px 11px;
        font-size: 9px;
        letter-spacing: 0.8px;
    }



    .background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

       .event-countdown {
        padding: 20px 0 100px;
    }

    .event-countdown .section-label {
        font-size: 9px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .event-countdown h2 {
        font-size: 28px;
        letter-spacing: 2px;
        margin-bottom: 40px;
    }

    .countdown {
        gap: 8px;
    }

    .hero-center {
    width: 92%;
    top: 50%;
    }

    .hero-event-text {
    margin-top: -28px;
    }

}

.event-info {
    position: relative;
    min-height: 100vh;
    padding: 80px 8%;
    
    color: white;
    z-index: 20;
}





/* =========================================
   EVENT COUNTDOWN
========================================= */

.event-countdown {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0 140px;
}

/* THE NIGHT IS COMING */

.event-countdown .section-label {
    width: 100%;
    text-align: center;

    /* position eka same */
    margin: 0 0 18px;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;
    text-transform: uppercase;

    color: #e8c56a;
}

/* COUNTDOWN TO VIRAMA */

.event-countdown h2 {
    position: relative;

    width: 100%;

    text-align: center;

    /* me margin eka wenas karanne naha */
    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(28px, 4.2vw, 52px);
    font-weight: 800;

    letter-spacing: clamp(4px, 0.8vw, 10px);

    line-height: 1;

    color: white;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.65);

    z-index: 1;
}

.event-countdown h2::before {
    content: attr(data-title);

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1.28);

    white-space: nowrap;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(232, 197, 106, 0.07);

    z-index: -1;

    pointer-events: none;
}

.countdown-title-line {
    width: min(360px, 72vw);

    margin: 24px auto 38px;

    display: grid;
    grid-template-columns: 1fr 8px 1fr;

    align-items: center;

    gap: 12px;
}

.countdown-title-line span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8c56a
        );
}

.countdown-title-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #e8c56a,
            transparent
        );
}

.countdown-title-line i {
    width: 7px;
    height: 7px;

    border: 1px solid #e8c56a;

    transform: rotate(45deg);

    box-shadow:
        0 0 10px rgba(232, 197, 106, 0.45);
}


/* COUNTDOWN ROW */

.countdown {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 3vw, 22px);
    flex-wrap: nowrap;
}

/* =========================================
   EVENT QUICK DETAILS
========================================= */

.event-meta {
    width: 100%;

    margin-top: clamp(32px, 5vw, 55px);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(25px, 5vw, 65px);

    flex-wrap: wrap;
}


.event-meta-item {
    display: flex;
    align-items: center;

    gap: 10px;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(11px, 1.2vw, 16px);
    font-weight: 500;

    letter-spacing: 0.5px;

    color: rgba(255, 255, 255, 0.90);
}


.event-meta-item svg {
    width: clamp(18px, 1.8vw, 24px);
    height: clamp(18px, 1.8vw, 24px);

    fill: none;

    stroke: #e8c56a;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    flex-shrink: 0;

    filter:
        drop-shadow(0 0 5px rgba(232, 197, 106, 0.30));
}


/* COUNTDOWN BOX */

.count-box {
    position: relative;

    width: clamp(58px, 18vw, 145px);
    height: clamp(58px, 18vw, 135px);
    aspect-ratio: 1 / 1;
    border-radius: clamp(12px, 3vw, 18px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(
            145deg,
            rgba(70, 20, 90, 0.18),
            rgba(5, 5, 15, 0.55)
        );

    border: 1px solid rgba(145, 70, 190, 0.45);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        inset 0 0 25px rgba(120, 40, 170, 0.08),
        0 0 15px rgba(110, 40, 160, 0.12);

    overflow: hidden;

    transition:
        transform 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}


/* PURPLE EDGE */

.count-box::before {
    content: "";

    position: absolute;
    inset: 0;

    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(190, 100, 255, 0.7),
            transparent 35%,
            transparent 65%,
            rgba(110, 40, 180, 0.55)
        ) border-box;

    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
    border-radius: inherit;
}


/* SOFT PURPLE LIGHT */

.count-box::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        rgba(145, 50, 210, 0.10) 0%,
        transparent 70%
    );

    pointer-events: none;
}


/* GOLDEN NUMBER */

.count-box span {
    position: relative;
    z-index: 2;

    display: block;

    font-family: 'Cinzel', 'Poppins', Arial, sans-serif;

    font-size: clamp(22px, 6.5vw, 68px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 2px;

    color: #e8c56a;

    text-shadow:
        0 0 5px rgba(232,197,106,0.35),
        0 0 15px rgba(232,197,106,0.15);
}


/* LABEL */

.count-box small {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: clamp(4px, 1.5vw, 14px);
    font-family: 'Poppins', Arial, sans-serif;

    font-size: clamp(9px, 2.4vw, 13px);
    font-weight: 500;

    letter-spacing: clamp(0.5px, 0.3vw, 3px);

    color: rgba(255,255,255,0.55);
}


/* HOVER */

.count-box:hover {
    transform: translateY(-5px);

    border-color: rgba(180, 90, 240, 0.75);

    box-shadow:
        inset 0 0 30px rgba(140, 50, 200, 0.12),
        0 0 25px rgba(130, 50, 190, 0.22);
}

.cinematic-content {
    position: relative;
    background: rgba(8, 5, 9, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: white;
    z-index: 20;
}
/* =========================================
   CINEMATIC SCROLL REVEAL
========================================= */

.reveal-layer {
    opacity: 0;

    transform: translateY(70px);

    transition:
        opacity 1.5s ease,
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform;
}

.reveal-layer.show {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================
   MOBILE EVENT SECTION FIX
========================================= */

@media (max-width: 500px) {

    .event-info {
        padding: 35px 5% 75px;
    }

    .event-countdown {
        padding: 0 0 65px;
    }

    .event-countdown .section-label {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .event-countdown h2 {
        margin-bottom: 32px;
    }

    .event-meta {
        margin-top: 30px;

        flex-direction: column;
        align-items: flex-start;

        gap: 16px;

        padding-left: 8px;
    }

    .event-meta-item {
        font-size: 11px;
        gap: 10px;
    }

    .event-meta-item svg {
        width: 19px;
        height: 19px;
    }

}

/* =========================================
   GUEST ARTIST
========================================= */

.artist-section {
    position: relative;
    min-height: 100vh;

    padding: 95px 8% 90px;

    color: white;
    z-index: 20;
    overflow: hidden;
}


.artist-container {
    width: 100%;
    max-width: 1350px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 430px 1fr;

    align-items: center;
    gap: 85px;
}


/* =========================
   ARTIST IMAGE
========================= */

.artist-image-wrap {
    width: 100%;

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


.artist-image-frame {
    position: relative;

    width: 430px;
    max-width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    /* Gallery image style */
    border: 1px solid #e8c56a;
    border-radius: 5px;

    background: #09060c;

    box-shadow:
        0 0 0 1px rgba(232, 197, 106, 0.20),
        0 0 34px rgba(130, 45, 180, 0.28),
        0 22px 50px rgba(0, 0, 0, 0.55);
}


.artist-image-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(5, 2, 8, 0.55)
        );

    pointer-events: none;
}


.artist-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(1.05)
        contrast(1.03);

    transition:
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


.artist-image-frame:hover img {
    transform: scale(1.05);
}


/* =========================
   ARTIST DETAILS
========================= */

.artist-text {
    max-width: 760px;
}


/* =========================
   ARTIST HEADING
========================= */

.artist-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 36px;

    transform: translateY(-20px);
}


/* GUEST ARTIST - small gold text */
.artist-text .artist-label {
    width: 100%;
    text-align: center;

    margin: 0 0 18px;

    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;
    text-transform: uppercase;

    color: #e8c56a;
}


/* ARTIST - main title */
.artist-heading h2 {
    position: relative;

    width: 100%;
    text-align: center;

    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(30px, 4.5vw, 58px);
    font-weight: 800;

    letter-spacing: clamp(4px, 0.8vw, 10px);
    line-height: 1;

    color: white;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.65);

    z-index: 1;
}


/* faint ARTIST text behind */
.artist-heading h2::before {
    content: attr(data-title);

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1.28);

    white-space: nowrap;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(232, 197, 106, 0.07);

    z-index: -1;

    pointer-events: none;
}


/* gold line + diamond */
.artist-title-line {
    width: min(360px, 72vw);

    margin: 24px auto 0;

    display: grid;
    grid-template-columns: 1fr 8px 1fr;

    align-items: center;

    gap: 12px;
}


.artist-title-line span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8c56a
        );
}


.artist-title-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #e8c56a,
            transparent
        );
}


.artist-title-line i {
    width: 7px;
    height: 7px;

    border: 1px solid #e8c56a;

    transform: rotate(45deg);

    box-shadow:
        0 0 10px rgba(232, 197, 106, 0.45);
}




.artist-text p {
    margin: 0 0 24px;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;
    font-weight: 300;

    line-height: 1.9;

    color: rgba(255, 255, 255, 0.82);
}


.artist-text strong {
    color: #ffffff;
    font-weight: 600;
}
/* =========================================
   GALLERY
========================================= */

.gallery-section {
    position: relative;

    min-height: 100vh;

    padding:
        clamp(90px, 10vw, 140px)
        0
        clamp(80px, 9vw, 120px);

    overflow: hidden;

    text-align: center;

    border-top:
        1px solid rgba(232, 197, 106, 0.10);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(110, 40, 160, 0.13),
            transparent 45%
        );
}


/* DECORATIVE CIRCLES */

.gallery-orbit {
    position: absolute;

    width: min(42vw, 580px);
    aspect-ratio: 1;

    border:
        1px solid rgba(150, 70, 200, 0.10);

    border-radius: 50%;

    pointer-events: none;
}

.gallery-orbit::after {
    content: "";

    position: absolute;
    inset: 12%;

    border:
        1px solid rgba(232, 197, 106, 0.08);

    border-radius: inherit;
}

.gallery-orbit-left {
    left: -25vw;
    top: 18%;
}

.gallery-orbit-right {
    right: -25vw;
    bottom: 0;
}


/* =========================================
   GALLERY HEADING
========================================= */

.gallery-heading {
    position: relative;

    margin-bottom:
        clamp(20px, 3vw, 35px);

    padding: 0 6%;

    text-align: center;
}

.gallery-kicker {
    margin-bottom: 12px;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;

    color: #e8c56a;
}

.gallery-heading h2 {
    position: relative;

    display: inline-block;

    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(28px, 4.2vw, 52px);
    font-weight: 800;

    letter-spacing:
        clamp(4px, 0.8vw, 10px);

    line-height: 1;

    color: white;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.65);
}

.gallery-heading h2::before {
    content: attr(data-title);

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1.28);

    white-space: nowrap;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(232, 197, 106, 0.07);

    z-index: -1;
}


/* TITLE DECORATION */

.gallery-title-line {
    width: min(360px, 72vw);

    margin: 25px auto 0;

    display: grid;

    grid-template-columns:
        1fr 8px 1fr;

    align-items: center;

    gap: 12px;
}

.gallery-title-line span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8c56a
        );
}

.gallery-title-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #e8c56a,
            transparent
        );
}

.gallery-title-line i {
    width: 7px;
    height: 7px;

    border: 1px solid #e8c56a;

    transform: rotate(45deg);

    box-shadow:
        0 0 10px
        rgba(232, 197, 106, 0.45);
}


/* =========================================
   GALLERY SLIDER
========================================= */

.gallery-slider {
    position: relative;

    width: 100%;
}


.gallery-track::-webkit-scrollbar {
    display: none;
}
.gallery-track {
    display: flex;
    align-items: center;

    gap: clamp(18px, 2.2vw, 30px);

    overflow-x: hidden;
    overflow-y: hidden;

    padding: clamp(22px, 3vw, 40px) 36vw;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}

/* IMAGE CARD */

.gallery-card {
    position: relative;

    flex:
        0 0
        clamp(255px, 28vw, 430px);

    aspect-ratio: 4 / 3;

    overflow: hidden;

    scroll-snap-align: center;

    border:
        1px solid
        rgba(232, 197, 106, 0.12);

    border-radius: 5px;

    background: #09060c;

    opacity: 0.32;

    transform: scale(0.88);

    filter: saturate(0.65);

    transition:
        transform 0.65s
        cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease,
        filter 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

.gallery-card.no-transition,
.gallery-card.no-transition img {
    transition: none !important;
}



.gallery-card::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(5, 2, 8, 0.78)
        );

    pointer-events: none;
}


.gallery-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* ACTIVE CENTER IMAGE */

.gallery-card.is-active {
    z-index: 3;

    opacity: 1;

    transform:
        scale(1.14)
        translateY(-10px);

    filter: saturate(1.05);

    border-color: #e8c56a;

    box-shadow:
        0 0 0 1px
        rgba(232, 197, 106, 0.20),

        0 0 34px
        rgba(130, 45, 180, 0.28),

        0 22px 50px
        rgba(0, 0, 0, 0.55);
}


.gallery-card:hover img {
    transform: scale(1.06);
}


/* IMAGE NUMBER */

.gallery-number {
    position: absolute;

    right: 20px;
    bottom: 17px;

    z-index: 3;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #e8c56a;
}


/* =========================================
   ARROWS
========================================= */

.gallery-arrow {
    position: absolute;

    top: 50%;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(232, 197, 106, 0.38);

    border-radius: 50%;

    background:
        rgba(9, 5, 13, 0.82);

    backdrop-filter: blur(10px);

    color: #e8c56a;

    transform: translateY(-50%);

    cursor: pointer;

    z-index: 10;

    transition: 0.3s ease;
}

.gallery-arrow svg {
    width: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;
}

.gallery-arrow:hover {
    background: #e8c56a;

    color: #150b1b;

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 0 25px
        rgba(232, 197, 106, 0.25);
}

.gallery-prev {
    left: max(20px, 5vw);
}

.gallery-next {
    right: max(20px, 5vw);
}


/* =========================================
   PROGRESS
========================================= */

.gallery-progress {
    width: min(350px, 68vw);

    margin:
        clamp(25px, 4vw, 45px)
        auto 0;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 14px;

    font-family: 'Poppins', sans-serif;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 2px;

    color:
        rgba(255, 255, 255, 0.42);
}

.gallery-current {
    color: #e8c56a;
}

.gallery-progress-line {
    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.12);
}

.gallery-progress-line i {
    display: block;

    width: 16.666%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #9b4dcc,
            #e8c56a
        );

    transition:
        transform 0.45s ease;
}

@media (max-width: 700px) {

    .gallery-section {
        min-height: auto;

        padding:
            75px 0
            85px;
    }

    .gallery-heading {
        margin-bottom: 35px;
    }

    .gallery-kicker {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .gallery-heading h2 {
        font-size: 34px;

        letter-spacing: 4px;
    }

    .gallery-track {
        padding-inline:
            calc((100vw - 76vw) / 2);

        gap: 14px;
    }

    .gallery-card {
        flex-basis: 76vw;
    }

    .gallery-card.is-active {
        transform:
            scale(1.03)
            translateY(-5px);
    }

    .gallery-arrow {
        width: 42px;
        height: 42px;
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

}

/* =========================================
   SITH PAWURA
========================================= */

.sith-paura-section {
    position: relative;

    min-height: 100vh;

    padding: 95px 8% 120px;

    color: white;

    z-index: 20;

    overflow: hidden;

    border-top:
        1px solid rgba(232, 197, 106, 0.08);
}


/* =========================
   HEADING
========================= */

.sith-paura-heading {
    width: 100%;

    text-align: center;

    margin-bottom: 38px;
}


/* small gold label */
.sith-paura-label {
    width: 100%;

    margin: 0 0 18px;

    text-align: center;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #e8c56a;
}


/* main SITH PAWURA title */
.sith-paura-heading h2 {
    position: relative;

    width: 100%;

    margin: 0;

    text-align: center;

    font-family: 'Cinzel', serif;

    font-size: clamp(30px, 4.5vw, 58px);

    font-weight: 800;

    letter-spacing:
        clamp(4px, 0.8vw, 10px);

    line-height: 1;

    color: white;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.65);

    z-index: 1;
}


/* ghost title behind */
.sith-paura-heading h2::before {
    content: attr(data-title);

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1.28);

    white-space: nowrap;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(232, 197, 106, 0.07);

    z-index: -1;

    pointer-events: none;
}


/* gold line */
.sith-paura-title-line {
    width: min(360px, 72vw);

    margin: 24px auto 0;

    display: grid;

    grid-template-columns:
        1fr 8px 1fr;

    align-items: center;

    gap: 12px;
}


.sith-paura-title-line span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8c56a
        );
}


.sith-paura-title-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #e8c56a,
            transparent
        );
}


.sith-paura-title-line i {
    width: 7px;
    height: 7px;

    border:
        1px solid #e8c56a;

    transform: rotate(45deg);

    box-shadow:
        0 0 10px rgba(232, 197, 106, 0.45);
}


/* =========================
   DESCRIPTION
========================= */

.sith-paura-description {
    width: min(900px, 100%);

    margin:
        0 auto 55px;

    text-align: center;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;
    font-weight: 300;

    line-height: 1.9;

    color:
        rgba(255, 255, 255, 0.82);
}


.sith-paura-description strong {
    color: #ffffff;

    font-weight: 600;
}


/* =========================
   IMAGE GRID
========================= */

.sith-paura-gallery {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 26px;
}


/* image card */
.sith-paura-card {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border:
        1px solid rgba(232, 197, 106, 0.30);

    border-radius: 5px;

    background: #09060c;

    box-shadow:
        0 0 0 1px rgba(232, 197, 106, 0.08),
        0 0 28px rgba(130, 45, 180, 0.16),
        0 18px 42px rgba(0, 0, 0, 0.40);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


.sith-paura-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(5, 2, 8, 0.55)
        );

    pointer-events: none;
}


.sith-paura-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.sith-paura-card:hover {
    transform:
        translateY(-5px);

    border-color:
        #e8c56a;

    box-shadow:
        0 0 0 1px rgba(232, 197, 106, 0.18),
        0 0 32px rgba(130, 45, 180, 0.25),
        0 22px 48px rgba(0, 0, 0, 0.48);
}


.sith-paura-card:hover img {
    transform: scale(1.05);
}


/* =========================
   HIDDEN ROWS
========================= */

.sith-paura-extra {
    display: none;
}


.sith-paura-gallery.expanded
.sith-paura-extra {
    display: block;

    animation:
        sithPauraReveal 0.7s ease both;
}


@keyframes sithPauraReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================
   SEE MORE BUTTON
========================= */

.sith-paura-button-wrap {
    width: 100%;

    margin-top: 45px;

    display: flex;

    justify-content: center;
}


.sith-paura-button {
    min-width: 150px;

    padding:
        13px 30px;

    border:
        1px solid rgba(232, 197, 106, 0.65);

    border-radius: 3px;

    background:
        rgba(8, 5, 9, 0.35);

    color:
        #e8c56a;

    font-family:
        'Poppins', sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    cursor: pointer;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.sith-paura-button:hover {
    background:
        #e8c56a;

    color:
        #120b17;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 25px rgba(232, 197, 106, 0.20);
}

/* ==========================================================
   SPONSORS + CONTACT FINAL DESIGN
========================================================== */


/* ==========================================================
   SHARED SECTION HEADING STYLE
========================================================== */

.sponsors-section,
.team-contact-section {
    position: relative;

    width: 100%;

    color: white;

    background: transparent;

    z-index: 20;
}


/* ==========================================================
   SPONSORS
========================================================== */

.sponsors-section {
    min-height: 100vh;

    padding:
        100px
        8%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.sponsors-heading,
.contact-heading {
    width: 100%;

    text-align: center;
}


.sponsors-label,
.contact-label {
    width: 100%;

    margin:
        0
        0
        18px;

    font-family:
        'Poppins',
        sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #e8c56a;
}


.sponsors-heading h2,
.contact-heading h2 {
    position: relative;

    width: 100%;

    margin: 0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(
            30px,
            4.5vw,
            58px
        );

    font-weight: 800;

    letter-spacing:
        clamp(
            4px,
            0.8vw,
            10px
        );

    line-height: 1;

    color: white;

    text-shadow:
        0
        4px
        20px
        rgba(0, 0, 0, 0.65);

    z-index: 1;
}


/* faint title behind */

.sponsors-heading h2::before,
.contact-heading h2::before {
    content:
        attr(data-title);

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1.28);

    white-space: nowrap;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(
            232,
            197,
            106,
            0.07
        );

    z-index: -1;

    pointer-events: none;
}


/* GOLD LINE + DIAMOND */

.sponsors-title-line,
.contact-title-line {
    width:
        min(
            360px,
            72vw
        );

    margin:
        24px
        auto
        0;

    display: grid;

    grid-template-columns:
        1fr
        8px
        1fr;

    align-items: center;

    gap: 12px;
}


.sponsors-title-line span,
.contact-title-line span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8c56a
        );
}


.sponsors-title-line span:last-child,
.contact-title-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #e8c56a,
            transparent
        );
}


.sponsors-title-line i,
.contact-title-line i {
    width: 7px;
    height: 7px;

    border:
        1px solid
        #e8c56a;

    transform:
        rotate(45deg);

    box-shadow:
        0
        0
        10px
        rgba(
            232,
            197,
            106,
            0.45
        );
}


/* ==========================================================
   CONTACT
========================================================== */

.team-contact-section {
    min-height: 145vh;

    padding:
        30px
        7%
        0;

    text-align: center;
}


/* kill old contact look */

.team-contact-section {
    display: block !important;

    border-top: none !important;
}


.contact-heading {
    margin-bottom:
        38px;
}


/* entire team area */

.contact-team {
    width: 100%;

    max-width:
        1050px;

    margin:
        0 auto;
}


/* ==========================================================
   PRESIDENT
========================================================== */

.contact-president-row {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom:
        28px;
}


/* ==========================================================
   SECOND ROW
========================================================== */

.contact-team-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        clamp(
            18px,
            2.5vw,
            30px
        );
}


/* ==========================================================
   PERSON CARD
========================================================== */

.contact-person-card {
    position: relative;

    padding:
        22px
        18px
        20px;

    text-align: center;

    border:
        1px solid
        rgba(
            232,
            197,
            106,
            0.16
        );

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            rgba(
                65,
                20,
                82,
                0.12
            ),
            rgba(
                7,
                5,
                10,
                0.28
            )
        );

    box-shadow:
        0
        18px
        38px
        rgba(
            0,
            0,
            0,
            0.20
        );

    transition:
        transform
        0.45s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),

        border-color
        0.45s ease,

        box-shadow
        0.45s ease;
}


.contact-person-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(
            232,
            197,
            106,
            0.48
        );

    box-shadow:
        0
        22px
        45px
        rgba(
            0,
            0,
            0,
            0.30
        ),

        0
        0
        24px
        rgba(
            130,
            45,
            180,
            0.12
        );
}


/* President slightly wider */

.contact-president {
    width:
        min(
            300px,
            100%
        );
}


/* ==========================================================
   PERSON IMAGE
========================================================== */

.contact-person-image {
    width:
        112px;

    height:
        112px;

    margin:
        0
        auto
        18px;

    border-radius:
        50%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            232,
            197,
            106,
            0.48
        );

    box-shadow:
        0
        0
        0
        5px
        rgba(
            232,
            197,
            106,
            0.035
        ),

        0
        0
        25px
        rgba(
            130,
            45,
            180,
            0.18
        );
}


.contact-person-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center;
}


/* ==========================================================
   ROLE / NAME / PHONE
========================================================== */

.contact-role {
    margin:
        0
        0
        8px;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        3px;

    color:
        #e8c56a;
}


.contact-person-card h3 {
    margin:
        0
        0
        10px;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(
            16px,
            1.5vw,
            20px
        );

    font-weight:
        700;

    letter-spacing:
        1px;

    color:
        #ffffff;
}


.contact-phone {
    display:
        inline-block;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        12px;

    font-weight:
        400;

    letter-spacing:
        1px;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    text-decoration:
        none;

    transition:
        color
        0.3s ease;
}


.contact-phone:hover {
    color:
        #e8c56a;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .sponsors-section {
        min-height:
            100svh;

        padding:
            88px
            6%;
    }


    .team-contact-section {
        min-height:
            auto !important;

        padding:
            88px
            6%
            90px !important;
    }


    .contact-heading {
        margin-bottom:
            34px;
    }


    .contact-president-row {
        margin-bottom:
            18px;
    }


    .contact-team-row {
        grid-template-columns:
            1fr;

        width:
            min(
                82vw,
                330px
            );

        margin:
            0 auto;

        gap:
            18px;
    }


    .contact-president {
        width:
            min(
                82vw,
                330px
            );
    }


    .contact-person-card {
        padding:
            22px
            18px;
    }


    .contact-person-image {
        width:
            105px;

        height:
            105px;
    }


    .contact-person-card h3 {
        font-size:
            17px;
    }


    .contact-phone {
        font-size:
            11px;
    }
}


/* =========================================
   COUNTDOWN MOBILE FIX
========================================= */

@media (max-width: 500px) {

    .event-countdown {
        padding: 0 0 65px;
    }

    .event-countdown .section-label {
        margin: 0 0 10px;

        font-size: 9px;
        letter-spacing: 3px;
    }

    .event-countdown h2 {
        margin: 0;

        font-size: 28px;
        letter-spacing: 2px;
    }

    .countdown-title-line {
        width: 72vw;

        margin: 16px auto 28px;

        gap: 10px;
    }

    .countdown-title-line i {
        width: 6px;
        height: 6px;
    }
}

@media (min-width: 901px) {

    .event-info {
        min-height: 100vh;
        padding-top: 120px;
        padding-bottom: 45px;
    }

    .event-countdown {
        padding-bottom: 0;
    }

    /* ABOUT whole section eka tikak pahalata */
    .about-section {
        min-height: 100vh;
        padding: 80px 8% 70px;
    }

    /* ABOUT topic + style line + description athara gap adu karanna */
    .about-heading {
        margin-bottom: 37px;
    }

    .about-title-line {
        margin: 16px auto 0;
    }

    /* description saha image eka ekama row eke clean wenda */
    .about-content {
    align-items: start;
    gap: 46px;

    /* description + image dekama poddak yatata */
    padding-top: 20px;
}

    .about-text {
        max-width: 760px;
    }

    .about-image-wrap {
    transform: translateY(-25px);
}

    /* image eka description ekata wada loku wenna epa */
    .about-image-frame {
    width: min(390px, 100%);

    border: none;
    border-radius: 24px;

    background: transparent;
    box-shadow: none;

    overflow: hidden;
}

    /* image eka background layer ekata fade wenna */
    .about-image-frame::before {
        background: linear-gradient(
            180deg,
            rgba(12, 5, 18, 0.08),
            rgba(12, 5, 18, 0.18)
        );
    }

 .about-image-frame::after {
    box-shadow:
        inset 0 -45px 50px rgba(8, 5, 9, 0.72),
        inset 35px 0 45px rgba(8, 5, 9, 0.25),
        inset -35px 0 45px rgba(8, 5, 9, 0.25);
}

    .about-image-frame img {
    width: 100%;

    /* 500px thibba eka adu karanawa */
    height: 405px;

    object-fit: cover;

    /* bottom eka tikak wadiyen crop wenna */
    object-position: center 28%;

    display: block;
    transform: none;

    filter:
        brightness(0.86)
        contrast(1.02)
        saturate(0.92);

    /* background ekata smooth fade */
    -webkit-mask-image: radial-gradient(
        ellipse 88% 90% at 50% 43%,
        #000 50%,
        rgba(0, 0, 0, 0.95) 64%,
        rgba(0, 0, 0, 0.65) 80%,
        rgba(0, 0, 0, 0.20) 92%,
        transparent 100%
    );

    mask-image: radial-gradient(
        ellipse 88% 90% at 50% 43%,
        #000 50%,
        rgba(0, 0, 0, 0.95) 64%,
        rgba(0, 0, 0, 0.65) 80%,
        rgba(0, 0, 0, 0.20) 92%,
        transparent 100%
    );
}

}

/* =========================================
   CINEMATIC SECTION SCROLL SUPPORT
========================================= */

html,
body {
    scroll-behavior: auto;
    overscroll-behavior-y: none;
}
/* =========================================
   MOBILE SECTION SCROLL SUPPORT
========================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .event-info {
        min-height: 100svh;
    }

    .about-section {
        min-height: 100svh;
    }

    .gallery-section {
        min-height: 100svh;
    }

    .contact-section {
        min-height: 100svh;
    }
}

/* ======================================================================
   DESKTOP RESPONSIVE V2
   ----------------------------------------------------------------------
   IMPORTANT:
   - 1920px-wide desktop keeps the ORIGINAL design exactly as supplied.
   - These rules only start below 1680px.
   - The original cinematic background/sticky hero relationship is kept.
   - No desktop overflow-x override is added (it can interfere with sticky).
   - Sith Paura sizing/min-height/padding is intentionally left untouched
     so the current native-scroll + JS boundary behaviour stays stable.
   - Mobile <= 900px remains the existing/original version for the later
     dedicated mobile pass.
====================================================================== */


/* ======================================================================
   LARGE / MEDIUM DESKTOP
   901px - 1680px
====================================================================== */
@media (min-width: 901px) and (max-width: 1680px) {

    /* -------------------------
       NAVBAR
       Keeps original composition,
       only compresses smoothly.
    ------------------------- */

    .navbar {
        padding-left: clamp(34px, 4.5vw, 72px);
        padding-right: clamp(34px, 4.5vw, 72px);
        gap: clamp(16px, 1.5vw, 24px);
    }

    .logo img {
        width: clamp(100px, 7vw, 120px);
    }

    .nav-links {
        gap: clamp(18px, 1.75vw, 28px);
        white-space: nowrap;
    }

    .nav-links a {
        font-size: clamp(13px, 0.95vw, 16px);
        letter-spacing: clamp(1px, 0.12vw, 2px);
        white-space: nowrap;
    }

    .nav-ticket {
        padding:
            clamp(9px, 0.75vw, 12px)
            clamp(14px, 1.15vw, 20px);

        font-size: clamp(12px, 0.95vw, 16px);
        white-space: nowrap;
    }


    /* -------------------------
       HERO
       Original 1920 appearance is
       untouched; only smaller desktop
       widths scale down gently.
    ------------------------- */

    .hero-center {
        width: min(92%, 960px);
    }

    .main-logo img {
        width: clamp(260px, 27vw, 430px);
    }

    .hero-event-text {
        padding:
            clamp(16px, 1.3vw, 20px)
            clamp(22px, 1.8vw, 30px);
    }

    .hero-event-text h1 {
        font-size: clamp(40px, 4.3vw, 68px);
    }

    .hero-tagline {
        font-size: clamp(12px, 1.2vw, 19px);
        max-width: min(750px, 78vw);
    }


    /* -------------------------
       COUNTDOWN
       Do not change section height.
       Only horizontal scale/spacing.
    ------------------------- */

    .event-info {
        padding-left: clamp(52px, 7vw, 8%);
        padding-right: clamp(52px, 7vw, 8%);
    }

    .event-countdown {
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }

    .countdown {
        gap: clamp(10px, 1.55vw, 22px);
    }

    .count-box {
        width: clamp(92px, 9.2vw, 145px);
        height: clamp(88px, 8.8vw, 135px);
    }

    .count-box span {
        font-size: clamp(34px, 4vw, 68px);
    }

    .event-meta {
        gap: clamp(28px, 4vw, 65px);
    }


    /* -------------------------
       ABOUT
       Keeps the same two-column look,
       but prevents sudden squeezing.
    ------------------------- */

    .about-section {
        padding-left: clamp(52px, 7vw, 8%);
        padding-right: clamp(52px, 7vw, 8%);
    }

    .about-content {
        width: min(1180px, 100%);
        margin-left: auto;
        margin-right: auto;

        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(300px, 0.82fr);

        gap: clamp(34px, 3.6vw, 46px);
    }

    .about-text p {
        font-size: clamp(16px, 1.12vw, 19px);
        line-height: clamp(1.78, 1.9, 1.95);
    }

    /* Preserve the image treatment from the original desktop override */
    .about-image-frame {
        width: min(390px, 100%);
    }


    /* -------------------------
       ARTIST
       Original fixed 430px + 85px
       gets progressively compressed.
    ------------------------- */

    .artist-section {
        padding-left: clamp(52px, 7vw, 8%);
        padding-right: clamp(52px, 7vw, 8%);
    }

    .artist-container {
        width: min(1250px, 100%);
        max-width: 1250px;

        grid-template-columns:
            minmax(320px, 0.88fr)
            minmax(0, 1.12fr);

        gap: clamp(42px, 4.6vw, 78px);
    }

    .artist-image-frame {
        width: min(430px, 100%);
    }

    .artist-text p {
        font-size: clamp(15.5px, 1vw, 17px);
        line-height: 1.85;
    }


    /* -------------------------
       GALLERY
       Preserve visual style,
       only reduce horizontal pressure.
    ------------------------- */

    .gallery-track {
        gap: clamp(18px, 1.8vw, 30px);
    }

    .gallery-card {
        flex-basis: clamp(300px, 27vw, 430px);
    }

    .gallery-prev {
        left: clamp(20px, 4vw, 5vw);
    }

    .gallery-next {
        right: clamp(20px, 4vw, 5vw);
    }


    /* -------------------------
       CONTACT PLACEHOLDER
       Horizontal compression only.
    ------------------------- */

    .contact-section {
        padding-left: clamp(52px, 7vw, 8%);
        padding-right: clamp(52px, 7vw, 8%);
    }
}


/* ======================================================================
   COMPACT DESKTOP / SMALL LAPTOP
   901px - 1200px
====================================================================== */
@media (min-width: 901px) and (max-width: 1200px) {

    /* Navbar must remain one clean row */

    .navbar {
        padding-left: 28px;
        padding-right: 28px;
        gap: 12px;
    }

    .logo img {
        width: 92px;
    }

    .nav-links {
        gap: clamp(11px, 1.25vw, 15px);
    }

    .nav-links a {
        font-size: clamp(10.5px, 1vw, 12px);
        letter-spacing: 0.8px;
    }

    .nav-ticket {
        padding: 9px 12px;
        font-size: 11px;
        letter-spacing: 0.6px;
    }


    /* Hero */

    .hero-center {
        width: min(90%, 860px);
    }

    .main-logo img {
        width: clamp(250px, 31vw, 360px);
    }


    /* Countdown */

    .event-info {
        padding-left: 5%;
        padding-right: 5%;
    }

    .count-box {
        width: clamp(86px, 10vw, 118px);
        height: clamp(84px, 9.7vw, 114px);
    }

    .count-box span {
        font-size: clamp(30px, 4.4vw, 52px);
    }

    .event-meta-item {
        font-size: clamp(11px, 1.15vw, 14px);
    }


    /* About */

    .about-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .about-content {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(270px, 0.92fr);

        gap: clamp(28px, 3vw, 38px);
    }

    .about-image-frame {
        width: min(330px, 100%);
    }

    .about-text p {
        font-size: clamp(15px, 1.35vw, 16.5px);
        line-height: 1.78;
    }


    /* Artist */

    .artist-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .artist-container {
        grid-template-columns:
            minmax(285px, 0.9fr)
            minmax(0, 1.1fr);

        gap: clamp(28px, 3.4vw, 42px);
    }

    .artist-image-frame {
        width: min(350px, 100%);
    }

    .artist-text p {
        font-size: clamp(15px, 1.3vw, 16px);
        line-height: 1.78;
    }


    /* Gallery */

    .gallery-card {
        flex-basis: clamp(275px, 31vw, 350px);
    }

    .gallery-card.is-active {
        transform:
            scale(1.08)
            translateY(-7px);
    }

    .gallery-arrow {
        width: 44px;
        height: 44px;
    }

    .gallery-prev {
        left: 18px;
    }

    .gallery-next {
        right: 18px;
    }


    /* Contact */

    .contact-section {
        padding-left: 5%;
        padding-right: 5%;
    }
}


/* ======================================================================
   SHORTER DESKTOP VIEWPORTS
   Only applies when BOTH width and height are reduced.
   1920x1080 is therefore completely untouched.
====================================================================== */
@media
    (min-width: 901px)
    and (max-width: 1600px)
    and (max-height: 820px) {

    .navbar {
        height: 64px;
    }

    .main-logo img {
        width: clamp(240px, 25vw, 350px);
    }

    .hero-event-text {
        margin-top: -26px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .scroll-down {
        bottom: 14px;
    }

    .scroll-line {
        height: 28px;
    }


    /* Countdown compact vertically, without changing min-height */

    .event-info {
        padding-top: 82px;
        padding-bottom: 36px;
    }

    .countdown-title-line {
        margin-top: 16px;
        margin-bottom: 26px;
    }

    .event-meta {
        margin-top: 28px;
    }


    /* About / Artist / Gallery vertical pressure */

    .about-section {
        padding-top: 68px;
        padding-bottom: 58px;
    }

    .artist-section {
        padding-top: 72px;
        padding-bottom: 62px;
    }

    .gallery-section {
        padding-top: 72px;
        padding-bottom: 64px;
    }

    .about-heading,
    .artist-heading,
    .gallery-heading {
        margin-bottom: 28px;
    }

    .about-image-frame {
        width: min(330px, 100%);
    }

    .artist-image-frame {
        width: min(350px, 100%);
    }

    .about-text p,
    .artist-text p {
        margin-bottom: 18px;
    }

    .gallery-track {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .gallery-progress {
        margin-top: 24px;
    }

    /*
       IMPORTANT:
       No .sith-paura-section / .sith-paura-gallery rules here.
       Its original dimensions are preserved so the JS native-scroll
       boundary calculations remain stable.
    */
}


/* ======================================================================
   CINEMATIC BACKGROUND SAFETY
   Explicitly preserves the ORIGINAL translucent layer.
   This is not black and still lets the sticky hero/video influence
   the cinematic background as in the supplied design.
====================================================================== */

.cinematic-content {
    background: rgba(8, 5, 9, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* =========================================
   COUNTDOWN DESKTOP FINAL LAYOUT
   Center + Date/Time/Location reveal
========================================= */

@media (min-width: 901px) {

    /* =====================================
       FULL COUNTDOWN SECTION CENTER
    ===================================== */

    .event-info {
        min-height: 100vh;

        display: flex;
        align-items: center;
        justify-content: center;

        padding-top: 72px;
        padding-bottom: 0;
    }


    .event-countdown {
        width: 100%;
        max-width: 1180px;

        margin: 0 auto;

        padding-bottom: 0;
    }


    /* =====================================
       GAP 01
       HEADING -> COUNTDOWN BOXES
    ===================================== */

    .countdown-title-line {
        margin-top:
            clamp(20px, 1.4vw, 26px);

        margin-bottom:
            clamp(42px, 3vw, 56px);
    }


    /* =====================================
       DATE / TIME / LOCATION AREA
    ===================================== */

    .event-meta {
        width: min(780px, 82vw);

        margin:
            clamp(62px, 5vw, 90px)
            auto
            0;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(220px, 1fr)
            );

        column-gap:
            clamp(55px, 7vw, 110px);

        row-gap:
            clamp(28px, 2.5vw, 42px);

        align-items: center;
        justify-content: center;
    }


    /* =====================================
       DATE - LEFT
    ===================================== */

/* DATE - LEFT */
.event-meta-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;

    justify-self: center;
}


/* LOCATION - CENTER BELOW */
.event-meta-item:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;

    justify-self: center;
}


/* TIME - RIGHT */
.event-meta-item:nth-child(3) {
    grid-column: 2;
    grid-row: 1;

    justify-self: center;
}


    /* =====================================
       BIGGER META TEXT
    ===================================== */

    .event-meta-item {
        gap: clamp(11px, 1vw, 15px);

        font-size:
            clamp(17px, 1.05vw, 20px);

        font-weight: 500;

        letter-spacing: 0.8px;

        white-space: nowrap;
    }


    .event-meta-item svg {
        width:
            clamp(22px, 1.45vw, 28px);

        height:
            clamp(22px, 1.45vw, 28px);
    }


    /* =====================================
       EMERGE - START STATE
    ===================================== */

    .event-meta-item {
        opacity: 0;

        transform:
            translateY(28px)
            scale(0.96);

        filter: blur(5px);

        transition:
            opacity 0.75s ease,
            transform 0.85s
            cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.75s ease;
    }


    /* =====================================
       DATE EMERGE
    ===================================== */

    .countdown-revealed
    .event-meta-item:nth-child(1) {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

        transition-delay: 0.08s;
    }


    /* =====================================
       TIME EMERGE
    ===================================== */

    .countdown-revealed
    .event-meta-item:nth-child(2) {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

        transition-delay: 0.20s;
    }


    /* =====================================
       LOCATION EMERGE
    ===================================== */

    .countdown-revealed
    .event-meta-item:nth-child(3) {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

        transition-delay: 0.38s;
    }

}
/* =========================================
   COUNTDOWN META - COMPACT WIDTH FIX
   501px - 900px
========================================= */

@media (min-width: 501px) and (max-width: 900px) {

    .event-meta {
        width: min(720px, 88vw);

        margin:
            clamp(48px, 6vw, 65px)
            auto
            0;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap:
            clamp(30px, 6vw, 60px);

        row-gap:
            clamp(24px, 4vw, 34px);

        align-items: center;
        justify-content: center;
    }


    /* DATE - LEFT */
    .event-meta-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        justify-self: center;
    }


    /* LOCATION - BELOW CENTER */
    .event-meta-item:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;

        justify-self: center;
    }


    /* TIME - RIGHT */
    .event-meta-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1;

        justify-self: center;
    }


    .event-meta-item {
        font-size:
            clamp(14px, 1.8vw, 17px);

        gap: 10px;

        white-space: nowrap;
    }


    .event-meta-item svg {
        width:
            clamp(20px, 2.3vw, 24px);

        height:
            clamp(20px, 2.3vw, 24px);
    }

}

/* ======================================================================
   CINEMATIC SECTION ENTRANCE ANIMATIONS - DESKTOP
   Triggered after the section snap animation finishes.
====================================================================== */

@media (min-width: 901px) {

    /* --------------------------------------------------
       COUNTDOWN - correct reveal order:
       DATE + TIME first, LOCATION last
    -------------------------------------------------- */
    .countdown-revealed .event-meta-item:nth-child(1) {
        transition-delay: 0.08s;
    }

    .countdown-revealed .event-meta-item:nth-child(3) {
        transition-delay: 0.18s;
    }

    .countdown-revealed .event-meta-item:nth-child(2) {
        transition-delay: 0.34s;
    }


    /* ==================================================
       ABOUT
       Heading emerge + divider draw + text stagger +
       microphone image soft reveal
    ================================================== */

    #about .about-heading {
        transition:
            opacity 0.72s ease,
            transform 0.82s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #about:not(.section-revealed) .about-heading {
        opacity: 0;
        transform: translateY(-18px);
    }

    #about.section-revealed .about-heading {
        opacity: 1;
        transform: translateY(0);
    }

    #about .about-title-line span {
        transform: scaleX(0);
        transition:
            transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: 0.12s;
    }

    #about .about-title-line span:first-child {
        transform-origin: right center;
    }

    #about .about-title-line span:last-child {
        transform-origin: left center;
    }

    #about.section-revealed .about-title-line span {
        transform: scaleX(1);
    }

    #about .about-title-line i {
        opacity: 0;
        transform: rotate(45deg) scale(0.4);
        transition:
            opacity 0.45s ease 0.24s,
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;
    }

    #about.section-revealed .about-title-line i {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    #about .about-text p {
        opacity: 0;
        transform: translateX(-28px);
        transition:
            opacity 0.72s ease,
            transform 0.82s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #about .about-text p:nth-child(1) {
        transition-delay: 0.26s;
    }

    #about .about-text p:nth-child(2) {
        transition-delay: 0.38s;
    }

    #about.section-revealed .about-text p {
        opacity: 1;
        transform: translateX(0);
    }

    #about .about-image-frame {
        opacity: 0;
        transform: translateX(24px) scale(0.96);
        transition:
            opacity 0.82s ease,
            transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: 0.30s;
    }

    #about.section-revealed .about-image-frame {
        opacity: 1;
        transform: translateX(0) scale(1);
    }


    /* ==================================================
       ARTIST
       Image mask reveal + label/title/divider/text stagger
    ================================================== */

    #artists .artist-image-frame {
        opacity: 0.32;
        clip-path: inset(0 100% 0 0);
        transition:
            clip-path 0.92s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.72s ease,
            border-color 0.45s ease,
            box-shadow 0.45s ease,
            transform 0.45s ease;
    }

    #artists.section-revealed .artist-image-frame {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    #artists .artist-image-frame img {
        transform: scale(1.04);
        transition:
            transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.8s ease;
    }

    #artists.section-revealed .artist-image-frame img {
        transform: scale(1);
    }

    #artists.section-revealed .artist-image-frame:hover img {
        transform: scale(1.05);
    }

    #artists .artist-label,
    #artists .artist-heading h2,
    #artists .artist-title-line,
    #artists .artist-text > p {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 0.70s ease,
            transform 0.82s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #artists .artist-label {
        transition-delay: 0.15s;
    }

    #artists .artist-heading h2 {
        transition-delay: 0.24s;
    }

    #artists .artist-title-line {
        transition-delay: 0.33s;
    }

    #artists .artist-text > p:nth-of-type(1) {
        transition-delay: 0.45s;
    }

    #artists .artist-text > p:nth-of-type(2) {
        transition-delay: 0.57s;
    }

    #artists.section-revealed .artist-label,
    #artists.section-revealed .artist-heading h2,
    #artists.section-revealed .artist-title-line,
    #artists.section-revealed .artist-text > p {
        opacity: 1;
        transform: translateY(0);
    }

    #artists .artist-title-line span {
        transform: scaleX(0);
        transition:
            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.36s;
    }

    #artists .artist-title-line span:first-child {
        transform-origin: right center;
    }

    #artists .artist-title-line span:last-child {
        transform-origin: left center;
    }

    #artists.section-revealed .artist-title-line span {
        transform: scaleX(1);
    }

    #artists .artist-title-line i {
        opacity: 0;
        transform: rotate(45deg) scale(0.4);
        transition:
            opacity 0.4s ease 0.48s,
            transform 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.48s;
    }

    #artists.section-revealed .artist-title-line i {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    #artists.section-revealed .artist-text strong {
        animation: artistNameBrightness 0.95s ease 0.62s both;
    }

    @keyframes artistNameBrightness {
        0% {
            filter: brightness(0.82);
            text-shadow: none;
        }
        58% {
            filter: brightness(1.18);
            text-shadow: 0 0 12px rgba(255, 255, 255, 0.10);
        }
        100% {
            filter: brightness(1);
            text-shadow: none;
        }
    }


    /* ==================================================
       GALLERY
       Heading/divider reveal + center focus + side slide
    ================================================== */

    #gallery .gallery-kicker,
    #gallery .gallery-heading h2,
    #gallery .gallery-title-line {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.68s ease,
            transform 0.80s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #gallery .gallery-kicker {
        transition-delay: 0.08s;
    }

    #gallery .gallery-heading h2 {
        transition-delay: 0.17s;
    }

    #gallery .gallery-title-line {
        transition-delay: 0.26s;
    }

    #gallery.section-revealed .gallery-kicker,
    #gallery.section-revealed .gallery-heading h2,
    #gallery.section-revealed .gallery-title-line {
        opacity: 1;
        transform: translateY(0);
    }

    #gallery .gallery-title-line span {
        transform: scaleX(0);
        transition:
            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
    }

    #gallery .gallery-title-line span:first-child {
        transform-origin: right center;
    }

    #gallery .gallery-title-line span:last-child {
        transform-origin: left center;
    }

    #gallery.section-revealed .gallery-title-line span {
        transform: scaleX(1);
    }

    #gallery .gallery-title-line i {
        opacity: 0;
        transform: rotate(45deg) scale(0.4);
        transition:
            opacity 0.4s ease 0.40s,
            transform 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.40s;
    }

    #gallery.section-revealed .gallery-title-line i {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    #gallery:not(.section-revealed) .gallery-card.gallery-enter-left {
        opacity: 0;
        transform: translateX(-34px) scale(0.86);
    }

    #gallery:not(.section-revealed) .gallery-card.gallery-enter-right {
        opacity: 0;
        transform: translateX(34px) scale(0.86);
    }

    #gallery:not(.section-revealed) .gallery-card.gallery-enter-center {
        opacity: 0.40;
        transform: translateY(12px) scale(0.92);
    }

    #gallery .gallery-card.gallery-enter-left,
    #gallery .gallery-card.gallery-enter-right,
    #gallery .gallery-card.gallery-enter-center {
        transition:
            transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.68s ease,
            filter 0.5s ease,
            border-color 0.5s ease,
            box-shadow 0.5s ease;
        transition-delay: 0.34s;
    }


    /* ==================================================
       SITH PAWURA
       Heading/description + six-card stagger
    ================================================== */

    #programme .sith-paura-heading,
    #programme .sith-paura-description {
        opacity: 0;
        transform: translateY(22px);
        transition:
            opacity 0.72s ease,
            transform 0.84s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #programme .sith-paura-heading {
        transition-delay: 0.08s;
    }

    #programme .sith-paura-description {
        transition-delay: 0.20s;
    }

    #programme.section-revealed .sith-paura-heading,
    #programme.section-revealed .sith-paura-description {
        opacity: 1;
        transform: translateY(0);
    }

    #programme:not(.section-revealed)
    .sith-paura-card:not(.sith-paura-extra) {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    #programme .sith-paura-card:not(.sith-paura-extra) {
        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.45s ease,
            box-shadow 0.45s ease;
    }

    #programme.section-revealed
    .sith-paura-card:not(.sith-paura-extra) {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(1) { transition-delay: 0.30s; }

    #programme.section-revealed
    .sith-paura-card:nth-child(2) { transition-delay: 0.40s; }

    #programme.section-revealed
    .sith-paura-card:nth-child(3) { transition-delay: 0.50s; }

    #programme.section-revealed
    .sith-paura-card:nth-child(4) { transition-delay: 0.60s; }

    #programme.section-revealed
    .sith-paura-card:nth-child(5) { transition-delay: 0.70s; }

    #programme.section-revealed
    .sith-paura-card:nth-child(6) { transition-delay: 0.80s; }

    #programme.section-revealed
    .sith-paura-card:not(.sith-paura-extra):hover {
        transform: translateY(-5px) scale(1);
        transition-delay: 0s;
    }

    /* Extra six cards after SEE MORE */
    #programme .sith-paura-gallery.expanded .sith-paura-extra {
        animation: none;
        opacity: 0;
        transform: translateY(24px) scale(0.97);
        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.45s ease,
            box-shadow 0.45s ease;
        transition-delay: var(--extra-delay, 0s);
    }

    #programme .sith-paura-gallery.expanded
    .sith-paura-extra.extra-revealed {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    #programme .sith-paura-gallery.expanded
    .sith-paura-extra.extra-revealed:hover {
        transform: translateY(-5px) scale(1);
        transition-delay: 0s;
    }


    /* ==================================================
       CONTACT
       Closing sequence + center-out social icons + line draw
    ================================================== */

    #contact .contact-label,
    #contact h2,
    #contact .contact-description {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 0.68s ease,
            transform 0.80s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #contact .contact-label {
        transition-delay: 0.08s;
    }

    #contact h2 {
        transition-delay: 0.18s;
    }

    #contact .contact-description {
        transition-delay: 0.30s;
    }

    #contact.section-revealed .contact-label,
    #contact.section-revealed h2,
    #contact.section-revealed .contact-description {
        opacity: 1;
        transform: translateY(0);
    }

    #contact .social-links a {
        opacity: 0;
        transition:
            opacity 0.58s ease,
            transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
            background 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    #contact .social-links a:nth-child(1) {
        transform: translateX(-22px) translateY(8px) scale(0.92);
        transition-delay: 0.54s;
    }

    #contact .social-links a:nth-child(2) {
        transform: translateX(-8px) translateY(8px) scale(0.92);
        transition-delay: 0.42s;
    }

    #contact .social-links a:nth-child(3) {
        transform: translateX(8px) translateY(8px) scale(0.92);
        transition-delay: 0.42s;
    }

    #contact .social-links a:nth-child(4) {
        transform: translateX(22px) translateY(8px) scale(0.92);
        transition-delay: 0.54s;
    }

    #contact.section-revealed .social-links a {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }

    #contact.section-revealed .social-links a:hover {
        transform: translateY(-6px) scale(1);
        transition-delay: 0s;
    }

    #contact .contact-bottom {
        position: relative;
        border-top-color: transparent;
    }

    #contact .contact-bottom::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(232, 197, 106, 0.32),
            rgba(255, 255, 255, 0.13),
            transparent
        );
        transform: scaleX(0);
        transform-origin: left center;
        transition:
            transform 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.70s;
    }

    #contact.section-revealed .contact-bottom::before {
        transform: scaleX(1);
    }

    #contact .contact-bottom span {
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity 0.58s ease 0.88s,
            transform 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.88s;
    }

    #contact.section-revealed .contact-bottom span {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Accessibility: avoid forced motion for users who request reduced motion */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {

    #about .about-heading,
    #about .about-text p,
    #about .about-image-frame,
    #artists .artist-image-frame,
    #artists .artist-image-frame img,
    #artists .artist-label,
    #artists .artist-heading h2,
    #artists .artist-title-line,
    #artists .artist-text > p,
    #gallery .gallery-kicker,
    #gallery .gallery-heading h2,
    #gallery .gallery-title-line,
    #gallery .gallery-card,
    #programme .sith-paura-heading,
    #programme .sith-paura-description,
    #programme .sith-paura-card,
    #contact .contact-label,
    #contact h2,
    #contact .contact-description,
    #contact .social-links a,
    #contact .contact-bottom span {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: inset(0) !important;
        transition: none !important;
        animation: none !important;
    }

    #about .about-title-line span,
    #artists .artist-title-line span,
    #gallery .gallery-title-line span,
    #contact .contact-bottom::before {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    #about .about-title-line i,
    #artists .artist-title-line i,
    #gallery .gallery-title-line i {
        opacity: 1 !important;
        transform: rotate(45deg) scale(1) !important;
        transition: none !important;
    }
}
/* =========================================
   ARTIST TEXT = ABOUT TEXT
   FULL DESKTOP RESPONSIVE
========================================= */

/* 1681px and above */
@media (min-width: 1681px) {

    .artist-text p {
        margin: 0 0 28px;

        font-family: 'Poppins', sans-serif;

        font-size: 19px;
        font-weight: 300;

        line-height: 1.95;

        color: rgba(255, 255, 255, 0.82);
    }

}


/* 1201px - 1680px */
@media (min-width: 1201px) and (max-width: 1680px) {

    .artist-text p {
        margin: 0 0 28px;

        font-family: 'Poppins', sans-serif;

        font-size:
            clamp(16px, 1.12vw, 19px);

        font-weight: 300;

        line-height: 1.9;

        color: rgba(255, 255, 255, 0.82);
    }

}


/* 901px - 1200px */
@media (min-width: 901px) and (max-width: 1200px) {

    .artist-text p {
        margin: 0 0 28px;

        font-family: 'Poppins', sans-serif;

        font-size:
            clamp(15px, 1.35vw, 16.5px);

        font-weight: 300;

        line-height: 1.78;

        color: rgba(255, 255, 255, 0.82);
    }

}


/* Short desktop screens, example 1366x768 */
@media
    (min-width: 901px)
    and (max-width: 1600px)
    and (max-height: 820px) {

    .artist-text p {
        margin-bottom: 18px;
    }

}

/* ==========================================================
   VIRAMAYAK'26
   FINAL MOBILE RESPONSIVE LAYER
   ----------------------------------------------------------
   DESKTOP 901px+ IS NOT TOUCHED
========================================================== */

@media (max-width: 900px) {

    /* ======================================================
       GLOBAL MOBILE
    ====================================================== */

    html {
        scroll-behavior: auto;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .cinematic-content {
        width: 100%;
        overflow-x: hidden;

        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }


    /* ======================================================
       NAVBAR
    ====================================================== */

    .navbar {
        height: 64px;

        padding:
            0
            clamp(16px, 4.5vw, 28px);

        justify-content: space-between;
        gap: 12px;
    }

    .logo img {
        width:
            clamp(74px, 20vw, 88px);
    }

    .nav-links {
        display: none;
    }

    .nav-ticket {
        margin-left: auto;

        padding:
            8px
            clamp(11px, 3vw, 15px);

        font-size:
            clamp(9px, 2.5vw, 11px);

        letter-spacing: 0.8px;
    }

    .menu-button {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero {
        width: 100%;
        height: 100svh;
        min-height: 0;
    }

    .background-video {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;
    }

    .overlay {
        background:
            rgba(0, 0, 0, 0.24);
    }

    .hero-center {
        width: 92%;

        top: 51%;

        transform:
            translate(-50%, -50%);
    }

    .main-logo img {
        width:
            min(72vw, 310px);
    }

    .hero-event-text {
        width: 100%;

        margin-top:
            clamp(-34px, -7vw, -22px);

        padding:
            14px
            clamp(10px, 3vw, 20px);
    }

    .hero-event-text h1 {
        font-size:
            clamp(30px, 9vw, 44px);

        letter-spacing:
            clamp(2px, 1.1vw, 5px);

        line-height: 1.08;
    }

    .hero-tagline {
        max-width: 88vw;

        font-size:
            clamp(10px, 3vw, 13px);

        letter-spacing:
            clamp(1.2px, 0.8vw, 3px);

        line-height: 1.65;
    }

    .hero-presented {
        font-size:
            clamp(8px, 2.25vw, 10px);

        letter-spacing:
            clamp(1px, 0.55vw, 2px);

        line-height: 1.6;
    }

    .scroll-down {
        bottom:
            max(
                16px,
                env(safe-area-inset-bottom)
            );

        gap: 7px;
    }

    .scroll-line {
        height: 28px;
    }


    /* ======================================================
       COUNTDOWN
       Mobile = 2 x 2
    ====================================================== */

    .event-info {
        min-height: 100svh;

        padding:
            88px
            5.5%
            72px;

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

    .event-countdown {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;

        padding: 0;
    }

    .event-countdown .section-label {
        margin:
            0
            0
            12px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .event-countdown h2 {
        margin: 0;

        font-size:
            clamp(30px, 8.5vw, 40px);

        letter-spacing:
            clamp(3px, 1.2vw, 5px);
    }

    .countdown-title-line {
        width:
            min(260px, 68vw);

        margin:
            18px
            auto
            32px;

        gap: 10px;
    }

    .countdown {
        width:
            min(320px, 84vw);

        margin:
            0 auto;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            clamp(12px, 3.5vw, 17px);

        align-items: stretch;
    }

    .count-box {
        width: 100%;
        height: auto;

        aspect-ratio: 1.08 / 1;

        border-radius:
            clamp(13px, 4vw, 18px);

        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .count-box span {
        font-size:
            clamp(34px, 10vw, 48px);

        letter-spacing: 1px;
    }

    .count-box small {
        margin-top:
            clamp(7px, 2vw, 10px);

        font-size:
            clamp(9px, 2.6vw, 11px);

        letter-spacing:
            clamp(1px, 0.6vw, 2px);
    }


    /* ======================================================
       COUNTDOWN EVENT DETAILS

       DATE        TIME

          LOCATION
    ====================================================== */

    .event-meta {
        width:
            min(370px, 91vw);

        margin:
            clamp(36px, 8vw, 48px)
            auto
            0;

        padding: 0;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap:
            clamp(12px, 4vw, 24px);

        row-gap:
            clamp(18px, 4vw, 24px);

        align-items: center;

        justify-content: center;
    }

    /* DATE */
    .event-meta-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        justify-self: center;
    }

    /* LOCATION */
    .event-meta-item:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;

        justify-self: center;

        max-width: 94vw;

        text-align: center;
    }

    /* TIME */
    .event-meta-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1;

        justify-self: center;
    }

    .event-meta-item {
        gap: 8px;

        font-size:
            clamp(11px, 3vw, 13px);

        font-weight: 500;

        line-height: 1.45;

        letter-spacing: 0.25px;

        white-space: nowrap;
    }

    .event-meta-item:nth-child(2) {
        white-space: normal;
    }

    .event-meta-item svg {
        width:
            clamp(18px, 5vw, 22px);

        height:
            clamp(18px, 5vw, 22px);
    }


    /* Mobile countdown emerge */

    .event-meta-item {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.98);

        filter: blur(3px);

        transition:
            opacity 0.55s ease,
            transform 0.65s
            cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.55s ease;
    }

    /* DATE */
    #countdown.countdown-revealed
    .event-meta-item:nth-child(1) {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

        transition-delay: 0.04s;
    }

    /* TIME */
    #countdown.countdown-revealed
    .event-meta-item:nth-child(3) {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

        transition-delay: 0.10s;
    }

    /* LOCATION */
    #countdown.countdown-revealed
    .event-meta-item:nth-child(2) {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

        transition-delay: 0.20s;
    }


    /* ======================================================
       ABOUT
    ====================================================== */

    .about-section {
        min-height: auto;

        padding:
            88px
            6%
            92px;

        overflow: visible;
    }

    .about-heading {
        margin-bottom: 36px;
    }

    .about-heading .section-label {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .about-heading h2 {
        font-size:
            clamp(34px, 9vw, 44px);

        letter-spacing:
            clamp(4px, 1.3vw, 6px);
    }

    .about-title-line {
        width:
            min(270px, 68vw);

        margin:
            18px
            auto
            0;
    }

    .about-content {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 34px;

        padding-top: 0;
    }

    .about-text {
        width: 100%;
        max-width: none;
    }

    .about-text p {
        font-size:
            clamp(15px, 4vw, 16px);

        line-height: 1.82;

        margin-bottom: 22px;

        text-align: left;
    }

    .about-image-wrap {
        width: 100%;

        transform: none;

        margin-top: 2px;
    }

    .about-image-frame {
        width:
            min(88vw, 420px);

        margin: 0 auto;

        border-radius: 20px;
    }

    .about-image-frame img {
        width: 100%;

        height:
            clamp(
                300px,
                82vw,
                410px
            );

        object-fit: cover;

        object-position:
            center 28%;
    }


    /* ======================================================
       ARTIST
       HEADING -> IMAGE -> TEXT
    ====================================================== */

    .artist-section {
        min-height: auto;

        padding:
            88px
            6%
            94px;

        overflow: visible;
    }

    .artist-container {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 0;

        align-items: stretch;
    }

    /*
       HTML eke heading eka artist-text
       athule thiyena nisa display:contents
       use karala mobile order eka control karanawa.
    */

    .artist-text {
        display: contents;
    }

    .artist-heading {
        order: 1;

        width: 100%;

        margin-bottom: 34px;

        transform: none;
    }

    .artist-image-wrap {
        order: 2;

        width: 100%;

        margin-bottom: 34px;
    }

    .artist-text > p {
        order: 3;

        width: 100%;

        margin:
            0
            0
            22px;

        font-family:
            'Poppins',
            sans-serif;

        font-size:
            clamp(15px, 4vw, 16px);

        font-weight: 300;

        line-height: 1.82;

        color:
            rgba(
                255,
                255,
                255,
                0.82
            );

        text-align: left;
    }

    .artist-text .artist-label {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .artist-heading h2 {
        font-size:
            clamp(34px, 9vw, 44px);

        letter-spacing:
            clamp(4px, 1.3vw, 6px);
    }

    .artist-title-line {
        width:
            min(270px, 68vw);

        margin:
            18px
            auto
            0;
    }

    .artist-image-frame {
        width:
            min(88vw, 430px);

        margin:
            0 auto;

        aspect-ratio: 4 / 3;
    }


    /* ======================================================
       GALLERY
       ONE DOMINANT SWIPE CARD
    ====================================================== */

    .gallery-section {
        min-height: auto;

        padding:
            86px
            0
            92px;
    }

    .gallery-heading {
        margin-bottom: 28px;

        padding:
            0
            6%;
    }

    .gallery-kicker {
        margin-bottom: 11px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .gallery-heading h2 {
        font-size:
            clamp(34px, 9vw, 44px);

        letter-spacing:
            clamp(4px, 1.3vw, 6px);
    }

    .gallery-title-line {
        width:
            min(270px, 68vw);

        margin:
            18px
            auto
            0;
    }

    .gallery-track {
        gap:
            clamp(12px, 3.5vw, 16px);

        padding:
            26px
            9vw;

        scroll-snap-type:
            x mandatory;

        -webkit-overflow-scrolling:
            touch;
    }

    .gallery-card {
        flex:
            0 0
            min(82vw, 390px);

        opacity: 0.30;

        transform:
            scale(0.92);

        scroll-snap-align:
            center;
    }

    .gallery-card.is-active {
        opacity: 1;

        transform:
            scale(1.035)
            translateY(-4px);
    }

    .gallery-arrow {
        width: 42px;
        height: 42px;

        backdrop-filter: blur(7px);
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

    .gallery-progress {
        width:
            min(300px, 72vw);

        margin-top: 28px;
    }


    /* ======================================================
       SITH PAWURA
    ====================================================== */

    .sith-paura-section {
        min-height: auto;

        padding:
            88px
            6%
            96px;

        overflow: visible;
    }

    .sith-paura-heading {
        margin-bottom: 30px;
    }

    .sith-paura-label {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .sith-paura-heading h2 {
        font-size:
            clamp(34px, 9vw, 44px);

        letter-spacing:
            clamp(4px, 1.3vw, 6px);
    }

    .sith-paura-title-line {
        width:
            min(270px, 68vw);

        margin:
            18px
            auto
            0;
    }

    .sith-paura-description {
        width: 100%;

        margin:
            0
            auto
            38px;

        font-size:
            clamp(15px, 4vw, 16px);

        line-height: 1.82;

        text-align: left;
    }

    .sith-paura-gallery {
        width: 100%;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            clamp(12px, 3.5vw, 18px);
    }

    .sith-paura-card {
        border-radius: 5px;

        box-shadow:
            0 0 0 1px
            rgba(232, 197, 106, 0.06),

            0 12px 28px
            rgba(0, 0, 0, 0.34);
    }

    .sith-paura-button-wrap {
        margin-top: 36px;
    }

    .sith-paura-button {
        min-width: 145px;

        min-height: 46px;

        padding:
            12px
            24px;
    }


    /* ======================================================
       CONTACT
       Keeps current placeholder usable on mobile
    ====================================================== */

    .contact-section {
        min-height: auto;

        padding:
            88px
            7%
            max(
                34px,
                env(safe-area-inset-bottom)
            );
    }

    .contact-label {
        font-size: 9px;

        letter-spacing: 3px;
    }

    .contact-section h2 {
        font-size:
            clamp(34px, 9vw, 44px);

        letter-spacing: 4px;
    }

    .contact-description {
        max-width: 340px;

        margin:
            0
            auto
            36px;

        font-size:
            clamp(12px, 3.4vw, 14px);

        line-height: 1.75;
    }

    .social-links {
        gap: 12px;

        margin-bottom: 52px;
    }

    .social-links a {
        width: 48px;
        height: 48px;
    }

    .contact-bottom {
        flex-direction: column;

        gap: 10px;

        line-height: 1.65;
    }


    /* ======================================================
       MOBILE NATIVE-SCROLL REVEAL ANIMATIONS
       No reverse animation
    ====================================================== */

    #about .about-heading,
    #about .about-text > p,
    #about .about-image-wrap,

    #artists .artist-heading,
    #artists .artist-image-wrap,
    #artists .artist-text > p,

    #gallery .gallery-heading,
    #gallery .gallery-slider,

    #programme .sith-paura-heading,
    #programme .sith-paura-description,
    #programme
    .sith-paura-card:not(.sith-paura-extra),

    #contact .contact-label,
    #contact h2,
    #contact .contact-description,
    #contact .social-links a,
    #contact .contact-bottom {

        opacity: 0;

        transition:
            opacity 0.55s ease,
            transform 0.65s
            cubic-bezier(
                0.16,
                1,
                0.3,
                1
            );
    }


    /* ABOUT */

    #about .about-heading {
        transform:
            translateY(-16px);
    }

    #about .about-text > p {
        transform:
            translateX(-20px);
    }

    #about .about-image-wrap {
        transform:
            translateX(18px)
            scale(0.97);
    }

    #about.section-revealed
    .about-heading,

    #about.section-revealed
    .about-text > p,

    #about.section-revealed
    .about-image-wrap {

        opacity: 1;

        transform:
            translate(0, 0)
            scale(1);
    }

    #about.section-revealed
    .about-text > p:nth-child(1) {
        transition-delay: 0.10s;
    }

    #about.section-revealed
    .about-text > p:nth-child(2) {
        transition-delay: 0.20s;
    }

    #about.section-revealed
    .about-image-wrap {
        transition-delay: 0.28s;
    }


    /* ARTIST */

    #artists .artist-heading {
        transform:
            translateY(16px);
    }

    #artists .artist-image-wrap {
        transform:
            scale(0.97);
    }

    #artists .artist-text > p {
        transform:
            translateY(18px);
    }

    #artists .artist-image-frame {
        clip-path:
            inset(
                0
                100%
                0
                0
            );

        transition:
            clip-path
            0.72s
            cubic-bezier(
                0.16,
                1,
                0.3,
                1
            );
    }

    #artists.section-revealed
    .artist-heading,

    #artists.section-revealed
    .artist-image-wrap,

    #artists.section-revealed
    .artist-text > p {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    #artists.section-revealed
    .artist-image-frame {

        clip-path:
            inset(
                0
                0
                0
                0
            );
    }

    #artists.section-revealed
    .artist-image-wrap {
        transition-delay: 0.10s;
    }

    #artists.section-revealed
    .artist-image-frame {
        transition-delay: 0.10s;
    }

    #artists.section-revealed
    .artist-text > p:nth-of-type(1) {
        transition-delay: 0.22s;
    }

    #artists.section-revealed
    .artist-text > p:nth-of-type(2) {
        transition-delay: 0.32s;
    }


    /* GALLERY */

    #gallery .gallery-heading {
        transform:
            translateY(18px);
    }

    #gallery .gallery-slider {
        transform:
            translateY(18px)
            scale(0.98);
    }

    #gallery.section-revealed
    .gallery-heading,

    #gallery.section-revealed
    .gallery-slider {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    #gallery.section-revealed
    .gallery-slider {
        transition-delay: 0.12s;
    }


    /* SITH PAWURA */

    #programme .sith-paura-heading,
    #programme .sith-paura-description {

        transform:
            translateY(18px);
    }

    #programme
    .sith-paura-card:not(.sith-paura-extra) {

        transform:
            translateY(16px)
            scale(0.97);
    }

    #programme.section-revealed
    .sith-paura-heading,

    #programme.section-revealed
    .sith-paura-description,

    #programme.section-revealed
    .sith-paura-card:not(.sith-paura-extra) {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    #programme.section-revealed
    .sith-paura-description {
        transition-delay: 0.08s;
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(1) {
        transition-delay: 0.14s;
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(2) {
        transition-delay: 0.21s;
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(3) {
        transition-delay: 0.28s;
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(4) {
        transition-delay: 0.35s;
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(5) {
        transition-delay: 0.42s;
    }

    #programme.section-revealed
    .sith-paura-card:nth-child(6) {
        transition-delay: 0.49s;
    }


    /* CONTACT */

    #contact .contact-label,
    #contact h2,
    #contact .contact-description,
    #contact .contact-bottom {

        transform:
            translateY(16px);
    }

    #contact .social-links a {
        transform:
            translateY(14px)
            scale(0.92);
    }

    #contact.section-revealed
    .contact-label,

    #contact.section-revealed h2,

    #contact.section-revealed
    .contact-description,

    #contact.section-revealed
    .social-links a,

    #contact.section-revealed
    .contact-bottom {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    #contact.section-revealed h2 {
        transition-delay: 0.07s;
    }

    #contact.section-revealed
    .contact-description {
        transition-delay: 0.14s;
    }

    /* middle icons first */
    #contact.section-revealed
    .social-links a:nth-child(2),

    #contact.section-revealed
    .social-links a:nth-child(3) {
        transition-delay: 0.22s;
    }

    #contact.section-revealed
    .social-links a:nth-child(1),

    #contact.section-revealed
    .social-links a:nth-child(4) {
        transition-delay: 0.30s;
    }

    #contact.section-revealed
    .contact-bottom {
        transition-delay: 0.38s;
    }
}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media (max-width: 480px) {

    .navbar {
        height: 62px;
    }

    /*
       Small phones wala top GET TICKETS
       hide karanawa.
       Ticket eka mobile menu athule thiyenawa.
    */

    .nav-ticket {
        display: none;
    }

    .menu-button {
        margin-left: auto;
    }

    .main-logo img {
        width:
            min(74vw, 285px);
    }

    .countdown {
        width:
            min(300px, 84vw);
    }

    .gallery-card {
        flex-basis:
            min(84vw, 360px);
    }

    /*
       Very small phone:
       Sith Paura = one premium large image
       per row.
    */

    .sith-paura-gallery {
        width:
            min(92vw, 430px);

        margin:
            0 auto;

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .sith-paura-card {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================== */

@media
    (max-width: 900px)
    and (prefers-reduced-motion: reduce) {

    #about *,
    #artists *,
    #gallery *,
    #programme *,
    #contact *,
    .event-meta-item {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }

    #about .about-heading,
    #about .about-text > p,
    #about .about-image-wrap,

    #artists .artist-heading,
    #artists .artist-image-wrap,
    #artists .artist-text > p,

    #gallery .gallery-heading,
    #gallery .gallery-slider,

    #programme .sith-paura-heading,
    #programme .sith-paura-description,
    #programme .sith-paura-card,

    #contact .contact-label,
    #contact h2,
    #contact .contact-description,
    #contact .social-links a,
    #contact .contact-bottom {

        opacity: 1 !important;

        transform:
            none !important;
    }

    #artists .artist-image-frame {
        clip-path:
            inset(0) !important;
    }
}


/* ==========================================================
   DESKTOP / MOBILE CONTENT SWITCH
   ----------------------------------------------------------
   Desktop keeps the original long copy.
   Mobile uses the shorter copy requested for ABOUT / ARTIST.
========================================================== */

.mobile-copy {
    display: none;
}

@media (max-width: 900px) {

    .about-text > .desktop-copy,
    .artist-text > .desktop-copy {
        display: none !important;
    }

    .about-text > .mobile-copy,
    .artist-text > .mobile-copy {
        display: block !important;
    }

    .about-text > .mobile-copy {
        margin-bottom: 0;
        font-family: 'Poppins', sans-serif;
        font-size: clamp(15px, 4vw, 16px);
        font-weight: 300;
        line-height: 1.82;
        color: rgba(255, 255, 255, 0.82);
        text-align: left;
        transition-delay: 0.10s;
    }

    .artist-text > .mobile-copy {
        margin: 0 0 22px;
        font-family: 'Poppins', sans-serif;
        font-size: clamp(15px, 4vw, 16px);
        font-weight: 300;
        line-height: 1.82;
        color: rgba(255, 255, 255, 0.82);
        text-align: left;
        transition-delay: 0.22s;
    }
}


/* ==========================================================
   MOBILE TOUCH SCROLL SAFETY - FINAL V3
   ----------------------------------------------------------
   Does not affect desktop (901px+).
   Keeps vertical page panning native on phones/tablets.
========================================================== */
@media (max-width: 900px) {
    html,
    body {
        overscroll-behavior-y: none;
    }

    body,
    .hero,
    .cinematic-content,
    .event-info,
    .about-section,
    .artist-section,
    .gallery-section,
    .sith-paura-section,
    .contact-section {
        touch-action: pan-y pinch-zoom;
    }

    /* Gallery must allow both horizontal swiping and vertical page scroll. */
    .gallery-track {
        touch-action: pan-y pinch-zoom;
    }
}
/* ==========================================================
   DESKTOP GALLERY ACTIVE CARD CLIPPING FIX
   ----------------------------------------------------------
   Gives the scaled active card enough vertical room so the
   golden top border is never clipped.
========================================================== */

@media (min-width: 901px) {

    .gallery-track {
        padding-top:
            clamp(46px, 3.2vw, 56px);

        padding-bottom:
            clamp(34px, 2.6vw, 46px);
    }
}


/* Short laptop screens */
@media
    (min-width: 901px)
    and (max-width: 1600px)
    and (max-height: 820px) {

    .gallery-track {
        padding-top: 42px;
        padding-bottom: 32px;
    }
}

/* ==========================================================
   DESKTOP ACTIVE NAV LINK
========================================================== */

@media (min-width: 901px) {

    .nav-links a {
        position: relative;
    }


    /* gold underline */
    .nav-links a::after {

        content: "";

        position: absolute;

        left: 50%;
        bottom: -9px;

        width: 72%;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #e8c56a 22%,
                #e8c56a 78%,
                transparent
            );

        opacity: 0;

        transform:
            translateX(-50%)
            scaleX(0);

        transform-origin:
            center;

        transition:
            opacity 0.35s ease,
            transform 0.45s
            cubic-bezier(
                0.16,
                1,
                0.3,
                1
            );
    }


    .nav-links a.nav-active {

        color: #e8c56a;

        opacity: 1;

        text-shadow:
            0 0 12px
            rgba(
                232,
                197,
                106,
                0.24
            );
    }


    .nav-links a.nav-active::after {

        opacity: 1;

        transform:
            translateX(-50%)
            scaleX(1);
    }


    /* Existing hover opacity
       active link ekata apply wenna epa */

    .nav-links a.nav-active:hover {

        color: #e8c56a;

        opacity: 1;
    }
}
/* =========================================
   REMOVE DESKTOP SECTION GOLD SEPARATORS
========================================= */

@media (min-width: 901px) {

    .gallery-section,
    .sith-paura-section {
        border-top: none;
    }

}


/* ==========================================================
   VIRAMAYAK'26 — MOBILE CINEMATIC V4
   ----------------------------------------------------------
   MOBILE ONLY (<= 900px)
   Desktop 901px+ remains untouched.
========================================================== */

@media (max-width: 900px) {

    /* -------------------------------------------------------
       SHARED BACKGROUND LAYER
       Match desktop layer exactly.
    ------------------------------------------------------- */

    .cinematic-content {
        background: rgba(8, 5, 9, 0.85) !important;

        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;

        overflow-x: hidden;
    }


    /* -------------------------------------------------------
       MOBILE TYPOGRAPHY SCALE
    ------------------------------------------------------- */

    .event-countdown h2,
    .about-heading h2,
    .artist-heading h2,
    .gallery-heading h2,
    .sith-paura-heading h2,
    .contact-section h2 {
        font-size:
            clamp(25px, 7vw, 31px) !important;

        letter-spacing:
            clamp(2.2px, 0.9vw, 4px) !important;

        line-height: 1.08;
    }


    .event-countdown .section-label,
    .about-heading .section-label,
    .artist-text .artist-label,
    .gallery-kicker,
    .sith-paura-label,
    .contact-label {
        font-size:
            clamp(7.5px, 2.1vw, 8.5px) !important;

        letter-spacing:
            clamp(1.8px, 0.7vw, 2.6px) !important;
    }


    .about-heading h2::before,
    .artist-heading h2::before,
    .gallery-heading h2::before,
    .sith-paura-heading h2::before,
    .event-countdown h2::before {
        transform:
            translate(-50%, -50%)
            scale(1.16) !important;

        -webkit-text-stroke:
            0.6px
            rgba(232, 197, 106, 0.15);
    }


    /* -------------------------------------------------------
       NAVBAR / HERO
    ------------------------------------------------------- */

    .navbar {
        height: 60px;

        padding:
            0
            clamp(14px, 4vw, 20px);
    }


    .logo img {
        width:
            clamp(70px, 18vw, 82px);
    }


    .main-logo img {
        width:
            min(64vw, 250px) !important;
    }


    .hero-center {
        width: 90%;

        top: 50.5%;
    }


    .hero-event-text {
        margin-top:
            clamp(-28px, -6vw, -18px);

        padding:
            10px
            8px;
    }


    .hero-event-text h1 {
        font-size:
            clamp(27px, 8vw, 36px) !important;

        letter-spacing:
            clamp(1.6px, 0.9vw, 3.5px) !important;
    }


    .hero-tagline {
        max-width: 86vw;

        font-size:
            clamp(8.5px, 2.55vw, 11px) !important;

        letter-spacing:
            clamp(1px, 0.55vw, 2.2px) !important;

        line-height: 1.58;
    }


    .hero-presented {
        font-size:
            clamp(7px, 2vw, 9px) !important;

        letter-spacing:
            clamp(0.8px, 0.45vw, 1.6px) !important;

        line-height: 1.55;
    }


    /* -------------------------------------------------------
       COUNTDOWN
       Fits comfortably inside phone viewport.
    ------------------------------------------------------- */

    .event-info {
        min-height: 100svh;

        padding:
            68px
            6%
            46px !important;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .event-countdown {
        width: 100%;

        max-width: 360px;
    }


    .event-countdown .section-label {
        margin-bottom: 8px;
    }


    .countdown-title-line {
        width:
            min(190px, 54vw) !important;

        margin:
            12px
            auto
            22px !important;

        gap: 8px;
    }


    .countdown {
        width:
            min(252px, 76vw) !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            clamp(9px, 2.5vw, 12px) !important;
    }


    .count-box {
        aspect-ratio:
            1.12 / 1 !important;

        border-radius:
            12px !important;

        backdrop-filter:
            blur(6px);

        -webkit-backdrop-filter:
            blur(6px);
    }


    .count-box span {
        font-size:
            clamp(27px, 8vw, 35px) !important;

        letter-spacing: 0.5px;
    }


    .count-box small {
        margin-top:
            5px !important;

        font-size:
            clamp(7.5px, 2.1vw, 9px) !important;

        letter-spacing:
            clamp(0.8px, 0.4vw, 1.4px) !important;
    }


    .event-meta {
        width:
            min(320px, 88vw) !important;

        margin:
            25px
            auto
            0 !important;

        column-gap:
            10px !important;

        row-gap:
            13px !important;
    }


    .event-meta-item {
        gap:
            6px !important;

        font-size:
            clamp(9px, 2.55vw, 11px) !important;

        line-height: 1.4;

        letter-spacing: 0.1px;
    }


    .event-meta-item svg {
        width:
            clamp(15px, 4vw, 18px) !important;

        height:
            clamp(15px, 4vw, 18px) !important;
    }


    /* Countdown entrance after HOME snap */

    #countdown
    .event-countdown
    > .section-label,

    #countdown
    .event-countdown
    > h2,

    #countdown
    .countdown-title-line,

    #countdown
    .count-box {
        opacity: 0;

        transform:
            translateY(14px)
            scale(0.985);

        transition:
            opacity 0.48s ease,
            transform 0.62s
            cubic-bezier(
                0.16,
                1,
                0.3,
                1
            );
    }


    #countdown.countdown-revealed
    .event-countdown
    > .section-label,

    #countdown.countdown-revealed
    .event-countdown
    > h2,

    #countdown.countdown-revealed
    .countdown-title-line,

    #countdown.countdown-revealed
    .count-box {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }


    #countdown.countdown-revealed
    .event-countdown
    > .section-label {
        transition-delay: 0.03s;
    }


    #countdown.countdown-revealed
    .event-countdown
    > h2 {
        transition-delay: 0.08s;
    }


    #countdown.countdown-revealed
    .countdown-title-line {
        transition-delay: 0.13s;
    }


    #countdown.countdown-revealed
    .count-box:nth-child(1) {
        transition-delay: 0.16s;
    }


    #countdown.countdown-revealed
    .count-box:nth-child(2) {
        transition-delay: 0.20s;
    }


    #countdown.countdown-revealed
    .count-box:nth-child(3) {
        transition-delay: 0.24s;
    }


    #countdown.countdown-revealed
    .count-box:nth-child(4) {
        transition-delay: 0.28s;
    }


    /* -------------------------------------------------------
       SECTION SPACING + BODY COPY
    ------------------------------------------------------- */

    .about-section,
    .artist-section,
    .sith-paura-section {
        padding:
            72px
            6%
            76px !important;
    }


    .gallery-section {
        padding:
            72px
            0
            76px !important;
    }


    .contact-section {
        padding:
            72px
            7%
            max(
                30px,
                env(safe-area-inset-bottom)
            ) !important;
    }


    .about-heading,
    .artist-heading,
    .sith-paura-heading {
        margin-bottom:
            25px !important;
    }


    .gallery-heading {
        margin-bottom:
            20px !important;
    }


    .about-title-line,
    .artist-title-line,
    .gallery-title-line,
    .sith-paura-title-line {
        width:
            min(205px, 56vw) !important;

        margin:
            12px
            auto
            0 !important;
    }


    .about-text p,
    .artist-text > p,
    .about-text > .mobile-copy,
    .artist-text > .mobile-copy,
    .sith-paura-description {
        font-size:
            clamp(13px, 3.55vw, 14.5px) !important;

        line-height:
            1.72 !important;
    }


    .about-content {
        gap:
            25px !important;
    }


    .about-image-frame {
        width:
            min(82vw, 340px) !important;

        border-radius:
            16px !important;
    }


    .about-image-frame img {
        height:
            clamp(
                245px,
                70vw,
                330px
            ) !important;
    }


    /* Artist remains heading -> image -> text */

    .artist-image-wrap {
        margin-bottom:
            24px !important;
    }


    .artist-image-frame {
        width:
            min(82vw, 340px) !important;

        aspect-ratio:
            4 / 3;
    }


    /*
       Mobile uses the simpler fade-up image reveal.
       Desktop mask reveal remains unchanged.
    */

    #artists
    .artist-image-frame {
        clip-path:
            inset(0) !important;
    }


    /* -------------------------------------------------------
       GALLERY
    ------------------------------------------------------- */

    .gallery-heading {
        padding:
            0
            6%;
    }


    .gallery-track {
        gap:
            11px !important;

        padding:
            20px
            11vw !important;
    }


    .gallery-card {
        flex:
            0 0
            min(77vw, 330px) !important;
    }


    .gallery-card.is-active {
        transform:
            scale(1.025)
            translateY(-2px) !important;
    }


    .gallery-arrow {
        width:
            38px !important;

        height:
            38px !important;
    }


    .gallery-prev {
        left:
            8px !important;
    }


    .gallery-next {
        right:
            8px !important;
    }


    /* -------------------------------------------------------
       SITH PAWURA
    ------------------------------------------------------- */

    .sith-paura-description {
        margin:
            0
            auto
            28px !important;
    }


    .sith-paura-gallery {
        width: 100%;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            10px !important;
    }


    .sith-paura-card {
        aspect-ratio:
            4 / 3 !important;
    }


    .sith-paura-button-wrap {
        margin-top:
            28px !important;
    }


    .sith-paura-button {
        min-width:
            132px !important;

        min-height:
            42px !important;

        padding:
            10px
            20px !important;

        font-size:
            10px;
    }


    /* -------------------------------------------------------
       CONTACT
    ------------------------------------------------------- */

    .contact-description {
        max-width:
            300px !important;

        margin:
            0
            auto
            28px !important;

        font-size:
            clamp(11px, 3vw, 13px) !important;

        line-height:
            1.65 !important;
    }


    .social-links {
        gap:
            10px !important;

        margin-bottom:
            42px !important;
    }


    .social-links a {
        width:
            42px !important;

        height:
            42px !important;
    }


    /* -------------------------------------------------------
       TRUE NATIVE MOBILE SCROLL AFTER COUNTDOWN
    ------------------------------------------------------- */

    html,
    body {
        overscroll-behavior-y:
            none !important;
    }


    body,
    .hero,
    .cinematic-content,
    .event-info,
    .about-section,
    .artist-section,
    .gallery-section,
    .sith-paura-section,
    .contact-section {
        touch-action:
            pan-y
            pinch-zoom;
    }


    .gallery-track {
        touch-action:
            pan-y
            pinch-zoom;
    }


    /* -------------------------------------------------------
       SCROLL-DRIVEN EMERGE
       Individual content enters as user reaches it.
    ------------------------------------------------------- */

    .mobile-emerge {
        opacity:
            0 !important;

        transform:
            translateY(22px)
            scale(0.985) !important;

        filter:
            blur(2px);

        transition:
            opacity 0.55s ease
                var(--mobile-emerge-delay, 0s),

            transform 0.68s
                cubic-bezier(
                    0.16,
                    1,
                    0.3,
                    1
                )
                var(--mobile-emerge-delay, 0s),

            filter 0.48s ease
                var(--mobile-emerge-delay, 0s) !important;
    }


    .mobile-emerge.mobile-in {
        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter:
            blur(0);
    }


    /*
       Existing section-revealed mobile rules no longer need to control
       visibility. These overrides keep our per-element observer in charge.
    */

    #about .mobile-emerge,
    #artists .mobile-emerge,
    #gallery .mobile-emerge,
    #programme .mobile-emerge,
    #contact .mobile-emerge {
        will-change:
            opacity,
            transform;
    }
}


/* ==========================================================
   EXTRA-COMPACT PHONES
========================================================== */

@media (max-width: 480px) {

    .nav-ticket {
        display:
            none;
    }


    .menu-button {
        margin-left:
            auto;
    }


    .countdown {
        width:
            min(238px, 74vw) !important;
    }


    .count-box span {
        font-size:
            clamp(25px, 7.8vw, 32px) !important;
    }


    /*
       Keep Sith Pawura compact instead of switching to one huge
       image per row.
    */

    .sith-paura-gallery {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            9px !important;
    }


    .gallery-card {
        flex-basis:
            min(78vw, 315px) !important;
    }
}


/* ==========================================================
   MOBILE REDUCED MOTION
========================================================== */

@media
    (max-width: 900px)
    and (prefers-reduced-motion: reduce) {

    .mobile-emerge,
    .mobile-emerge.mobile-in,

    #countdown
    .event-countdown
    > .section-label,

    #countdown
    .event-countdown
    > h2,

    #countdown
    .countdown-title-line,

    #countdown
    .count-box {

        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;

        transition:
            none !important;
    }
}

/* ==========================================================
   ARTIST IMAGE — CLEAN TRANSPARENT VERSION
   Desktop + Mobile
========================================================== */

/* Wrapper */
.artist-image-wrap {
    width: 100%;

    display: flex;

    justify-content: flex-start;
    align-items: center;
}


/* Remove old frame styling completely */
.artist-image-frame {
    position: relative;

    width: min(470px, 100%);
    max-width: 100%;

    height: auto;
    aspect-ratio: auto;

    margin: 0;

    overflow: visible;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    clip-path: none !important;

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
}


/* Remove old dark gradient overlay */
.artist-image-frame::after {
    display: none;
}


/* Actual transparent PNG */
.artist-image-frame img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: left center;

    filter: none;

    transform: none !important;

    transition: none !important;
}


/* Remove hover zoom */
.artist-image-frame:hover img,
#artists.section-revealed .artist-image-frame:hover img,
#artists .artist-image-frame img,
#artists.section-revealed .artist-image-frame img {

    transform: none !important;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 901px) {

    .artist-image-wrap {
        justify-content: flex-start;
    }

    .artist-image-frame {
        width: min(470px, 100%);

        margin-left: 0;
        margin-right: auto;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .artist-image-wrap {
        width: 100%;

        justify-content: flex-start;

        margin-bottom: 28px;
    }

    .artist-image-frame {
        width: min(82vw, 360px);

        margin-left: 0;
        margin-right: auto;

        aspect-ratio: auto;
    }

    .artist-image-frame img {
        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: left bottom;
    }
}


/* ==========================================================
   MOBILE BACKGROUND LAYER — DESKTOP MATCH FIX V5
   ----------------------------------------------------------
   The desktop cinematic effect depends on the sticky hero/video
   remaining behind the translucent .cinematic-content layer.

   IMPORTANT:
   overflow-x:hidden on html/body can create a scroll container
   and break that sticky relationship on mobile browsers.
   This final mobile-only override restores the same relationship.
========================================================== */

@media (max-width: 900px) {

    /* Keep the viewport as the page scroll container.
       "visible" is the safe fallback; modern browsers use "clip". */
    html,
    body {
        overflow-x: visible !important;
        overflow-y: visible;
    }

    /* Do not let the shared cinematic wrapper become a clipping /
       scrolling container that changes the sticky backdrop behavior. */
    .cinematic-content {
        overflow-x: visible !important;

        position: relative;
        z-index: 20;

        /* EXACT desktop cinematic layer */
        background: rgba(8, 5, 9, 0.85) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    /* Explicitly preserve the same sticky hero/video relationship
       used by desktop. */
    .hero {
        position: sticky !important;
        top: 0 !important;
        z-index: 0;
    }

    /* Section backgrounds stay transparent where the original
       desktop design expects the shared layer to show through. */
    .event-info,
    .about-section,
    .artist-section,
    .sith-paura-section,
    .contact-section {
        background-color: transparent;
    }
}

/* Modern browsers: clip horizontal overflow WITHOUT creating
   a scroll container, so sticky still works. */
@supports (overflow: clip) {

    @media (max-width: 900px) {

        html,
        body,
        .cinematic-content {
            overflow-x: clip !important;
        }
    }
}

/* ==========================================================
   MOBILE NAVBAR — TICKET + HAMBURGER
========================================================== */

@media (max-width: 900px) {

    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* Logo left, ticket + hamburger right */
    .nav-ticket {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        margin-left: auto !important;
        margin-right: 0 !important;

        padding: 7px 11px;

        font-size: 9px;
        letter-spacing: 0.8px;

        white-space: nowrap;

        flex-shrink: 0;
    }

    .menu-button {
        display: flex !important;

        margin-left: auto !important;

        flex-shrink: 0;
    }

    .nav-ticket:not([style*="display: none"]) ~ .menu-button {
        margin-left: 0 !important;
    }
}

/* ==========================================================
   MOBILE HERO — PRESENTED BY AT LOWER POSITION
========================================================== */

/* Desktop waladi mobile copy eka hide */
.hero-presented-mobile {
    display: none;
}


@media (max-width: 900px) {

    /* Original desktop text mobile waladi hide */
    .hero-event-text .hero-presented {
        display: none;
    }


    /* Mobile version */
    .hero-presented-mobile {
        display: block;

        position: absolute;

        left: 50%;

        /* roughly 5cm / comfortable gap from bottom */
        bottom: clamp(40px, 7svh, 70px);

        transform: translateX(-50%);

        width: 90%;

        margin: 0;

        text-align: center;

        font-family: 'Poppins', sans-serif;

        font-size: clamp(7px, 2vw, 9px);

        font-weight: 500;

        letter-spacing: clamp(
            0.8px,
            0.45vw,
            1.6px
        );

        line-height: 1.55;

        color: #E5DCF5;

        -webkit-text-stroke:
            0.2px rgba(0, 0, 0, 0.7);

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.95),
            0 0 8px rgba(220, 205, 245, 0.16);

        z-index: 3;

        pointer-events: none;
    }
}

/* ==========================================================
   MOBILE TEXT CENTER ALIGNMENT
   ABOUT + ARTIST + SITH PAWURA
========================================================== */

@media (max-width: 900px) {

    /* ABOUT */
    #about .about-text,
    #about .about-text p {
        text-align: center !important;
    }


    /* ARTIST */
    #artists .artist-text,
    #artists .artist-text > p {
        text-align: center !important;
    }


    /* SITH PAWURA */
    #programme .sith-paura-description {
        text-align: center !important;
    }
}

/* ==========================================================
   MOBILE ARTIST PNG — SMALLER + VISUAL CENTER
========================================================== */

@media (max-width: 900px) {

    .artist-image-wrap {
        width: 100%;
        display: flex;

        justify-content: center !important;
        align-items: center;

        margin-bottom: 30px;
    }

    .artist-image-frame {
        width: min(66vw, 290px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        overflow: visible !important;
    }

    .artist-image-frame img {
        display: block;

        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;

        /* Visual centering correction */
        transform: translateX(0) !important;
    }
}

/* ==========================================================
   VIRAMAYAK'26 — CINEMATIC PRELOADER
   Desktop + Mobile
========================================================== */

body.site-loading {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* Full-screen loading layer */
.site-preloader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        max(24px, env(safe-area-inset-top))
        24px
        max(24px, env(safe-area-inset-bottom));

    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(45, 16, 60, 0.40) 0%,
            rgba(12, 7, 17, 0.82) 38%,
            rgba(4, 3, 7, 0.98) 78%
        ),
        #050307;

    z-index: 250000;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.72s ease;

    overflow: hidden;
}


/* Soft cinematic glow */
.site-preloader::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: min(72vw, 720px);
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(232, 197, 106, 0.065) 0%,
            rgba(104, 42, 132, 0.055) 42%,
            transparent 70%
        );

    filter: blur(14px);

    pointer-events: none;

    animation:
        viramayakPreloaderGlow
        2.2s
        ease-in-out
        infinite;
}


.site-preloader-inner {
    position: relative;
    z-index: 1;

    width: min(88vw, 480px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.site-preloader-logo {
    display: block;

    width:
        clamp(190px, 28vw, 330px);

    height: auto;

    margin:
        0
        auto
        12px;

    opacity: 0.98;

    filter:
        drop-shadow(
            0 0 18px
            rgba(232, 197, 106, 0.16)
        );

    animation:
        viramayakPreloaderLogo
        1.8s
        ease-in-out
        infinite;
}


.site-preloader-title {
    margin: 0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(20px, 2.6vw, 34px);

    font-weight: 700;

    letter-spacing:
        clamp(3px, 0.65vw, 7px);

    color: #F6CF72;

    text-shadow:
        0 0 18px
        rgba(246, 207, 114, 0.17);
}


.site-preloader-line {
    position: relative;

    width:
        min(210px, 56vw);

    height: 1px;

    margin:
        24px
        auto
        13px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.12);
}


.site-preloader-line span {
    position: absolute;
    inset:
        0
        auto
        0
        0;

    width: 46%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(246, 207, 114, 0.96),
            transparent
        );

    transform:
        translateX(-120%);

    animation:
        viramayakPreloaderLine
        1.25s
        cubic-bezier(0.4, 0, 0.2, 1)
        infinite;
}


.site-preloader-label {
    margin: 0;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(7px, 0.85vw, 10px);

    font-weight: 500;

    letter-spacing:
        clamp(2px, 0.35vw, 4px);

    color:
        rgba(255, 255, 255, 0.60);
}


/* Fade out */
.site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


@keyframes viramayakPreloaderLogo {

    0%,
    100% {
        transform:
            translateY(0)
            scale(0.985);

        opacity: 0.82;
    }

    50% {
        transform:
            translateY(-4px)
            scale(1.015);

        opacity: 1;
    }
}


@keyframes viramayakPreloaderLine {

    0% {
        transform:
            translateX(-130%);
    }

    100% {
        transform:
            translateX(340%);
    }
}


@keyframes viramayakPreloaderGlow {

    0%,
    100% {
        opacity: 0.58;
        transform:
            translate(-50%, -50%)
            scale(0.96);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}


/* ==========================================================
   PRELOADER — MOBILE
========================================================== */

@media (max-width: 900px) {

    .site-preloader-inner {
        width:
            min(90vw, 390px);
    }

    .site-preloader-logo {
        width:
            min(66vw, 270px);

        margin-bottom: 8px;
    }

    .site-preloader-title {
        font-size:
            clamp(19px, 6.3vw, 29px);

        letter-spacing:
            clamp(2.5px, 1.25vw, 5px);
    }

    .site-preloader-line {
        width:
            min(190px, 52vw);

        margin-top: 20px;
    }

    .site-preloader-label {
        font-size:
            clamp(7px, 2vw, 9px);

        letter-spacing:
            clamp(1.8px, 0.8vw, 3px);
    }
}


/* Avoid unnecessary preloader motion when requested */
@media (prefers-reduced-motion: reduce) {

    .site-preloader-logo,
    .site-preloader-line span,
    .site-preloader::before {
        animation:
            none !important;
    }

    .site-preloader {
        transition-duration:
            0.15s;
    }
}

/* ==========================================================
   ABOUT — TRANSPARENT MIC PNG CLEAN STYLE
========================================================== */

.about-image-wrap {
    width: 100%;

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


/* No old card/frame styling */
.about-image-frame {
    width: min(340px, 100%) !important;

    height: auto !important;

    margin-left: auto;
    margin-right: auto;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* Remove old gradient overlays */
.about-image-frame::before,
.about-image-frame::after {
    display: none !important;
}


/* Actual transparent PNG */
.about-image-frame img {
    display: block;

    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center !important;

  

    -webkit-mask-image: none !important;
    mask-image: none !important;

    will-change: transform, filter;
}


/* ==========================================================
   MOBILE SIZE
========================================================== */

@media (max-width: 900px) {

    .about-image-frame {
        width: min(62vw, 250px) !important;
    }
}

/* ==========================================================
   ABOUT PNG — BOTTOM CURVE + SUBTLE CINEMATIC MOTION
========================================================== */

/* ==========================================================
   ABOUT PNG — BOTTOM CURVE + CINEMATIC MOTION
========================================================== */

.about-image-frame {
    border-radius: 0 0 45px 45px !important;
    overflow: hidden !important;
}

.about-image-frame img {
    display: block;

    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    transform: translateY(0) scale(1);

    animation:
        aboutMicFloat 4.5s ease-in-out infinite,
        aboutMicGlow 4.5s ease-in-out infinite;

    will-change: transform, filter;
}


/* FLOAT */
@keyframes aboutMicFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-10px)
            scale(1.025);
    }
}


/* GLOW */
@keyframes aboutMicGlow {

    0%,
    100% {
        filter:
            drop-shadow(
                0 8px 12px
                rgba(0, 0, 0, 0.32)
            )
            drop-shadow(
                0 0 4px
                rgba(232, 197, 106, 0.08)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 14px 22px
                rgba(0, 0, 0, 0.42)
            )
            drop-shadow(
                0 0 18px
                rgba(232, 197, 106, 0.22)
            );
    }
}

/* ==========================================================
   CONTACT — SOCIAL MEDIA
========================================================== */

.contact-social {
    width: min(1050px, 100%);

    margin:
        80px
        auto
        0;

    padding:
        42px
        0;

    border-top:
        1px solid
        rgba(232, 197, 106, 0.14);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    text-align:
        center;
}


.contact-social > p {
    margin:
        0
        0
        24px;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        4px;

    color:
        #e8c56a;
}


.contact-social-links {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        24px;
}


.contact-social-links a {
    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(232, 197, 106, 0.22);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.02);

    color:
        rgba(255, 255, 255, 0.72);

    text-decoration:
        none;

    transition:
        transform 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.contact-social-links a:hover {
    transform:
        translateY(-5px);

    color:
        #e8c56a;

    border-color:
        rgba(232, 197, 106, 0.65);

    box-shadow:
        0
        0
        22px
        rgba(232, 197, 106, 0.12);
}


.contact-social-links svg {
    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ==========================================================
   CONTACT — FINAL FOOTER
========================================================== */

.contact-footer {
    width:
        min(1050px, 100%);

    margin:
        0 auto;

    padding:
        52px
        0
        34px;
}


.contact-footer-brand {
    margin-bottom:
        42px;

    text-align:
        center;
}


.contact-footer-brand h3 {
    margin:
        0
        0
        14px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        22px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #fff;
}


.contact-footer-brand p {
    margin:
        0;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.42);
}


.contact-footer-bottom {
    padding-top:
        24px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        1.5px;

    color:
        rgba(255, 255, 255, 0.34);
}


/* ==========================================================
   CONTACT SOCIAL + FOOTER MOBILE
========================================================== */

@media (max-width: 900px) {

    .contact-social {
        margin-top:
            55px;

        padding:
            36px
            0;
    }


    .contact-social-links {
        gap:
            15px;
    }


    .contact-social-links a {
        width:
            42px;

        height:
            42px;
    }


    .contact-footer {
        padding:
            44px
            0
            30px;
    }


    .contact-footer-brand {
        margin-bottom:
            34px;
    }


    .contact-footer-brand h3 {
        font-size:
            19px;
    }


    .contact-footer-brand p {
        font-size:
            10px;
    }


    .contact-footer-bottom {
        flex-direction:
            column;

        justify-content:
            center;

        gap:
            9px;

        text-align:
            center;

        line-height:
            1.7;
    }
}
/* ==========================================================
   VIRAMAYAK'26 — CONTACT FINAL CLEANUP V4
   Desktop + Mobile
   ----------------------------------------------------------
   IMPORTANT:
   The footer stays in normal document flow.
   Desktop JS already treats CONTACT like SITH PAWURA:
   it snaps to Contact, allows native internal page scrolling,
   clamps at Contact's bottom, and prevents scrolling past it.
   Therefore sticky/fixed footer CSS is intentionally NOT used.
========================================================== */


/* Physical page-end bounce / overscroll must not reveal the sticky hero. */
html,
body {
    overscroll-behavior-y: none !important;
    background-color: #080509;
}


/* Keep one continuous cinematic veil from Countdown to the final footer. */
.cinematic-content {
    position: relative;

    background:
        rgba(8, 5, 9, 0.72) !important;

    backdrop-filter:
        blur(6px) !important;

    -webkit-backdrop-filter:
        blur(6px) !important;
}


/* ==========================================================
   CONTACT — FINAL SECTION GEOMETRY
========================================================== */

#contact.team-contact-section {
    position: relative;

    width: 100%;

    /* Natural content height can grow beyond the viewport. */
    min-height: 100vh;

    margin: 0 !important;

    padding:
        30px
        7%
        0 !important;

    background:
        transparent !important;

    border-top:
        none !important;

    overflow:
        visible !important;
}


/* Remove any old experimental bottom-cover pseudo element. */
#contact.team-contact-section::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   SOCIAL AREA — COMPACT
========================================================== */

#contact .contact-social {
    width:
        min(1050px, 100%);

    margin:
        48px
        auto
        0 !important;

    padding:
        26px
        0 !important;

    border-top:
        1px solid
        rgba(232, 197, 106, 0.14);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


#contact .contact-social > p {
    margin:
        0
        0
        16px !important;
}


/* ==========================================================
   FOOTER — FINAL PAGE END
========================================================== */

#contact .contact-footer {
    /*
       Do NOT use position: sticky/fixed here.
       JS clamps the Contact section itself at its real bottom,
       so when the visitor reaches the page end the footer is
       naturally locked to the bottom of the viewport.
    */
    position:
        relative !important;

    inset:
        auto !important;

    bottom:
        auto !important;

    z-index:
        3;

    width:
        min(1050px, 100%);

    margin:
        0
        auto !important;

    padding:
        26px
        0
        14px !important;

    background:
        transparent !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    border-top:
        none !important;
}


#contact .contact-footer-brand {
    margin-bottom:
        20px !important;
}


#contact .contact-footer-brand h3 {
    margin-bottom:
        8px !important;

    font-size:
        19px !important;
}


#contact .contact-footer-brand p {
    font-size:
        10px !important;

    line-height:
        1.55 !important;
}


#contact .contact-footer-bottom {
    min-height:
        0 !important;

    padding-top:
        13px !important;
}


/* ==========================================================
   DESKTOP CONTACT END LOCK
========================================================== */

@media (min-width: 901px) {

    html,
    body {
        overscroll-behavior-y:
            none !important;
    }

    #contact.team-contact-section {
        padding-top:
            30px !important;

        padding-bottom:
            0 !important;
    }
}


/* ==========================================================
   MOBILE / TABLET CONTACT
========================================================== */

@media (max-width: 900px) {

    html,
    body {
        overscroll-behavior-y:
            none !important;
    }


    #contact.team-contact-section {
        min-height:
            auto !important;

        margin-bottom:
            0 !important;

        padding:
            68px
            6%
            0 !important;

        background:
            transparent !important;
    }


    #contact .contact-social {
        margin-top:
            40px !important;

        padding:
            24px
            0 !important;
    }


    #contact .contact-social-links {
        gap:
            15px;
    }


    #contact .contact-social-links a {
        width:
            42px;

        height:
            42px;
    }


    #contact .contact-footer {
        margin-bottom:
            0 !important;

        padding:
            24px
            0
            max(
                14px,
                env(safe-area-inset-bottom)
            ) !important;
    }


    #contact .contact-footer-brand {
        margin-bottom:
            18px !important;
    }


    #contact .contact-footer-brand h3 {
        font-size:
            17px !important;
    }


    #contact .contact-footer-brand p {
        font-size:
            10px !important;
    }


    #contact .contact-footer-bottom {
        padding-top:
            11px !important;

        gap:
            6px !important;
    }
}

/* ==========================================================
   MOBILE CONTACT HEADING VISIBILITY FIX
========================================================== */

@media (max-width: 900px) {

    #contact .contact-heading .contact-label,
    #contact .contact-heading h2 {
        opacity: 1 !important;

        transform: none !important;

        visibility: visible !important;
    }
}

/* ==========================================================
   MOBILE FINAL TOPIC STYLE + COUNTDOWN DETAILS
========================================================== */

@media (max-width: 900px) {

    /* ======================================================
       SPONSORS + CONTACT
       Same heading style as ABOUT / ARTIST / GALLERY /
       SITH PAWURA
    ====================================================== */

    #sponsors .sponsors-label,
    #contact .contact-label {
        margin:
            0
            0
            18px !important;

        font-size:
            clamp(7.5px, 2.1vw, 8.5px) !important;

        font-weight:
            500;

        letter-spacing:
            clamp(1.8px, 0.7vw, 2.6px) !important;

        line-height:
            1.2;

        text-align:
            center;
    }


    #sponsors .sponsors-heading h2,
    #contact .contact-heading h2 {
        margin:
            0 !important;

        font-size:
            clamp(25px, 7vw, 31px) !important;

        font-weight:
            800;

        letter-spacing:
            clamp(2.2px, 0.9vw, 4px) !important;

        line-height:
            1.08 !important;

        text-align:
            center;
    }


    /* faded large title behind */
    #sponsors .sponsors-heading h2::before,
    #contact .contact-heading h2::before {
        transform:
            translate(-50%, -50%)
            scale(1.16) !important;

        -webkit-text-stroke:
            0.6px
            rgba(232, 197, 106, 0.15) !important;
    }


    /* gold line + diamond */
    #sponsors .sponsors-title-line,
    #contact .contact-title-line {
        width:
            min(205px, 56vw) !important;

        margin:
            12px
            auto
            0 !important;

        gap:
            12px !important;
    }


    /* heading -> section content gap */
    #sponsors .sponsors-heading,
    #contact .contact-heading {
        margin-bottom:
            25px !important;

        text-align:
            center;
    }


    /* Same mobile section top spacing */
    #contact.team-contact-section {
        padding-top:
            72px !important;
    }


    /* ======================================================
       COUNTDOWN DETAILS
       DATE
       LOCATION
       TIME
       one below another
    ====================================================== */

    #countdown .event-meta {
        width:
            min(300px, 86vw) !important;

        margin:
            25px
            auto
            0 !important;

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        row-gap:
            12px !important;

        column-gap:
            0 !important;

        align-items:
            center !important;

        justify-items:
            center !important;
    }


    /* Reset old 2-column positions */
/* Reset old 2-column positions */
#countdown .event-meta-item:nth-child(1),
#countdown .event-meta-item:nth-child(2),
#countdown .event-meta-item:nth-child(3) {
    grid-column: 1 !important;

    justify-self: center !important;

    width: auto !important;

    max-width: 100% !important;

    text-align: center !important;
}


/* DATE */
#countdown .event-meta-item:nth-child(1) {
    grid-row: 1 !important;
}


/* LOCATION
   HTML eke meka 2nd item */
#countdown .event-meta-item:nth-child(2) {
    grid-row: 3 !important;
}


/* TIME
   HTML eke meka 3rd item */
#countdown .event-meta-item:nth-child(3) {
    grid-row: 2 !important;
}


    #countdown .event-meta-item {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px !important;

        font-size:
            clamp(9px, 2.55vw, 11px) !important;

        line-height:
            1.4;

        white-space:
            normal !important;
    }


    #countdown .event-meta-item svg {
        width:
            clamp(15px, 4vw, 18px) !important;

        height:
            clamp(15px, 4vw, 18px) !important;

        flex-shrink:
            0;
    }
}
/* ==========================================================
   VIRAMAYAK'26 — UNIFIED CINEMATIC SEQUENCE V5
   Desktop + Mobile
   ----------------------------------------------------------
   Reference rhythm = desktop SITH PAWURA:
       TOPIC -> TEXT / DESCRIPTION -> IMAGE / MEDIA
========================================================== */


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 901px) {

    /* ------------------------------------------------------
       COUNTDOWN
       Topic -> counters -> details
    ------------------------------------------------------ */

    #countdown .event-countdown > .section-label,
    #countdown .event-countdown > h2,
    #countdown .countdown-title-line {
        opacity: 0;
        transform: translateY(22px);

        transition:
            opacity 0.72s ease,
            transform 0.84s cubic-bezier(0.16, 1, 0.3, 1);
    }


    #countdown .count-box {
        opacity: 0;
        transform:
            translateY(24px)
            scale(0.97);

        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.45s ease,
            box-shadow 0.45s ease;
    }


    #countdown.countdown-revealed
    .event-countdown > .section-label,

    #countdown.countdown-revealed
    .event-countdown > h2,

    #countdown.countdown-revealed
    .countdown-title-line {
        opacity: 1;
        transform: translateY(0);
    }


    #countdown.countdown-revealed
    .count-box {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }


    #countdown.countdown-revealed
    .event-countdown > .section-label {
        transition-delay: 0.05s;
    }

    #countdown.countdown-revealed
    .event-countdown > h2 {
        transition-delay: 0.09s;
    }

    #countdown.countdown-revealed
    .countdown-title-line {
        transition-delay: 0.13s;
    }


    #countdown.countdown-revealed
    .count-box:nth-child(1) {
        transition-delay: 0.22s;
    }

    #countdown.countdown-revealed
    .count-box:nth-child(2) {
        transition-delay: 0.28s;
    }

    #countdown.countdown-revealed
    .count-box:nth-child(3) {
        transition-delay: 0.34s;
    }

    #countdown.countdown-revealed
    .count-box:nth-child(4) {
        transition-delay: 0.40s;
    }


    /* DATE -> TIME -> LOCATION after the counters */
    #countdown.countdown-revealed
    .event-meta-item:nth-child(1) {
        transition-delay:
            0.50s !important;
    }

    #countdown.countdown-revealed
    .event-meta-item:nth-child(2) {
        transition-delay:
            0.58s !important;
    }

    #countdown.countdown-revealed
    .event-meta-item:nth-child(3) {
        transition-delay:
            0.66s !important;
    }


    /* ------------------------------------------------------
       COMMON TOPIC PHASE
       Same soft upward emerge as SITH PAWURA.
    ------------------------------------------------------ */

    #about .about-heading,
    #artists .artist-heading,
    #gallery .gallery-heading,
    #sponsors .sponsors-heading,
    #contact .contact-heading {
        opacity: 0;

        transform:
            translateY(22px);

        transition:
            opacity 0.72s ease,
            transform 0.84s cubic-bezier(0.16, 1, 0.3, 1) !important;

        transition-delay:
            0.08s !important;
    }


    #about.section-revealed .about-heading,
    #artists.section-revealed .artist-heading,
    #gallery.section-revealed .gallery-heading,
    #sponsors.section-revealed .sponsors-heading,
    #contact.section-revealed .contact-heading {
        opacity: 1;

        transform:
            translateY(0);
    }


    /* ------------------------------------------------------
       ABOUT
       Topic -> text -> image
    ------------------------------------------------------ */

    #about .about-text > p {
        opacity:
            0 !important;

        transform:
            translateY(22px) !important;

        transition:
            opacity 0.72s ease,
            transform 0.84s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }


    #about .about-text > p:nth-of-type(1) {
        transition-delay:
            0.20s !important;
    }


    #about .about-text > p:nth-of-type(2) {
        transition-delay:
            0.30s !important;
    }


    #about.section-revealed
    .about-text > p {
        opacity:
            1 !important;

        transform:
            translateY(0) !important;
    }


    #about .about-image-wrap {
        opacity:
            0 !important;

        transform:
            translateY(24px)
            scale(0.97) !important;

        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1) !important;

        transition-delay:
            0.44s !important;
    }


    #about.section-revealed
    .about-image-wrap {
        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;
    }


    /*
       Old ABOUT frame animation used to start independently.
       The wrapper now owns the media phase.
    */
    #about .about-image-frame {
        opacity:
            1 !important;

        transform:
            none !important;
    }


    /* ------------------------------------------------------
       ARTIST
       Topic -> text -> image
    ------------------------------------------------------ */

    #artists .artist-text > p {
        opacity:
            0 !important;

        transform:
            translateY(22px) !important;

        transition:
            opacity 0.72s ease,
            transform 0.84s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }


    #artists .artist-text > p:nth-of-type(1) {
        transition-delay:
            0.20s !important;
    }


    #artists .artist-text > p:nth-of-type(2) {
        transition-delay:
            0.30s !important;
    }


    #artists.section-revealed
    .artist-text > p {
        opacity:
            1 !important;

        transform:
            translateY(0) !important;
    }


    #artists .artist-image-wrap {
        opacity:
            0 !important;

        transform:
            translateY(24px)
            scale(0.97) !important;

        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1) !important;

        transition-delay:
            0.44s !important;
    }


    #artists.section-revealed
    .artist-image-wrap {
        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;
    }


    /*
       Disable the old "image first" mask animation.
       The image is now the final phase, matching SITH PAWURA.
    */
    #artists .artist-image-frame,
    #artists.section-revealed .artist-image-frame {
        opacity:
            1 !important;

        clip-path:
            none !important;

        transform:
            none !important;
    }


    /* ------------------------------------------------------
       GALLERY
       Topic -> image/cards
       (There is no separate description block here.)
    ------------------------------------------------------ */

    #gallery .gallery-slider {
        opacity:
            0 !important;

        transform:
            translateY(24px)
            scale(0.97) !important;

        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1) !important;

        transition-delay:
            0.30s !important;
    }


    #gallery.section-revealed
    .gallery-slider {
        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;
    }


    /* ------------------------------------------------------
       SPONSORS
       Only the topic exists for now.
    ------------------------------------------------------ */

    #sponsors .sponsors-heading {
        transition-delay:
            0.08s !important;
    }


    /* ------------------------------------------------------
       CONTACT
       Topic -> contact image/detail cards
       Social/footer stay natural because Contact is a tall
       native-scroll final section.
    ------------------------------------------------------ */

    #contact .contact-team {
        opacity:
            0 !important;

        transform:
            translateY(24px)
            scale(0.97) !important;

        transition:
            opacity 0.68s ease,
            transform 0.78s cubic-bezier(0.16, 1, 0.3, 1) !important;

        transition-delay:
            0.30s !important;
    }


    #contact.section-revealed
    .contact-team {
        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;
    }
}


/* ==========================================================
   MOBILE / TABLET
   One section-level trigger guarantees the phase order.
========================================================== */

@media (max-width: 900px) {

    /* ------------------------------------------------------
       COUNTDOWN
       Topic -> counters -> details
    ------------------------------------------------------ */

    #countdown.countdown-revealed
    .event-meta-item:nth-child(1) {
        transition-delay:
            0.38s !important;
    }

    #countdown.countdown-revealed
    .event-meta-item:nth-child(2) {
        transition-delay:
            0.46s !important;
    }

    #countdown.countdown-revealed
    .event-meta-item:nth-child(3) {
        transition-delay:
            0.54s !important;
    }


    /*
       HTML is now DATE -> TIME -> LOCATION.
       Keep the one-column mobile grid in that natural order.
    */
    #countdown .event-meta-item:nth-child(1),
    #countdown .event-meta-item:nth-child(2),
    #countdown .event-meta-item:nth-child(3) {
        grid-column:
            1 !important;

        grid-row:
            auto !important;
    }


    /* ------------------------------------------------------
       PRIMARY SECTION START STATES
    ------------------------------------------------------ */

    #about.mobile-sequence-ready
    .about-heading,

    #about.mobile-sequence-ready
    .mobile-copy,

    #about.mobile-sequence-ready
    .about-image-wrap,

    #artists.mobile-sequence-ready
    .artist-heading,

    #artists.mobile-sequence-ready
    .mobile-copy,

    #artists.mobile-sequence-ready
    .artist-image-wrap,

    #gallery.mobile-sequence-ready
    .gallery-heading,

    #gallery.mobile-sequence-ready
    .gallery-slider,

    #programme.mobile-sequence-ready
    .sith-paura-heading,

    #programme.mobile-sequence-ready
    .sith-paura-description,

    #programme.mobile-sequence-ready
    .sith-paura-card:not(.sith-paura-extra),

    #sponsors.mobile-sequence-ready
    .sponsors-heading,

    #contact.mobile-sequence-ready
    .contact-heading,

    #contact.mobile-sequence-ready
    .contact-team {

        opacity:
            0 !important;

        transform:
            translateY(22px)
            scale(0.985) !important;

        filter:
            blur(2px) !important;

        transition:
            opacity 0.62s ease,
            transform 0.76s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.52s ease !important;
    }


    /* ------------------------------------------------------
       TOPIC PHASE
    ------------------------------------------------------ */

    #about.mobile-sequence-revealed
    .about-heading,

    #artists.mobile-sequence-revealed
    .artist-heading,

    #gallery.mobile-sequence-revealed
    .gallery-heading,

    #programme.mobile-sequence-revealed
    .sith-paura-heading,

    #sponsors.mobile-sequence-revealed
    .sponsors-heading,

    #contact.mobile-sequence-revealed
    .contact-heading {

        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter:
            blur(0) !important;

        transition-delay:
            0.04s !important;
    }


    /* ------------------------------------------------------
       TEXT / DESCRIPTION PHASE
    ------------------------------------------------------ */

    #about.mobile-sequence-revealed
    .mobile-copy,

    #artists.mobile-sequence-revealed
    .mobile-copy,

    #programme.mobile-sequence-revealed
    .sith-paura-description {

        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter:
            blur(0) !important;

        transition-delay:
            0.18s !important;
    }


    /* ------------------------------------------------------
       IMAGE / MEDIA PHASE
    ------------------------------------------------------ */

    #about.mobile-sequence-revealed
    .about-image-wrap,

    #artists.mobile-sequence-revealed
    .artist-image-wrap,

    #gallery.mobile-sequence-revealed
    .gallery-slider,

    #contact.mobile-sequence-revealed
    .contact-team {

        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter:
            blur(0) !important;

        transition-delay:
            0.34s !important;
    }


    /* SITH PAWURA keeps the same reference card stagger. */

    #programme.mobile-sequence-revealed
    .sith-paura-card:not(.sith-paura-extra) {

        opacity:
            1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter:
            blur(0) !important;
    }


    #programme.mobile-sequence-revealed
    .sith-paura-card:nth-child(1) {
        transition-delay:
            0.32s !important;
    }

    #programme.mobile-sequence-revealed
    .sith-paura-card:nth-child(2) {
        transition-delay:
            0.39s !important;
    }

    #programme.mobile-sequence-revealed
    .sith-paura-card:nth-child(3) {
        transition-delay:
            0.46s !important;
    }

    #programme.mobile-sequence-revealed
    .sith-paura-card:nth-child(4) {
        transition-delay:
            0.53s !important;
    }

    #programme.mobile-sequence-revealed
    .sith-paura-card:nth-child(5) {
        transition-delay:
            0.60s !important;
    }

    #programme.mobile-sequence-revealed
    .sith-paura-card:nth-child(6) {
        transition-delay:
            0.67s !important;
    }


    /*
       Contact heading children had an earlier emergency visibility
       override. Keep them visible inside the animated heading wrapper;
       the wrapper itself now controls the topic entrance.
    */
    #contact .contact-heading .contact-label,
    #contact .contact-heading h2 {
        opacity:
            1 !important;

        visibility:
            visible !important;
    }
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    #countdown .event-countdown > .section-label,
    #countdown .event-countdown > h2,
    #countdown .countdown-title-line,
    #countdown .count-box,
    #countdown .event-meta-item,

    #about .about-heading,
    #about .about-text > p,
    #about .about-image-wrap,

    #artists .artist-heading,
    #artists .artist-text > p,
    #artists .artist-image-wrap,

    #gallery .gallery-heading,
    #gallery .gallery-slider,

    #programme .sith-paura-heading,
    #programme .sith-paura-description,
    #programme .sith-paura-card,

    #sponsors .sponsors-heading,

    #contact .contact-heading,
    #contact .contact-team {

        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;

        transition:
            none !important;
    }
}

/* ==========================================================
   DESKTOP COUNTDOWN — DATE | TIME / LOCATION
========================================================== */

@media (min-width: 901px) {

    /* DATE — LEFT */
    #countdown .event-meta-item:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: center !important;
    }


    /* TIME — RIGHT */
    #countdown .event-meta-item:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: center !important;
    }


    /* LOCATION — CENTER BELOW */
    #countdown .event-meta-item:nth-child(3) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        justify-self: center !important;

        text-align: center !important;
    }
}
/* ==========================================================
   DESKTOP HERO — MOVE "PRESENTED BY" LOWER
========================================================== */

@media (min-width: 901px) {

    .hero-presented {
        position: relative;

        top: clamp(55px, 4vw, 75px);
    }
}

/* ==========================================================
   HERO EVENT TITLE — SOFT SLOW GOLDEN SWEEP
   Desktop + Mobile
========================================================== */

.hero-event-text h1 {
    position: relative;

    margin:
        0
        0
        clamp(8px, 1.5vw, 14px);

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(30px, 7vw, 68px);

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        clamp(2px, 0.65vw, 7px);

    /*
       Brighter gold palette.
       Dark brown/gold tones intentionally reduced.
    */
background:
    linear-gradient(
        100deg,

        #d9a62f 0%,
        #e7b842 18%,
        #efc657 34%,

        /* bright point - gold, not white */
        #f4cf68 46%,
        #edbd4d 54%,

        #e8b43b 70%,
        #dca12b 86%,
        #e9bd4f 100%
    );

    background-size:
        280% 100%;

    background-position:
        180% center;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

    -webkit-text-stroke:
        0.28px
        rgba(98, 61, 8, 0.35);

    text-shadow:
        0
        3px
        8px
        rgba(0, 0, 0, 0.72);

    filter:
        drop-shadow(
            0
            0
            3px
            rgba(232, 197, 106, 0.20)
        );

    animation:
        viramayakTitleSweep
        10s
        ease-in-out
        infinite;

    will-change:
        background-position,
        filter;

    box-shadow:
        none !important;
}


/* ==========================================================
   SLOW LEFT → RIGHT GOLDEN SWEEP
========================================================== */

@keyframes viramayakTitleSweep {

    0% {
        background-position:
            180% center;

        filter:
            drop-shadow(
                0
                0
                2px
                rgba(232, 197, 106, 0.16)
            );
    }


    25% {
        filter:
            drop-shadow(
                0
                0
                3px
                rgba(232, 197, 106, 0.20)
            );
    }


    50% {
        background-position:
            50% center;

        filter:
            drop-shadow(
                0
                0
                5px
                rgba(232, 197, 106, 0.30)
            )
            drop-shadow(
                0
                0
                12px
                rgba(232, 197, 106, 0.12)
            );
    }


    75% {
        filter:
            drop-shadow(
                0
                0
                3px
                rgba(232, 197, 106, 0.20)
            );
    }


    100% {
        background-position:
            -80% center;

        filter:
            drop-shadow(
                0
                0
                2px
                rgba(232, 197, 106, 0.16)
            );
    }
}


/* ==========================================================
   MOBILE / TABLET
========================================================== */

@media (max-width: 900px) {

    .hero-event-text h1 {

        font-size:
            clamp(27px, 8vw, 36px) !important;

        letter-spacing:
            clamp(1.6px, 0.9vw, 3.5px) !important;

        -webkit-text-stroke:
            0.22px
            rgba(98, 61, 8, 0.30);

        background-size:
            260% 100%;

        animation-duration:
            11s;

        filter:
            drop-shadow(
                0
                0
                2px
                rgba(232, 197, 106, 0.16)
            );
    }
}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 480px) {

    .hero-event-text h1 {

        font-size:
            clamp(25px, 9vw, 32px) !important;

        letter-spacing:
            clamp(1.2px, 0.75vw, 2.4px) !important;

        background-size:
            250% 100%;

        animation-duration:
            12s;
    }
}
@media (max-width: 900px) {

    .gallery-section,
    .sith-paura-section {
        border-top: none !important;
    }

}
/* ==========================================================
   CONTACT FOOTER — USJP PRESENTED BY BRAND
========================================================== */

/* Remove the marked separator line */
#contact .contact-social {
    border-bottom: none !important;
}


/* Footer presented area */
#contact .contact-footer-brand {
    width: 100%;

    margin:
        0
        auto
        24px !important;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


/* University logo */
#contact .contact-footer-usjp-logo {
    display: block;

    width:
        clamp(72px, 6vw, 95px);

    height: auto;

    margin:
        0
        auto
        16px;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            0
            10px
            rgba(232, 197, 106, 0.16)
        );
}


/* PROUDLY PRESENTED BY */
#contact .contact-footer-presented-label {
    margin:
        0
        0
        8px !important;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(8px, 0.7vw, 10px) !important;

    font-weight:
        600;

    letter-spacing:
        clamp(2px, 0.25vw, 3.5px);

    line-height:
        1.3;

    color:
        #e8c56a !important;

    text-transform:
        uppercase;
}


/* Committee / faculty / university */
#contact .contact-footer-presented-text {
    margin:
        0 !important;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(9px, 0.75vw, 11px) !important;

    font-weight:
        400;

    line-height:
        1.75 !important;

    letter-spacing:
        0.7px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        ) !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    #contact .contact-footer-brand {
        margin-bottom:
            20px !important;
    }


    #contact .contact-footer-usjp-logo {
        width:
            clamp(64px, 19vw, 82px);

        margin-bottom:
            14px;
    }


    #contact .contact-footer-presented-label {
        font-size:
            8px !important;

        letter-spacing:
            2.2px;
    }


    #contact .contact-footer-presented-text {
        max-width:
            310px;

        font-size:
            clamp(8px, 2.4vw, 10px) !important;

        line-height:
            1.7 !important;

        letter-spacing:
            0.45px;
    }
}

/* ==========================================================
   DESKTOP FOOTER PRESENTED TEXT — BIGGER FULL SET
========================================================== */

/* ==========================================================
   DESKTOP FOOTER PRESENTED TEXT — FINAL OVERRIDE
========================================================== */

@media (min-width: 901px) {

    #contact .contact-footer-brand .contact-footer-presented-label,
    #contact .contact-footer-brand .contact-footer-presented-text {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

}


/* ==========================================================
   HERO VIDEO — HOME ONLY
   Keep logo + cinematic transparent layer
========================================================== */

/* Keep hero/logo behind lower sections */
.hero {
    position: sticky !important;
    top: 0 !important;
}


/* Smooth video disappearance */
.background-video {
    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}


/* Only video disappears */
.hero.hero-video-hidden .background-video {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================
   MOBILE MENU — COMPACT HEIGHT
========================================================== */

@media (max-width: 900px) {

    .mobile-menu {
        padding:
            20px
            24px
            24px !important;
    }

    .mobile-menu-header {
        padding-bottom:
            12px !important;
    }

    .mobile-menu-close {
        width:
            38px !important;

        height:
            38px !important;

        font-size:
            26px !important;
    }

    .mobile-menu-title {
        font-size:
            14px !important;
    }

    .mobile-menu-links {
        margin-top:
            14px !important;
    }

    .mobile-menu-links a {
        padding:
            14px
            0 !important;

        font-size:
            16px !important;
    }

    .mobile-ticket {
        margin-top:
            20px !important;

        padding:
            12px
            16px !important;

        font-size:
            12px !important;
    }
}

/* ==========================================================
   DESKTOP COUNTDOWN — MOVE SLIGHTLY UP
========================================================== */

@media (min-width: 901px) {

    #countdown .event-countdown {
        position: relative;
        top: -35px;
    }

}

/* ==========================================================
   DESKTOP COUNTDOWN — DATE / TIME / LOCATION VERTICAL
========================================================== */

@media (min-width: 901px) {

    #countdown .event-meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        gap: 20px !important;

        margin:
            45px
            auto
            0 !important;
    }


    /* Remove date / time / location icons */
    #countdown .event-meta-item svg {
        display: none !important;
    }


    /* Date, Time, Location one below another */
    #countdown .event-meta-item {
        width: auto !important;

        grid-column: auto !important;
        grid-row: auto !important;

        justify-self: auto !important;

        margin: 0 !important;

        text-align: center !important;
    }

}

/* ==========================================================
   COUNTDOWN EVENT DETAILS — DATE.PNG STYLE
   Desktop + Mobile
========================================================== */

#countdown .event-meta {
    width: min(620px, 92vw) !important;

    margin:
        clamp(38px, 4vw, 58px)
        auto
        0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: clamp(15px, 1.7vw, 22px) !important;

    text-align: center;
}


/* =========================
   DATE | TIME
========================= */

#countdown .event-meta-top {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    column-gap:
        clamp(14px, 2.2vw, 26px);

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(22px, 2vw, 32px);

    font-weight: 500;

    line-height: 1.2;

    color: #ffffff;
}


#countdown .event-meta-separator {
    color:
        rgba(255, 255, 255, 0.92);

    font-family:
        'Poppins',
        sans-serif;

    font-weight: 300;
}


/* =========================
   LOCATION
========================= */

#countdown .event-location {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 1px;
}


#countdown .event-venue {
    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(22px, 1.9vw, 31px);

    font-weight: 500;

    line-height: 1.2;

    color: #ffffff;
}


#countdown .event-faculty,
#countdown .event-university {
    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(17px, 1.45vw, 23px);

    font-weight: 400;

    line-height: 1.3;

    color: #f6e89a;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    #countdown .event-meta {
        width: min(350px, 94vw) !important;

        margin-top:
            26px !important;

        gap:
            14px !important;
    }


#countdown .event-meta-top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(14px, 2vw, 24px);

    text-align: center;

    font-family: 'Cinzel', serif;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 500;
    line-height: 1.2;

    color: #ffffff;
}


    #countdown .event-venue {
        font-size:
            clamp(17px, 5.2vw, 22px);
    }


    #countdown .event-faculty,
    #countdown .event-university {
        font-size:
            clamp(12px, 3.6vw, 15px);

        line-height:
            1.35;
    }
}

/* ==========================================================
   COUNTDOWN DETAILS — COMPACT CINEMATIC STYLE
========================================================== */

#countdown .event-meta {
    width: min(720px, 100%) !important;
    max-width: 100% !important;

    margin:
        clamp(28px, 3vw, 46px)
        auto
        0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;

    gap: 12px !important;

    padding-left: 12px;
    padding-right: 12px;

    box-sizing: border-box;

    text-align: center;
}


/* DATE | TIME */

#countdown .event-meta-top {
    display: flex !important;

    align-items: center;
    justify-content: center;

gap: clamp(10px, 1.5vw, 18px);

width: fit-content;
max-width: 100%;

margin-left: auto;
margin-right: auto;

white-space: nowrap;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(17px, 1.35vw, 21px);

    font-weight: 500;

    letter-spacing:
        1.2px;

    line-height:
        1.3;

    color:
        rgba(255, 255, 255, 0.90);
}


#countdown .event-meta-separator {
    color:
        rgba(232, 197, 106, 0.75);

    font-size:
        20px;

    font-weight:
        300;
}


/* LOCATION */

#countdown .event-location {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;
}


#countdown .event-venue {
    margin-bottom:
        2px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(18px, 1.5vw, 24px);

    font-weight:
        600;

    letter-spacing:
        1.5px;

    color:
        rgba(255, 255, 255, 0.92);
}


#countdown .event-faculty,
#countdown .event-university {
    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(15px, 1.15vw, 18px);

    font-weight:
        400;

    letter-spacing:
        0.6px;

    line-height:
        1.35;

    color:
        rgba(232, 197, 106, 0.88);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    #countdown .event-meta {
    margin-top: 20px !important;
    }

    #countdown .event-meta-top {
        font-size:
            clamp(12px, 3.7vw, 15px);
    }

    #countdown .event-meta-separator {
        font-size:
            16px;
    }

    #countdown .event-venue {
        font-size:
            clamp(16px, 4.6vw, 19px);
    }

    #countdown .event-faculty,
    #countdown .event-university {
        font-size:
            clamp(11px, 3.3vw, 14px);
    }
}

/* ==========================================================
   COUNTDOWN NEW DETAILS — CINEMATIC EMERGE
========================================================== */

/* DATE | TIME — start state */
#countdown .event-meta-top {
    opacity: 0;

    transform:
        translateY(22px)
        scale(0.97);

    filter: blur(5px);

    transition:
        opacity 0.70s ease,
        transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.70s ease;
}


/* LOCATION lines — start state */
#countdown .event-location > span {
    opacity: 0;

    transform:
        translateY(18px);

    filter: blur(4px);

    transition:
        opacity 0.68s ease,
        transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.68s ease;
}


/* ==========================================================
   REVEAL — after countdown boxes
========================================================== */

#countdown.countdown-revealed
.event-meta-top {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);

    transition-delay:
        0.50s;
}


/* AUDITORIUM */
#countdown.countdown-revealed
.event-venue {
    opacity: 1;

    transform:
        translateY(0);

    filter: blur(0);

    transition-delay:
        0.62s;
}


/* FACULTY OF ENGINEERING */
#countdown.countdown-revealed
.event-faculty {
    opacity: 1;

    transform:
        translateY(0);

    filter: blur(0);

    transition-delay:
        0.72s;
}


/* UNIVERSITY */
#countdown.countdown-revealed
.event-university {
    opacity: 1;

    transform:
        translateY(0);

    filter: blur(0);

    transition-delay:
        0.82s;
}