/* ========================================
   ppuzzle.works — Memphis Honeyed Workshop
   Palette:
     Honey Dark:     #2A2010
     Honey Brown:    #5A4A30
     Honey Gold:     #B09060
     Memphis Pink:   #E88098
     Memphis Teal:   #60B8A8
     Workshop Cream: #FFFBF2
     Scaffold Linen: #FAF4E8
     Grid Honey:     #C8B890
     Grid Border:    #D8C8A8
   Fonts:
     Space Grotesk (300, 400, 500, 700)
     JetBrains Mono (500)
   ======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.8;
    color: #5A4A30;
    background: #FAF4E8;
    overflow-x: hidden;
    position: relative;
}

/* --- Grid-Line Workshop Scaffolding --- */
.grid-scaffolding {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(200, 184, 144, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 184, 144, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    transition: opacity 0.4s ease;
}

/* --- Watercolor Memphis Geometry Background --- */
.watercolor-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.watercolor-shape {
    position: absolute;
    will-change: transform;
}

.watercolor-triangle {
    width: 320px;
    height: 320px;
    top: 5%;
    right: 8%;
}

.watercolor-circle {
    width: 260px;
    height: 260px;
    top: 40%;
    left: 3%;
}

.watercolor-squiggle {
    width: 400px;
    height: 130px;
    bottom: 15%;
    right: 5%;
}

.watercolor-rect {
    width: 220px;
    height: 220px;
    top: 65%;
    right: 35%;
}

.watercolor-diamond {
    width: 200px;
    height: 200px;
    top: 15%;
    left: 15%;
}

.watercolor-blob {
    width: 280px;
    height: 280px;
    bottom: 5%;
    left: 25%;
}

.watercolor-zigzag {
    width: 300px;
    height: 100px;
    top: 30%;
    right: 20%;
}

.watercolor-arc {
    width: 240px;
    height: 240px;
    bottom: 30%;
    left: 10%;
}

/* --- Border-Animate Memphis Pulse --- */
@keyframes borderPulse {
    0% { border-color: #D8C8A8; }
    25% { border-color: #E88098; }
    50% { border-color: #60B8A8; }
    75% { border-color: #B09060; }
    100% { border-color: #D8C8A8; }
}

@keyframes borderPulseHover {
    0% {
        border-color: #E88098;
        box-shadow: 0 4px 24px rgba(232, 128, 152, 0.15);
    }
    33% {
        border-color: #60B8A8;
        box-shadow: 0 4px 24px rgba(96, 184, 168, 0.15);
    }
    66% {
        border-color: #B09060;
        box-shadow: 0 4px 24px rgba(176, 144, 96, 0.15);
    }
    100% {
        border-color: #E88098;
        box-shadow: 0 4px 24px rgba(232, 128, 152, 0.15);
    }
}

@keyframes pulseDemoA {
    0%, 100% { border-color: #E88098; }
    50% { border-color: #60B8A8; }
}

@keyframes pulseDemoB {
    0%, 100% { border-color: #60B8A8; }
    50% { border-color: #B09060; }
}

@keyframes pulseDemoC {
    0%, 100% { border-color: #B09060; }
    50% { border-color: #E88098; }
}

/* --- Cascade In Animation --- */
@keyframes cascadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollHintBob {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(8px); opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Hero Section --- */
.hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.hero-inner {
    text-align: center;
    max-width: 800px;
}

.hero-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #B09060;
    background: #FFFBF2;
    border: 2px solid #D8C8A8;
    border-radius: 4px;
    padding: 6px 18px;
    margin-bottom: 32px;
    animation: borderPulse 3s ease-in-out infinite;
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    color: #2A2010;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    animation: cascadeIn 0.8s ease-out 0.2s forwards;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: #5A4A30;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: cascadeIn 0.8s ease-out 0.5s forwards;
}

.hero-shapes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    animation: cascadeIn 0.8s ease-out 0.8s forwards;
}

.hero-scroll-hint {
    margin-top: 48px;
    animation: scrollHintBob 2.5s ease-in-out infinite;
    animation-delay: 1.5s;
    opacity: 0;
}

.hero-scroll-hint.active {
    animation: scrollHintBob 2.5s ease-in-out infinite;
    opacity: 1;
}

/* Memphis decorative elements */
.memphis-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E88098;
    transition: transform 0.3s ease;
}

.memphis-dot--teal {
    background: #60B8A8;
}

.memphis-dot--gold {
    background: #B09060;
}

.memphis-dot--small {
    width: 8px;
    height: 8px;
}

.memphis-line {
    display: inline-block;
    width: 40px;
    height: 3px;
    background: #B09060;
    border-radius: 2px;
}

.memphis-line--pink {
    background: #E88098;
}

.memphis-line--short {
    width: 24px;
}

.memphis-zigzag {
    display: inline-flex;
    align-items: center;
}

.memphis-zigzag svg {
    width: 48px;
    height: 14px;
}

/* --- Masonry Container --- */
.masonry-container {
    position: relative;
    z-index: 1;
    columns: 3;
    column-gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* --- Masonry Card --- */
.masonry-card {
    break-inside: avoid;
    background: #FFFBF2;
    border: 2px solid #D8C8A8;
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.masonry-card.visible {
    opacity: 1;
    transform: translateY(0);
    animation: cascadeIn 0.6s ease-out forwards;
}

.masonry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 28px rgba(42, 32, 16, 0.08);
}

.border-animate:hover {
    animation: borderPulseHover 2s ease-in-out infinite;
}

.masonry-card--tall {
    min-height: 380px;
}

/* --- Card Tag --- */
.card-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B09060;
    margin-bottom: 14px;
}

/* --- Card Title --- */
.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: #2A2010;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* --- Card Body --- */
.card-body {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    color: #5A4A30;
    line-height: 1.75;
}

/* --- Card Memphis Strip --- */
.card-memphis-strip {
    display: flex;
    gap: 4px;
    margin-top: 16px;
}

.strip-block {
    flex: 1;
    height: 6px;
    border-radius: 3px;
}

/* --- Card Accent SVGs --- */
.card-accent {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

.card-accent svg {
    width: 60px;
    height: 60px;
}

/* --- Workshop Steps --- */
.card-steps {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.step {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #5A4A30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(200, 184, 144, 0.25);
    transition: background 0.2s ease, padding-left 0.2s ease;
}

.step:last-child {
    border-bottom: none;
}

.step:hover {
    background: rgba(250, 244, 232, 0.6);
    padding-left: 8px;
}

.step-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.75rem;
    color: #B09060;
    min-width: 28px;
}

.step-label {
    flex: 1;
}

/* --- Grid Preview --- */
.grid-preview {
    margin-top: 20px;
    position: relative;
    height: 80px;
    border: 1px solid rgba(200, 184, 144, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.grid-line-h {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #C8B890;
    opacity: 0.2;
}

.grid-line-h:nth-child(1) { top: 25%; }
.grid-line-h:nth-child(2) { top: 50%; }
.grid-line-h:nth-child(3) { top: 75%; }

.grid-line-v {
    position: absolute;
    height: 100%;
    width: 1px;
    background: #C8B890;
    opacity: 0.2;
}

.grid-line-v:nth-child(4) { left: 25%; }
.grid-line-v:nth-child(5) { left: 50%; }
.grid-line-v:nth-child(6) { left: 75%; }

.grid-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E88098;
    opacity: 0.3;
    transform: translate(-50%, -50%);
}

/* --- Color Swatches --- */
.color-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid rgba(200, 184, 144, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

.swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 12px rgba(42, 32, 16, 0.12);
}

.swatch-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.swatch-labels span {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #B09060;
    text-align: center;
}

/* --- Type Specimen --- */
.type-specimen {
    margin-top: 20px;
    padding: 16px;
    background: rgba(250, 244, 232, 0.6);
    border: 1px solid rgba(200, 184, 144, 0.2);
    border-radius: 4px;
    text-align: center;
}

.type-specimen--mono {
    margin-top: 12px;
}

.specimen-display {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #2A2010;
    line-height: 1.2;
    margin-bottom: 6px;
}

.specimen-display--mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: #B09060;
}

.specimen-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B09060;
}

.type-specimen-alphabet {
    margin-top: 16px;
    text-align: center;
}

.alphabet-line {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    color: #2A2010;
    line-height: 2;
}

.alphabet-line--light {
    font-weight: 300;
    color: #5A4A30;
}

/* --- Pulse Demo (Border Pulse card) --- */
.pulse-demo {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: center;
}

.pulse-box {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 3px solid #D8C8A8;
    background: #FFFBF2;
}

.pulse-box--1 {
    animation: pulseDemoA 2s ease-in-out infinite;
}

.pulse-box--2 {
    animation: pulseDemoB 2s ease-in-out infinite 0.3s;
}

.pulse-box--3 {
    animation: pulseDemoC 2s ease-in-out infinite 0.6s;
}

/* --- Memphis Forms Grid --- */
.memphis-forms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.memphis-forms-grid svg {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.memphis-forms-grid svg:hover {
    transform: rotate(15deg) scale(1.1);
}

/* --- Manifesto Bar --- */
.manifesto-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    padding: 14px 0;
    border-top: 1px solid rgba(200, 184, 144, 0.25);
}

.manifesto-word {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B09060;
}

.manifesto-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E88098;
    display: inline-block;
}

.manifesto-dot--teal {
    background: #60B8A8;
}

.manifesto-dot--gold {
    background: #B09060;
}

/* --- Footer --- */
.site-footer {
    position: relative;
    z-index: 1;
    padding: 60px 24px 40px;
    text-align: center;
    border-top: 2px solid #D8C8A8;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.footer-mark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #2A2010;
    letter-spacing: 0.06em;
}

.footer-tag {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B09060;
}

.footer-shapes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* --- Responsive: 2 columns on tablets --- */
@media (max-width: 900px) {
    .masonry-container {
        columns: 2;
        padding: 0 16px 60px;
    }

    .hero-title {
        font-size: clamp(1.8rem, 5vw, 2.8rem);
    }

    .watercolor-triangle {
        width: 200px;
        height: 200px;
    }

    .watercolor-circle {
        width: 180px;
        height: 180px;
    }

    .watercolor-squiggle {
        width: 260px;
    }

    .watercolor-zigzag {
        width: 200px;
    }

    .watercolor-arc {
        width: 160px;
        height: 160px;
    }
}

/* --- Responsive: 1 column on mobile --- */
@media (max-width: 580px) {
    .masonry-container {
        columns: 1;
        padding: 0 12px 40px;
    }

    .hero {
        padding: 40px 16px;
        min-height: 80vh;
    }

    .hero-title {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-shapes {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .masonry-card {
        padding: 20px;
    }

    .watercolor-shape {
        display: none;
    }

    .memphis-forms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .swatch-labels {
        display: none;
    }
}

/* --- Selection --- */
::selection {
    background: #E88098;
    color: #FFFBF2;
}