/* globe.css */

.globe-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Manual 2D projection — no preserve-3d needed */
}

/* Hovered tile's name, bottom-center of the screen */
.tile-caption {
    position: fixed;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    z-index: 900;
    font-size: 13px;
    font-weight: 400; /* Circular Std Book */
    text-transform: lowercase;
    color: #000;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: 0 4px;
    transition: opacity 0.2s ease, translate 0.2s ease;
}

.tile-caption.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* Intro captions ("lucas huang", "est. 2000") under the centered About Me figure */
.intro-name {
    position: absolute;
    left: 50%; /* centered via GSAP xPercent: -50 */
    z-index: 2500;
    font-size: 13px;
    font-weight: 400; /* Circular Std Book */
    line-height: 1.3;
    color: #111;
    white-space: nowrap;
    pointer-events: none;
}

.globe-tile {
    position: absolute;
    /* Offset so transform-origin is the tile center, which sits on the ring origin */
    transform-origin: center center;
    transform-style: preserve-3d;
}

.globe-tile__inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e4e4e4;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s;
}

.globe-tile:not(.no-hover):hover .globe-tile__inner {
    box-shadow: 0 10px 36px rgba(0,0,0,0.22);
}

.globe-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Cut-out tile (transparent PNG/WebP): no card — the figure stands on its own with a shadow
   that follows its outline. .is-flat (set by the intro while it's alone) hides that shadow. */
.globe-tile--cutout .globe-tile__inner {
    background: transparent;
    box-shadow: none !important;
    overflow: visible;
}

.globe-tile--cutout .globe-tile__img {
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
    transition: filter var(--shadow-fade, 0.2s) ease;
}

.globe-tile--cutout:not(.no-hover):hover .globe-tile__img {
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.26));
}

.globe-tile--cutout.is-flat .globe-tile__img {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0));
}

/* Selected section's name, large and pale behind its row (globe-home.js → swapSectionTitle) */
.section-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%; /* centered via GSAP yPercent: -50 */
    z-index: 0;
    text-align: center;
    font-size: clamp(120px, 19vw, 340px);
    line-height: 1;
    color: #efefef;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}