/* =============================================
   desca.works - Memphis Collage Design System
   ============================================= */

/* --- CSS Custom Properties --- */
:root {
    --deep-navy: #1A1A2E;
    --coral-red: #F25C54;
    --teal-green: #4ECDC4;
    --saffron-yellow: #F7B32B;
    --warm-cream: #F9F4EF;
    --dusty-mauve: #A26769;
    --graphite: #2D2D3A;
    --parchment-dot: #E8E0D4;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Syne', sans-serif;

    --shadow-default: 4px 4px 0px var(--deep-navy);
    --shadow-hover: 8px 8px 0px var(--deep-navy);
    --border-default: 3px solid var(--deep-navy);
    --nav-height: 48px;
    --nav-total-height: 60px; /* nav + triangle border */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--graphite);
    background-color: var(--warm-cream);
    overflow-x: hidden;
    /* Dotted grid background - graph paper / cutting mat */
    background-image: radial-gradient(circle, var(--parchment-dot) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* --- Navigation --- */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--deep-navy);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 32px;
}

.nav-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--warm-cream);
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-link {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--warm-cream);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-bottom: 4px;
}

.nav-link .underline-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 6px;
    overflow: visible;
}

.nav-link .underline-wave path {
    stroke: var(--saffron-yellow);
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 350ms ease-out;
}

.nav-link:hover .underline-wave path {
    stroke-dashoffset: 0;
}

.nav-link.active .underline-wave path {
    stroke: var(--coral-red);
    stroke-dashoffset: 0;
}

/* Triangle pattern border on nav bottom */
.nav-triangle-border {
    height: 12px;
    width: 100%;
    background: repeating-linear-gradient(
        90deg,
        var(--saffron-yellow) 0px,
        var(--saffron-yellow) 12px,
        var(--coral-red) 12px,
        var(--coral-red) 24px
    );
    clip-path: polygon(
        0% 0%,
        2% 100%, 4% 0%, 6% 100%, 8% 0%, 10% 100%,
        12% 0%, 14% 100%, 16% 0%, 18% 100%, 20% 0%,
        22% 100%, 24% 0%, 26% 100%, 28% 0%, 30% 100%,
        32% 0%, 34% 100%, 36% 0%, 38% 100%, 40% 0%,
        42% 100%, 44% 0%, 46% 100%, 48% 0%, 50% 100%,
        52% 0%, 54% 100%, 56% 0%, 58% 100%, 60% 0%,
        62% 100%, 64% 0%, 66% 100%, 68% 0%, 70% 100%,
        72% 0%, 74% 100%, 76% 0%, 78% 100%, 80% 0%,
        82% 100%, 84% 0%, 86% 100%, 88% 0%, 90% 100%,
        92% 0%, 94% 100%, 96% 0%, 98% 100%, 100% 0%
    );
}

/* --- Hero Section --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8vw;
    padding-top: var(--nav-total-height);
    background-color: var(--warm-cream);
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12vw;
    color: var(--deep-navy);
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: lowercase;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    color: var(--graphite);
    margin-top: 24px;
    max-width: 500px;
}

/* Hero geometric shapes */
.hero-shape {
    position: absolute;
    z-index: 5;
}

.hero-triangle-1 {
    width: 160px;
    height: 160px;
    background-color: var(--coral-red);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: 12%;
    right: 8%;
    transform: rotate(15deg);
    animation: slideInTri1 300ms ease-out both;
}

.hero-triangle-2 {
    width: 100px;
    height: 100px;
    background-color: var(--teal-green);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: 25%;
    right: 20%;
    transform: rotate(-30deg);
    animation: slideInTri2 300ms 100ms ease-out both;
}

.hero-triangle-3 {
    width: 80px;
    height: 80px;
    background-color: var(--saffron-yellow);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 30%;
    right: 15%;
    transform: rotate(45deg);
    animation: slideInTri3 300ms 200ms ease-out both;
}

.hero-circle-1 {
    width: 200px;
    height: 200px;
    background-color: var(--saffron-yellow);
    border-radius: 50%;
    top: 50%;
    right: 30%;
    transform: translate(50%, -50%) scale(0);
    animation: expandCircle 400ms 150ms ease-out forwards;
    opacity: 0.7;
}

.hero-circle-2 {
    width: 120px;
    height: 120px;
    background-color: var(--coral-red);
    border-radius: 50%;
    bottom: 20%;
    right: 40%;
    transform: scale(0);
    animation: expandCircle2 400ms 250ms ease-out forwards;
    opacity: 0.5;
}

.hero-square-1 {
    width: 100px;
    height: 100px;
    background-color: var(--teal-green);
    top: 18%;
    right: 35%;
    transform: rotate(45deg) scale(0);
    animation: expandSquare 350ms 200ms ease-out forwards;
    opacity: 0.6;
}

.hero-square-2 {
    width: 60px;
    height: 60px;
    border: 3px dashed var(--deep-navy);
    bottom: 35%;
    right: 10%;
    transform: rotate(15deg) translateX(100px);
    opacity: 0;
    animation: slideInDashed 300ms 300ms ease-out forwards;
}

/* Hero zigzag */
.hero-zigzag {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    z-index: 10;
}

.zigzag-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawZigzag 600ms 400ms ease-out forwards;
}

/* --- Hero Animations --- */
@keyframes slideInTri1 {
    from {
        transform: translateX(100px) rotate(15deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(15deg);
        opacity: 1;
    }
}

@keyframes slideInTri2 {
    from {
        transform: translateX(100px) rotate(-30deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(-30deg);
        opacity: 1;
    }
}

@keyframes slideInTri3 {
    from {
        transform: translateX(100px) rotate(45deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(45deg);
        opacity: 1;
    }
}

@keyframes expandCircle {
    from {
        transform: translate(50%, -50%) scale(0);
        opacity: 0;
    }
    to {
        transform: translate(50%, -50%) scale(1);
        opacity: 0.7;
    }
}

@keyframes expandCircle2 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 0.5;
    }
}

@keyframes expandSquare {
    from {
        transform: rotate(45deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(45deg) scale(1);
        opacity: 0.6;
    }
}

@keyframes slideInDashed {
    from {
        transform: rotate(15deg) translateX(100px);
        opacity: 0;
    }
    to {
        transform: rotate(15deg) translateX(0);
        opacity: 1;
    }
}

@keyframes drawZigzag {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Section Dividers --- */
.section-divider {
    width: 100%;
    height: 60px;
    line-height: 0;
    overflow: hidden;
}

.section-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.section-divider svg polygon {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.section-divider.divider-visible svg polygon {
    opacity: 1;
}

/* --- Section Titles --- */
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    color: var(--deep-navy);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 60px 8vw 40px;
}

.section-title-light {
    color: var(--warm-cream);
}

.title-arrow {
    font-family: var(--font-accent);
    font-weight: 800;
    color: var(--coral-red);
    margin-left: 12px;
}

/* --- Card Grid (Collage Board) --- */
#work,
#about {
    padding-bottom: 60px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 24px;
    padding: 0 8vw;
}

/* Card sizes */
.card {
    grid-column: span 4;
    position: relative;
    border: var(--border-default);
    box-shadow: var(--shadow-default);
    padding: 32px;
    overflow: hidden;
    transition: box-shadow 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out;
    /* Start hidden for scroll animation */
    opacity: 0;
    transform: translateY(30px) rotate(0deg);
}

.card.card-visible {
    opacity: 1;
}

.card-wide {
    grid-column: span 6;
}

.card-tall {
    grid-column: span 4;
    grid-row: span 2;
}

.card-banner {
    grid-column: span 12;
}

/* Card background colors via nth-child */
.card:nth-child(5n+1) { background-color: var(--warm-cream); }
.card:nth-child(5n+2) { background-color: #FDE8E7; }
.card:nth-child(5n+3) { background-color: #E0F5F3; }
.card:nth-child(5n+4) { background-color: #FEF3D9; }
.card:nth-child(5n+5) { background-color: #F0E3E4; }

/* Card rotations via nth-child for pinned effect */
.card:nth-child(6n+1) { --card-rotation: -1.5deg; }
.card:nth-child(6n+2) { --card-rotation: 1deg; }
.card:nth-child(6n+3) { --card-rotation: -0.5deg; }
.card:nth-child(6n+4) { --card-rotation: 2deg; }
.card:nth-child(6n+5) { --card-rotation: -1deg; }
.card:nth-child(6n+6) { --card-rotation: 1.5deg; }

.card.card-visible {
    transform: rotate(var(--card-rotation, 0deg));
}

/* Card hover - lift effect */
.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translate(-2px, -2px) rotate(var(--card-rotation, 0deg));
}

.card:nth-child(5n+1):hover { border-color: var(--coral-red); }
.card:nth-child(5n+2):hover { border-color: var(--teal-green); }
.card:nth-child(5n+3):hover { border-color: var(--saffron-yellow); }
.card:nth-child(5n+4):hover { border-color: var(--dusty-mauve); }
.card:nth-child(5n+5):hover { border-color: var(--coral-red); }

/* Card content */
.card-content {
    position: relative;
    z-index: 5;
}

.card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--deep-navy);
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.card-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--graphite);
}

/* Card zigzag border at bottom */
.card-zigzag-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: repeating-linear-gradient(
        90deg,
        var(--coral-red) 0px,
        var(--coral-red) 12px,
        var(--saffron-yellow) 12px,
        var(--saffron-yellow) 24px
    );
    clip-path: polygon(
        0% 0%,
        4% 100%, 8% 0%, 12% 100%, 16% 0%, 20% 100%,
        24% 0%, 28% 100%, 32% 0%, 36% 100%, 40% 0%,
        44% 100%, 48% 0%, 52% 100%, 56% 0%, 60% 100%,
        64% 0%, 68% 100%, 72% 0%, 76% 100%, 80% 0%,
        84% 100%, 88% 0%, 92% 100%, 96% 0%, 100% 100%,
        100% 100%, 0% 100%
    );
}

/* --- Card Decorative Elements --- */
.card-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.deco-triangle {
    position: absolute;
    transition: transform 200ms ease-out;
}

.deco-t1 {
    width: 80px;
    height: 80px;
    background-color: var(--coral-red);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: -10px;
    right: 20px;
    transform: rotate(15deg);
    opacity: 0.4;
}

.card:hover .deco-t1 {
    transform: rotate(15deg) translate(4px, -6px);
}

.deco-t2 {
    width: 60px;
    height: 60px;
    background-color: var(--teal-green);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 30px;
    right: -10px;
    transform: rotate(-30deg);
    opacity: 0.35;
}

.card:hover .deco-t2 {
    transform: rotate(-30deg) translate(-8px, 4px);
}

.deco-t3 {
    width: 50px;
    height: 50px;
    background-color: var(--saffron-yellow);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: 40px;
    left: -5px;
    transform: rotate(45deg);
    opacity: 0.3;
}

.card:hover .deco-t3 {
    transform: rotate(45deg) translate(6px, -4px);
}

.deco-circle {
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: var(--saffron-yellow);
    border-radius: 50%;
    bottom: -20px;
    left: 50%;
    opacity: 0.2;
    transition: transform 200ms ease-out;
}

.card:hover .deco-circle {
    transform: translate(-4px, -8px);
}

.deco-square {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: var(--teal-green);
    top: 10px;
    left: 30%;
    transform: rotate(45deg);
    opacity: 0.2;
    transition: transform 200ms ease-out;
}

.card:hover .deco-square {
    transform: rotate(45deg) translate(6px, 4px);
}

/* Sharp-angle clipped corners on select cards */
.card:nth-child(4n+1) .card-decoration::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent var(--warm-cream) transparent;
    z-index: 10;
}

/* --- Manifesto Section --- */
#manifesto {
    background-color: var(--deep-navy);
    padding: 100px 8vw;
    position: relative;
    overflow: hidden;
}

.manifesto-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.manifesto-text {
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: 48px;
    color: var(--warm-cream);
    line-height: 1.3;
}

.accent-coral { color: var(--coral-red); }
.accent-teal { color: var(--teal-green); }
.accent-yellow { color: var(--saffron-yellow); }

.manifesto-arrow {
    display: block;
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: 64px;
    color: var(--coral-red);
    margin-top: 32px;
}

/* --- About Section --- */
#about {
    background-color: var(--warm-cream);
}

.card-grid-about {
    grid-template-columns: repeat(12, 1fr);
}

.card-grid-about .card {
    grid-column: span 4;
}

/* --- Contact Section --- */
#contact {
    background-color: var(--deep-navy);
    padding: 80px 8vw 120px;
    position: relative;
    overflow: hidden;
}

.contact-content {
    position: relative;
    z-index: 10;
}

.contact-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    color: var(--parchment-dot);
    margin-bottom: 24px;
}

.contact-link {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    color: var(--warm-cream);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.contact-link .underline-wave {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 8px;
    overflow: visible;
}

.contact-link .underline-wave path {
    stroke: var(--saffron-yellow);
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 350ms ease-out;
}

.contact-link:hover .underline-wave path {
    stroke-dashoffset: 0;
}

/* Contact echo shapes - scattered geometric fragments */
.contact-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.echo-shape {
    position: absolute;
    opacity: 0.15;
}

.echo-tri-1 {
    width: 60px;
    height: 60px;
    background-color: var(--coral-red);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: 15%;
    right: 12%;
    transform: rotate(25deg);
}

.echo-tri-2 {
    width: 40px;
    height: 40px;
    background-color: var(--teal-green);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 25%;
    right: 30%;
    transform: rotate(-15deg);
}

.echo-tri-3 {
    width: 35px;
    height: 35px;
    background-color: var(--saffron-yellow);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: 40%;
    left: 60%;
    transform: rotate(60deg);
}

.echo-circle-1 {
    width: 50px;
    height: 50px;
    background-color: var(--saffron-yellow);
    border-radius: 50%;
    bottom: 15%;
    left: 70%;
}

.echo-circle-2 {
    width: 30px;
    height: 30px;
    background-color: var(--coral-red);
    border-radius: 50%;
    top: 20%;
    left: 80%;
}

.echo-square-1 {
    width: 40px;
    height: 40px;
    background-color: var(--teal-green);
    top: 60%;
    right: 8%;
    transform: rotate(45deg);
}

/* --- Footer --- */
#main-footer {
    background-color: var(--deep-navy);
}

.footer-zigzag-stripes {
    display: flex;
    flex-direction: column;
}

.zigzag-stripe {
    height: 8px;
    width: 100%;
}

.stripe-coral { background-color: var(--coral-red); }
.stripe-teal { background-color: var(--teal-green); }
.stripe-yellow { background-color: var(--saffron-yellow); }
.stripe-mauve { background-color: var(--dusty-mauve); }
.stripe-navy { background-color: var(--deep-navy); }

/* Apply zigzag shape to stripes */
.zigzag-stripe:nth-child(odd) {
    clip-path: polygon(
        0% 0%,
        2% 100%, 4% 0%, 6% 100%, 8% 0%, 10% 100%,
        12% 0%, 14% 100%, 16% 0%, 18% 100%, 20% 0%,
        22% 100%, 24% 0%, 26% 100%, 28% 0%, 30% 100%,
        32% 0%, 34% 100%, 36% 0%, 38% 100%, 40% 0%,
        42% 100%, 44% 0%, 46% 100%, 48% 0%, 50% 100%,
        52% 0%, 54% 100%, 56% 0%, 58% 100%, 60% 0%,
        62% 100%, 64% 0%, 66% 100%, 68% 0%, 70% 100%,
        72% 0%, 74% 100%, 76% 0%, 78% 100%, 80% 0%,
        82% 100%, 84% 0%, 86% 100%, 88% 0%, 90% 100%,
        92% 0%, 94% 100%, 96% 0%, 98% 100%, 100% 0%
    );
}

.footer-content {
    padding: 40px 8vw;
    text-align: center;
}

.footer-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--warm-cream);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.footer-copy {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--parchment-dot);
    margin-bottom: 8px;
}

.footer-year {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--dusty-mauve);
}

/* --- Confetti Layer --- */
#confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
}

.confetti-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.confetti-circle {
    border-radius: 50%;
}

/* --- Card Scroll Animation --- */
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(30px) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: rotate(var(--card-rotation, 0deg));
    }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .card {
        grid-column: span 6;
    }
    .card-wide {
        grid-column: span 6;
    }
    .card-tall {
        grid-column: span 6;
    }
    .card-banner {
        grid-column: span 12;
    }
    .card-grid-about .card {
        grid-column: span 6;
    }
    .manifesto-text {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 16vw;
    }
    .card,
    .card-wide,
    .card-tall,
    .card-banner {
        grid-column: span 12;
    }
    .card-grid-about .card {
        grid-column: span 12;
    }
    .section-title {
        font-size: 28px;
    }
    .manifesto-text {
        font-size: 28px;
    }
    .contact-link {
        font-size: 24px;
    }
    .nav-links {
        gap: 16px;
    }
    .nav-link {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 20vw;
    }
    .hero-subtitle {
        font-size: 16px;
    }
    .card-grid {
        gap: 16px;
        padding: 0 5vw;
    }
    .section-title {
        padding: 40px 5vw 24px;
        font-size: 24px;
    }
    #manifesto {
        padding: 60px 5vw;
    }
    .manifesto-text {
        font-size: 22px;
    }
    .contact-link {
        font-size: 20px;
    }
}