/* lungless.dev — Maximalist Burgundy Fever Dream */
/* Palette: #2D0A1A, #4A0E2B, #6B1D3F, #7A2E50, #8B3A5C, #943563, #D4A0B0, #E8B4C8, #F5D6E0, #FAE8F0 */
/* Fonts: Fraunces (display), Recursive (body/mono) */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'CASL' 0.3, 'MONO' 0;
    background-color: #2D0A1A;
    color: #D4A0B0;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ============================================
   CELLULAR TEXTURE OVERLAY
   ============================================ */
.cellular-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='35' cy='15' r='5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='6' r='3.5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='8' cy='32' r='4.5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='28' cy='38' r='3' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='52' cy='30' r='5.5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='72' cy='35' r='4' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='18' cy='55' r='5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='42' cy='52' r='3.5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='65' cy='58' r='4.5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='72' r='3' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='38' cy='70' r='5' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3Ccircle cx='58' cy='75' r='4' fill='none' stroke='%234A0E2B' stroke-width='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.cellular-texture.visible {
    opacity: 0.15;
}

/* ============================================
   VENOUS NETWORK SVG
   ============================================ */
.vein-network {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.vein-path {
    fill: none;
    stroke: #8B3A5C;
    stroke-width: 1;
    stroke-dasharray: 8 12;
    stroke-dashoffset: 0;
    opacity: 0.4;
}

.vein-branch {
    stroke-width: 0.5;
    opacity: 0.25;
    stroke-dasharray: 4 8;
}

/* ============================================
   TISSUE GRID
   ============================================ */
.tissue-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(80px, auto);
    gap: 0;
    width: 100%;
    min-height: 100vh;
}

/* ============================================
   GRID MODULES
   ============================================ */
.grid-module {
    position: relative;
    padding: 1.5rem;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.2s ease;
    overflow: hidden;
}

.grid-module.visible {
    opacity: 1;
    transform: scale(1);
}

/* Module cell-expand reveal */
.grid-module.cell-reveal {
    clip-path: circle(0%);
    transition: clip-path 0.3s ease-out;
}

.grid-module.cell-reveal.visible {
    clip-path: circle(100%);
}

/* Breathing animation */
@keyframes breathe {
    0%, 100% { transform: scale(1.0); }
    50% { transform: scale(1.005); }
}

.grid-module.breathing {
    animation: breathe 6s ease-in-out infinite;
}

.grid-module.breathing-fast {
    animation: breathe 3s ease-in-out infinite;
}

/* Module backgrounds */
.module-content {
    background-color: #2D0A1A;
    border-right: 1px solid rgba(139, 58, 92, 0.1);
    border-bottom: 1px solid rgba(139, 58, 92, 0.1);
}

.module-content:hover {
    background-color: #4A0E2B;
}

.module-highlight {
    background-color: #4A0E2B;
}

.module-highlight:hover {
    background-color: #6B1D3F;
}

.module-frame {
    background-color: #2D0A1A;
    border-right: 1px solid rgba(139, 58, 92, 0.1);
    border-bottom: 1px solid rgba(139, 58, 92, 0.1);
}

.module-frame:hover {
    background-color: #4A0E2B;
}

/* ============================================
   PULSE MODULES
   ============================================ */
@keyframes pulse {
    0%, 100% { background-color: #4A0E2B; }
    50% { background-color: #6B1D3F; }
}

.pulse-module {
    background-color: #4A0E2B;
    animation: pulse 4s ease-in-out infinite;
    animation-play-state: paused;
    cursor: pointer;
}

.pulse-module.active {
    animation-play-state: running;
}

.pulse-module:hover {
    background-color: #7A2E50;
}

/* Heartbeat ripple */
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(148, 53, 99, 0.4);
    }
    100% {
        box-shadow: 0 0 0 40px rgba(148, 53, 99, 0);
    }
}

.pulse-module.ripple {
    animation: ripple 0.6s ease-out, pulse 4s ease-in-out infinite;
}

/* ============================================
   TITLE MODULE
   ============================================ */
.module-title {
    background-color: #2D0A1A;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'WONK' 1, 'SOFT' 100;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #F5D6E0;
    letter-spacing: -0.02em;
    opacity: 0;
}

.site-title.visible {
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.specimen-label {
    display: inline-block;
    font-family: 'Recursive', monospace;
    font-variation-settings: 'CASL' 0, 'MONO' 1;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8B3A5C;
    border: 1px solid #8B3A5C;
    padding: 2px 8px;
    margin-bottom: 12px;
    transition: transform 0.2s ease;
}

.grid-module:hover .specimen-label {
    transform: rotate(1deg);
}

.module-heading {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'WONK' 1, 'SOFT' 100;
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #F5D6E0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.module-body {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'CASL' 0.3, 'MONO' 0;
    font-weight: 350;
    font-size: clamp(0.9rem, 1vw, 1.05rem);
    line-height: 1.6;
    color: #D4A0B0;
}

.module-feature-text {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'WONK' 1, 'SOFT' 50;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    line-height: 1.4;
    color: #E8B4C8;
}

/* ============================================
   EMPTY FRAMES WITHIN MODULES
   ============================================ */
.module-empty-frame {
    width: 100%;
    border: 1px solid #8B3A5C;
    background-color: transparent;
    transition: border-color 0.2s ease;
}

.grid-module:hover .module-empty-frame {
    border-color: #943563;
}

.frame-tall {
    aspect-ratio: 3 / 4;
}

.frame-wide {
    aspect-ratio: 16 / 9;
}

.frame-square {
    aspect-ratio: 1 / 1;
}

.frame-portrait {
    aspect-ratio: 2 / 3;
}

/* ============================================
   GRADIENT GLOW BORDERS
   ============================================ */
.module-content,
.module-frame,
.module-highlight {
    border-image: linear-gradient(135deg, rgba(107, 29, 63, 0.3), rgba(75, 14, 43, 0.1)) 1;
}

/* ============================================
   FOOTER MODULE
   ============================================ */
.module-footer {
    background-color: #2D0A1A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #8B3A5C;
}

.footer-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'WONK' 1, 'SOFT' 100;
    font-weight: 800;
    font-size: 1.2rem;
    color: #F5D6E0;
    letter-spacing: 0.02em;
}

.footer-label {
    font-family: 'Recursive', monospace;
    font-variation-settings: 'CASL' 0, 'MONO' 1;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8B3A5C;
    margin-top: 8px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .tissue-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-module[style*="span 6"],
    .grid-module[style*="span 12"] {
        grid-column: span 4 !important;
    }

    .grid-module[style*="span 3"],
    .grid-module[style*="span 4"],
    .grid-module[style*="span 2"] {
        grid-column: span 4 !important;
    }

    .pulse-module {
        grid-column: span 4 !important;
        grid-row: span 1 !important;
        min-height: 60px;
    }

    .grid-module {
        padding: 1.2rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tissue-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-module[style*="span 6"] {
        grid-column: span 6 !important;
    }

    .grid-module[style*="span 12"] {
        grid-column: span 8 !important;
    }
}