/* concurrengine.com - Styles */
/* Colors: #7bafd4, #1b2a4a, #e8edf3, #d4836b, #4a90d9, #f0f4f8, #e8a44a, #1a2332 */
/* Fonts: Nunito (headlines), Quicksand (body), Inconsolata (code) */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Quicksand', sans-serif;
    background: #1a2332;
    color: #e8edf3;
    overflow-x: hidden;
}

/* Band base */
.band {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4rem 2rem;
}

.band-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.headline {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    filter: blur(0px);
    transition: filter 0.8s ease;
}

.headline.blurred {
    filter: blur(4px);
}

.subtext {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.7;
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Band 1 - Single Thread */
.band-1 {
    background: linear-gradient(180deg, #1a2332 0%, #1b2a4a 100%);
}

.single-thread-svg {
    width: 100%;
    height: 100px;
    margin-top: 2rem;
}

.single-thread-svg .single {
    animation: dashMove 3s linear infinite;
}

@keyframes dashMove {
    to { stroke-dashoffset: -60; }
}

/* Band 2 - The Fork */
.band-2 {
    background: linear-gradient(180deg, #1b2a4a 0%, #1a2332 100%);
}

.fork-svg {
    width: 100%;
    height: 300px;
    margin-top: 2rem;
}

.fork-svg .fork-a,
.fork-svg .fork-b,
.fork-svg .fork-c {
    animation: dashMove 2.5s linear infinite;
}

.fork-svg .fork-b { animation-delay: -0.5s; }
.fork-svg .fork-c { animation-delay: -1s; }

/* Band 3 - The Weave */
.band-3 {
    background: #1b2a4a;
}

.weave-demo {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.weave-svg {
    width: 100%;
    max-width: 600px;
    height: 400px;
    opacity: 0.7;
    animation: weaveShimmer 4s ease-in-out infinite alternate;
}

@keyframes weaveShimmer {
    from { opacity: 0.5; }
    to { opacity: 0.9; }
}

/* Band 4 - The Lock */
.band-4 {
    background: linear-gradient(180deg, #1a2332 0%, #1b2a4a 50%, #1a2332 100%);
}

.lock-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.lock-gate {
    width: 120px;
    height: 120px;
    border: 4px solid #e8a44a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lock-bar {
    width: 60px;
    height: 6px;
    background: #e8a44a;
    border-radius: 3px;
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(0.3); opacity: 0.5; }
}

.waiting-threads {
    display: flex;
    gap: 1.5rem;
}

.thread-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7bafd4;
    animation: threadWait 1.5s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes threadWait {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-10px); opacity: 1; }
}

.code-snippet {
    font-family: 'Inconsolata', monospace;
    font-size: 1.1rem;
    color: #e8a44a;
    background: rgba(27, 42, 74, 0.8);
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    border: 1px solid rgba(123, 175, 212, 0.3);
    display: inline-block;
    margin-top: 1rem;
}

/* Band 5 - The Deadlock */
.band-5 {
    background: #1a2332;
}

.deadlock-visual {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.deadlock-ring {
    width: 250px;
    height: 250px;
    position: relative;
    border: 3px solid rgba(212, 131, 107, 0.4);
    border-radius: 50%;
    animation: deadlockSpin 8s linear infinite;
}

.deadlock-node {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #d4836b;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle)) translateX(125px) translateY(-50%);
    animation: nodePulse 2s ease-in-out infinite;
}

.deadlock-node:nth-child(2) { background: #e8a44a; animation-delay: 0.5s; }
.deadlock-node:nth-child(3) { background: #7bafd4; animation-delay: 1s; }
.deadlock-node:nth-child(4) { background: #4a90d9; animation-delay: 1.5s; }

@keyframes deadlockSpin {
    to { transform: rotate(360deg); }
}

@keyframes nodePulse {
    0%, 100% { transform: rotate(var(--angle)) translateX(125px) translateY(-50%) scale(1); }
    50% { transform: rotate(var(--angle)) translateX(125px) translateY(-50%) scale(1.3); }
}

/* Band 6 - Resolution */
.band-6 {
    background: linear-gradient(180deg, #1b2a4a 0%, #1a2332 100%);
}

.resolution-visual {
    margin: 2rem 0;
}

.resolution-svg {
    width: 100%;
    height: 200px;
}

.resolution-svg line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: drawLine 2s ease forwards;
}

.resolution-svg .resolve-b { animation-delay: 0.3s; }
.resolution-svg .resolve-c { animation-delay: 0.6s; }
.resolution-svg .resolve-out { animation-delay: 1s; }

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

.cta-area {
    margin-top: 3rem;
}

.cta-headline {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #7bafd4;
    letter-spacing: 0.04em;
}

.cta-sub {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    color: #e8edf3;
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* Weave patterns (background decoration) */
.weave-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(0deg, #7bafd4 0px, transparent 1px, transparent 30px),
        repeating-linear-gradient(90deg, #7bafd4 0px, transparent 1px, transparent 30px);
}

.weave-medium {
    opacity: 0.06;
    background-image:
        repeating-linear-gradient(45deg, #e8a44a 0px, transparent 1px, transparent 20px),
        repeating-linear-gradient(-45deg, #4a90d9 0px, transparent 1px, transparent 20px);
}

.weave-dense {
    opacity: 0.1;
    background-image:
        repeating-linear-gradient(0deg, #7bafd4 0px, transparent 1px, transparent 15px),
        repeating-linear-gradient(90deg, #e8a44a 0px, transparent 1px, transparent 15px),
        repeating-linear-gradient(45deg, #d4836b 0px, transparent 1px, transparent 20px);
}

/* Scroll-triggered blur-focus */
.band-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.band-content.visible {
    opacity: 1;
    transform: translateY(0);
}