/* ─── Landing Page (/)) ──────────────────────────────────────────────────────
   All selectors scoped to .lp-* — zero conflict with other page CSS.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Pointer-event isolation ────────────────────────────────────────────────
   Same pattern as the original landing: disable globally on the page,
   re-enable on every element that needs interaction. */
.lp-page                      { pointer-events: none; overflow-x: hidden; }
.lp-hero-content a,
.lp-hero-content button       { pointer-events: auto; }
.lp-card-wrap                 { pointer-events: auto; }
.lp-features a                { pointer-events: auto; }
.lp-recent a,
.lp-recent button,
.lp-recent .dg-tile           { pointer-events: auto; }
.lp-stats                     { pointer-events: auto; }

/* ─── Local design tokens ────────────────────────────────────────────────────*/
.lp-page {
    --lp-gold:      #c4963e;
    --lp-gold-dim:  rgba(196, 150, 62, 0.1);
    --lp-gold-glow: rgba(196, 150, 62, 0.3);
}

/* ─── Hero ───────────────────────────────────────────────────────────────────
   Standard flex column: hero content sits above the card display.
   position: relative establishes the stacking context that z-index comparisons
   between the two children resolve within. */
.lp-hero {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    position: relative;
    background:
        radial-gradient(ellipse 70% 60% at 20% 40%, rgba(30, 15, 65, 0.6) 0%, transparent 100%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(15, 8, 35, 0.4) 0%, transparent 100%),
        var(--bg);
}

/* Star field: tiled radial dot pattern at varying densities */
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.80) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.50) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.30) 1px, transparent 1px);
    background-size: 380px 380px, 270px 270px, 530px 530px;
    background-position: 0 0, 110px 55px, 230px 185px;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}

/* ─── Hero content (text + CTAs) ─────────────────────────────────────────────
   z-index: 2 places this above the card display (z-index: 1).
   Because the card children do NOT use transform-style: preserve-3d, normal
   z-index stacking applies — hover-lifted cards stay in the z-index 1 layer
   and are painted before this element, so they cannot visually overlap the text.
   The gradient background fades from opaque (covering any cards that drift near
   the boundary) to transparent (letting the star field breathe at the bottom). */
.lp-hero-content {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, var(--bg) 55%, transparent 100%);
    padding-bottom: 0;
}

/* Inner wrapper constrains text width and centers it */
.lp-hero-inner {
    text-align: center;
    padding: 52px 24px 0;
    max-width: 680px;
    margin: 0 auto;
}

/* ─── Card display ───────────────────────────────────────────────────────────
   z-index: 1 — below the hero content. Hover-lifted cards remain in this
   stacking layer and are naturally occluded by the hero content above. */
.lp-card-display-wrap {
    flex: 1;
    min-height: 360px;
    position: relative;
    z-index: 1;
}

/* Bottom fade */
.lp-card-display-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 75%, var(--bg) 100%);
    pointer-events: none;
    z-index: 10;
}

/* Perspective container */
.lp-card-display {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 100vw;
    perspective-origin: 50% 0%;
}

/* Card scene: rotated on X axis to create the receding-table look.
   preserve-3d allows child rows to be positioned at real Z depths.
   This is contained within the .lp-card-display-wrap stacking context
   so it cannot affect z-index resolution with .lp-hero-content. */
.lp-card-scene {
    width: 100%;
    height: 100%;
    transform: translateY(-60px) rotateX(61deg);
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
}

.lp-card-row {
    display: flex;
    gap: 28px;
    justify-content: center;
    margin-bottom: 28px;
}

/* Z-translations position each row at a real depth in the 3D scene.
   Cards face the viewer directly — no distortion from lying in a tilted plane. */
.lp-card-row:nth-child(1) { transform: translate3d(0, 0,  120px); }
.lp-card-row:nth-child(2) { transform: translate3d(0, 0,   40px); }
.lp-card-row:nth-child(3) { transform: translate3d(0, 0,  -40px); }
.lp-card-row:nth-child(4) { transform: translate3d(0, 0, -120px); }

/* Stationary hover target — never moves, so cursor stays over it */
.lp-card-wrap {
    width: 200px;
    aspect-ratio: 5 / 7;
    flex-shrink: 0;
    cursor: pointer;
}

/* Inner lift element — this is what actually moves on hover */
.lp-card-lift {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    /* No transform-style: preserve-3d */
    box-shadow: 0 4px 16px rgba(0,0,0,0.55);
    filter: brightness(0.7);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.lp-card-wrap:hover .lp-card-lift {
    transform: translateY(-80px);
    box-shadow: 0 40px 60px rgba(0,0,0,0.85), 0 0 28px var(--lp-gold-glow);
    filter: brightness(1);
}

.lp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Landscape (non-unit) cards: portrait container, image rotated 90deg.
   Container 200×280px; image set to 280×200, centered, then rotate(-90deg). */
.lp-card-wrap--landscape .lp-card-lift {
    position: relative;
}
.lp-card-wrap--landscape .lp-card-img {
    position: absolute;
    width: 280px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    object-fit: fill;
}

/* ─── Hero typography ────────────────────────────────────────────────────────*/
@keyframes lp-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lp-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--lp-gold);
    margin-bottom: 18px;
    animation: lp-fadeUp 0.5s ease both;
    animation-delay: 0.05s;
}

.lp-title {
    font-family: 'Orbitron', sans-serif; /* ← font: change family here */
    font-size: clamp(1.6rem, 4vw, 3rem); /* ← Orbitron is wide — kept smaller than default */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .04em;
    margin: 0 0 20px;
    animation: lp-fadeUp 0.6s ease both;
    animation-delay: 0.15s;
}

.lp-divider {
    width: 52px;
    height: 2px;
    background: var(--lp-gold);
    margin: 0 auto 20px;
    animation: lp-fadeUp 0.5s ease both;
    animation-delay: 0.3s;
}

.lp-subtitle {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-muted);
    margin: 0 0 32px;
    animation: lp-fadeUp 0.5s ease both;
    animation-delay: 0.4s;
}

.lp-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    animation: lp-fadeUp 0.5s ease both;
    animation-delay: 0.5s;
}

.lp-cta {
    padding: 10px 22px;
    font-size: 14px;
}

/* Gold primary button for the landing */
.lp-page .btn-primary {
    background: var(--lp-gold);
    border-color: var(--lp-gold);
    color: #0a0a0f;
}
.lp-page .btn-primary:hover {
    background: #d4a84e;
    border-color: #d4a84e;
    color: #0a0a0f;
}

/* ─── Stats bar ──────────────────────────────────────────────────────────────*/
.lp-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 2;
}

.lp-stat {
    flex: 1;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 24px;
}

.lp-stat-sep {
    width: 1px;
    height: 48px;
    background: var(--border);
    flex-shrink: 0;
}

.lp-stat-num {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--lp-gold);
    line-height: 1;
}

.lp-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

/* ── Light mode: remove the dark nebula gradients and star field ── */
[data-theme="light"] .lp-hero {
    background: var(--surface);
}
[data-theme="light"] .lp-hero::before {
    display: none;
}
[data-theme="light"] .lp-hero-content {
    background: linear-gradient(to bottom, var(--surface) 55%, transparent 100%);
}

/* ─── Features ───────────────────────────────────────────────────────────────*/
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 80px;
    position: relative;
    z-index: 0;
    border-top: 1px solid var(--border);
}

.lp-feature {
    padding: 0 40px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-feature:first-child {
    padding-left: 0;
    border-left: none;
}

.lp-feature:last-child {
    padding-right: 0;
}

.lp-feature h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-gold);
}

.lp-feature p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    flex: 1;
}

/* ─── Recent decks ───────────────────────────────────────────────────────────*/
.lp-recent {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 72px;
    position: relative;
    z-index: 0;
}

.lp-recent-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.lp-recent-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
    .lp-features {
        grid-template-columns: 1fr;
        padding: 40px 24px 64px;
    }

    .lp-feature {
        padding: 24px 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .lp-feature:first-child {
        border-top: none;
        padding-top: 0;
    }

    .lp-stats {
        flex-direction: column;
        gap: 24px;
        padding: 40px 24px;
    }

    .lp-stat-sep {
        width: 48px;
        height: 1px;
    }
}