/* Photo scenes (js/scenes/photo.js and one module per photo): the photograph covers the scene (anchored at --px across),
   the WebGL canvas (or the looping video) with the moving parts fades in over it, the SVG layer (.ph-box) sits exactly on the photo for small
   flying things, and the shade keeps the words readable. Then each photo: its picture, where the timer goes, its flyers. */
.ph-photo, .ph-gl, .ph-vid, .ph-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-photo { background: var(--photo) calc(var(--px) * 100%) 50% / cover no-repeat; }
.ph-gl, .ph-vid { opacity: 0; transition: opacity 1.2s ease; }
.ph-gl.is-on, .ph-vid.is-on { opacity: 1; }
.ph-vid { object-fit: cover; object-position: calc(var(--px) * 100%) 50%; pointer-events: none; }
.scene[data-figure="off"] .ph-vid { opacity: 0; }
.ph-box { position: absolute; width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar))); left: calc((100cqw - max(100cqw, calc(100cqh * var(--ar)))) * var(--px)); top: calc((100cqh - max(100cqh, calc(100cqw / var(--ar)))) * .5); pointer-events: none; overflow: visible; }
.ph-shade { background: linear-gradient(90deg, rgba(14,16,30,.5), rgba(14,16,30,.2) 38%, rgba(14,16,30,0) 60%), linear-gradient(180deg, rgba(14,16,30,.22), transparent 30%); pointer-events: none; }
.scene[data-figure="off"] .ph-box { display: none; }
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) { --ar: 1.768; --px: .5; --title: #FFFFFF; --card: rgba(255,251,246,.93); --card-ink: #2C2A3A; --accent: #F6B26B; --ink: #2C2A3A; --chip: rgba(14,16,30,.32); --chip-line: rgba(255,255,255,.4); background: #2A2C3A; }
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-title { text-shadow: 0 4px 30px rgba(10,12,24,.55), 0 2px 6px rgba(10,12,24,.35); }
/* the timer: small, in a top corner, away from what moves */
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-timer { right: 2.6cqw; top: 4cqh; bottom: auto; width: 22cqh; }
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-ring { width: 22cqh; height: 22cqh; }
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-ring .sc-track { fill: rgba(14,16,30,.42); }
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-time { font-size: clamp(22px, 5.6cqh, 64px); }
:is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-label { font-size: clamp(10px, 1.5cqh, 15px); }
@container (max-aspect-ratio: 1.15) {
  .ph-shade { background: linear-gradient(180deg, rgba(14,16,30,.55), rgba(14,16,30,.2) 55%, transparent 75%); }
  :is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-timer { top: auto; bottom: 3cqh; left: 5cqw; right: auto; width: 34cqw; align-items: flex-start; }
  :is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-ring { width: 34cqw; height: 34cqw; }
  :is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-time { font-size: clamp(20px, 9cqw, 64px); }
  :is(.sc-lake, .sc-earth, .sc-aquarium, .sc-campfire, .sc-dock) .sc-label { font-size: clamp(9px, 2.4cqw, 16px); }
}

/* Lake at dawn: the stream is in the right corner */
.sc-lake { --photo: url(lake.webp); --px: .85; }

/* Earth from space: a satellite now and then */
.sc-earth { --photo: url(earth.webp); --px: .9; }
.ph-sat { fill: #FFFDF2; opacity: 0; animation: phSat 46s linear infinite; animation-delay: -8s; }
.ph-sat-glow { opacity: .25; animation: phBlink 1.4s steps(1) infinite; }
@keyframes phSat { 0% { transform: translate(-40px, 330px); opacity: 0; } 4% { opacity: .9; } 46% { opacity: .9; } 50% { transform: translate(1150px, 120px); opacity: 0; } 100% { transform: translate(1150px, 120px); opacity: 0; } }
@keyframes phBlink { 50% { opacity: 0; } }

/* The aquarium: the timer over the water, clear of the bubbles; specks drifting */
.sc-aquarium { --photo: url(aquarium.webp); --px: .8; }
.sc-aquarium .sc-timer { right: 21cqw; }
.ph-speck { fill: rgba(240,255,236,.55); animation: phSpeck var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes phSpeck { from { transform: translate(-20px, 30px); opacity: .2; } 50% { opacity: .8; } to { transform: translate(30px, -60px); opacity: .3; } }

/* The campfire: a looping video of the fire (campfire.mp4) */
.sc-campfire { --photo: url(campfire.webp); --px: .85; }

/* The summer dock: pollen floats in the warm light */
.sc-dock { --photo: url(dock.webp); --px: .75; }
.ph-mote { fill: rgba(255,240,200,.7); animation: phMote var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes phMote { from { transform: translate(-30px, 16px); opacity: .15; } 50% { opacity: .85; } to { transform: translate(40px, -36px); opacity: .25; } }