/* ============================================
   bada.coffee — Wabi-Sabi + Neon Electric
   Slide-reveal transitions via IntersectionObserver.
   Duration: 600ms. Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
   ============================================ */

/* CSS Custom Properties */
:root {
    --bg: #0D0D0F;
    --surface: #1A1A1F;
    --neon-cyan: #00F0FF;
    --neon-magenta: #FF2D6B;
    --neon-chartreuse: #B8FF00;
    --warm-neutral: #C4A882;
    --muted-clay: #7A6B5D;
    --crack-line: #3A3A42;

    --font-body: 'Commissioner', sans-serif;
    --font-display: 'Noto Serif Display', serif;
    --font-mono: 'Share Tech Mono', monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--warm-neutral);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* ============================================
   Grain Overlay
   Full-viewport CSS noise grain overlay at 4% opacity.
   Fixed-position so it doesn't scroll with content.
   ============================================ */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ============================================
   Navigation Logo
   Single fixed element in top-left. Rough logotype.
   ============================================ */
#nav-logo {
    position: fixed;
    top: 28px;
    left: 32px;
    z-index: 100;
}

#nav-logo .logo-text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--warm-neutral);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: text-shadow 0.3s ease, font-variation-settings 0.3s ease;
}

#nav-logo .logo-text:hover {
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 0 40px rgba(0, 240, 255, 0.2);
}

/* ============================================
   Section Markers (Right Side)
   Vertical text labels like VHS spine labels.
   Fade in/out as user scrolls through corresponding pour.
   ============================================ */
#section-markers {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.marker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-clay);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}

.marker.active {
    opacity: 1;
    color: var(--neon-cyan);
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

/* ============================================
   Main Scroll Container
   scroll-snap-type: y proximity for pour-by-pour pacing
   ============================================ */
#main-scroll {
    scroll-snap-type: y proximity;
    overflow-y: auto;
    height: 100vh;
}

/* ============================================
   Pour Sections
   Each pour is min-height 100vh with snap alignment.
   ============================================ */
.pour {
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pour-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    padding: 0 5%;
}

.hand-drawn-rule {
    width: 100%;
    height: 8px;
}

/* ============================================
   POUR 1: Origin (Hero)
   Full-viewport. Center-screen "bada" in Noto Serif Display.
   ".coffee" in Share Tech Mono with cyan glow.
   Circuit traces draw outward from the period after 1.5s.
   ============================================ */
.pour-origin-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.origin-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 10rem);
    color: var(--warm-neutral);
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-align: center;
}

.origin-subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 0 40px rgba(0, 240, 255, 0.3);
    margin-top: 12px;
    display: block;
    text-align: center;
}

/* Circuit trace SVGs */
.circuit-traces {
    position: absolute;
    width: 80%;
    height: 50%;
    bottom: 10%;
    left: 10%;
    pointer-events: none;
}

.trace {
    fill: none;
    stroke: var(--crack-line);
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.traces-animated .trace {
    animation: drawTrace 4s ease-out forwards;
    filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.3));
}

.traces-animated .trace-left-2 { animation-delay: 0.3s; }
.traces-animated .trace-right-1 { animation-delay: 0.5s; }
.traces-animated .trace-right-2 { animation-delay: 0.8s; }
.traces-animated .trace-down-1 { animation-delay: 1.0s; }
.traces-animated .trace-branch-left { animation-delay: 2.0s; }
.traces-animated .trace-branch-right { animation-delay: 2.2s; }

@keyframes drawTrace {
    to {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   F-Pattern Layout
   12-column grid conceptualized as 7:5 split.
   Left = primary content, Right = margin notes.
   ============================================ */
.f-layout {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
    padding: 60px 5% 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    align-items: start;
}

.f-left {
    padding-right: 40px;
}

.f-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 40px;
    gap: 40px;
}

.section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-clay);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* ============================================
   POUR 2: Process
   F-pattern. Left: vintage photo with kintsugi cracks.
   Below image: body text with slide-reveal from left.
   ============================================ */
.vintage-photo-container {
    margin-bottom: 40px;
}

.vintage-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 2px;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--surface);
    position: relative;
}

/* Create a textured photo-like appearance with CSS gradients */
.photo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(122, 107, 93, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(58, 58, 66, 0.6) 0%, transparent 50%),
        linear-gradient(180deg, rgba(196, 168, 130, 0.15) 0%, transparent 40%, rgba(13, 13, 15, 0.5) 100%);
}

/* Vignette effect -- suggests a vintage lens */
.photo-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(13, 13, 15, 0.7) 100%);
}

/* Process photo: evokes hands grinding coffee */
.process-photo .photo-placeholder {
    background:
        radial-gradient(circle at 45% 45%, var(--muted-clay) 0%, transparent 35%),
        radial-gradient(circle at 50% 55%, rgba(196, 168, 130, 0.3) 0%, transparent 25%),
        radial-gradient(circle at 55% 40%, rgba(122, 107, 93, 0.5) 0%, transparent 30%),
        var(--surface);
}

/* Kintsugi overlay -- neon cracks inspired by gold repair */
.kintsugi-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.kintsugi-crack {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 1.5;
    opacity: 0.7;
    animation: kintsugiGlow 3s ease-in-out infinite;
}

@keyframes kintsugiGlow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
        opacity: 0.5;
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.7));
        opacity: 0.9;
    }
}

.process-text {
    margin-top: 32px;
}

.process-text p {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--warm-neutral);
}

/* ============================================
   Slide Reveal Animations
   Horizontal slide-reveals triggered once on viewport entry.
   Duration: 600ms. Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94).
   ============================================ */
.slide-reveal {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-reveal.revealed {
    opacity: 1;
    transform: translateX(0);
}

.slide-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   POUR 3: Ritual
   Full-width band of three side-by-side vintage photos
   separated by 2px cyan neon gaps. Pull quote below.
   Signal waveform runs beneath the quote.
   ============================================ */
.pour-ritual-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 5%;
    min-height: 100vh;
}

.film-strip {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 40vh;
    margin-bottom: 60px;
}

.film-frame {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.film-frame .vintage-photo {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.film-frame .photo-placeholder {
    width: 100%;
    height: 100%;
}

/* Cyan neon gaps between film frames -- light leaking between frames */
.film-gap {
    width: 2px;
    background-color: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.6), 0 0 20px rgba(0, 240, 255, 0.3);
    flex-shrink: 0;
}

/* Different photo treatments for each frame */
.photo-cup .photo-placeholder,
.photo-cup {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(196, 168, 130, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 50% 60%, rgba(122, 107, 93, 0.3) 0%, transparent 30%),
        var(--surface);
}

.photo-hand {
    background:
        radial-gradient(ellipse at 40% 50%, rgba(196, 168, 130, 0.35) 0%, transparent 35%),
        radial-gradient(circle at 60% 40%, rgba(122, 107, 93, 0.4) 0%, transparent 30%),
        var(--surface);
}

.photo-machine {
    background:
        radial-gradient(ellipse at 55% 45%, rgba(58, 58, 66, 0.6) 0%, transparent 40%),
        radial-gradient(circle at 45% 55%, rgba(122, 107, 93, 0.3) 0%, transparent 30%),
        var(--surface);
}

/* Duotone color washes over photos */
.photo-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wash-cyan {
    background-color: rgba(0, 240, 255, 0.08);
}

.wash-magenta {
    background-color: rgba(255, 45, 107, 0.06);
}

/* Pull quote: Noto Serif Display at weight 900, large scale */
.pull-quote {
    max-width: 900px;
    text-align: center;
    margin-bottom: 50px;
}

.pull-quote p {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--warm-neutral);
}

/* Signal Waveform -- horizontal sine wave with pulsing cyan node */
.signal-waveform {
    width: 100%;
    max-width: 1200px;
    height: 60px;
}

.waveform-pour2 {
    padding: 0 5%;
    opacity: 0.4;
}

.waveform-line {
    fill: none;
    stroke: var(--crack-line);
    stroke-width: 1.5;
}

.waveform-node {
    fill: var(--neon-cyan);
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.8));
    animation: pulseNode 4s linear infinite;
}

@keyframes pulseNode {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ============================================
   POUR 4: Signal
   Sparse. Left: text. Right: circuit board animation.
   No scroll effects -- stillness as a design choice.
   ============================================ */
.pour-signal-content {
    min-height: 100vh;
    align-items: center;
}

.signal-text p {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.65;
}

/* Circuit Board Animation -- solder joints light up sequentially */
.circuit-board {
    width: 120px;
    height: 120px;
}

.circuit-board-svg {
    width: 100%;
    height: 100%;
}

.pcb-trace {
    stroke: var(--crack-line);
    stroke-width: 1.5;
    fill: none;
}

.solder-joint {
    fill: var(--crack-line);
    transition: fill 0.4s ease;
}

/* Sequential lighting: each joint illuminates for 400ms then fades. Loop every 6s. */
.joint-1 { animation: solderLight 6s ease-in-out infinite; }
.joint-2 { animation: solderLightMagenta 6s ease-in-out 0.857s infinite; }
.joint-3 { animation: solderLight 6s ease-in-out 1.714s infinite; }
.joint-4 { animation: solderLight 6s ease-in-out 2.571s infinite; }
.joint-5 { animation: solderLightChartreuse 6s ease-in-out 3.428s infinite; }
.joint-6 { animation: solderLight 6s ease-in-out 4.285s infinite; }
.joint-7 { animation: solderLight 6s ease-in-out 5.142s infinite; }

@keyframes solderLight {
    0%, 100% {
        fill: var(--crack-line);
        filter: none;
    }
    5% {
        fill: var(--neon-cyan);
        filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8));
    }
    12% {
        fill: var(--crack-line);
        filter: none;
    }
}

/* Magenta variant (#FF2D6B) */
@keyframes solderLightMagenta {
    0%, 100% {
        fill: var(--crack-line);
        filter: none;
    }
    5% {
        fill: var(--neon-magenta);
        filter: drop-shadow(0 0 8px rgba(255, 45, 107, 0.8));
    }
    12% {
        fill: var(--crack-line);
        filter: none;
    }
}

/* Chartreuse variant (#B8FF00) */
@keyframes solderLightChartreuse {
    0%, 100% {
        fill: var(--crack-line);
        filter: none;
    }
    5% {
        fill: var(--neon-chartreuse);
        filter: drop-shadow(0 0 8px rgba(184, 255, 0, 0.8));
    }
    12% {
        fill: var(--crack-line);
        filter: none;
    }
}

/* ============================================
   POUR 5: Receive
   Center-aligned. "Send a signal" prompt with
   terminal-style email input. Kintsugi crack network
   converges from viewport edges toward the input.
   ============================================ */
#pour-receive {
    position: relative;
    overflow: hidden;
}

.pour-receive-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.circuit-traces-receive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.trace-converge {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
}

.traces-receive-animated .trace-converge {
    animation: drawTraceConverge 3s ease-out forwards;
}

.traces-receive-animated .trace-c2 { animation-delay: 0.3s; }
.traces-receive-animated .trace-c3 { animation-delay: 0.6s; }
.traces-receive-animated .trace-c4 { animation-delay: 0.9s; }
.traces-receive-animated .trace-c5 { animation-delay: 1.2s; }
.traces-receive-animated .trace-c6 { animation-delay: 1.5s; }

@keyframes drawTraceConverge {
    to {
        stroke-dashoffset: 0;
    }
}

.receive-inner {
    position: relative;
    z-index: 10;
    text-align: center;
}

.receive-prompt {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    margin-bottom: 32px;
}

.terminal-input-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--crack-line);
    padding-bottom: 8px;
    min-width: 320px;
}

.terminal-prefix {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--muted-clay);
    margin-right: 8px;
}

.terminal-input {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--warm-neutral);
    background: none;
    border: none;
    outline: none;
    width: 260px;
    caret-color: transparent;
}

.terminal-input::placeholder {
    color: var(--muted-clay);
    opacity: 0.5;
}

/* Blinking chartreuse cursor */
.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: var(--neon-chartreuse);
    animation: cursorBlink 1s step-end infinite;
    margin-left: 2px;
    vertical-align: middle;
}

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

.receive-note {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted-clay);
    margin-top: 24px;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ============================================
   QR Code Fragment Decorative Elements
   Small pixelated square patterns as decorative
   corner elements on imagery.
   ============================================ */
.vintage-photo::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    z-index: 5;
    background:
        linear-gradient(90deg, var(--crack-line) 33.3%, transparent 33.3%, transparent 66.6%, var(--crack-line) 66.6%) 0 0 / 8px 8px no-repeat,
        linear-gradient(90deg, var(--crack-line) 33.3%, transparent 33.3%, transparent 66.6%, var(--crack-line) 66.6%) 0 16px / 8px 8px no-repeat,
        linear-gradient(90deg, transparent 33.3%, var(--crack-line) 33.3%, var(--crack-line) 66.6%, transparent 66.6%) 0 8px / 8px 8px no-repeat,
        linear-gradient(90deg, var(--crack-line) 100%, transparent 0) 16px 0 / 8px 8px no-repeat,
        linear-gradient(90deg, var(--crack-line) 100%, transparent 0) 16px 16px / 8px 8px no-repeat;
    opacity: 0.4;
}

/* ============================================
   Light leak effect on film frames
   Warm amber horizontal bands at top/bottom edges
   ============================================ */
.film-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(196, 168, 130, 0.08) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   Circuit trace glow along content block edges
   Thin traces that "light up" on scroll past.
   ============================================ */
.f-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--crack-line) 20%, var(--crack-line) 80%, transparent 100%);
    opacity: 0.3;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .f-layout {
        grid-template-columns: 1fr;
        padding: 40px 5%;
    }

    .f-left {
        padding-right: 0;
    }

    .f-left::before {
        display: none;
    }

    .f-right {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
    }

    .section-label {
        writing-mode: horizontal-tb;
    }

    #section-markers {
        display: none;
    }

    .film-strip {
        flex-direction: column;
        height: auto;
    }

    .film-frame {
        height: 30vh;
    }

    .film-gap {
        width: 100%;
        height: 2px;
    }

    .terminal-input-wrap {
        min-width: 260px;
    }

    .terminal-input {
        width: 200px;
    }

    .origin-title {
        font-size: clamp(3rem, 15vw, 8rem);
    }

    .pull-quote p {
        font-size: clamp(1.5rem, 6vw, 3rem);
    }
}

@media (max-width: 480px) {
    #nav-logo {
        top: 16px;
        left: 16px;
    }

    .pour {
        min-height: 100svh;
    }

    .terminal-input-wrap {
        min-width: 220px;
    }

    .terminal-input {
        width: 160px;
    }
}