/* ===================================================
   bada.studio — Cinematic Scroll Experience
   Color Palette:
     Deep Burgundy:  #4A0E1E
     Warm Cream:     #F5EDE0
     Copper Glow:    #D4A574
     Wine Berry:     #8C2F3D
     Burgundy Ink:   #3D1520
     Dusty Rose:     #C4918A
     Parchment:      #EDE1D0
     Amber Signal:   #E8A84C
   Fonts: Baloo 2, Nunito, Quicksand, Fira Code
   =================================================== */

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #F5EDE0;
    color: #3D1520;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================================
   Noise Overlay
   =================================================== */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* ===================================================
   Circuit Traces — Global SVG Layer
   =================================================== */
#circuit-traces {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
}

#circuit-traces.visible {
    opacity: 1;
}

#circuit-traces .trace {
    fill: none;
    stroke: #D4A574;
    stroke-width: 1.5;
    opacity: 0.4;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

#circuit-traces .trace.drawn {
    stroke-dashoffset: 0;
}

#circuit-traces .node {
    fill: #E8A84C;
    opacity: 0;
    transition: opacity 0.6s ease 0.8s;
}

#circuit-traces .node.visible {
    opacity: 0.7;
    animation: nodePulse 1.2s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% { transform-origin: center; r: 3; opacity: 0.5; }
    50% { r: 4.5; opacity: 0.9; }
}

/* ===================================================
   Act I — Title Card
   =================================================== */
.act-title {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #F5EDE0;
    z-index: 2;
}

.title-container {
    text-align: center;
    position: relative;
}

.title-text {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #4A0E1E;
    display: inline-block;
}

.title-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) rotate(8deg);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.title-text .char.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.title-text .char.period {
    color: #D4A574;
}

.tagline {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8C2F3D;
    opacity: 0.6;
    margin-top: 1.5rem;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.tagline .typed-char {
    opacity: 0;
    transition: opacity 0.05s ease;
}

.tagline .typed-char.visible {
    opacity: 1;
}

/* ===================================================
   Film Splice Dividers
   =================================================== */
.splice-zone {
    height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background-color: #F5EDE0;
}

.splice-zone-dark {
    background-color: #4A0E1E;
}

.splice-line {
    width: 80%;
    height: 4px;
}

.splice-trace {
    stroke: #8C2F3D;
    stroke-width: 2;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.splice-trace-copper {
    stroke: #D4A574;
}

.splice-zone.active .splice-trace {
    stroke-dashoffset: 0;
}

.splice-perforations {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.splice-perforations::before,
.splice-perforations::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: #8C2F3D;
    opacity: 0.5;
}

.splice-perforations::before {
    box-shadow: 24px 0 0 rgba(140, 47, 61, 0.5),
                48px 0 0 rgba(140, 47, 61, 0.5),
                72px 0 0 rgba(140, 47, 61, 0.5),
                96px 0 0 rgba(140, 47, 61, 0.5),
                120px 0 0 rgba(140, 47, 61, 0.5);
}

.splice-perforations-copper::before,
.splice-perforations-copper::after {
    background-color: #D4A574;
    opacity: 0.5;
}

.splice-perforations-copper::before {
    box-shadow: 24px 0 0 rgba(212, 165, 116, 0.5),
                48px 0 0 rgba(212, 165, 116, 0.5),
                72px 0 0 rgba(212, 165, 116, 0.5),
                96px 0 0 rgba(212, 165, 116, 0.5),
                120px 0 0 rgba(212, 165, 116, 0.5);
}

/* ===================================================
   Act II & III — Reels
   =================================================== */
.act-reel {
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 4rem 0;
}

.reel-right {
    justify-content: flex-end;
    padding-right: 5vw;
}

.reel-left {
    justify-content: flex-start;
    padding-left: 5vw;
}

.reel-panel {
    position: relative;
    width: clamp(320px, 55vw, 720px);
    padding: clamp(2rem, 4vw, 4rem);
    overflow: visible;
}

.panel-burgundy {
    background-color: #4A0E1E;
    border-radius: 24px 8px 32px 12px;
    border: 1px solid #6B1D2B;
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.panel-burgundy.visible {
    opacity: 1;
    transform: translateX(0);
}

.panel-burgundy.glow {
    box-shadow: 0 0 40px rgba(232, 168, 76, 0.3), 0 8px 32px rgba(74, 14, 30, 0.4);
}

.panel-cream {
    background-color: #F5EDE0;
    border-radius: 12px 32px 8px 24px;
    border: 1px solid rgba(107, 29, 43, 0.3);
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel-cream.visible {
    opacity: 1;
    transform: translateX(0);
}

.reel-heading {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #F5EDE0;
    margin-bottom: 1.5rem;
}

.reel-heading.heading-dark {
    color: #4A0E1E;
}

.reel-body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: #F0E4D4;
    margin-bottom: 1rem;
}

.reel-body.body-dark {
    color: #3D1520;
}

.reel-pullquote {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.3;
    color: #E8A84C;
    margin-top: 2rem;
    padding-left: 1.5rem;
    border-left: 3px solid #D4A574;
}

.reel-pullquote.pullquote-copper {
    color: #D4A574;
    border-left-color: #8C2F3D;
}

/* Reel connector SVG */
.reel-connector {
    position: absolute;
    top: -120px;
    right: 40px;
    width: 100px;
    height: 200px;
    pointer-events: none;
}

.reel-connector .trace {
    fill: none;
    stroke: #D4A574;
    stroke-width: 1.5;
    opacity: 0.4;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-connector.visible .trace {
    stroke-dashoffset: 0;
}

.reel-connector .node {
    fill: #E8A84C;
    opacity: 0;
    transition: opacity 0.4s ease 0.6s;
}

.reel-connector.visible .node {
    opacity: 0.7;
}

/* Node Clusters */
.node-cluster {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 50px;
}

.cluster-right {
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
}

.cluster-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #E8A84C;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.node-cluster.visible .cluster-dot {
    opacity: 0.6;
}

.node-cluster.visible .dot-1 { animation: clusterPulse 1.2s ease-in-out infinite 0ms; }
.node-cluster.visible .dot-2 { animation: clusterPulse 1.2s ease-in-out infinite 150ms; }
.node-cluster.visible .dot-3 { animation: clusterPulse 1.2s ease-in-out infinite 300ms; }
.node-cluster.visible .dot-4 { animation: clusterPulse 1.2s ease-in-out infinite 450ms; }
.node-cluster.visible .dot-5 { animation: clusterPulse 1.2s ease-in-out infinite 600ms; }

@keyframes clusterPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.9; }
}

/* ===================================================
   Act IV — The Workshop
   =================================================== */
.act-workshop {
    min-height: 120vh;
    background-color: #4A0E1E;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    overflow: hidden;
}

.act-workshop #noise-overlay-workshop {
    opacity: 0.06;
}

.workshop-circuit-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.workshop-column {
    position: relative;
    z-index: 1;
    max-width: 600px;
    width: 100%;
}

.workshop-heading {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #F5EDE0;
    margin-bottom: 3rem;
    text-align: center;
}

.workshop-paragraph {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: #F0E4D4;
    margin-bottom: 1.8rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.workshop-paragraph.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================================
   Act V — Credits
   =================================================== */
.act-credits {
    min-height: 60vh;
    background-color: #F5EDE0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    overflow: hidden;
}

.credits-container {
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 600px;
}

.credits-roll {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.credit-line {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.credit-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.credit-role {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8C2F3D;
    opacity: 0;
    margin-top: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.credit-role:first-child {
    margin-top: 0;
}

.credit-name {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.3;
    color: #4A0E1E;
    opacity: 0;
}

/* Credits circuit */
.credits-circuit {
    width: 100%;
    height: 100px;
    margin-bottom: 2rem;
}

.credits-trace {
    fill: none;
    stroke: #D4A574;
    stroke-width: 1.5;
    opacity: 0.4;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.credits-circuit.visible .credits-trace {
    stroke-dashoffset: 0;
}

.credits-circuit .node-final {
    fill: #E8A84C;
    opacity: 0;
    transition: opacity 0.5s ease 1s;
}

.credits-circuit.visible .node-final {
    opacity: 0.9;
    animation: finalNodePulse 1.2s ease-in-out infinite;
}

@keyframes finalNodePulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.credits-domain {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1.2rem;
    color: #D4A574;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease 1.2s,
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}

.credits-domain.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================================
   Responsive
   =================================================== */
@media (max-width: 768px) {
    .reel-right {
        justify-content: center;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .reel-left {
        justify-content: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .reel-panel {
        width: 90vw;
    }

    .reel-connector {
        display: none;
    }

    .node-cluster {
        display: none;
    }

    .splice-perforations::before {
        box-shadow: 24px 0 0 rgba(140, 47, 61, 0.5),
                    48px 0 0 rgba(140, 47, 61, 0.5);
    }

    .splice-perforations-copper::before {
        box-shadow: 24px 0 0 rgba(212, 165, 116, 0.5),
                    48px 0 0 rgba(212, 165, 116, 0.5);
    }
}