/* ============================================
   infra.limited — Ethereal Blue Infrastructure
   Bento-Box Grid / Dopamine Infrastructure
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --deep-foundation: #1B2838;
    --module-surface: #1E3A4F;
    --frost-white: #E8F0F5;
    --pale-azure: #7EB8DA;
    --amber-signal: #E8A44A;
    --soft-lavender: #9B8EC4;
    --ethereal-cyan: #5BC0BE;
    --deep-cerulean: #2A6496;
    --celestial-blue: #A8D5E2;
    --graphite-veil: #2C3E50;

    --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --bento-gap: 12px;

    /* Animatable gradient-mesh positions */
    --mesh-x1: 20%;
    --mesh-y1: 30%;
    --mesh-x2: 70%;
    --mesh-y2: 60%;
    --mesh-x3: 50%;
    --mesh-y3: 80%;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--deep-foundation);
    color: var(--frost-white);
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Typography --- */
.hero-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw + 0.5rem, 3.8rem);
    letter-spacing: -0.02em;
    color: var(--frost-white);
    line-height: 1.1;
}

.hero-subtitle {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: clamp(0.9rem, 1.2vw + 0.2rem, 1.1rem);
    color: var(--pale-azure);
    margin-top: 1rem;
}

.section-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw + 0.4rem, 3rem);
    letter-spacing: -0.02em;
    color: var(--frost-white);
    line-height: 1.15;
}

.module-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw + 0.3rem, 1.8rem);
    letter-spacing: 0.01em;
    color: var(--frost-white);
    line-height: 1.2;
}

.module-body,
.section-body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw + 0.2rem, 1.1rem);
    color: var(--frost-white);
    line-height: 1.65;
    margin-top: 0.75rem;
    opacity: 0.85;
}

.mono-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    letter-spacing: 0.06em;
    color: var(--pale-azure);
    display: block;
    margin-bottom: 0.5rem;
}

.ticker-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    letter-spacing: 0.06em;
    color: var(--pale-azure);
    white-space: nowrap;
    display: inline-block;
}

.terminal-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw + 0.4rem, 2.8rem);
    letter-spacing: -0.02em;
    color: var(--frost-white);
    text-align: center;
}

/* --- Bento Viewport --- */
.bento-viewport {
    min-height: 100vh;
    padding: var(--bento-gap);
    display: flex;
    align-items: stretch;
}

/* --- Bento Grids --- */
.bento-grid {
    display: grid;
    gap: var(--bento-gap);
    width: 100%;
    grid-template-columns: repeat(12, 1fr);
}

/* Opening Bento Grid */
.grid-opening {
    grid-template-rows: 420px 340px 120px;
    grid-template-areas:
        "hero hero hero hero hero hero hero hero icon icon icon icon"
        "conA conA conA conA conA conB conB conB conB conB conB conB"
        "tick tick tick tick tick tick tick tick tick tick tick tick";
}

.module-hero { grid-area: hero; }
.module-icon-rotate { grid-area: icon; }
.module-concept-a { grid-area: conA; }
.module-concept-b { grid-area: conB; }
.module-ticker { grid-area: tick; }

/* Constraint Bento Grid */
.grid-constraint {
    grid-template-rows: 340px 420px 120px;
    grid-template-areas:
        "stn stn stn cons cons cons cons cons cons cons cons cons"
        "cdet cdet cdet cdet cdet cdet stg stg stg stg stg stg"
        "rib2 rib2 rib2 rib2 rib2 rib2 rib2 rib2 rib2 rib2 rib2 rib2";
}

.module-stamp-node { grid-area: stn; }
.module-constraint { grid-area: cons; }
.module-constraint-detail { grid-area: cdet; }
.module-stamp-gateway { grid-area: stg; }
.module-ribbon-2 { grid-area: rib2; }

/* Redundancy Bento Grid */
.grid-redundancy {
    grid-template-rows: 340px 420px;
    grid-template-areas:
        "rdA rdA rdA rdA rdA rdP rdP rdP rdP rdP rdP rdP"
        "stC stC stC rdB rdB rdB rdB rdB rdB stBr stBr stBr";
}

.module-redundancy-a { grid-area: rdA; }
.module-redundancy { grid-area: rdP; }
.module-stamp-conn { grid-area: stC; }
.module-redundancy-b { grid-area: rdB; }
.module-stamp-broadcast { grid-area: stBr; }

/* Degradation Bento Grid */
.grid-degradation {
    grid-template-rows: 280px 420px 120px;
    grid-template-areas:
        "stF stF stF dgA dgA dgA dgA dgA dgA dgA dgA dgA"
        "dgP dgP dgP dgP dgP dgP dgP dgP dgB dgB dgB dgB"
        "rib3 rib3 rib3 rib3 rib3 rib3 rib3 rib3 rib3 rib3 rib3 rib3";
}

.module-stamp-fade { grid-area: stF; }
.module-degrade-a { grid-area: dgA; }
.module-degradation { grid-area: dgP; }
.module-degrade-b { grid-area: dgB; }
.module-ribbon-3 { grid-area: rib3; }

/* --- Module Base --- */
.module {
    position: relative;
    background-color: var(--module-surface);
    border: 1px solid var(--graphite-veil);
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 800ms var(--elastic), transform 800ms var(--elastic);
}

.module.visible {
    opacity: 1;
    transform: translateY(0);
}

.module-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* --- Panoramic Modules --- */
.panoramic-module .module-content {
    justify-content: center;
    padding: 2.5rem 3rem;
}

/* --- Square Modules --- */
.square-module .module-content {
    justify-content: flex-end;
    padding: 1.5rem 2rem;
}

/* --- Stamp Modules --- */
.stamp-module {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stamp-module .module-content {
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* --- Ribbon Modules --- */
.ribbon-module {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
}

.ticker-slow .ticker-track,
.ticker-slow.ticker-track {
    animation-duration: 40s;
}

.ticker-reverse .ticker-track,
.ticker-reverse.ticker-track {
    animation-direction: reverse;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Icon Container --- */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.geo-icon {
    display: block;
}

/* --- Gradient Mesh Backgrounds --- */
.gradient-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.mesh-1 {
    background:
        radial-gradient(ellipse at var(--mesh-x1) var(--mesh-y1), rgba(42,100,150,0.5) 0%, transparent 50%),
        radial-gradient(ellipse at var(--mesh-x2) var(--mesh-y2), rgba(155,142,196,0.25) 0%, transparent 45%),
        radial-gradient(ellipse at var(--mesh-x3) var(--mesh-y3), rgba(91,192,190,0.19) 0%, transparent 55%),
        linear-gradient(170deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-2 {
    background:
        radial-gradient(ellipse at 60% 40%, rgba(42,100,150,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(155,142,196,0.2) 0%, transparent 50%),
        linear-gradient(200deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-3 {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(91,192,190,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(42,100,150,0.3) 0%, transparent 55%),
        linear-gradient(150deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-4 {
    background:
        radial-gradient(ellipse at 40% 50%, rgba(155,142,196,0.3) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 30%, rgba(232,164,74,0.12) 0%, transparent 50%),
        linear-gradient(190deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-5 {
    background:
        radial-gradient(ellipse at 75% 25%, rgba(42,100,150,0.55) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 65%, rgba(155,142,196,0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(91,192,190,0.15) 0%, transparent 55%),
        linear-gradient(160deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-6 {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(91,192,190,0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(42,100,150,0.3) 0%, transparent 50%),
        linear-gradient(180deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-7 {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(232,164,74,0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 70%, rgba(42,100,150,0.4) 0%, transparent 55%),
        linear-gradient(170deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-8 {
    background:
        radial-gradient(ellipse at 30% 35%, rgba(42,100,150,0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 65% 55%, rgba(155,142,196,0.25) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 80%, rgba(91,192,190,0.2) 0%, transparent 55%),
        linear-gradient(175deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-9 {
    background:
        radial-gradient(ellipse at 60% 35%, rgba(42,100,150,0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 75%, rgba(155,142,196,0.2) 0%, transparent 50%),
        linear-gradient(165deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-10 {
    background:
        radial-gradient(ellipse at 45% 25%, rgba(232,164,74,0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 65%, rgba(42,100,150,0.3) 0%, transparent 50%),
        linear-gradient(185deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-11 {
    background:
        radial-gradient(ellipse at 55% 40%, rgba(42,100,150,0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 70%, rgba(155,142,196,0.3) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 20%, rgba(91,192,190,0.18) 0%, transparent 50%),
        linear-gradient(170deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-12 {
    background:
        radial-gradient(ellipse at 35% 55%, rgba(155,142,196,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 40%, rgba(232,164,74,0.12) 0%, transparent 45%),
        linear-gradient(195deg, #1B2838 0%, #1E3A4F 100%);
}

.mesh-terminal {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(42,100,150,0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(232,164,74,0.2) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(155,142,196,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(91,192,190,0.15) 0%, transparent 55%),
        linear-gradient(170deg, #1B2838 0%, #1E3A4F 100%);
}

/* --- Pattern Overlays --- */
.pattern-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.crosshatch-overlay {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cline x1='0' y1='0' x2='12' y2='12' stroke='%237EB8DA' stroke-width='0.5'/%3E%3Cline x1='12' y1='0' x2='0' y2='12' stroke='%237EB8DA' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
    opacity: 0.06;
}

.dotmatrix-overlay {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23E8A44A'/%3E%3C/svg%3E") repeat;
    opacity: 0.08;
}

.wave-overlay {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%239B8EC4' stroke-width='0.8'/%3E%3C/svg%3E") repeat;
    opacity: 0.05;
}

.circuit-overlay {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 16 H12 V4 H20 V16 H32' fill='none' stroke='%235BC0BE' stroke-width='0.6'/%3E%3Cpath d='M16 0 V8 H28 V24 H16 V32' fill='none' stroke='%235BC0BE' stroke-width='0.6'/%3E%3C/svg%3E") repeat;
    opacity: 0.04;
}

.wave-terminal {
    opacity: 0.12;
}

/* --- Dot-Matrix Pulse Animation --- */
.dot-pulse {
    animation: dotPulse 8s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.12; }
}

/* --- Rotating Icon --- */
.rotating-icon {
    animation: iconRotate 30s linear infinite;
}

@keyframes iconRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Pulse Icon (scale) --- */
.pulse-icon {
    animation: iconPulse 6s var(--elastic) infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1.05); }
}

/* --- Drift Icon (translate) --- */
.drift-icon {
    animation: iconDrift 4s var(--elastic) infinite;
}

@keyframes iconDrift {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

/* --- Gradient Mesh Drift Animation --- */
@keyframes meshDrift {
    0% {
        --mesh-x1: 20%;
        --mesh-y1: 30%;
        --mesh-x2: 70%;
        --mesh-y2: 60%;
    }
    33% {
        --mesh-x1: 25%;
        --mesh-y1: 35%;
        --mesh-x2: 65%;
        --mesh-y2: 55%;
    }
    66% {
        --mesh-x1: 18%;
        --mesh-y1: 28%;
        --mesh-x2: 75%;
        --mesh-y2: 65%;
    }
    100% {
        --mesh-x1: 20%;
        --mesh-y1: 30%;
        --mesh-x2: 70%;
        --mesh-y2: 60%;
    }
}

/* --- Terminal Viewport --- */
.viewport-terminal {
    min-height: 100vh;
    padding: var(--bento-gap);
    display: flex;
    align-items: stretch;
}

.terminal-module {
    position: relative;
    width: 100%;
    background-color: var(--module-surface);
    border: 1px solid var(--graphite-veil);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 800ms var(--elastic), transform 800ms var(--elastic);
}

.terminal-module.visible {
    opacity: 1;
    transform: translateY(0);
}

.terminal-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    text-align: center;
}

/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
    :root {
        --bento-gap: 10px;
    }

    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-opening {
        grid-template-rows: 340px 280px 280px 100px;
        grid-template-areas:
            "hero hero hero hero hero hero"
            "icon icon icon conA conA conA"
            "conB conB conB conB conB conB"
            "tick tick tick tick tick tick";
    }

    .grid-constraint {
        grid-template-rows: 240px 340px 280px 100px;
        grid-template-areas:
            "stn stn stn stn stn stn"
            "cons cons cons cons cons cons"
            "cdet cdet cdet stg stg stg"
            "rib2 rib2 rib2 rib2 rib2 rib2";
    }

    .grid-redundancy {
        grid-template-rows: 280px 340px 280px 240px;
        grid-template-areas:
            "rdA rdA rdA rdA rdA rdA"
            "rdP rdP rdP rdP rdP rdP"
            "stC stC stC rdB rdB rdB"
            "stBr stBr stBr stBr stBr stBr";
    }

    .grid-degradation {
        grid-template-rows: 240px 280px 340px 280px 100px;
        grid-template-areas:
            "stF stF stF stF stF stF"
            "dgA dgA dgA dgA dgA dgA"
            "dgP dgP dgP dgP dgP dgP"
            "dgB dgB dgB dgB dgB dgB"
            "rib3 rib3 rib3 rib3 rib3 rib3";
    }

    .panoramic-module .module-content {
        padding: 2rem;
    }
}

/* --- Responsive: Mobile (480px) --- */
@media (max-width: 480px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .grid-opening {
        grid-template-rows: 300px 240px 240px 180px 100px;
        grid-template-areas:
            "hero"
            "icon"
            "conA"
            "conB"
            "tick";
    }

    .grid-constraint {
        grid-template-rows: 180px 300px 240px 180px 100px;
        grid-template-areas:
            "stn"
            "cons"
            "cdet"
            "stg"
            "rib2";
    }

    .grid-redundancy {
        grid-template-rows: 240px 300px 180px 240px 180px;
        grid-template-areas:
            "rdA"
            "rdP"
            "stC"
            "rdB"
            "stBr";
    }

    .grid-degradation {
        grid-template-rows: 180px 240px 300px 240px 100px;
        grid-template-areas:
            "stF"
            "dgA"
            "dgP"
            "dgB"
            "rib3";
    }

    /* Alternating indent for bento character on mobile */
    .module:nth-child(even) {
        margin-left: 16px;
    }

    .panoramic-module .module-content {
        padding: 1.5rem;
    }

    .square-module .module-content {
        padding: 1.25rem 1.5rem;
    }
}