/* lump.dev — Art Deco neon-fusion stylesheet */

:root {
    --bg-charcoal: #1A1A2E;
    --bg-deepnavy: #12122A;
    --panel-dark: #1E1E32;
    --neon-teal: #00E5CC;
    --neon-coral: #FF6B6B;
    --neon-gold: #FFD700;
    --silver: #C0C0D0;

    --font-display: "Poiret One", "Inter", serif;
    --font-body: "Questrial", "Inter", sans-serif;
    --font-mono: "Space Mono", "Courier New", monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-charcoal);
    color: var(--silver);
    font-family: var(--font-body);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(0, 229, 204, 0.04), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(255, 107, 107, 0.04), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.02), transparent 60%);
}

/* ========== HERO ========== */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-charcoal);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.hero-frame {
    position: absolute;
    inset: 24px;
    pointer-events: none;
    border: 1px solid rgba(255, 215, 0, 0.18);
}

.hero-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}
.hero-corner.top-left { top: 0; left: 0; }
.hero-corner.top-right { top: 0; right: 0; }
.hero-corner.bottom-left { bottom: 0; left: 0; }
.hero-corner.bottom-right { bottom: 0; right: 0; }

.sunburst {
    position: absolute;
    width: min(90vmin, 800px);
    height: min(90vmin, 800px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.55;
    pointer-events: none;
}

.sunburst-line {
    stroke: var(--neon-gold);
    stroke-width: 0.8;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: sunburstDraw 2s ease-out forwards;
}

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

#sunburst-lines {
    transform-origin: 0 0;
    animation: sunburstRotate 60s linear infinite;
}

@keyframes sunburstRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-content {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 40px 24px;
    max-width: 800px;
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--neon-gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.6s forwards;
}

.logotype {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(56px, 14vw, 180px);
    color: var(--silver);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 24px;
    text-shadow:
        0 0 4px rgba(0, 229, 204, 0.6),
        0 0 12px rgba(0, 229, 204, 0.3),
        0 0 24px rgba(0, 229, 204, 0.1);
    opacity: 0;
    animation: fadeInUp 1.2s ease-out 1s forwards;
}

.logotype .dot {
    color: var(--neon-coral);
    text-shadow:
        0 0 4px rgba(255, 107, 107, 0.7),
        0 0 12px rgba(255, 107, 107, 0.4),
        0 0 24px rgba(255, 107, 107, 0.2);
    display: inline-block;
    animation: dotPulse 2.4s ease-in-out 2s infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--silver);
    margin-bottom: 32px;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.4s forwards;
    letter-spacing: 0.02em;
}

.hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--neon-gold);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.6s forwards;
}

.hero-meta .diamond {
    font-size: 9px;
    color: var(--neon-teal);
    text-shadow: 0 0 6px rgba(0, 229, 204, 0.5);
}

.scroll-indicator {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--neon-gold);
    opacity: 0;
    animation: fadeInUp 1s ease-out 2s forwards, floatY 2.4s ease-in-out 3s infinite;
    cursor: pointer;
    z-index: 2;
}

.scroll-indicator svg {
    width: 18px;
    height: 30px;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

@keyframes floatY {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

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

/* ========== DECORATIVE STRIPS ========== */
.strip {
    height: 40px;
    width: 100%;
    background-color: var(--bg-deepnavy);
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}

.strip-zigzag {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 16px,
            rgba(255, 215, 0, 0.18) 16px,
            rgba(255, 215, 0, 0.18) 17px,
            transparent 17px,
            transparent 32px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 16px,
            rgba(255, 215, 0, 0.18) 16px,
            rgba(255, 215, 0, 0.18) 17px,
            transparent 17px,
            transparent 32px
        );
}

.strip-pyramid {
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 12px,
            rgba(255, 215, 0, 0.15) 12px,
            rgba(255, 215, 0, 0.15) 13px,
            transparent 13px,
            transparent 24px,
            rgba(0, 229, 204, 0.15) 24px,
            rgba(0, 229, 204, 0.15) 25px,
            transparent 25px,
            transparent 36px
        );
}

.strip-diamond {
    background-image:
        repeating-linear-gradient(
            60deg,
            transparent 0,
            transparent 18px,
            rgba(255, 215, 0, 0.18) 18px,
            rgba(255, 215, 0, 0.18) 19px,
            transparent 19px,
            transparent 36px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent 0,
            transparent 18px,
            rgba(255, 215, 0, 0.18) 18px,
            rgba(255, 215, 0, 0.18) 19px,
            transparent 19px,
            transparent 36px
        );
}

/* ========== MAIN GRID ========== */
.main-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 96px 32px;
}

.section-intro {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 720px;
}

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--neon-gold);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 5vw, 56px);
    color: var(--silver);
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow:
        0 0 6px rgba(0, 229, 204, 0.4),
        0 0 14px rgba(0, 229, 204, 0.18);
}

.section-body {
    font-family: var(--font-body);
    color: var(--silver);
    opacity: 0.85;
    font-size: clamp(14px, 1.1vw, 17px);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

@media (max-width: 960px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .card-grid { grid-template-columns: 1fr; }
    .main-grid { padding: 56px 20px; }
}

/* ========== CARDS ========== */
.card {
    position: relative;
    padding: 32px 28px;
    background-color: var(--panel-dark);
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--panel-dark), var(--panel-dark)),
        linear-gradient(135deg, var(--neon-gold), var(--neon-teal));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.card.in-view {
    animation: cardFadeIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes cardFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

.card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(0, 229, 204, 0.12);
}

.card[data-color="teal"]:hover {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(0, 229, 204, 0.25);
}

.card[data-color="coral"]:hover {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 107, 107, 0.25);
}

.card[data-color="gold"]:hover {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 215, 0, 0.25);
}

.card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card[data-color="teal"] .card-icon svg {
    filter: drop-shadow(0 0 4px rgba(0, 229, 204, 0.6));
}

.card[data-color="coral"] .card-icon svg {
    filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.6));
}

.card[data-color="gold"] .card-icon svg {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

.card-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    margin-bottom: 12px;
    opacity: 0.7;
}

.card[data-color="teal"] .card-meta { color: var(--neon-teal); }
.card[data-color="coral"] .card-meta { color: var(--neon-coral); }
.card[data-color="gold"] .card-meta { color: var(--neon-gold); }

.card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 40px);
    color: var(--silver);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    line-height: 1.05;
}

.card[data-color="teal"] .card-title {
    text-shadow: 0 0 6px rgba(0, 229, 204, 0.4);
}
.card[data-color="coral"] .card-title {
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.4);
}
.card[data-color="gold"] .card-title {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.card-body {
    font-family: var(--font-body);
    color: var(--silver);
    opacity: 0.82;
    font-size: 15px;
    flex: 1;
    margin-bottom: 20px;
}

.card-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.card-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    padding: 4px 10px;
    border: 1px solid currentColor;
    color: var(--neon-gold);
    opacity: 0.7;
    border-radius: 0;
}

.card[data-color="teal"] .card-tag { color: var(--neon-teal); }
.card[data-color="coral"] .card-tag { color: var(--neon-coral); }
.card[data-color="gold"] .card-tag { color: var(--neon-gold); }

/* Ripple */
.ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--neon-teal);
    pointer-events: none;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    opacity: 0.6;
    animation: rippleOut 0.9s ease-out forwards;
}

.card[data-color="coral"] .ripple { border-color: var(--neon-coral); }
.card[data-color="gold"] .ripple { border-color: var(--neon-gold); }

@keyframes rippleOut {
    from {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    to {
        width: 480px;
        height: 480px;
        opacity: 0;
    }
}

/* ========== FOOTER ========== */
.footer {
    background-color: var(--bg-deepnavy);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    padding: 64px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-ornament {
    flex: 1;
    max-width: 220px;
    min-width: 120px;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}

.footer-ornament svg {
    width: 100%;
    height: auto;
    display: block;
}

.footer-mark {
    text-align: center;
    flex: 0 0 auto;
}

.footer-logotype {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 48px);
    color: var(--silver);
    letter-spacing: 0.04em;
    text-shadow:
        0 0 4px rgba(0, 229, 204, 0.5),
        0 0 12px rgba(0, 229, 204, 0.2);
    line-height: 1;
    margin-bottom: 12px;
}

.footer-logotype .dot {
    color: var(--neon-coral);
    text-shadow:
        0 0 4px rgba(255, 107, 107, 0.6),
        0 0 12px rgba(255, 107, 107, 0.3);
}

.footer-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--neon-gold);
    opacity: 0.75;
}

@media (max-width: 720px) {
    .footer-ornament { display: none; }
    .footer { padding: 40px 24px; }
}