/* section-canvas.css — the nav sections' infinite canvases (js/v2/section-canvas.js) */

.section-canvas {
    position: absolute;
    inset: 0;
    z-index: 5; /* above the globe it takes over from */
    overflow: hidden;
    display: none;
    touch-action: none; /* panning is handled in JS */
    user-select: none;  /* dragging items shouldn't select text */
}

.section-canvas.is-active {
    display: block;
}

/* One layer per section (only the one showing, or two mid-switch); origin at the screen
   center, the camera moves it */
.section-canvas__layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    display: none;
    will-change: transform;
}
.section-canvas__layer.is-shown {
    display: block;
}

/* No clicking while it's moving in or out */
.section-canvas.is-locked .section-canvas__layer {
    pointer-events: none;
}

/* Screen-space layer for the arrival ripple */
.section-canvas__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The live site's system ripple, in light gray for the white page */
.section-canvas__ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #dcdcdc;
    border-radius: 50%;
}

/* ── Items ─────────────────────────────────────────────────────────────────── */
/* Placed by their center (the section tile centers itself with negative margins) */
.section-canvas__item:not(.is-anchor) {
    position: absolute;
    translate: -50% -50%;
}

/* Raised while hovered or held, so bubbles and dragged items sit above their neighbours */
.section-canvas__item:hover { z-index: 100; }
.section-canvas__item.is-held { z-index: 9999; }

/* ── Desktop icons — a 1:1 copy of the live portfolio's (styles/general.css + guestbook.css) ──
   Scoped to the canvas; selectors and values as on the live site. The live site sizes boxes
   content-box (no global border-box), so hover padding grows the frame outward around the icon
   instead of shrinking the icon — restored here, since v2's reset makes everything border-box. */
.section-canvas .projectfolder,
.section-canvas .projectfolder * {
    box-sizing: content-box;
}
.section-canvas div.projectfolder {
    position: relative;
    display: inline-block;
    z-index: 9;
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-family: 'SFMedium', sans-serif;
    color: #ffffff;
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease-out, z-index 0s, background-color 0.6s ease-in-out;
}
.section-canvas .projectfolder.appear {
    opacity: 1;
    transform: scale(1);
}
.section-canvas .projectfolder.appear:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
.section-canvas .projectfolder:hover .projectfolderheader {
    transition: none;
}
.section-canvas div.projectfolderheader {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0px;
    margin: 0px;
    z-index: 10;
    overflow: hidden;
}
.section-canvas img.projectimage {
    height: 6vh;
    width: 6vh;
    object-fit: cover;
    display: block;
    border: 1px solid transparent;
    background-color: #ffffff00;
    border-radius: 3px;
    min-width: 50px;
    min-height: 50px;
    transition: padding 0.25s ease-out, background-color 0.25s ease-out,
                border-color 0.25s ease-out, border-radius 0.25s ease-out;
}
.section-canvas .ProjectText {
    color: #fff;
    font-size: 1.3vh;
    margin: 0;
    padding: 7px 0;
    display: inline-block;
    background: rgba(0, 0, 0, 0);
    border-radius: 3px;
    transition: transform 0.25s ease-out, padding 0.25s ease-out;
}
.section-canvas .projectfolder:hover {
    z-index: 100;
    transform: scale(1.1) translate(-5%, -5%);
}
.section-canvas .projectfolder:hover p {
    padding: 3px 5px;
    transform: translateY(3px);
    background-color: #007afd;
}
.section-canvas .projectfolder:hover .projectimage {
    padding: 5px;
    background-color: #00000015;
    border-color: #e4e4e450;
    border-radius: 3px;
}

/* Being dragged: no hover scale, no transition (live: .projectfolder.is-dragging) */
.section-canvas .projectfolder.is-dragging {
    transform: none !important;
    z-index: 9999 !important;
    transition: none !important;
}

/* Speech bubble (shown on hover — .isolate-bubble) */
.section-canvas .folder-bubble-always {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
    position: absolute;
    bottom: 120%;
    left: 50%;
    background-color: #33333380;
    color: #ffffff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'SFRegular', sans-serif;
    text-shadow: none;
    white-space: nowrap;
    font-weight: 500;
    z-index: 1000;
}
.section-canvas .folder-bubble-always::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #33333380 transparent transparent transparent;
    z-index: 10000;
    pointer-events: none;
}
.section-canvas .projectfolder.isolate-bubble .folder-bubble-always {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateX(-50%) translateY(10px) !important;
}
.section-canvas .projectfolder.isolate-bubble:hover .folder-bubble-always {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Preview bubble (GIF / video + role and status) */
.section-canvas .preview-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.17);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;
    width: fit-content;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
    z-index: 1000;
}
.section-canvas .preview-gif {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: top left;
    border-radius: 4px;
    display: block;
    background-color: rgba(255, 255, 255, 0.08);
}
.section-canvas .preview-meta {
    display: flex;
    align-items: stretch;
    gap: 5px;
    padding-top: 6px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    font-family: 'SFMedium', sans-serif;
    font-weight: 500;
    text-shadow: none;
}
.section-canvas .preview-role {
    opacity: 1;
    font-family: 'SFMedium', sans-serif;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 4px 10px;
    flex: 1;
    text-align: center;
}
.section-canvas .preview-status {
    opacity: 1;
    font-family: 'SFMedium', sans-serif;
    text-transform: none;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 4px 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
    .section-canvas .projectfolder:hover .preview-bubble {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Stamps crate (guestbook.css) */
.section-canvas .gb-folder-crate {
    position: relative;
    width: 6vh;
    height: 6vh;
    min-width: 50px;
    min-height: 50px;
    flex-shrink: 0;
}
.section-canvas .gb-folder-crate-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.section-canvas .gb-folder-crate-stamps {
    transition: transform 0.2s ease;
}
.section-canvas .projectfolder:hover .gb-folder-crate-stamps {
    transform: translateY(-15%);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3D object placeholder — a pale cube; section-canvas.js turns and tumbles it */
.canvas-3d {
    width: var(--cube, 100px);
    height: var(--cube, 100px);
    perspective: 600px;
}

.canvas-3d__cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.canvas-3d__cube span {
    position: absolute;
    inset: 0;
    background: #efefef;
    border: 1px solid #e2e2e2;
}

.canvas-3d__cube span:nth-child(1) { transform: rotateY(0deg)   translateZ(calc(var(--cube, 100px) / 2)); background: #f4f4f4; }
.canvas-3d__cube span:nth-child(2) { transform: rotateY(90deg)  translateZ(calc(var(--cube, 100px) / 2)); background: #e9e9e9; }
.canvas-3d__cube span:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--cube, 100px) / 2)); }
.canvas-3d__cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--cube, 100px) / 2)); background: #e4e4e4; }
.canvas-3d__cube span:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--cube, 100px) / 2)); background: #f8f8f8; }
.canvas-3d__cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--cube, 100px) / 2)); background: #dedede; }