/* full viewport canvas area */
#canvas {
    width: 100vw;
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

/* pinned top text block using device corner radius for top padding */
.top-display {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding-top: var(--device-corner-radius);
    padding-right: 2.5rem;
    padding-bottom: 1rem;
    padding-left: 2.5rem;
    display: flex;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.display-text {
    max-width: 48rem;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.65;
    text-align: justify;
    letter-spacing: 0.01em;
    pointer-events: none;
    transition: opacity 120ms ease;
}

/* svg connector lines overlay */
.arrows-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* pure dotted lines without arrowheads */
.canvas-arrow {
    fill: none;
    stroke: var(--fg);
    stroke-width: 1.5px;
    stroke-dasharray: 3 3;
    transition: stroke 200ms ease;
}

/* shared draggable element properties layered on top of text */
.canvas-item {
    position: absolute;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    z-index: 20;
    transition: transform 120ms ease, background-color 200ms ease, color 200ms ease;
}

/* disable native dragging on all child images and links */
.canvas-item img,
.canvas-item a {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.canvas-item:active,
.canvas-item.dragging {
    cursor: grabbing;
}

/* logo container scaled to 100px */
.item-logo {
    top: 40%;
    left: 15%;
    width: 100px;
    height: 100px;
    z-index: 25;
}

.item-logo:hover {
    transform: scale(1.08);
}

.item-logo:active,
.item-logo.dragging {
    transform: scale(0.96);
}

.canvas-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: none !important;
}

.logo-transparent {
    opacity: 1;
}

.logo-solid {
    opacity: 0;
}

/* hover or dark theme swaps transparent logo to solid logo */
.item-logo:hover .logo-transparent,
body.dark-theme .logo-transparent {
    opacity: 0;
}

.item-logo:hover .logo-solid,
body.dark-theme .logo-solid {
    opacity: 1;
}

/* borderless project logo icons scaled to 100px */
.item-project {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 25;
}

.item-project:hover {
    transform: scale(1.08);
}

.item-project:active,
.item-project.dragging {
    transform: scale(0.96);
}

.project-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
}

/* invert project vector icons in dark theme */
body.dark-theme .project-icon {
    filter: invert(1);
}

/* initial positions for project icon badges with a first and w second */
#item-project-a {
    top: 42%;
    right: 28%;
}

#item-project-w {
    top: 60%;
    right: 22%;
}

/* borderless annotation note labels using courier code */
.canvas-note {
    padding: 0.2rem 0.4rem;
    background: transparent;
    border: none;
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    z-index: 30;
    white-space: nowrap;
}

#note-marcin {
    top: 32%;
    left: 12%;
}

#note-planet {
    top: 35%;
    right: 32%;
}

#note-dinosaur {
    top: 74%;
    right: 25%;
}

#note-projects {
    top: 50%;
    right: 7%;
}

#note-face {
    bottom: 14%;
    right: 14%;
}

/* peeking portrait anchored to bottom right */
.peeking-portrait {
    position: fixed;
    bottom: 0;
    right: 0;
    width: clamp(9rem, 18vw, 14rem);
    z-index: 35;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    transform: translateY(80%);
    transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.peeking-portrait.dragging {
    cursor: grabbing;
    transition: none;
}

.portrait-image {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    filter: none !important;
}

/* mobile layout adjustments */
@media (max-width: 768px) {
    .top-display {
        padding-top: var(--device-corner-radius);
        padding-right: 1rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
    }

    .display-text {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .item-logo {
        top: 36%;
        left: 8%;
        width: 100px;
        height: 100px;
    }

    #note-marcin {
        top: 30%;
        left: 8%;
    }

    .item-project {
        width: 100px;
        height: 100px;
    }

    .project-icon {
        width: 100px;
        height: 100px;
    }

    #note-projects {
        top: 48%;
        left: 20%;
        right: auto;
    }

    #item-project-a {
        top: 56%;
        left: 8%;
        right: auto;
    }

    #note-planet {
        top: 70%;
        left: 8%;
        right: auto;
    }

    #item-project-w {
        top: 56%;
        left: 42%;
        right: auto;
    }

    #note-dinosaur {
        top: 70%;
        left: 42%;
        right: auto;
    }

    .peeking-portrait {
        width: 7.5rem;
    }

    #note-face {
        bottom: 13%;
        right: 8.5rem;
    }
}