/* =========================================================
   LIGHTING & DJ PAGE
   ========================================================= */

:root {
    --ld-cream: #fffaf7;
    --ld-white: #ffffff;
    --ld-brown: #8b5e59;
    --ld-dark: #3e302e;
    --ld-gold: #d9b86c;
    --ld-blush: #ead6d2;
    --ld-soft: #f5ebe7;
    --ld-muted: #786866;
    --ld-border: rgba(139, 94, 89, .15);
    --ld-shadow: 0 25px 70px rgba(62, 48, 46, .12);
    --ld-radius: 24px;
    --ld-ease: cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   GLOBAL PAGE RESET
   IMPORTANT:
   Removes unwanted white strip below navbar
   ========================================================= */

html {
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

    body:has(.lighting-page) {
        margin: 0 !important;
        padding: 0 !important;
    }

        body:has(.lighting-page) main.lighting-page {
            margin: 0 !important;
            padding: 0 !important;
            width: 100%;
            max-width: none !important;
        }

        body:has(.lighting-page) .ld-hero {
            margin-top: 0 !important;
        }


/* =========================================================
   BOX SIZING
   ========================================================= */

.lighting-page,
.lighting-page *,
.lighting-page *::before,
.lighting-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN PAGE
   ========================================================= */

.lighting-page {
    background: var(--ld-cream);
    color: var(--ld-dark);
    overflow: hidden;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


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

.ld-hero {
    min-height: calc(100vh - 76px);
    position: relative;
    display: flex;
    align-items: center;
    padding: 82px 8%;
    margin: 0 !important;
    color: #fff;
    overflow: hidden;
    background: linear-gradient( 90deg, rgba(30, 19, 18, .88), rgba(30, 19, 18, .34) ), url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=2000&q=90") center/cover no-repeat;
}

    .ld-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 75% 30%, rgba(217,184,108,.18), transparent 35% );
        pointer-events: none;
    }

.ld-hero-content {
    max-width: 760px;
    position: relative;
    z-index: 2;
}

.ld-eyebrow,
.ld-section-heading > span,
.ld-cta > div > span {
    color: var(--ld-gold);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .22em;
}

.ld-hero h1 {
    font-size: clamp(2.8rem, 6.5vw, 6.2rem);
    line-height: .96;
    margin: 18px 0;
    font-weight: 800;
}

.ld-hero p {
    max-width: 650px;
    font-size: 1.04rem;
    line-height: 1.7;
    color: rgba(255,255,255,.84);
}

.ld-hero-actions,
.ld-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 23px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform .3s var(--ld-ease), box-shadow .3s var(--ld-ease), background .3s ease;
}

    .ld-btn:hover {
        transform: translateY(-3px);
    }

.ld-btn-primary {
    background: var(--ld-gold);
    color: var(--ld-dark);
}

    .ld-btn-primary:hover {
        box-shadow: 0 12px 30px rgba(217,184,108,.28);
    }

.ld-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
}

    .ld-btn-outline:hover {
        background: rgba(255,255,255,.1);
    }

.ld-btn-whatsapp {
    background: #fff;
    color: var(--ld-brown);
}


/* =========================================================
   SOUND WAVE
   ========================================================= */

.ld-sound-wave {
    position: absolute;
    bottom: 24px;
    left: 8%;
    display: flex;
    align-items: end;
    gap: 5px;
    height: 42px;
    z-index: 3;
}

    .ld-sound-wave span {
        width: 4px;
        height: 20px;
        background: var(--ld-gold);
        border-radius: 10px;
        animation: ldWave .9s ease-in-out infinite alternate;
    }

        .ld-sound-wave span:nth-child(2n) {
            animation-delay: .2s;
        }

        .ld-sound-wave span:nth-child(3n) {
            animation-delay: .4s;
        }

@keyframes ldWave {

    from {
        height: 10px;
    }

    to {
        height: 40px;
    }
}


/* =========================================================
   COMMON SECTION SPACING
   Reduced from 110px
   ========================================================= */

.ld-intro,
.ld-event-section,
.ld-control-section,
.ld-services,
.ld-flow {
    padding: 78px 8%;
}


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

.ld-section-heading {
    max-width: 760px;
    margin-bottom: 38px;
}

    .ld-section-heading h2 {
        font-size: clamp(2.1rem, 4vw, 4.2rem);
        line-height: 1.02;
        margin: 13px 0;
    }

    .ld-section-heading p {
        color: var(--ld-muted);
        line-height: 1.7;
        margin-bottom: 0;
    }


/* =========================================================
   FEATURE GRID
   ========================================================= */

.ld-feature-grid,
.ld-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ld-feature-card {
    padding: 26px;
    background: var(--ld-white);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    transition: transform .35s var(--ld-ease), box-shadow .35s var(--ld-ease);
}

    .ld-feature-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--ld-shadow);
    }

.ld-feature-icon {
    font-size: 2rem;
    margin-bottom: 17px;
}

.ld-feature-card h3 {
    margin: 0 0 10px;
}

.ld-feature-card p,
.ld-service-grid p,
.ld-timeline-item p {
    color: var(--ld-muted);
    line-height: 1.65;
    margin-bottom: 0;
}


/* =========================================================
   EVENT SECTION
   ========================================================= */

.ld-event-section {
    background: var(--ld-white);
}

.ld-event-switcher {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 27px;
}

.ld-event-btn,
.ld-mood,
.ld-effect {
    border: 1px solid var(--ld-border);
    background: var(--ld-cream);
    color: var(--ld-dark);
    padding: 10px 17px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: .25s ease, transform .25s ease;
}

    .ld-event-btn:hover,
    .ld-mood:hover,
    .ld-effect:hover {
        transform: translateY(-2px);
    }

    .ld-event-btn.active,
    .ld-mood.active,
    .ld-effect.active {
        background: var(--ld-brown);
        color: #fff;
        border-color: var(--ld-brown);
    }


/* =========================================================
   EVENT RESULT
   ========================================================= */

.ld-event-result {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 38px;
    align-items: center;
}

.ld-event-image {
    height: 470px;
    overflow: hidden;
    border-radius: var(--ld-radius);
}

    .ld-event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s var(--ld-ease), opacity .35s ease;
    }

    .ld-event-image:hover img {
        transform: scale(1.04);
    }

.ld-event-info > span {
    color: var(--ld-brown);
    font-weight: 800;
    letter-spacing: .15em;
    font-size: .75rem;
}

.ld-event-info h3 {
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1;
    margin: 15px 0;
}

.ld-event-info p {
    color: var(--ld-muted);
    line-height: 1.75;
}

.ld-event-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

    .ld-event-points span {
        padding: 8px 12px;
        border-radius: 999px;
        background: var(--ld-soft);
        font-size: .84rem;
    }


/* =========================================================
   CONTROL ROOM
   ========================================================= */

.ld-control-section {
    background: #f4e9e5;
}

.ld-control-room {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 20px;
}

.ld-controls {
    background: #fff;
    padding: 26px;
    border-radius: var(--ld-radius);
    box-shadow: 0 15px 45px rgba(62,48,46,.06);
}

.ld-control-group {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ld-border);
}

    .ld-control-group:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .ld-control-group label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-weight: 800;
    }

.ld-mood-buttons,
.ld-effects {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.ld-control-group input[type="range"] {
    width: 100%;
    accent-color: var(--ld-brown);
    cursor: pointer;
}


/* =========================================================
   LIVE PREVIEW
   ========================================================= */

.ld-live-preview {
    min-height: 520px;
    background: #2c2221;
    border-radius: var(--ld-radius);
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(62,48,46,.15);
}

.ld-preview-top {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    letter-spacing: .12em;
}

.ld-live-dot {
    color: var(--ld-gold);
}

.ld-stage {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: end;
    justify-content: center;
    overflow: hidden;
}


/* =========================================================
   LIGHT BEAMS
   ========================================================= */

.ld-light-beam {
    position: absolute;
    width: 180px;
    height: 430px;
    top: -60px;
    opacity: .2;
    transform: rotate(15deg);
    background: linear-gradient( 180deg, rgba(217,184,108,.9), transparent );
    filter: blur(10px);
    transform-origin: top center;
    transition: opacity .3s ease, transform .25s ease;
}

.beam-one {
    left: 18%;
}

.beam-two {
    left: 43%;
    transform: rotate(-4deg);
}

.beam-three {
    right: 15%;
    transform: rotate(-18deg);
}


/* =========================================================
   STAGE SCREEN
   ========================================================= */

.ld-stage-screen {
    position: absolute;
    top: 65px;
    width: 58%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217,184,108,.4);
    background: rgba(255,255,255,.04);
    box-shadow: 0 0 70px rgba(217,184,108,.18);
    backdrop-filter: blur(4px);
}

    .ld-stage-screen small {
        color: var(--ld-gold);
        letter-spacing: .2em;
    }

    .ld-stage-screen strong {
        margin-top: 10px;
        color: #fff;
        font-size: 1.3rem;
        letter-spacing: .04em;
    }


/* =========================================================
   DJ CONSOLE
   ========================================================= */

.ld-dj-console {
    position: relative;
    z-index: 3;
    width: 270px;
    height: 100px;
    background: #161211;
    border-radius: 18px 18px 8px 8px;
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 20px 35px rgba(0,0,0,.3);
}

.ld-disc {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: repeating-radial-gradient( circle, #27201e 0 4px, #111 5px 8px );
    animation: ldSpin 2.5s linear infinite;
}

@keyframes ldSpin {

    to {
        transform: rotate(360deg);
    }
}

.ld-console-center {
    color: var(--ld-gold);
    font-weight: 900;
    letter-spacing: .08em;
}


/* =========================================================
   DANCE FLOOR
   ========================================================= */

.ld-dance-floor {
    position: absolute;
    bottom: 0;
    width: 78%;
    height: 72px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    transform: perspective(350px) rotateX(58deg);
}

    .ld-dance-floor span {
        background: rgba(217,184,108,.35);
        box-shadow: 0 0 18px rgba(217,184,108,.4);
        animation: ldFloor 1.1s infinite alternate;
    }

        .ld-dance-floor span:nth-child(2n) {
            animation-delay: .25s;
        }

        .ld-dance-floor span:nth-child(3n) {
            animation-delay: .45s;
        }

@keyframes ldFloor {

    to {
        opacity: .25;
        transform: scaleY(.5);
    }
}


/* =========================================================
   SERVICES
   ========================================================= */

.ld-service-grid {
    grid-template-columns: repeat(3, 1fr);
}

    .ld-service-grid article {
        background: #fff;
        padding: 26px;
        border-radius: var(--ld-radius);
        border: 1px solid var(--ld-border);
        transition: transform .3s var(--ld-ease), box-shadow .3s var(--ld-ease);
    }

        .ld-service-grid article:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 45px rgba(62,48,46,.08);
        }

        .ld-service-grid article > span {
            color: var(--ld-gold);
            font-weight: 900;
        }

    .ld-service-grid h3 {
        margin: 13px 0 8px;
    }


/* =========================================================
   EVENT FLOW
   ========================================================= */

.ld-flow {
    background: var(--ld-white);
}

.ld-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.ld-timeline-item {
    padding: 25px;
    border-left: 3px solid var(--ld-gold);
    transition: transform .3s ease, background .3s ease;
}

    .ld-timeline-item:hover {
        transform: translateX(5px);
        background: var(--ld-soft);
    }

    .ld-timeline-item > span {
        color: var(--ld-brown);
        font-weight: 900;
    }


/* =========================================================
   CTA
   ========================================================= */

.ld-cta {
    margin: 0 8% 70px;
    padding: 48px;
    border-radius: 30px;
    background: var(--ld-brown);
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}

    .ld-cta h2 {
        max-width: 760px;
        font-size: clamp( 2rem, 4vw, 3.8rem );
        line-height: 1;
        margin: 13px 0;
    }

    .ld-cta p {
        max-width: 650px;
        color: rgba(255,255,255,.75);
        line-height: 1.65;
        margin-bottom: 0;
    }


/* =========================================================
   JS REVEAL SUPPORT
   ========================================================= */

.ld-feature-card,
.ld-service-grid article,
.ld-timeline-item {
    will-change: transform, opacity;
}


/* =========================================================
   EFFECT STATES
   ========================================================= */

.ld-stage[data-effect="laser"]
.ld-light-beam {
    filter: blur(7px);
    opacity: .28;
}

.ld-stage[data-effect="smoke"] {
    background: radial-gradient( circle at center, rgba(255,255,255,.08), transparent 55% );
}

.ld-stage[data-effect="spark"]
.ld-stage-screen {
    box-shadow: 0 0 90px rgba(217,184,108,.28);
}

.ld-stage[data-effect="confetti"]
.ld-dance-floor span {
    animation-duration: .55s;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .ld-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ld-event-result,
    .ld-control-room {
        grid-template-columns: 1fr;
    }

    .ld-event-image {
        height: 430px;
    }

    .ld-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ld-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .ld-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .ld-hero {
        min-height: 78vh;
        padding: 72px 6% 75px;
    }

        .ld-hero h1 {
            font-size: clamp( 2.5rem, 12vw, 4rem );
        }

        .ld-hero p {
            font-size: .96rem;
            line-height: 1.65;
        }

    .ld-intro,
    .ld-event-section,
    .ld-control-section,
    .ld-services,
    .ld-flow {
        padding: 58px 6%;
    }

    .ld-section-heading {
        margin-bottom: 30px;
    }

        .ld-section-heading h2 {
            font-size: clamp( 2rem, 9vw, 3rem );
        }

    .ld-feature-grid,
    .ld-service-grid,
    .ld-timeline {
        grid-template-columns: 1fr;
    }

        .ld-feature-card,
        .ld-service-grid article {
            padding: 23px;
        }

    .ld-event-result {
        gap: 25px;
    }

    .ld-event-image {
        height: 340px;
    }

    .ld-event-info h3 {
        font-size: 2.3rem;
    }

    .ld-control-room {
        gap: 15px;
    }

    .ld-controls {
        padding: 22px;
    }

    .ld-live-preview {
        min-height: 440px;
        padding: 16px;
    }

    .ld-stage {
        min-height: 385px;
    }

    .ld-stage-screen {
        width: 82%;
        top: 55px;
        min-height: 120px;
    }

        .ld-stage-screen strong {
            font-size: 1rem;
        }

    .ld-dj-console {
        width: 220px;
        height: 85px;
    }

    .ld-disc {
        width: 48px;
        height: 48px;
    }

    .ld-dance-floor {
        width: 90%;
        height: 65px;
    }

    .ld-cta {
        margin: 0 6% 45px;
        padding: 32px 24px;
        border-radius: 24px;
    }

        .ld-cta h2 {
            font-size: 2.3rem;
        }

    .ld-sound-wave {
        left: 6%;
        bottom: 18px;
    }
}


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

@media (max-width: 420px) {

    .ld-hero {
        min-height: 75vh;
        padding: 65px 5% 65px;
    }

    .ld-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ld-btn {
        width: 100%;
    }

    .ld-event-switcher {
        gap: 7px;
    }

    .ld-event-btn,
    .ld-mood,
    .ld-effect {
        padding: 9px 13px;
        font-size: .8rem;
    }

    .ld-live-preview {
        min-height: 400px;
    }

    .ld-stage {
        min-height: 350px;
    }

    .ld-dj-console {
        width: 190px;
        height: 75px;
    }

    .ld-disc {
        width: 42px;
        height: 42px;
    }

    .ld-stage-screen {
        width: 88%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lighting-page *,
    .lighting-page *::before,
    .lighting-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}