/* simidiot.net - eclectic collage mix */
/* Palette: #FFFFFF #FFE14D #A8D8FF #FFB3BA #B5EAD7 #1A1A1A #4A4A4A #0D1117 #E6EDF3 */
/* Method badges: #48BB78 GET green, #4299E1 POST blue, #ECC94B PUT yellow, #F56565 DELETE red */
/* Method badge bg: #C6F6D5 GET, #BEE3F8 POST, text: #22543D #2A4365 */
/* Seed style: #15B eclectic collage mix */

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

body {
    background: #FFFFFF;
    color: #4A4A4A;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography - Montserrat 700/800, Work Sans 400/500, JetBrains Mono 400 */

.section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.5rem);
    color: #1A1A1A;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

/* Torn Paper Effect */

.torn-paper {
    clip-path: polygon(2% 0, 98% 1%, 100% 97%, 1% 100%);
    padding: 1.5rem;
    transform: rotate(-1deg);
}

.torn-v1 { clip-path: polygon(1% 0, 97% 2%, 99% 96%, 2% 100%); }
.torn-v2 { clip-path: polygon(3% 1%, 99% 0, 97% 98%, 0% 97%); }
.torn-v3 { clip-path: polygon(0% 2%, 98% 0, 100% 95%, 3% 100%); }
.torn-v4 { clip-path: polygon(2% 0, 100% 3%, 98% 100%, 1% 97%); }
.torn-v5 { clip-path: polygon(1% 1%, 99% 0, 97% 99%, 0% 96%); }
.torn-v6 { clip-path: polygon(3% 0, 98% 2%, 100% 98%, 2% 100%); }

.paper-yellow { background: #FFE14D; }
.paper-blue { background: #A8D8FF; }
.paper-pink { background: #FFB3BA; }
.paper-mint { background: #B5EAD7; }

/* Hero Zone */

.hero {
    position: relative;
    padding: 6rem 2rem 5rem;
    text-align: center;
    overflow: hidden;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
}

.collage-rect {
    position: absolute;
    border-radius: 4px;
    animation: floatRect 6s ease-in-out infinite;
}

.rect-yellow {
    width: 220px;
    height: 160px;
    background: #FFE14D;
    top: 8%;
    left: 4%;
    transform: rotate(-3deg);
    opacity: 0.35;
    animation-delay: 0s;
}

.rect-blue {
    width: 180px;
    height: 130px;
    background: #A8D8FF;
    top: 12%;
    right: 6%;
    transform: rotate(2deg);
    opacity: 0.35;
    animation-delay: 1.5s;
}

.rect-pink {
    width: 140px;
    height: 110px;
    background: #FFB3BA;
    bottom: 12%;
    left: 18%;
    transform: rotate(4deg);
    opacity: 0.35;
    animation-delay: 3s;
}

.rect-mint {
    width: 160px;
    height: 100px;
    background: #B5EAD7;
    bottom: 20%;
    right: 12%;
    transform: rotate(-2deg);
    opacity: 0.3;
    animation-delay: 4.5s;
}

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

.hero-paper {
    display: inline-block;
    padding: 1rem 2.5rem;
    transform: rotate(-1.5deg);
    animation: paperWobble 4s ease-in-out infinite;
}

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: #1A1A1A;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hero-tagline {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: #4A4A4A;
    margin: 1.5rem 0 2rem;
}

.cta-paper {
    display: inline-block;
    transform: rotate(-1deg);
    padding: 0.75rem 2rem;
    transition: transform 0.3s ease;
}

.cta-paper:hover {
    transform: rotate(0deg) scale(1.05);
}

.cta-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1A1A1A;
    text-decoration: none;
    text-transform: uppercase;
}

/* Confetti Pieces - 16px x 8px scattered colored rectangles */

.confetti-piece {
    position: absolute;
    width: 16px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall 8s ease-in-out infinite;
}

.confetti-1 { background: #FFE14D; top: 20%; left: 30%; transform: rotate(25deg); animation-delay: 0s; }
.confetti-2 { background: #A8D8FF; top: 35%; right: 25%; transform: rotate(-15deg); animation-delay: 1s; }
.confetti-3 { background: #FFB3BA; top: 60%; left: 10%; transform: rotate(45deg); animation-delay: 2s; }
.confetti-4 { background: #B5EAD7; top: 75%; right: 15%; transform: rotate(-30deg); animation-delay: 3s; }
.confetti-5 { background: #FFE14D; bottom: 15%; left: 50%; transform: rotate(60deg); animation-delay: 4s; }

/* API Endpoints Section */

.endpoints {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.endpoint-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    transform: rotate(-0.5deg);
    transition: transform 0.3s ease;
}

.endpoint-card:nth-child(even) {
    transform: rotate(0.5deg);
}

.endpoint-card:hover {
    transform: rotate(0deg) scale(1.02);
}

/* HTTP Method Badges - color-coded pills */
/* GET: #48BB78 green on #C6F6D5, POST: #4299E1 blue on #BEE3F8, PUT: #ECC94B, DELETE: #F56565 */

.method-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.method-get {
    background: #C6F6D5;
    color: #22543D;
    border-left: 3px solid #48BB78;
}

.method-post {
    background: #BEE3F8;
    color: #2A4365;
    border-left: 3px solid #4299E1;
}

.method-put {
    background: #FEFCBF;
    color: #744210;
    border-left: 3px solid #ECC94B;
}

.method-delete {
    background: #FED7D7;
    color: #742A2A;
    border-left: 3px solid #F56565;
}

.endpoint-path {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #1A1A1A;
}

.endpoint-desc {
    width: 100%;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #4A4A4A;
    margin-top: 0.25rem;
}

/* Code Examples Section */

.code-examples {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.code-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lang-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 4px 4px 0 0;
    margin-top: 0.5rem;
}

.tag-python { background: #B5EAD7; color: #22543D; }
.tag-js { background: #FFE14D; color: #1A1A1A; }
.tag-curl { background: #A8D8FF; color: #2A4365; }

.code-panel {
    background: #0D1117;
    color: #E6EDF3;
    font-family: 'JetBrains Mono', monospace;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    transition: transform 0.3s ease;
}

.code-panel:hover {
    transform: translateX(4px);
}

.code-block {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #E6EDF3;
    line-height: 1.7;
    white-space: pre;
}

/* Syntax Highlighting - strings in mint, keywords in pink, comments in gray */
.kw { color: #FFB3BA; }
.str { color: #B5EAD7; }
.cm { color: #6B7280; font-style: italic; }

/* Failure Leaderboard */

.leaderboard {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.lb-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.lb-row:hover {
    transform: translateX(6px);
}

.lb-row-yellow { background: rgba(255, 225, 77, 0.15); }
.lb-row-blue { background: rgba(168, 216, 255, 0.2); }
.lb-row-pink { background: rgba(255, 179, 186, 0.2); }
.lb-row-mint { background: rgba(181, 234, 215, 0.2); }

.lb-rank {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
}

.rank-1 { color: #FFE14D; }
.rank-2 { color: #A8D8FF; }
.rank-3 { color: #FFB3BA; }
.rank-4 { color: #B5EAD7; }
.rank-5 { color: #4A4A4A; }

.lb-content {
    flex: 1;
}

.lb-question {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #1A1A1A;
    margin-bottom: 0.3rem;
}

.lb-answer {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: #4A4A4A;
    font-style: italic;
    line-height: 1.5;
}

.lb-laughs {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #F56565;
    white-space: nowrap;
    font-weight: 600;
}

.lb-laughs::before {
    content: '\1F602 ';
}

/* Footer with scattered confetti */

.footer {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 2rem 3rem;
    text-align: center;
    overflow: hidden;
}

.footer-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.footer-confetti .confetti-piece {
    animation: confettiSpin 6s linear infinite;
}

.fc-1 { background: #FFE14D; top: 10%; left: 8%; transform: rotate(20deg); animation-delay: 0s; }
.fc-2 { background: #A8D8FF; top: 25%; right: 12%; transform: rotate(-35deg); animation-delay: 0.8s; }
.fc-3 { background: #FFB3BA; bottom: 30%; left: 15%; transform: rotate(50deg); animation-delay: 1.6s; }
.fc-4 { background: #B5EAD7; top: 50%; right: 20%; transform: rotate(-10deg); animation-delay: 2.4s; }
.fc-5 { background: #FFE14D; bottom: 15%; left: 40%; transform: rotate(70deg); animation-delay: 3.2s; }
.fc-6 { background: #A8D8FF; top: 15%; left: 55%; transform: rotate(-45deg); animation-delay: 4s; }
.fc-7 { background: #FFB3BA; bottom: 40%; right: 8%; transform: rotate(30deg); animation-delay: 4.8s; }
.fc-8 { background: #B5EAD7; bottom: 10%; left: 25%; transform: rotate(-60deg); animation-delay: 5.6s; }

.footer-tagline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: #1A1A1A;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.flink {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #4A4A4A;
    text-decoration: none;
    transition: color 0.3s ease;
}

.flink:hover {
    color: #4299E1;
}

.footer-copy {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    color: #888;
    position: relative;
    z-index: 1;
}

/* Animations */

@keyframes floatRect {
    0%, 100% { transform: translateY(0) rotate(var(--rot, -3deg)); }
    50% { transform: translateY(-12px) rotate(var(--rot, -3deg)); }
}

@keyframes paperWobble {
    0%, 100% { transform: rotate(-1.5deg); }
    25% { transform: rotate(-0.5deg); }
    50% { transform: rotate(-2deg); }
    75% { transform: rotate(-1deg); }
}

@keyframes confettiFall {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 25deg)); opacity: 0.6; }
    50% { transform: translateY(-8px) rotate(var(--rot, 25deg)); opacity: 1; }
}

@keyframes confettiSpin {
    0% { transform: rotate(0deg); opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0.4; }
}

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

/* Fade-in on scroll */

.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */

@media (max-width: 640px) {
    .hero { padding: 4rem 1.5rem 3rem; min-height: 50vh; }
    .endpoint-card { transform: none !important; padding: 1rem; }
    .endpoint-card:hover { transform: none !important; }
    .collage-rect { display: none; }
    .endpoints, .code-examples, .leaderboard { padding: 3rem 1.5rem; }
    .lb-rank { font-size: 1.5rem; width: 40px; }
}