/* paragram.dev - Street-style meets digital garden */

:root {
    --deep-asphalt: #1a1b1f;
    --wet-concrete: #2d2f3a;
    --spray-coral: #ff6b6b;
    --vine-mint: #a8e6cf;
    --pollen-gold: #ffd93d;
    --sticker-lavender: #c3aed6;
    --chalk-white: #f0ede8;
    --moss-start: #1b4332;
    --moss-end: #52b788;
    --font-headline: "Permanent Marker", cursive;
    --font-body: "Space Grotesk", sans-serif;
    --font-code: "JetBrains Mono", monospace;
    --font-accent: "Caveat", cursive;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: linear-gradient(160deg, var(--deep-asphalt) 0%, var(--moss-start) 40%, var(--wet-concrete) 70%, var(--deep-asphalt) 100%);
    background-size: 400% 400%;
    animation: gradient-drift 20s ease-in-out infinite;
    color: var(--chalk-white);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.72;
    letter-spacing: 0.01em;
}

@keyframes gradient-drift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 0% 75%; }
    100% { background-position: 0% 50%; }
}
#noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1000; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.65%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%221%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: repeat; background-size: 256px 256px;
}

#floating-logo {
    position: fixed; bottom: 24px; left: 24px;
    font-family: var(--font-headline);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--chalk-white);
    transform: rotate(-3deg);
    z-index: 999; mix-blend-mode: difference;
    letter-spacing: 0.05em; text-transform: lowercase;
    opacity: 0.9; pointer-events: none; user-select: none;
    text-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

#ripple-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 998;
}

.click-ripple {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%);
    transform: scale(0);
    animation: ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes ripple-expand {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
#card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px; padding: 60px 40px 120px;
    max-width: 1200px; margin: 0 auto;
    position: relative; z-index: 2;
}

.card {
    position: relative; border-radius: 12px; overflow: hidden;
    background: var(--wet-concrete);
    transform: scale(0); opacity: 0;
    transition: box-shadow 0.3s ease;
}

.card.visible {
    animation: card-sprout 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes card-sprout {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.card:hover {
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.15), 0 0 0 1px rgba(168, 230, 207, 0.1);
}

.seed-card { aspect-ratio: 1; min-height: 200px; }

.stem-card {
    grid-column: span 2; padding: 28px 32px;
    display: flex; flex-direction: column;
    justify-content: center; min-height: 120px;
}

.bloom-card {
    grid-column: span 2; grid-row: span 2; min-height: 400px;
}

.root-card {
    grid-row: span 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
    background: linear-gradient(180deg, var(--wet-concrete) 0%, rgba(27, 67, 50, 0.6) 100%);
    clip-path: polygon(0% 2%, 3% 0%, 8% 3%, 15% 0%, 20% 2%, 97% 2%, 100% 5%, 98% 98%, 100% 100%, 95% 98%, 90% 100%, 3% 100%, 0% 97%);
}

.gen-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.card-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px; background: rgba(26, 27, 31, 0.55); z-index: 2;
}
h1 {
    font-family: var(--font-headline);
    font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 400;
    color: var(--chalk-white); text-align: center;
    text-shadow: 0 0 40px rgba(255, 107, 107, 0.4); margin-bottom: 12px;
}

h2 {
    font-family: var(--font-headline);
    font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 400;
    color: var(--chalk-white);
    text-shadow: 0 0 30px rgba(255, 107, 107, 0.3); margin-bottom: 8px;
}

.card-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: var(--vine-mint); opacity: 0.85; text-align: center;
}

.body-text {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem); font-weight: 400;
    color: var(--chalk-white); line-height: 1.72;
    animation: text-breathe 4s ease-in-out infinite;
}

@keyframes text-breathe {
    0%, 100% { opacity: 0.88; }
    50% { opacity: 1; }
}

.body-text em { font-style: italic; color: var(--sticker-lavender); }

.quote-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--vine-mint); text-align: center;
    font-weight: 500; opacity: 0.9;
}

.caveat-text {
    font-family: var(--font-accent);
    font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700;
    transform: rotate(-1.5deg); color: var(--pollen-gold);
}

.code-text {
    font-family: var(--font-code);
    font-size: 0.85rem; letter-spacing: 0.04em;
    color: var(--vine-mint); line-height: 1.6;
}

.code-keyword { color: var(--spray-coral); }
.code-name { color: var(--pollen-gold); }
.code-type { color: var(--sticker-lavender); }
.code-comment { color: rgba(240, 237, 232, 0.4); }
.code-literal { color: var(--vine-mint); }
.fade-text { opacity: 0.6; }

.root-label {
    font-family: var(--font-headline);
    font-size: 1.4rem; color: var(--chalk-white);
    writing-mode: vertical-rl; text-orientation: mixed;
    letter-spacing: 0.15em; opacity: 0.8;
}

.root-arrow {
    font-size: 2rem; color: var(--vine-mint);
    animation: arrow-bounce 2s ease-in-out infinite;
}

.root-glyph {
    font-size: 2.4rem; color: var(--spray-coral);
    animation: glyph-pulse 3s ease-in-out infinite;
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes glyph-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}
.cursor-container {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.blinking-cursor {
    font-family: var(--font-code); font-size: 2rem;
    color: var(--vine-mint); animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.leaf-border {
    position: absolute; top: -4px; left: 0;
    width: 100%; height: 16px; z-index: 3; pointer-events: none;
}

#sticker-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
}

.sticker {
    position: absolute;
    left: var(--sticker-x); top: var(--sticker-y);
    font-family: var(--font-accent); font-size: 48px;
    transform: rotate(var(--sticker-rot));
    opacity: 0; transition: opacity 0.6s ease;
    animation: sticker-pulse 3s ease-in-out infinite;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
    color: var(--spray-coral);
}
.sticker.visible { opacity: 0.7; }
.sticker:nth-child(2n) { color: var(--vine-mint); }
.sticker:nth-child(3n) { color: var(--pollen-gold); }
.sticker:nth-child(4n) { color: var(--sticker-lavender); }

@keyframes sticker-pulse {
    0%, 100% { transform: rotate(var(--sticker-rot)) scale(1); }
    50% { transform: rotate(var(--sticker-rot)) scale(1.05); }
}

.scramble-char { display: inline-block; transition: color 0.1s; }
.scramble-char.scrambling { color: var(--spray-coral); }

.phase-1 { margin-bottom: 40px; }
.phase-2 { margin-bottom: 20px; }
.phase-3 { margin-bottom: 8px; }
.phase-4 { margin-bottom: 40px; }
.phase-3.bloom-card { z-index: 3; }
.phase-3.seed-card { margin-top: -8px; }

@media (max-width: 768px) {
    #card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 30px 16px 80px; }
    .stem-card { grid-column: span 2; padding: 20px 16px; }
    .bloom-card { grid-column: span 2; grid-row: span 2; min-height: 280px; }
    .root-card { grid-row: span 1; }
    .sticker { font-size: 32px; }
    #floating-logo { font-size: 1rem; bottom: 12px; left: 12px; }
}

@media (max-width: 480px) {
    #card-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 20px 10px 60px; }
    .seed-card { min-height: 140px; }
    .bloom-card { min-height: 220px; }
}