/* ============================================
   archetype.works - Graffiti-Zen Design System
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --void-black: #0a0a0f;
    --deep-concrete: #12121a;
    --signal-magenta: #e930ff;
    --frequency-cyan: #00e5ff;
    --koan-chartreuse: #b8ff00;
    --muted-lavender: #6b6b7a;
    --concrete-trace: #3d3d52;
    --error-red: #ff2d55;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --grid-gap: 16px;
    --max-width: 1400px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--void-black);
    color: var(--muted-lavender);
    font-family: var(--font-body);
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================================
   SCAN LINES OVERLAY
   ============================================ */
.scan-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(255, 255, 255, 0.02) 1px,
        rgba(255, 255, 255, 0.02) 2px
    );
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   NOISE PATCHES
   ============================================ */
.noise-patch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: url(#noise-filter);
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   OPENING SEQUENCE
   ============================================ */
.opening {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--void-black);
    overflow: hidden;
}

.opening::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(255, 255, 255, 0.02) 1px,
        rgba(255, 255, 255, 0.02) 2px
    );
    pointer-events: none;
    z-index: 1;
}

.opening-content {
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.opening-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 8rem);
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--signal-magenta);
    text-shadow:
        0 0 7px #e930ff,
        0 0 20px #e930ff44,
        0 0 40px #e930ff22;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    line-height: 1.1;
}

.opening-title.visible {
    opacity: 1;
}

.opening-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    letter-spacing: 0.03em;
    line-height: 1.85;
    color: var(--muted-lavender);
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.opening-subtitle.visible {
    opacity: 1;
}

.opening-line {
    width: 1px;
    height: 0;
    background-color: var(--concrete-trace);
    margin-top: 2rem;
    transition: height 1s ease-out;
}

.opening-line.visible {
    height: 120px;
}

/* ============================================
   MAIN GRID SECTION
   ============================================ */
.main-grid {
    padding: 80px var(--grid-gap) 120px;
}

.grid-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: var(--grid-gap);
    grid-template-areas:
        "signal   signal   signal   signal   signal   signal   signal   void1    void1    void1    void1    accent1"
        "signal   signal   signal   signal   signal   signal   signal   void1    void1    void1    void1    accent1"
        "accent2  accent2  void-a   void-a   void-a   void-a   void-a  void-a   void-a   void-a   void-a   void-a"
        "accent2  accent2  void-a   void-a   void-a   void-a   void-a  void-a   void-a   void-a   void-a   void-a"
        "thr1     thr1     thr1     thr1     thr1     thr1     thr1    thr1     thr1     thr1     thr1     thr1"
        "void3    void3    void3    thresh-a thresh-a thresh-a thresh-a thresh-a thresh-a accent3  accent3  accent3"
        "void3    void3    void3    thresh-a thresh-a thresh-a thresh-a thresh-a thresh-a accent3  accent3  accent3"
        "echo     echo     echo     echo     echo     echo     echo    echo     void4    void4    void4    accent4"
        "echo     echo     echo     echo     echo     echo     echo    echo     void4    void4    void4    accent4"
        "thr2     thr2     thr2     thr2     thr2     thr2     thr2    thr2     thr2     thr2     thr2     thr2"
        "accent5  accent5  static   static   static   static   static  static   void5    void5    void5    void5"
        "accent5  accent5  static   static   static   static   static  static   void5    void5    void5    void5"
        "void6    void6    void6    form     form     form     form    form     form     form     form     form"
        "void6    void6    void6    form     form     form     form    form     form     form     form     form"
        "thr3     thr3     thr3     thr3     thr3     thr3     thr3    thr3     thr3     thr3     thr3     thr3"
        "accent6  accent6  accent6  drift    drift    drift    drift   drift    drift    void7    void7    void7"
        "accent6  accent6  accent6  drift    drift    drift    drift   drift    drift    void7    void7    void7";
}

/* Grid area assignments */
.module[data-area="signal"]         { grid-area: signal; }
.module[data-area="void1"]          { grid-area: void1; }
.module[data-area="accent1"]        { grid-area: accent1; }
.module[data-area="accent2"]        { grid-area: accent2; }
.module[data-area="void-arch"]      { grid-area: void-a; }
.module[data-area="threshold1"]     { grid-area: thr1; }
.module[data-area="void3"]          { grid-area: void3; }
.module[data-area="threshold-arch"] { grid-area: thresh-a; }
.module[data-area="accent3"]        { grid-area: accent3; }
.module[data-area="echo"]           { grid-area: echo; }
.module[data-area="void4"]          { grid-area: void4; }
.module[data-area="accent4"]        { grid-area: accent4; }
.module[data-area="threshold2"]     { grid-area: thr2; }
.module[data-area="accent5"]        { grid-area: accent5; }
.module[data-area="static"]         { grid-area: static; }
.module[data-area="void5"]          { grid-area: void5; }
.module[data-area="void6"]          { grid-area: void6; }
.module[data-area="form"]           { grid-area: form; }
.module[data-area="threshold3"]     { grid-area: thr3; }
.module[data-area="accent6"]        { grid-area: accent6; }
.module[data-area="drift"]          { grid-area: drift; }
.module[data-area="void7"]          { grid-area: void7; }

/* ============================================
   MODULE BASE STYLES
   ============================================ */
.module {
    position: relative;
    overflow: hidden;
    min-height: 80px;
}

/* --- Module Fade-Reveal --- */
.module-hidden {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(1px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out;
}

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

/* ============================================
   ARCHETYPE BLOCKS
   ============================================ */
.archetype-block {
    background-color: var(--void-black);
    border-left: 1px solid var(--neon-color, var(--signal-magenta));
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out, border-color 0.3s ease;
}

.archetype-block::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 0;
    background-color: var(--neon-color, var(--signal-magenta));
    opacity: 0.08;
    animation: drip-line 8s ease-in-out infinite;
    z-index: 3;
}

@keyframes drip-line {
    0%, 100% { height: 0; opacity: 0; }
    20% { height: 30%; opacity: 0.08; }
    80% { height: 60%; opacity: 0.04; }
}

.archetype-block:hover {
    border-left-color: var(--neon-color, var(--signal-magenta));
    border-left-width: 2px;
}

.archetype-block:hover .archetype-name {
    animation: rgb-split 0.15s ease-out;
}

/* Catalog Label */
.catalog-label {
    position: absolute;
    top: clamp(0.75rem, 1.5vw, 1.25rem);
    right: clamp(0.75rem, 1.5vw, 1.25rem);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--concrete-trace);
    z-index: 3;
}

/* Archetype Content */
.archetype-content {
    position: relative;
    z-index: 3;
}

.archetype-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 8vw, 7rem);
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--neon-color, var(--signal-magenta));
    text-shadow:
        0 0 7px var(--neon-color, var(--signal-magenta)),
        0 0 20px var(--neon-glow, #e930ff44),
        0 0 40px var(--neon-glow-far, #e930ff22);
    margin-bottom: 1rem;
}

.archetype-koan {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    letter-spacing: 0.03em;
    color: var(--muted-lavender);
    max-width: 540px;
}

/* ============================================
   RGB SPLIT GLITCH ANIMATION
   ============================================ */
@keyframes rgb-split {
    0% {
        text-shadow:
            -2px 0 rgba(255, 45, 85, 0.7),
            2px 0 rgba(0, 229, 255, 0.7),
            0 0 7px var(--neon-color, var(--signal-magenta));
    }
    50% {
        text-shadow:
            -1px 0 rgba(255, 45, 85, 0.4),
            1px 0 rgba(0, 229, 255, 0.4),
            0 0 7px var(--neon-color, var(--signal-magenta)),
            0 0 20px var(--neon-glow, #e930ff44);
    }
    100% {
        text-shadow:
            0 0 7px var(--neon-color, var(--signal-magenta)),
            0 0 20px var(--neon-glow, #e930ff44),
            0 0 40px var(--neon-glow-far, #e930ff22);
    }
}

/* Reveal glitch animation class (applied via JS) */
.glitch-reveal .archetype-name {
    animation: rgb-split 0.15s ease-out;
}

/* ============================================
   VOID BLOCKS
   ============================================ */
.void-block {
    background-color: var(--deep-concrete);
    min-height: 80px;
}

/* ============================================
   SIGNAL BLOCKS
   ============================================ */
.signal-block {
    background-color: var(--accent-color, var(--signal-magenta));
    min-height: 80px;
    opacity: 0.85;
}

.signal-block.module-visible {
    opacity: 0.85;
}

/* ============================================
   THRESHOLD BLOCKS
   ============================================ */
.threshold-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 1rem 0;
    background: transparent;
}

.threshold-line {
    width: 100%;
    height: 1px;
    background-color: var(--concrete-trace);
    position: relative;
    animation: signal-glitch 6s linear infinite;
}

@keyframes signal-glitch {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
    }
    15% {
        clip-path: inset(0 30% 0 0);
        opacity: 0.6;
    }
    16% {
        clip-path: inset(0 30% 0 20%);
        opacity: 0;
    }
    17% {
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
    }
    45% {
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
    }
    46% {
        clip-path: inset(0 10% 0 50%);
        opacity: 0;
    }
    47% {
        clip-path: inset(0 60% 0 0);
        opacity: 0.6;
    }
    48% {
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
    }
    72% {
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
    }
    73% {
        clip-path: inset(0 0 0 70%);
        opacity: 0;
    }
    74% {
        clip-path: inset(0 40% 0 0);
        opacity: 0.6;
    }
    75% {
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
    }
}

/* ============================================
   SCROLL COUNTER
   ============================================ */
.scroll-counter {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.scroll-counter.visible {
    opacity: 1;
}

.counter-label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.55rem, 0.7vw, 0.65rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--concrete-trace);
}

.counter-value {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    letter-spacing: 0.12em;
    color: var(--koan-chartreuse);
    text-shadow: 0 0 7px #b8ff0066;
}

/* ============================================
   DRIP LINES (pseudo-elements on select modules)
   ============================================ */
.archetype-signal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0, 229, 255, 0.08), transparent);
    z-index: 3;
}

.archetype-void::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 55px;
    background: linear-gradient(to bottom, rgba(233, 48, 255, 0.08), transparent);
    z-index: 3;
}

.archetype-echo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 35px;
    background: linear-gradient(to bottom, rgba(0, 229, 255, 0.08), transparent);
    z-index: 3;
}

.archetype-form::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(233, 48, 255, 0.08), transparent);
    z-index: 3;
}

/* ============================================
   RESPONSIVE: TABLET (768-1024px)
   ============================================ */
@media (max-width: 1024px) and (min-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "signal   signal   signal   signal   signal   signal"
            "signal   signal   signal   signal   signal   signal"
            "void1    void1    void1    accent1  accent1  accent1"
            "accent2  void-a   void-a   void-a   void-a   void-a"
            "accent2  void-a   void-a   void-a   void-a   void-a"
            "thr1     thr1     thr1     thr1     thr1     thr1"
            "void3    void3    thresh-a thresh-a thresh-a thresh-a"
            "void3    void3    thresh-a thresh-a thresh-a thresh-a"
            "accent3  accent3  accent3  accent3  accent3  accent3"
            "echo     echo     echo     echo     echo     echo"
            "echo     echo     echo     echo     echo     echo"
            "void4    void4    void4    accent4  accent4  accent4"
            "thr2     thr2     thr2     thr2     thr2     thr2"
            "accent5  accent5  static   static   static   static"
            "accent5  accent5  static   static   static   static"
            "void5    void5    void5    void5    void5    void5"
            "void6    void6    form     form     form     form"
            "void6    void6    form     form     form     form"
            "thr3     thr3     thr3     thr3     thr3     thr3"
            "accent6  accent6  drift    drift    drift    drift"
            "accent6  accent6  drift    drift    drift    drift"
            "void7    void7    void7    void7    void7    void7";
    }

    .archetype-name {
        font-size: clamp(2.5rem, 6vw, 5rem);
    }
}

/* ============================================
   RESPONSIVE: MOBILE (<768px)
   ============================================ */
@media (max-width: 767px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "signal"
            "void1"
            "accent1"
            "void-a"
            "accent2"
            "thr1"
            "void3"
            "thresh-a"
            "accent3"
            "echo"
            "void4"
            "accent4"
            "thr2"
            "accent5"
            "static"
            "void5"
            "void6"
            "form"
            "thr3"
            "accent6"
            "drift"
            "void7";
    }

    .archetype-block {
        min-height: 200px;
    }

    .archetype-name {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .void-block {
        min-height: 40px;
    }

    .signal-block {
        min-height: 30px;
    }

    .scroll-counter {
        bottom: 1rem;
        left: 1rem;
    }

    .opening-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
}

/* ============================================
   PREFERS REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .module-hidden {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .opening-title,
    .opening-subtitle {
        opacity: 1;
        transition: none;
    }

    .opening-line {
        height: 120px;
        transition: none;
    }

    .threshold-line {
        animation: none;
        opacity: 0.6;
    }

    .archetype-block:hover .archetype-name {
        animation: none;
    }

    .glitch-reveal .archetype-name {
        animation: none;
    }

    @keyframes drip-line {
        0%, 100% { height: 30%; opacity: 0.06; }
    }
}