/* A gallery of real products with event-driven image depth and page transitions. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: spatial-exit .24s ease-out both; }
::view-transition-new(root) { animation: spatial-enter .45s var(--ease) both; }
@keyframes spatial-exit { to { opacity: 0; transform: translateY(-8px); } }
@keyframes spatial-enter { from { opacity: 0; transform: translateY(14px); } }

/* Gallery rhythm: generous stages rather than identical boxes. */
.spatial-home #works { padding-top: clamp(4rem, 7vw, 7rem); }
.spatial-home #works .head { margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.spatial-home #works .head__title { font-size: clamp(2.9rem, 7.7vw, 7.2rem); }
.spatial-home #works .works { align-items: start; row-gap: clamp(3.5rem, 7vw, 7rem); }
.spatial-home #works .work {
    border: 0;
    background: transparent;
    overflow: visible;
}
.spatial-home #works .work__canvas {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    box-shadow: 0 24px 45px -30px oklch(24% .009 85 / .3);
}
.spatial-home #works .work__strip {
    border: 0;
    padding: 1.2rem 0 0;
    align-items: baseline;
    gap: .65rem 1rem;
}
.spatial-home #works .work__strip b { font-size: clamp(1.25rem, 1.8vw, 1.7rem); }
.spatial-home #works .work__strip > span { font-size: .8125rem; font-weight: 400; }
@media (min-width: 1000px) {
    .spatial-home #works .work:nth-child(4n + 1),
    .spatial-home #works .work:nth-child(4n) { grid-column: span 7; }
    .spatial-home #works .work:nth-child(4n + 2),
    .spatial-home #works .work:nth-child(4n + 3) { grid-column: span 5; }
    .spatial-home #works .work:nth-child(even) { margin-top: clamp(5rem, 8vw, 8rem); }
    .spatial-home #works .work:nth-child(4n + 2) .work__canvas { aspect-ratio: 4 / 3; }
}

/* Tilt lives on the image plane; scroll reveal owns the outer link. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .depth-ready .work__canvas {
        transform: perspective(1400px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translate3d(0, var(--depth-lift, 0px), 0);
        transition: transform .6s var(--ease);
        transform-origin: center;
    }
    .depth-ready:hover .work__canvas {
        transform: perspective(1400px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translate3d(0, var(--depth-lift, 0px), 0);
    }
    .depth-ready .work__canvas::after {
        content: '';
        position: absolute;
        z-index: 4;
        inset: -30%;
        background: linear-gradient(115deg, transparent 32%, oklch(98% .005 85 / .12) 46%, transparent 57%);
        transform: translateX(var(--depth-glint, -15%));
        opacity: 0;
        pointer-events: none;
        transition: transform .65s var(--ease), opacity .4s var(--ease);
    }
    .depth-ready:hover .work__canvas::after { opacity: 1; }
}

@media (max-width: 899px) {
    .spatial-home #works .work__strip { padding-top: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .work:hover .work__canvas { transform: none; }
}