/* =========================================================
   photo.css
   Page-photo-only styles. Loaded only by pages/photo.html, so
   no other page is affected by anything in this file. The
   camera is drawn entirely with CSS (no image asset needed) so
   its colors stay in sync with the site's design tokens.
   ========================================================= */

/* ---- Camera ---- */
.camera-wrap {
    width: 210px;
    max-width: 70vw;
}

.camera {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    transition: transform 220ms ease;
}

.camera:active:not(:disabled) {
    transform: scale(0.96);
}

.camera:disabled {
    cursor: default;
}

@media (hover: hover) {
    .camera:hover:not(:disabled) {
        transform: translateY(-4px);
    }

    .camera:hover:not(:disabled) .camera-body {
        box-shadow: 0 14px 30px rgba(74, 64, 56, 0.16);
    }

    .camera:hover:not(:disabled) .camera-shutter-btn {
        transform: scale(1.15);
    }
}

.camera-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    margin: 0 16px;
    padding: 0 12px;
    background-color: var(--color-surface);
    border-radius: 10px 10px 0 0;
    box-shadow: var(--shadow-softer);
}

.camera-viewfinder {
    width: 18px;
    height: 9px;
    border-radius: 2px;
    background-color: var(--color-text);
    opacity: 0.7;
}

.camera-shutter-btn {
    width: 11px;
    height: 11px;
    border-radius: var(--radius-round);
    background-color: var(--color-error);
    transition: transform 220ms ease;
}

.camera-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 18px 30px;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 220ms ease;
}

.camera-lens-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-round);
    background-color: var(--color-text);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
}

.camera-lens-inner {
    position: relative;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius-round);
    background: radial-gradient(circle at 35% 30%, #5a4f43, #2b2620 72%);
}

.camera-lens-glare {
    position: absolute;
    top: 9px;
    left: 11px;
    width: 16px;
    height: 9px;
    border-radius: var(--radius-round);
    background-color: rgba(255, 255, 255, 0.4);
    transform: rotate(-30deg);
}

.camera-stripe {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-primary) 0% 25%,
        var(--color-accent) 25% 50%,
        var(--color-secondary) 50% 75%,
        #F3D9A4 75% 100%
    );
}

.camera-slot {
    position: absolute;
    bottom: -6px;
    left: 50%;
    z-index: 0;
    width: 98px;
    height: 12px;
    border-radius: 3px;
    background-color: var(--color-text);
    opacity: 0.85;
    transform: translateX(-50%);
}

/* Little shutter-press shake, played right when a shot is taken */
.camera.is-shaking {
    animation: cameraShake 360ms ease;
}

@keyframes cameraShake {
    10%, 90% { transform: translateX(-1px) rotate(-0.4deg); }
    20%, 80% { transform: translateX(2px) rotate(0.4deg); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* Full-screen flash overlay, created/removed by js/photo.js */
.camera-flash {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: #FFFFFF;
    opacity: 0;
    pointer-events: none;
    transition: opacity 110ms ease;
}

.camera-flash.is-active {
    opacity: 0.92;
}

/* ---- Hint text ---- */
.photo-hint {
    font-size: 0.9rem;
    color: var(--color-muted);
    min-height: 1.4em;
    transition: opacity var(--transition-fast);
}

/* ---- Printed postcard stack ----
   Each .postcard is positioned absolutely, centered under the
   camera's print slot, and animated to its resting spot via
   the --shift / --drop / --rot custom properties set inline by
   js/photo.js — that's what fans the 3 prints out unevenly
   instead of stacking them in an identical pile. Unlike a plain
   square polaroid, a postcard has a photo on top and a printed
   caption line underneath it (see PhotoBoothData.photos in
   js/photo.js for the caption text). */
.postcard-stack {
    position: relative;
    width: 100%;
    min-height: 230px;
    margin-top: -4px;
}

.postcard {
    position: absolute;
    top: 0;
    left: 50%;
    /* Resting stack order — set per-card via --stack-order inline
       (js/photo.js), so later prints naturally sit on top of
       earlier ones. The :hover/:active rules below override this
       with a plain stylesheet z-index, which — unlike an inline
       style — they're able to win against. */
    z-index: var(--stack-order, 1);
    width: 168px;
    padding: 8px 8px 10px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    /* --hover-lift/--hover-scale default to "resting" so hover can
       nudge them without fighting the eject transform below. */
    --hover-lift: 0px;
    --hover-scale: 1;
    transform: translate(-50%, -36px) rotate(0deg) scale(0.85);
    transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1), opacity 380ms ease, box-shadow 260ms ease;
}

.postcard.is-ejecting {
    opacity: 1;
    transform: translate(calc(-50% + var(--shift, 0px)), calc(var(--drop, 60px) + var(--hover-lift)))
        rotate(var(--rot, 0deg)) scale(var(--hover-scale));
}

/* Once developed the print motion is done, so hand transform
   transitions over to a snappier timing meant for hover/press
   feedback rather than the slow print-eject easing above. */
.postcard.is-developed {
    cursor: pointer;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 380ms ease, box-shadow 260ms ease;
}

@media (hover: hover) {
    .postcard.is-developed:hover {
        z-index: 50;
        --hover-lift: -10px;
        --hover-scale: 1.06;
        box-shadow: 0 16px 32px rgba(74, 64, 56, 0.24);
    }

    .postcard.is-developed:hover img {
        filter: grayscale(0) brightness(1.04);
    }
}

.postcard.is-developed:active {
    z-index: 50;
    --hover-lift: -2px;
    --hover-scale: 0.97;
}

.postcard-photo-frame {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.postcard img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--color-bg);
    filter: grayscale(0.2) brightness(0.85);
    transition: filter 900ms ease 120ms;
}

.postcard.is-developed img {
    filter: grayscale(0) brightness(1);
    transition: filter 260ms ease;
}

/* Little postage-stamp accent tucked into the photo's corner,
   purely decorative — reinforces the "postcard" read at a glance. */
.postcard-stamp {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1.5px dashed rgba(74, 64, 56, 0.45);
    border-radius: 1px;
    box-shadow: 0 1px 3px rgba(74, 64, 56, 0.18);
    transform: rotate(-6deg);
}

/* Caption printed under each postcard's photo — short line set
   per-photo via PhotoBoothData.photos[].caption in js/photo.js. */
.postcard-caption {
    margin: 8px 2px 0;
    padding-top: 7px;
    border-top: 1px dashed rgba(74, 64, 56, 0.25);
    font-family: var(--font-display);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
    color: var(--color-text);
}

/* Button that appears once all 3 postcards have printed */
.photo-next-btn {
    margin-top: var(--space-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.photo-next-btn.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ---- Photo viewer (lightbox) ----
   Uses opacity/visibility (not display:none) so BOTH opening and
   closing can animate — closeLightbox() just removes .is-open and
   every child transition below reverses itself automatically. The
   delayed visibility transition keeps it out of the tab/click
   order while fully faded out. */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.photo-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 320ms ease, visibility 0s linear 0s;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(74, 64, 56, 0.55);
    backdrop-filter: blur(2px);
}

.lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: 0 var(--space-sm);
}

.lightbox-frame {
    width: min(78vw, 300px);
    padding: 14px 14px 30px;
    background-color: #FFFFFF;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    transform: scale(0.8) translateY(18px) rotate(-3deg);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-lightbox.is-open .lightbox-frame {
    transform: scale(1) translateY(0) rotate(0deg);
}

.lightbox-frame img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2px;
    /* Crossfade + tiny scale pulse between photos, toggled by
       js/photo.js via .is-switching around each src change. */
    opacity: 1;
    transform: scale(1);
    transition: opacity 180ms ease, transform 220ms ease;
}

.lightbox-frame img.is-switching {
    opacity: 0;
    transform: scale(0.96);
}

/* Caption shown under the enlarged photo — crossfades in step
   with the image via the same .is-switching toggle (set/cleared
   alongside the image in js/photo.js's showLightboxPhoto). */
.lightbox-caption {
    margin: 10px 2px 0;
    padding-top: 9px;
    border-top: 1px dashed rgba(74, 64, 56, 0.3);
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text);
    opacity: 1;
    transition: opacity 180ms ease;
}

.lightbox-caption:empty {
    display: none;
}

.lightbox-caption.is-switching {
    opacity: 0;
}

.lightbox-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    background-color: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0;
    transform: scale(1);
    transition: opacity 260ms ease 80ms, background-color 180ms ease, transform 180ms ease;
}

.photo-lightbox.is-open .lightbox-nav {
    opacity: 1;
}

.lightbox-nav:active {
    transform: scale(0.88);
}

@media (hover: hover) {
    .lightbox-nav:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }
}

.lightbox-dots {
    position: absolute;
    bottom: calc(var(--space-lg) + 6px);
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    opacity: 0;
    transition: opacity 260ms ease 120ms;
}

.photo-lightbox.is-open .lightbox-dots {
    opacity: 1;
}

.lightbox-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 180ms ease, width 180ms ease, transform 180ms ease;
}

.lightbox-dot.is-active {
    width: 16px;
    border-radius: var(--radius-sm);
    background-color: #FFFFFF;
}

@media (hover: hover) {
    .lightbox-dot:hover {
        transform: scale(1.3);
    }
}

.lightbox-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    background-color: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 260ms ease 80ms, background-color 180ms ease, transform 220ms ease;
}

.photo-lightbox.is-open .lightbox-close {
    opacity: 1;
}

.lightbox-close:active {
    transform: scale(0.88);
}

@media (hover: hover) {
    .lightbox-close:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .camera.is-shaking {
        animation: none;
    }

    .camera:hover:not(:disabled) {
        transform: none;
    }

    .postcard.is-developed:hover,
    .postcard.is-developed:active {
        --hover-lift: 0px;
        --hover-scale: 1;
    }

    .lightbox-frame,
    .lightbox-close:hover {
        transform: none;
    }
}