/* ============================================================
 * /map/worlds — public + personal directory of tilesets
 *
 * The hero on each card is one of two CSS-only visualizations:
 *
 *   .worlds-globe-stage  → rotating globe (no tile imagery yet)
 *   .worlds-cube-stage   → 3D cube with six tile faces
 *
 * Pure CSS so the directory stays light even with many cards.
 * Theme tokens (harbor / tidal / brass / mint) keep the cards
 * adaptive in light + dark via primaryShade. No raw hex.
 * ============================================================ */


/* ---------- Card hover lift ---------- */
.worlds-card {
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
.worlds-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px -12px var(--mantine-color-harbor-7),
        0 0 0 1px var(--mantine-color-tidal-5);
}


/* ---------- Card hero band ---------- */
.worlds-hero {
    background:
        radial-gradient(circle at 30% 20%,
            light-dark(var(--mantine-color-harbor-1), var(--mantine-color-harbor-9)) 0%,
            light-dark(var(--mantine-color-harbor-2), var(--mantine-color-dark-7)) 60%,
            light-dark(var(--mantine-color-harbor-3), var(--mantine-color-dark-8)) 100%);
    border-bottom: 1px solid var(--mantine-color-default-border);
    overflow: hidden;
}


/* ---------- 3D rotating globe (no tile imagery yet) ---------- */
.worlds-globe-stage {
    position: relative;
    width: 140px;
    height: 140px;
    perspective: 600px;
    margin: 0 auto;
}
.worlds-globe-sphere {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%,
            light-dark(var(--mantine-color-tidal-3), var(--mantine-color-tidal-7)) 0%,
            light-dark(var(--mantine-color-harbor-7), var(--mantine-color-harbor-9)) 70%);
    box-shadow:
        inset -16px -16px 32px rgba(0,0,0,0.45),
        inset  8px   8px 16px rgba(255,255,255,0.10),
        0 0 24px -4px var(--mantine-color-tidal-5);
}
.worlds-globe-land {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(255,255,255,0.18) 0%,
            transparent 55%),
        repeating-linear-gradient(
            90deg,
            light-dark(var(--mantine-color-mint-5), var(--mantine-color-mint-3)) 0px,
            light-dark(var(--mantine-color-mint-5), var(--mantine-color-mint-3)) 18px,
            transparent 18px,
            transparent 38px),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 26px,
            light-dark(var(--mantine-color-brass-4), var(--mantine-color-brass-3)) 26px,
            light-dark(var(--mantine-color-brass-4), var(--mantine-color-brass-3)) 30px);
    background-size: 100% 100%, 200% 100%, 200% 100%;
    animation: worlds-globe-rotate 22s linear infinite;
    mix-blend-mode: soft-light;
    opacity: 0.85;
}
.worlds-globe-glow {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle,
        var(--mantine-color-tidal-5) 0%,
        transparent 70%);
    opacity: 0.18;
    animation: worlds-globe-pulse 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes worlds-globe-rotate {
    from { background-position: 0% 0%,   0% 0%, 0%   0%; }
    to   { background-position: 0% 0%, 200% 0%, 0% 200%; }
}
@keyframes worlds-globe-pulse {
    0%, 100% { transform: scale(1.00); opacity: 0.18; }
    50%      { transform: scale(1.06); opacity: 0.30; }
}


/* ---------- 3D rotating tile cube ---------- */
.worlds-cube-stage {
    width: 140px;
    height: 140px;
    perspective: 700px;
    position: relative;
    margin: 0 auto;
}
.worlds-cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: worlds-cube-rotate 18s linear infinite;
}
.worlds-cube-face {
    position: absolute;
    width: 140px;
    height: 140px;
    background-color: var(--mantine-color-harbor-7);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.30);
    border: 1px solid var(--mantine-color-tidal-5);
    backface-visibility: hidden;
}
.worlds-cube-front  { transform: rotateY(   0deg) translateZ(70px); }
.worlds-cube-back   { transform: rotateY( 180deg) translateZ(70px); }
.worlds-cube-right  { transform: rotateY(  90deg) translateZ(70px); }
.worlds-cube-left   { transform: rotateY( -90deg) translateZ(70px); }
.worlds-cube-top    { transform: rotateX(  90deg) translateZ(70px); }
.worlds-cube-bottom { transform: rotateX( -90deg) translateZ(70px); }

@keyframes worlds-cube-rotate {
    0%   { transform: rotateX(-12deg) rotateY(  0deg); }
    100% { transform: rotateX(-12deg) rotateY(360deg); }
}


/* Pause animation on hover so visitors can read the front face. */
.worlds-cube-stage:hover .worlds-cube,
.worlds-globe-stage:hover .worlds-globe-land {
    animation-play-state: paused;
}


/* Reduced motion → no spinning, no pulse. */
@media (prefers-reduced-motion: reduce) {
    .worlds-cube,
    .worlds-globe-land,
    .worlds-globe-glow,
    .worlds-card {
        animation: none !important;
        transition: none !important;
    }
    .worlds-card:hover { transform: none; }
}


/* ---------- Card fade-in (staggered via inline animationDelay) ---------- */
.worlds-fade-in {
    opacity: 0;
    transform: translateY(6px);
    animation: worlds-fade-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes worlds-fade-in {
    to { opacity: 1; transform: translateY(0); }
}


/* ---------- dfl shell polish ---------- */
.worlds-dfl-shell .flexlayout__tabset {
    background: var(--mantine-color-body);
}
.worlds-dfl-shell .flexlayout__tab {
    overflow: auto;
    background: var(--mantine-color-body);
}
.worlds-dfl-shell .flexlayout__tab_button--selected {
    background: light-dark(
        var(--mantine-color-harbor-1),
        var(--mantine-color-dark-6)
    );
}


/* ---------- Empty / sign-in placeholder ---------- */
.worlds-placeholder {
    border: 1px dashed var(--mantine-color-default-border);
    border-radius: var(--mantine-radius-md);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: light-dark(
        var(--mantine-color-harbor-0),
        var(--mantine-color-dark-7)
    );
}