/* Sydney Triumph Lawyers: "scene cuts"
   Full-bleed cinematic stills between sections, each with a timecode and one line.
   Mobile-first. Phone: a 3:2 crop on the image's focus point, caption underneath so it never covers the subject.
   Desktop (min-width 761px): a 21:9 frame with the caption laid over the dark side of the shot.
   Set the crop focus per image with style="--focus: 80% 50%" on the <img>. */

.scene { position: relative; margin: 0; overflow: hidden; background: var(--night); }
.scene img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.08); transition: transform 2.6s cubic-bezier(.16,1,.3,1); }
.scene.is-in img { transform: scale(1); }
.scene .grain { z-index: 1; opacity: .12; }

/* blends the top into the night section above */
.scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--night) 0, rgba(10,12,16,0) 16%); }

/* brighter stills (e.g. the court steps at dawn) get pulled down into the night palette */
.scene--dim img { filter: brightness(.72) saturate(.85); }

.scene-cap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 18px var(--gutter) 36px; opacity: 0; transform: translateY(12px); transition: opacity 1s .4s ease, transform 1.2s .4s cubic-bezier(.16,1,.3,1); }
.scene.is-in .scene-cap { opacity: 1; transform: none; }
.scene-tc { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.scene-line { max-width: 24ch; font-family: var(--serif); font-size: clamp(24px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }

@media (min-width: 761px) {
  /* 21:9, capped at 82vh. Height is set directly: aspect-ratio + max-height would shrink the width on wide, short screens */
  .scene { height: min(42.857vw, 82vh); }
  .scene img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .scene::after { background: linear-gradient(to bottom, var(--night) 0, rgba(10,12,16,0) 16%), linear-gradient(to top, rgba(10,12,16,.88) 0, rgba(10,12,16,0) 58%); }
  .scene-cap { position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); right: var(--gutter); bottom: clamp(28px, 4vw, 60px); gap: 12px; padding: 0; }
  .scene-tc { font-size: 12px; }
  /* caption on the right when the subject sits bottom-left of the frame */
  .scene--right .scene-cap { left: auto; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); align-items: flex-end; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .scene img, .scene-cap { transition: none; transform: none; }
  .scene-cap { opacity: 1; }
}