/* ============================================================
   footprint.bar -- Pop-Art Circuit-Board Dreamscape
   Colors: #0A0A0F, #1A1A24, #FF2D7B, #00F0FF, #F5FF00, #39FF14, #4A4A5A, #FFFFFF
   Fonts: Boogaloo (display), Nunito (body/secondary)
   ============================================================ */

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

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

body {
    background: #0A0A0F;
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
}

/* ---- SECTION BASE ---- */
.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* ---- KEYFRAME ANIMATIONS ---- */

/* Shake-error: the signature interaction */
@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* Solder pad pulse */
@keyframes pad-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Trace dash animation (continuous pulse) */
@keyframes trace-dash {
    to { stroke-dashoffset: -40; }
}

/* Headline crash */
@keyframes headline-crash {
    0% { transform: translateY(-120vh); opacity: 0; }
    60% { transform: translateY(0); opacity: 1; }
    65% { transform: translateX(-3px); }
    70% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    85% { transform: translateX(-2px); }
    90% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

/* Speech bubble inflate */
@keyframes bubble-inflate {
    0% { transform: scale(0) rotate(5deg); opacity: 0; }
    70% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(5deg); opacity: 1; }
}

/* Ben-Day dot fade in - staggered depth layers */
@keyframes benday-fadein-large {
    0% { opacity: 0; }
    100% { opacity: 0.25; }
}
@keyframes benday-fadein-medium {
    0% { opacity: 0; }
    100% { opacity: 0.15; }
}
@keyframes benday-fadein-small {
    0% { opacity: 0; }
    100% { opacity: 0.1; }
}

/* Glitch strip flash */
@keyframes glitch-flash {
    0% { opacity: 0; transform: translateX(0); }
    10% { opacity: 1; transform: translateX(-15px); }
    30% { opacity: 1; transform: translateX(20px); }
    50% { opacity: 0.7; transform: translateX(-10px); }
    100% { opacity: 0; transform: translateX(0); }
}

/* Ticker scroll (continuous, never stopping) */
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Cursor blink */
@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Bounce enter for footprints */
@keyframes bounce-enter {
    0% { transform: scale(1.3); opacity: 0; }
    50% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Section shake on entry */
@keyframes section-shake-enter {
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

/* IC chip power-on */
@keyframes ic-poweron {
    from { stroke-dashoffset: 440; }
    to { stroke-dashoffset: 0; }
}

/* Neon glow pulse */
@keyframes neon-glow-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Terminal line grow */
@keyframes terminal-line-grow {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* Stagger entry (machine-gun visual rhythm) */
@keyframes stagger-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Trace reveal (drawing in) */
@keyframes trace-reveal {
    to { stroke-dashoffset: 0; }
}

/* Pad pop-in (spring) */
@keyframes pad-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Center line expand via transform */
@keyframes center-line-scale {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* Random pad shake (ambient) */
@keyframes pad-shake {
    0%, 100% { transform: scale(1) translateX(0); }
    25% { transform: scale(1.15) translateX(-1px); }
    50% { transform: scale(1.15) translateX(1px); }
    75% { transform: scale(1.15) translateX(-1px); }
}

/* ============================================================
   SECTION 1: OPENING IMPACT ZONE
   ============================================================ */

.opening-section {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0A0A0F;
    height: 100vh;
}

/* Circuit SVG layer */
.circuit-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Center line animation -- spans full viewBox, scales from center */
#center-line {
    transform-origin: center;
    animation: center-line-scale 0.5s ease-out 0s forwards;
}

/* Trace paths -- draw in after center line */
.trace {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: trace-reveal 0.8s ease-out forwards;
}

.trace-up-1 { animation-delay: 0.5s; }
.trace-up-2 { animation-delay: 0.6s; }
.trace-up-3 { animation-delay: 0.7s; }
.trace-up-4 { animation-delay: 0.65s; }
.trace-down-1 { animation-delay: 0.5s; }
.trace-down-2 { animation-delay: 0.65s; }
.trace-down-3 { animation-delay: 0.75s; }
.trace-down-4 { animation-delay: 0.7s; }

/* Continuous pulse on traces after reveal */
.trace.pulsing {
    stroke-dasharray: 20 20;
    stroke-dashoffset: 0;
    animation: trace-dash 1s linear infinite;
}

/* Solder pads -- pop in at intersections */
.solder-pad {
    transform: scale(0);
    transform-origin: center;
    animation: pad-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
}

.solder-pad:nth-of-type(2) { animation-delay: 0.95s; }
.solder-pad:nth-of-type(3) { animation-delay: 1.0s; }
.solder-pad:nth-of-type(4) { animation-delay: 0.92s; }
.solder-pad:nth-of-type(5) { animation-delay: 0.85s; }
.solder-pad:nth-of-type(6) { animation-delay: 0.92s; }
.solder-pad:nth-of-type(7) { animation-delay: 1.0s; }
.solder-pad:nth-of-type(8) { animation-delay: 0.88s; }
.solder-pad:nth-of-type(9) { animation-delay: 0.96s; }
.solder-pad:nth-of-type(10) { animation-delay: 0.93s; }
.solder-pad:nth-of-type(11) { animation-delay: 1.02s; }
.solder-pad:nth-of-type(12) { animation-delay: 0.98s; }

/* Pad ambient pulse (after initial pop) */
.solder-pad.active {
    animation: pad-pulse 2s ease-in-out infinite;
}

/* Ambient pad shake (random selection via delay variation) */
.solder-pad.shake-ambient {
    animation: pad-shake 0.3s ease-in-out;
}

/* Via holes (ambient PCB texture) */
.via-hole, .via-dot {
    opacity: 0.3;
}

/* Glitch strip */
.glitch-strip {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    background: #FF2D7B;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    animation: glitch-flash 0.3s ease-out 1.3s forwards;
}

/* Main headline -- crashes in from above */
.headline-impact {
    position: relative;
    z-index: 5;
    font-family: 'Boogaloo', cursive;
    font-size: clamp(5rem, 18vw + 1rem, 16rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #FF2D7B;
    text-shadow: 4px 4px 0 #000000, 0 0 20px #FF2D7B40, 0 0 60px #FF2D7B20;
    opacity: 0;
    animation: headline-crash 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}

/* Speech bubble for .bar */
.speech-bubble {
    position: absolute;
    bottom: 20%;
    right: 10%;
    z-index: 6;
    background: #F5FF00;
    border: 3px solid #000000;
    border-radius: 20px;
    padding: 12px 28px;
    opacity: 0;
    transform: scale(0) rotate(5deg);
    animation: bubble-inflate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.0s forwards;
}

.speech-bubble:hover {
    animation: shake-error 0.3s ease-in-out;
}

.speech-text {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: #000000;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.bubble-tail {
    position: absolute;
    bottom: -28px;
    left: 20%;
    width: 40px;
    height: 30px;
}

/* Ben-Day dot overlays -- staggered depth layers */
.benday-large,
.benday-medium,
.benday-small {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.benday-large {
    background: radial-gradient(circle, #FF2D7B40 2px, transparent 2px);
    background-size: 24px 24px;
    opacity: 0;
    animation: benday-fadein-large 0.8s ease-out 3.0s forwards;
}

.benday-medium {
    background: radial-gradient(circle, #00F0FF26 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0;
    animation: benday-fadein-medium 0.8s ease-out 3.3s forwards;
}

.benday-small {
    background: radial-gradient(circle, #4A4A5A4D 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0;
    animation: benday-fadein-small 0.6s ease-out 3.6s forwards;
}

/* ============================================================
   SECTION 2: MANIFESTO TICKER
   ============================================================ */

.manifesto-section {
    height: 25vh;
    min-height: 200px;
    display: flex;
    align-items: center;
    background: #0A0A0F;
    border-top: 2px solid #39FF1440;
    border-bottom: 2px solid #39FF1440;
    overflow: hidden;
}

.ticker-band {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ticker-track {
    display: flex;
    gap: 1.2rem;
    white-space: nowrap;
    animation: ticker-scroll 35s linear infinite;
    will-change: transform;
}

.ticker-word {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ticker-word.pink {
    color: #FF2D7B;
    text-shadow: 0 0 20px #FF2D7B40, 0 0 60px #FF2D7B20;
}

.ticker-word.cyan {
    color: #00F0FF;
    text-shadow: 0 0 20px #00F0FF40, 0 0 60px #00F0FF20;
}

/* Ticker shake on glitch words */
.ticker-band.glitch-shake {
    animation: shake-error 0.3s ease-in-out;
}

/* ============================================================
   SECTION 3-5: COLLAGE PANELS
   ============================================================ */

.collage-section {
    background: #0A0A0F;
    position: relative;
}

/* Halftone dot background per section (medium dots at 15% opacity) */
.collage-pink {
    background:
        radial-gradient(circle, #FF2D7B26 1.5px, transparent 1.5px),
        #0A0A0F;
    background-size: 12px 12px;
}

.collage-cyan {
    background:
        radial-gradient(circle, #00F0FF26 1.5px, transparent 1.5px),
        #0A0A0F;
    background-size: 12px 12px;
}

.collage-yellow {
    background:
        radial-gradient(circle, #F5FF0026 1.5px, transparent 1.5px),
        #0A0A0F;
    background-size: 12px 12px;
}

.collage-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Collage rectangles -- positioned absolutely, slight rotations */
.collage-rect {
    position: absolute;
    border: 2px solid;
    background: transparent;
    overflow: hidden;
}

/* Halftone overlays on rectangles */
.halftone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #4A4A5A4D 1px, transparent 1px);
    background-size: 8px 8px;
    mix-blend-mode: multiply;
}

.halftone-overlay.cyan-dots {
    background: radial-gradient(circle, #00F0FF26 1.5px, transparent 1.5px);
    background-size: 10px 10px;
}

.halftone-overlay.green-dots {
    background: radial-gradient(circle, #39FF1426 1.5px, transparent 1.5px);
    background-size: 10px 10px;
}

.halftone-overlay.yellow-dots {
    background: radial-gradient(circle, #F5FF0026 1.5px, transparent 1.5px);
    background-size: 10px 10px;
}

/* Neon fill variations -- solid neon backgrounds with glow */
.neon-fill-pink {
    background: #FF2D7B;
    border: 2px solid #FF2D7B;
    box-shadow: 0 0 20px #FF2D7B40, 0 0 60px #FF2D7B20;
}

.neon-fill-cyan {
    background: #00F0FF;
    border: 2px solid #00F0FF;
    box-shadow: 0 0 20px #00F0FF40, 0 0 60px #00F0FF20;
}

.neon-fill-yellow {
    background: #F5FF00;
    border: 2px solid #F5FF00;
    box-shadow: 0 0 20px #F5FF0040, 0 0 60px #F5FF0020;
}

/* Large Ben-Day overlay on neon fills */
.benday-overlay-large {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #00000040 3px, transparent 3px);
    background-size: 24px 24px;
    mix-blend-mode: multiply;
}

/* Circuit SVG in rectangles */
.rect-circuit {
    width: 100%;
    height: 100%;
}

.trace-anim {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}

.trace-anim.animate {
    animation: trace-reveal 1.2s ease-out forwards;
}

/* Collage text blocks */
.collage-text-block {
    position: absolute;
}

.collage-headline {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(3rem, 8vw, 9rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 4px 4px 0 #000000;
}

.pink-glow {
    color: #FF2D7B;
    text-shadow: 4px 4px 0 #000000, 0 0 20px #FF2D7B40, 0 0 60px #FF2D7B20;
}

.cyan-glow {
    color: #00F0FF;
    text-shadow: 4px 4px 0 #000000, 0 0 20px #00F0FF40, 0 0 60px #00F0FF20;
}

.yellow-glow {
    color: #F5FF00;
    text-shadow: 4px 4px 0 #000000, 0 0 20px #F5FF0040, 0 0 60px #F5FF0020;
}

.collage-body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw + 0.4rem, 1.35rem);
    line-height: 1.65;
    color: #FFFFFF;
    max-width: 38ch;
    text-shadow: 0 0 10px #00000080;
}

.collage-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #39FF14;
    text-shadow: 0 0 10px #39FF1440;
}

/* IC Chip frames */
.ic-chip-frame {
    position: absolute;
}

.ic-svg {
    width: 100%;
    height: 100%;
}

.ic-outline {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.ic-outline.animate {
    animation: ic-poweron 1.5s ease-out forwards;
}

/* Speech bubble inline (in collage panels) */
.speech-bubble-inline {
    position: absolute;
    background: #F5FF00E6;
    border: 3px solid #000000;
    border-radius: 18px;
    padding: 10px 22px;
    display: inline-block;
}

.speech-bubble-inline:hover {
    animation: shake-error 0.3s ease-in-out;
}

.speech-text-sm {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(1rem, 2vw, 1.8rem);
    color: #000000;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Stagger entry for collage elements -- start hidden */
.collage-text-block,
.collage-rect,
.ic-chip-frame,
.speech-bubble-inline {
    opacity: 0;
    transition: none;
}

/* Visible state -- stagger-in animation with variable delays */
.collage-text-block.visible,
.collage-rect.visible,
.ic-chip-frame.visible,
.speech-bubble-inline.visible {
    opacity: 1;
    animation: stagger-in 0.4s ease-out forwards;
}

/* Stagger delays for collage elements (50ms intervals) */
.collage-rect.visible:nth-child(1) { animation-delay: 0ms; }
.collage-rect.visible:nth-child(2) { animation-delay: 50ms; }
.collage-rect.visible:nth-child(3) { animation-delay: 100ms; }
.collage-rect.visible:nth-child(4) { animation-delay: 150ms; }
.collage-rect.visible:nth-child(5) { animation-delay: 200ms; }
.collage-rect.visible:nth-child(6) { animation-delay: 250ms; }
.collage-rect.visible:nth-child(7) { animation-delay: 300ms; }
.collage-rect.visible:nth-child(8) { animation-delay: 350ms; }

/* Section shake on scroll entry */
.collage-section.shake-enter {
    animation: section-shake-enter 0.2s ease-in-out;
}

/* ============================================================
   SECTION 6: FOOTPRINT TRAIL
   ============================================================ */

.trail-section {
    background: #0A0A0F;
    height: 100vh;
    position: relative;
}

/* Footprint shoe-sole clip-path */
.footprint-shape {
    position: absolute;
    width: 15vw;
    height: 25vh;
    min-width: 100px;
    min-height: 140px;
    clip-path: polygon(
        30% 0%,
        70% 0%,
        80% 5%,
        85% 12%,
        83% 20%,
        75% 25%,
        80% 35%,
        85% 45%,
        88% 55%,
        87% 65%,
        82% 75%,
        75% 85%,
        65% 92%,
        50% 100%,
        35% 92%,
        25% 85%,
        18% 75%,
        13% 65%,
        12% 55%,
        15% 45%,
        20% 35%,
        25% 25%,
        17% 20%,
        15% 12%,
        20% 5%
    );
    overflow: hidden;
    opacity: 0;
}

.footprint-shape.visible {
    animation: bounce-enter 0.5s ease-out forwards;
}

/* Alternating footprint colors: pink/cyan and yellow/green */
.fp-1, .fp-3, .fp-5, .fp-7 {
    background: #FF2D7B;
    box-shadow: 0 0 20px #FF2D7B40, 0 0 60px #FF2D7B20;
}

.fp-2, .fp-4, .fp-6, .fp-8 {
    background: #F5FF00;
    box-shadow: 0 0 20px #F5FF0040, 0 0 60px #F5FF0020;
}

.fp-circuit {
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

/* Trail connector */
.trail-connector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ============================================================
   SECTION 7: TERMINAL PULSE (Closing)
   ============================================================ */

.terminal-section {
    background: #0A0A0F;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.terminal-content {
    text-align: center;
    position: relative;
}

.terminal-line-accent {
    width: 120px;
    height: 1px;
    background: #39FF14;
    margin: 0 auto 40px;
    transform: scaleX(0);
    transform-origin: center;
    box-shadow: 0 0 10px #39FF1440;
}

.terminal-line-accent.visible {
    animation: terminal-line-grow 0.8s ease-out forwards;
}

.terminal-cursor-block {
    margin-bottom: 20px;
}

.terminal-cursor {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #39FF14;
    text-shadow: 0 0 20px #39FF1440, 0 0 60px #39FF1420;
    animation: cursor-blink 1s step-end infinite;
}

.terminal-question {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: #FFFFFF;
    letter-spacing: 0.05em;
    max-width: 40ch;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1s ease-out;
}

.terminal-question.visible {
    opacity: 1;
}

.terminal-trace {
    margin-top: 40px;
}

.terminal-trace-svg {
    width: 200px;
    height: 2px;
}

/* ============================================================
   SCREEN TEAR GLITCH STRIPS (reusable)
   ============================================================ */

.screen-tear {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: #FF2D7B;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
}

.screen-tear.flash {
    animation: glitch-flash 0.25s ease-out forwards;
}

/* ============================================================
   NEON GLOW UTILITIES
   ============================================================ */

.glow-pink {
    box-shadow: 0 0 20px #FF2D7B40, 0 0 60px #FF2D7B20;
}

.glow-cyan {
    box-shadow: 0 0 20px #00F0FF40, 0 0 60px #00F0FF20;
}

.glow-yellow {
    box-shadow: 0 0 20px #F5FF0040, 0 0 60px #F5FF0020;
}

.glow-green {
    box-shadow: 0 0 20px #39FF1440, 0 0 60px #39FF1420;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    .footprint-shape {
        width: 22vw;
        height: 20vh;
    }

    .collage-headline {
        font-size: clamp(2rem, 10vw, 5rem);
    }

    .speech-bubble {
        bottom: 15%;
        right: 5%;
    }

    .ticker-word {
        font-size: 1.1rem;
    }

    .collage-body {
        max-width: 28ch;
        font-size: clamp(0.85rem, 1vw + 0.3rem, 1.1rem);
    }

    .ic-chip-frame {
        display: none;
    }

    .collage-rect.rect-extra-1,
    .collage-rect.rect-extra-2,
    .collage-rect.rect-extra-3,
    .collage-rect.rect-extra-4,
    .collage-rect.rect-extra-5,
    .collage-rect.rect-extra-6,
    .collage-rect.rect-extra-7,
    .collage-rect.rect-extra-8,
    .collage-rect.rect-extra-9 {
        display: none;
    }
}

@media (max-width: 480px) {
    .headline-impact {
        font-size: clamp(3rem, 15vw, 8rem);
    }

    .footprint-shape {
        width: 28vw;
        height: 18vh;
        min-width: 80px;
        min-height: 100px;
    }

    .ticker-word {
        font-size: 0.9rem;
        gap: 0.8rem;
    }

    .collage-body {
        max-width: 22ch;
    }
}