/* ギャラリーの拡大表示に足す「額に入れて見る」。部屋は CSS だけで描き、画像は足さない。
   写真は切らず、色も触らない。動かすのは transform と opacity だけ。 */
.portfolio-lightbox {
    --lbf-ui: 96px;
    --lbf-wall: #201d1a;
    --lbf-wall-light: #2e2924;
    --lbf-wall-deep: #171412;
    --lbf-floor: #171310;
    --lbf-floor-edge: #2f2923;
    --lbf-board: #2a2018;
    --lbf-board-light: #3a2c20;
    --lbf-wood: #d8b98c;
    --lbf-wood-edge: #b99665;
    --lbf-shade: #b08a58;
    --lbf-shade-light: #d9bb8a;
    --lbf-sun: rgba(255, 214, 150, 0.07);
    --lbf-glow: rgba(255, 190, 110, 0.28);
}

.lbf-room {
    position: absolute;
    inset: 0;
    background: var(--lbf-floor);
    opacity: 0;
    transition: opacity 0.7s var(--ease);
}

.portfolio-lightbox.is-framed .lbf-room {
    opacity: 1;
}

.lbf-scene {
    position: absolute;
    inset: 0 0 var(--lbf-ui) 0;
    pointer-events: none;
}

.lbf-wall {
    position: absolute;
    inset: 0 0 22% 0;
    background: radial-gradient(ellipse 80% 90% at 50% 40%, var(--lbf-wall-light), var(--lbf-wall) 60%, var(--lbf-wall-deep));
}

.lbf-sun {
    position: absolute;
    top: 0;
    left: 4%;
    width: 46%;
    height: 78%;
    background: linear-gradient(90deg, var(--lbf-sun) 0 44%, transparent 44% 50%, var(--lbf-sun) 50% 94%, transparent 94%);
    transform: skewX(-18deg);
    transform-origin: 0 0;
}

/* 額は A4（長辺 約30cm）。大きさの目安になるよう、棚の上に寄った構図にして卓上ランプを横に置く */
.lbf-board {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 22%;
    border-top: 4px solid var(--lbf-board-light);
    background: linear-gradient(var(--lbf-board-light), var(--lbf-board) 40%);
}

.lbf-lamp {
    position: absolute;
    bottom: 22%;
    left: calc(50% - min(34vw, 430px));
    height: 44%;
    aspect-ratio: 5 / 9;
}

.lbf-lamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46%;
    background: linear-gradient(var(--lbf-shade-light), var(--lbf-shade));
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.lbf-lamp::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 46%;
    width: 8%;
    height: 54%;
    background: var(--lbf-board-light);
}

.lbf-glow {
    position: absolute;
    bottom: 10%;
    left: calc(50% - min(34vw, 430px) - 22vh);
    width: 64vh;
    height: 64vh;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lbf-glow), transparent 68%);
}

.portfolio-lightbox.has-framed .portfolio-lightbox__dialog {
    padding-bottom: calc(var(--lbf-ui) + var(--space-6));
    pointer-events: none;
}

.portfolio-lightbox.has-framed .portfolio-lightbox__figure,
.portfolio-lightbox.has-framed .portfolio-lightbox__close {
    pointer-events: auto;
}

.portfolio-lightbox.has-framed .portfolio-lightbox__image {
    max-height: calc(100vh - 230px);
    max-height: calc(100svh - 230px);
}

.lbf-piece {
    position: relative;
    transition: transform 0.8s var(--ease);
}

.portfolio-lightbox.is-framed .lbf-piece {
    transform: translateY(var(--lbf-ty, 0)) scale(var(--lbf-s, 0.5));
}

.lbf-piece .portfolio-lightbox__image {
    position: relative;
    z-index: 2;
}

.portfolio-lightbox.is-framed .lbf-piece .portfolio-lightbox__image {
    border-radius: 0;
    box-shadow: none;
}

.lbf-frame {
    position: absolute;
    z-index: 1;
    inset: calc(-1 * var(--lbf-b, 14px));
    background: linear-gradient(135deg, var(--lbf-wood), var(--lbf-wood-edge));
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.55), 0 5px 10px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.portfolio-lightbox.is-framed .lbf-frame {
    opacity: 1;
    transition-delay: 0.15s;
}

.portfolio-lightbox.is-framed .portfolio-lightbox__caption {
    visibility: hidden;
}

.lbf-ui {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: var(--space-4) var(--space-4) var(--space-6);
    background: linear-gradient(transparent, rgba(9, 9, 11, 0.82) 34%);
    text-align: center;
    pointer-events: none;
}

.lbf-ui .btn {
    pointer-events: auto;
}

.lbf-ui .cta-row {
    margin: 0;
    justify-content: center;
}

.lbf-note {
    max-width: 34em;
    margin: 0 auto var(--space-3);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.7;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.lbf-note small {
    display: block;
    color: var(--muted);
    font-size: 0.8125rem;
}

.lbf-note .kp {
    display: inline-block;
}

.portfolio-lightbox.is-framed .lbf-note {
    opacity: 1;
    transition-delay: 0.4s;
}

.lbf-ui [hidden] {
    display: none;
}

@media (max-width: 768px) {
    .portfolio-lightbox {
        --lbf-ui: 216px;
    }

    .portfolio-lightbox.has-framed .portfolio-lightbox__image {
        max-height: calc(100vh - 340px);
        max-height: calc(100svh - 340px);
    }

    .lbf-lamp,
    .lbf-glow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lbf-room,
    .lbf-piece,
    .lbf-frame,
    .lbf-note {
        transition: none;
    }
}