/* ============================================
   Floating Field — 2D pannable card cluster
   with slow thermal drift

   Structure: .floating-drift (span, drift via JS transform)
              └ .floating-link (a, hover scale via CSS transform)

   The field is larger than its viewport window on all
   screen sizes. JS auto-centers the scroll so the user
   can pan in any direction to explore.
   ============================================ */

/* Viewport window — clips the larger inner field */
.floating-field {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Fade edges to hint there's more to explore */
    mask-image: radial-gradient(
        ellipse 48% 48% at center,
        black 70%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 48% 48% at center,
        black 70%,
        transparent 100%
    );
    /* Hide scrollbars but keep scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.floating-field::-webkit-scrollbar {
    display: none;
}

/* Height set dynamically by JS based on card count.
   This fallback only shows during initial render. */
.floating-field {
    height: 60vh;
}

/* Inner cluster — wider/taller than viewport so cards form a 2D field */
.floating-field-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 0.35rem;
    /* Wider than viewport so cards wrap into multiple rows */
    width: 120vw;
    max-width: none;
    min-height: 100%;
    padding: 10vh 18vw;
    box-sizing: border-box;
}

/* Drift wrapper — positioned by JS via style.transform */
.floating-drift {
    display: inline-flex;
    will-change: transform;
    margin: 0.2rem 0.05rem;
    flex-shrink: 0;
}

.floating-drift:nth-child(odd) {
    margin-bottom: 0.5rem;
}

.floating-drift:nth-child(even) {
    margin-top: 0.5rem;
    z-index: 2;
}

/* Inner link card — hover scale lives here */
.floating-link {
    display: inline-flex;
    align-items: center;
    padding: 0.66rem 1.2rem;
    background-clip: padding-box;
    border: 1px solid rgba(42, 37, 32, 0.06);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(42, 37, 32, 0.05), 0 0 0 1px rgba(42, 37, 32, 0.02);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 450;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Washed southwestern palette — 8 subtle tints cycling via nth-child.
   All backgrounds are very light pastel washes so charcoal text stays readable. */

/* Terracotta wash */
.floating-drift:nth-child(8n+1) .floating-link { background: #F5E8E3; }
/* Sandstone wash */
.floating-drift:nth-child(8n+2) .floating-link { background: #F0EBE2; }
/* Slate blue wash */
.floating-drift:nth-child(8n+3) .floating-link { background: #E6EDF1; }
/* Sienna wash */
.floating-drift:nth-child(8n+4) .floating-link { background: #F2E4DD; }
/* Sage wash */
.floating-drift:nth-child(8n+5) .floating-link { background: #E9EDE6; }
/* Clay wash */
.floating-drift:nth-child(8n+6) .floating-link { background: #F3EAE1; }
/* Dusk purple wash */
.floating-drift:nth-child(8n+7) .floating-link { background: #EDEAEF; }
/* Mesa gold wash */
.floating-drift:nth-child(8n+8) .floating-link { background: #F0ECE0; }

/* Hover: scale up + visual lift */
.floating-link:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(42, 37, 32, 0.14), 0 0 0 1px rgba(42, 37, 32, 0.06);
    border-color: var(--color-border-strong);
    color: var(--color-terracotta);
    z-index: 10;
}

/* Size variants (~20% larger than original) */
.floating-link--lg {
    font-size: 1.125rem;
    padding: 0.72rem 1.32rem;
}

.floating-link--md {
    font-size: 0.975rem;
}

.floating-link--sm {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 768px) {
    .floating-field {
        height: 40vh;
    }

    .floating-field-inner {
        width: 180vw;
        padding: 8vh 20vw;
        gap: 0.3rem;
    }

    .floating-drift,
    .floating-drift:nth-child(odd),
    .floating-drift:nth-child(even) {
        margin: 0.15rem 0.1rem;
    }

    .floating-link {
        font-size: 0.9rem;
        padding: 0.48rem 0.84rem;
    }

    .floating-link--lg {
        font-size: 0.975rem;
        padding: 0.54rem 0.96rem;
    }

    .floating-link--md {
        font-size: 0.9rem;
    }

    .floating-link--sm {
        font-size: 0.825rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-drift {
        will-change: auto;
    }
}