/* ═══════════ PROJECT SLIDESHOW ═══════════
   Cinematic, auto-advancing photo show. The pictures do the talking;
   a single centered title names the place. Cross-fade + Ken Burns. */

.show {
    position: fixed;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: var(--bark);
}

/* ── stacked, cross-fading frames ── */
.frames {
    position: absolute;
    inset: 0;
}

.frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    will-change: opacity;
}

.frame.active {
    opacity: 1;
    z-index: 1;
}

.frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    /* let a mouse/touch drag read as a swipe rather than starting a
       native image drag or text selection */
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Ken Burns — driven by the `animate` class, not `active`. The class stays
   on once set (JS restarts it on re-entry), so an outgoing frame keeps
   drifting smoothly through the cross-fade instead of snapping back.
   Direction alternates frame-to-frame to keep the eye moving. */
.frame.animate img {
    animation: kb-in var(--kb, 16s) ease-out forwards;
}

.frame:nth-child(4n+1).animate img { animation-name: kb-in; }
.frame:nth-child(4n+2).animate img { animation-name: kb-out; }
.frame:nth-child(4n+3).animate img { animation-name: kb-left; }
.frame:nth-child(4n+4).animate img { animation-name: kb-right; }

@keyframes kb-in {
    from { transform: scale(1.02) translate(0, 0); }
    to   { transform: scale(1.16) translate(-1.5%, -1%); }
}
@keyframes kb-out {
    from { transform: scale(1.16) translate(1.5%, 1%); }
    to   { transform: scale(1.02) translate(0, 0); }
}
@keyframes kb-left {
    from { transform: scale(1.10) translate(2%, -1%); }
    to   { transform: scale(1.14) translate(-2%, 1%); }
}
@keyframes kb-right {
    from { transform: scale(1.14) translate(-2%, 1%); }
    to   { transform: scale(1.10) translate(2%, -1%); }
}

/* soft center scrim so the title stays legible over any photo,
   while the edges of the image stay clean and bright */
.show::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
        rgba(20,17,12,0.46) 0%,
        rgba(20,17,12,0.20) 45%,
        rgba(20,17,12,0.05) 75%,
        transparent 100%);
}

/* ── centered title ──
   Insets rather than the old top/left 50% + translate(-50%,-50%). Two reasons:
   centring on the whole viewport let a name that wraps climb under the fixed
   topbar, and `left: 50%` with no `right` capped the shrink-to-fit width at
   half the viewport, so long names wrapped far more than they needed to.
   Bounding the box between the bar and the progress ticks and centring inside
   it makes the collision structurally impossible at any name length. */
.title-block {
    position: absolute;
    top: var(--topbar-h);
    bottom: 92px;
    left: 8vw;
    right: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
    margin: 0;
    text-align: center;
    color: var(--linen);
    text-shadow: 0 1px 3px rgba(20,17,12,0.7), 0 3px 28px rgba(20,17,12,0.55);
    pointer-events: none;
    animation: title-in 1.6s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes title-in {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: none; }
}

.title-block .eyebrow {
    display: block;
    margin-bottom: 22px;
    white-space: nowrap;
}

/* The place name is the page's h1 — reset the heading defaults so it sits
   exactly where the old inline span did. */
.title-block .place {
    margin: 0;
    font-size: clamp(64px, 13vw, 168px);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* At the full display size the box fits roughly 14 characters to a line, so
   anything longer ("Tryon Street Apartments") wraps to two or three lines and
   swallows the photo. Step those down — set from the template on name length. */
.title-block .place-long {
    font-size: clamp(40px, 7.5vw, 96px);
}

.title-block .rule {
    width: 56px;
    height: 1px;
    margin: 26px auto 22px;
    background: rgba(244,241,234,0.7);
}

.title-block .sub {
    display: block;
    font-size: 13px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(244,241,234,0.9);
}

/* One line naming what is actually planted here. Kept quiet so the photo
   still leads, but it is real on-page copy — these pages carried no
   crawlable text beyond the place name before. */
.title-block .show-lede {
    /* .title-block is absolutely positioned and shrink-to-fit, so this cap is
       what stops a long sentence widening the block past a phone viewport. */
    max-width: min(54ch, 84vw);
    margin: 26px auto 0;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 800;
    line-height: 1.6;
    color: rgba(244,241,234,0.92);
}

/* ── progress ticks ── */
.show-progress {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    gap: 10px;
    align-items: center;
}

.show-progress .tick {
    width: 26px;
    height: 2px;
    border: 0;
    padding: 0;
    background: rgba(244,241,234,0.32);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.show-progress .tick::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--linen);
    transform: scaleX(0);
    transform-origin: left;
}

.show-progress .tick.active::after {
    transform: scaleX(1);
    transition: transform var(--dwell, 6s) linear;
}

.show-progress .tick.seen::after { transform: scaleX(1); }

/* ── play / pause ── */
.show-play {
    position: fixed;
    right: 8vw;
    bottom: 34px;
    z-index: 40;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,234,0.4);
    background: rgba(20,17,12,0.18);
    backdrop-filter: blur(2px);
    color: var(--linen);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity .4s ease, background .4s ease, border-color .4s ease;
}

.show-play:hover { opacity: 1; background: rgba(74,85,38,0.6); border-color: var(--linen); }

/* Portrait phones crop the sides of these landscape photos hard. Ease the
   Ken Burns to a near-straight zoom with minimal pan so off-center subjects
   (e.g. the bee) stay in frame. */
@media (max-width: 600px) {
    .frame:nth-child(4n+1).animate img { animation-name: kb-in-sm; }
    .frame:nth-child(4n+2).animate img { animation-name: kb-out-sm; }
    .frame:nth-child(4n+3).animate img { animation-name: kb-left-sm; }
    .frame:nth-child(4n+4).animate img { animation-name: kb-right-sm; }
}

@keyframes kb-in-sm {
    from { transform: scale(1.02) translate(0, 0); }
    to   { transform: scale(1.09) translate(-0.6%, -0.5%); }
}
@keyframes kb-out-sm {
    from { transform: scale(1.09) translate(0.6%, 0.5%); }
    to   { transform: scale(1.02) translate(0, 0); }
}
@keyframes kb-left-sm {
    from { transform: scale(1.05) translate(0.8%, 0); }
    to   { transform: scale(1.08) translate(-0.8%, 0); }
}
@keyframes kb-right-sm {
    from { transform: scale(1.08) translate(-0.8%, 0); }
    to   { transform: scale(1.05) translate(0.8%, 0); }
}

@media (max-width: 860px) {
    .show-progress { bottom: 28px; }
    .show-play { right: 7vw; bottom: 24px; }
    /* Bottom chrome sits higher here, so the title box can reach further down. */
    .title-block { bottom: 76px; left: 7vw; right: 7vw; }
}

/* Landscape phones leave ~215px between the bar and the ticks. Tighten the
   whole stack rather than dropping the lede, so the copy stays on the page. */
@media (max-height: 520px) {
    .title-block .place { font-size: clamp(40px, 8vh, 72px); }
    .title-block .place-long { font-size: clamp(32px, 6.5vh, 56px); }
    .title-block .eyebrow { margin-bottom: 12px; }
    .title-block .rule { margin: 14px auto 12px; }
    .title-block .show-lede { margin-top: 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .frame, .title-block { transition: none; animation: none; }
    .frame.animate img { animation: none; transform: scale(1.04); }
    .show-progress .tick.active::after { transition: none; }
}