/* Frame: shared media primitives (torn frame, hand-drawn red rectangle, sheet, placeholders). */


/* Frame */

.frame-wrap {
    position: relative;
}

.torn-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-clip-path: url("#torn-1");
    clip-path: url("#torn-1");
}

.torn-frame--alt {
    -webkit-clip-path: url("#torn-2");
    clip-path: url("#torn-2");
}

.media-frame-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.media-frame-img { transition: transform 0.7s var(--ease-out); }

.torn-frame:hover .media-frame-img,
.frame-wrap:hover .torn-frame .media-frame-img {
    transform: scale(1.04);
}

@media (hover: none), (pointer: coarse) {
    /* On iOS a long press opens an image copy menu and a selection frame, which is a nuisance on
       galleries made for scrolling and swiping. */
    .media-frame-img,
    .plan-img,
    .carousel-slide img,
    .polaroid-img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* The image zooms slightly while a finger is down. No hover zoom on touch: it could stay
       stuck half-way after a tap. The rules go from the lightest selector to the heaviest; at
       equal weight the hover rule comes last and wins. */
    .frame-wrap .torn-frame .media-frame-img {
        transition: transform 0.2s 0.1s ease;
    }

    .torn-frame:hover .media-frame-img { transform: none; }

    .frame-wrap:active .torn-frame .media-frame-img {
        transform: scale(1.04);
        transition-delay: 0s;
    }

    .frame-wrap:hover .torn-frame .media-frame-img { transform: none; }
}

/* Three hand-placed tilts for frames pinned askew. */
.frame-wrap--tilt-a { transform: rotate(1.5deg); }
.frame-wrap--tilt-b { transform: rotate(-1deg); }
.frame-wrap--tilt-c { transform: rotate(2deg); }


/* Sketch rectangle */

.sketch-rect-svg {
    position: absolute;
    top: -2.5%;
    left: -2.5%;
    width: 105%;
    height: 105%;
    z-index: 10;
    pointer-events: none;
    transform: rotate(2deg);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.sketch-rect-path {
    fill: none;
    stroke: var(--red);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 1.5s var(--ease-out);
    animation: sketch-wobble var(--sketch-timing);
}

.frame-wrap:hover > .sketch-rect-svg {
    opacity: 1;
}

.frame-wrap:hover > .sketch-rect-svg .sketch-rect-path {
    stroke-dashoffset: 0;
}

@media (hover: none), (pointer: coarse) {
    /* Touch: the red rectangle draws while a finger is down. The 0.1s delay avoids a flash while
       scrolling. */
    .frame-wrap > .sketch-rect-svg {
        transition: opacity 0.15s 0.1s var(--ease-out);
    }

    .frame-wrap:active > .sketch-rect-svg {
        opacity: 1;
        transition-delay: 0s;
    }

    .frame-wrap:active > .sketch-rect-svg .sketch-rect-path {
        stroke-dashoffset: 0;
    }

    /* :active lasts about 100 ms and the viewer opens right after, so the script adds this class
       and waits 460 ms before opening. The stroke speeds up to 0.40s to fit. Descendant selector:
       the frame SVG may not be a direct child. */
    .frame-wrap.is-tracing .sketch-rect-svg {
        opacity: 1;
        transition-delay: 0s;
    }

    .frame-wrap.is-tracing .sketch-rect-svg .sketch-rect-path {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 0.40s var(--ease-out);
    }
}


/* Sheet */

/* A sheet of paper: rounded corners, drop shadow, white ground. */
.drawing-sheet-wrap {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 10px 10px 30px rgb(0 0 0 / 50%);
    position: relative;
}

.drawing-sheet-wrap .media-frame-inner { background: var(--white); }

/* Scans carry a white border: an 18% zoom crops it. */
.drawing-sheet img { transform: scale(1.18); }

/* A focused sheet keeps its own corner radius instead of the focus ring default. */
.drawing-sheet-wrap:focus-visible {
    border-radius: 8px;
}

/* Plans: the zoom and cover cropping above suit freehand drawings; on a dimensioned plan they
   would crop the dimensions, so both are neutralised. */
.drawing-sheet .plan-img {
    transform: none;
    object-fit: contain;
    background: var(--white);
}

@media (max-width: 768px) {
    /* Touch feedback derives from the base crop instead of replacing it: sheets carry an 18%
       zoom that crops the scan margins, and rewriting transform would drop the image to 104%
       while a finger is down (1.18 x 1.04 = 1.23). :not(.plan-img) keeps dimensioned plans at
       transform: none. */
    .drawing-sheet:hover img:not(.plan-img) { transform: scale(1.18); }
    .drawing-sheet:active img:not(.plan-img) { transform: scale(1.23); }

    .torn-frame:hover .drawing-sheet img:not(.plan-img),
    .frame-wrap:hover .torn-frame .drawing-sheet img:not(.plan-img) {
        transform: scale(1.18);
    }

    .frame-wrap:active .torn-frame .drawing-sheet img:not(.plan-img) { transform: scale(1.23); }
}

@media (hover: hover) {
    /* The same applies on large screens: .torn-frame:hover replaces the 1.18 crop by 1.04, so
       the drawing would shrink. Same computation, scoped to (hover: hover) so it does not
       override the touch rule above. */
    .torn-frame:hover .drawing-sheet img:not(.plan-img),
    .frame-wrap:hover .torn-frame .drawing-sheet img:not(.plan-img) {
        transform: scale(1.23);
    }
}


/* Placeholders */

.media-frame-inner.media-placeholder--dark {
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-placeholder--dark .font-sketch {
    color: var(--white);
    font-size: 2.2rem;
    letter-spacing: 2px;
}

.media-frame-inner.media-placeholder {
    aspect-ratio: 4/3;
    background: var(--placeholder);
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-placeholder .font-sketch {
    color: var(--muted);
    font-size: 1.5rem;
}