/* Immersive sections: full viewport width, for pictures and moving media that should fill the screen. Ten candidates, shown at
   /build/system/immersive/. The ones that are chosen become sections in the page editor; the rest are deleted from this file.
   Rules: flat colour, no gradients or shadows (a flat tint over a picture is allowed), captions in flat colour blocks, rounded corners only on
   things that float (a caption, a growing card), never on the full-bleed edge. Motion is tied to scroll where it can be, switches off for
   "reduce motion", and the page still works (pictures just sit still) where scroll-driven animation is not supported. */
.im { position: relative; width: 100%; overflow: clip; --glass: color-mix(in srgb, var(--bg) 56%, transparent); }
/* Labels and cards over a picture are frosted glass like the header (a little more see-through): the picture shows through, blurred */
.im-cap, .im-pinned .im-step > div, .im-tag, .im-stack .im-num { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); color: var(--fg); border: 1px solid var(--line); }
.im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.im-media { position: absolute; inset: 0; }                  /* wraps a picture in the sections made by the page editor: it fills whatever box it is in */
.im-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-frame, .im-ribbon .im-row > div, .im-grow .im-pic { position: relative; }
.im-pinned, .im-stack { overflow: visible; }
.im-cap { position: absolute; left: var(--s3); bottom: var(--s3); z-index: 2; max-width: min(40ch, calc(100% - 2 * var(--s3))); margin: 0; padding: 12px 18px; border-radius: var(--r-inner); corner-shape: squircle; font: 500 15px/1.4 var(--text); }
.im-cap b { font-weight: 700; }
.im-title { margin: 0; font: 800 clamp(44px, 9vw, 150px)/0.95 var(--display); letter-spacing: -0.05em; color: var(--paper); text-wrap: balance; }

/* 1 · Full-bleed picture: one picture, edge to edge, with a caption */
.im-full { height: min(92vh, 960px); }
.im-full.im-h-medium { height: min(70vh, 720px); } .im-full.im-h-short { height: min(48vh, 480px); }

/* 2 · Pinned story: the picture stays put while cards of text slide over it */
.im-pinned { height: calc((var(--n, 3) + .4) * 100vh); }
.im-pinned .im-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.im-pinned .im-steps { position: relative; z-index: 2; margin-top: -100vh; pointer-events: none; }
.im-pinned .im-step { display: grid; align-items: center; min-height: 100vh; padding: var(--s3); }
.im-pinned .im-step > div { pointer-events: auto; width: min(420px, 100%); padding: var(--s3); border-radius: var(--r-card); corner-shape: squircle; }
.im-pinned .im-step:nth-child(even) > div { justify-self: end; }
.im-pinned h3 { margin: 0 0 var(--s1); font: 800 28px/1.1 var(--display); letter-spacing: -0.03em; }
.im-pinned p { margin: 0; font-size: 17px; line-height: 1.5; }

/* 3 · Film strip: pictures in a row that you drag or swipe sideways, a line shows how far along you are */
.im-strip { padding: var(--s4) 0; }
.im-strip .im-track { display: flex; gap: 12px; padding: 0 var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--s4); scrollbar-width: none; overscroll-behavior-x: contain; }
.im-strip .im-track::-webkit-scrollbar { display: none; }
.im-strip figure { flex: 0 0 min(74vw, 560px); margin: 0; scroll-snap-align: start; }
.im-strip figure .im-frame { aspect-ratio: 4 / 5; border-radius: var(--r-card); corner-shape: squircle; overflow: hidden; }
.im-strip figure:nth-child(3n+2) .im-frame { aspect-ratio: 1; margin-top: var(--s4); }
.im-strip figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.im-strip .im-line { position: relative; height: 3px; margin: var(--s3) var(--s4) 0; background: var(--line); }
.im-strip .im-line i { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--fg); }

/* 4 · Mosaic: a wall of pictures edge to edge that always fills one full rectangle. src/lib/mosaic.ts works out the place of every tile (separately for wide
   and phone screens: the --d* and --m* numbers) by cutting the rectangle again and again, so any number of pictures fits with no gap */
.im-mosaic { aspect-ratio: var(--da, 1.6); background: var(--bg); }
.im-mosaic .im-tile { position: absolute; left: var(--dl); top: var(--dt); width: var(--dw); height: var(--dh); border: 2px solid var(--bg); box-sizing: border-box; overflow: hidden; }
.im-mosaic .im-tile img { transition: transform 1.2s var(--spring); } .im-mosaic .im-tile:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .im-mosaic { aspect-ratio: var(--ma, .75); } .im-mosaic .im-tile { left: var(--ml); top: var(--mt); width: var(--mw); height: var(--mh); } }

/* 5 · Before and after: drag the line across two versions of the same picture */
.im-compare { height: min(86vh, 860px); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; }
.im-compare .im-top { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--p, .5)) * 100%) 0 0); }
.im-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--p, .5) * 100%); width: 4px; margin-left: -2px; background: var(--paper); }
.im-handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); color: var(--fg); border: 1px solid var(--line); font: 600 20px/1 var(--text); }
.im-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.im-tag { position: absolute; z-index: 2; top: var(--s3); padding: 8px 14px; border-radius: var(--r-pill); font: 600 13px/1 var(--text); }
.im-tag--l { left: var(--s3); } .im-tag--r { right: var(--s3); }

/* 6 · Drift: a picture (or a video) that fills the screen and moves very slowly, with a big title over it */
.im-drift { display: grid; align-items: end; height: min(94vh, 980px); background: var(--black); }
.im-drift .im-bg { position: absolute; inset: 0; background: rgba(23, 30, 33, .28); z-index: 1; }
.im-drift img { position: absolute; inset: 0; animation: im-drift 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.im-drift .im-title { position: relative; z-index: 2; padding: var(--s4) var(--s3); }
@keyframes im-drift { to { transform: scale(1.14) translate(-1.5%, -1%); } }

/* 7 · Parallax: three pictures at different depths that drift past each other as you scroll */
.im-parallax { height: 150vh; background: var(--surface); }
.im-parallax .im-layer { position: absolute; border-radius: var(--r-card); corner-shape: squircle; overflow: hidden; }
.im-parallax .l1 { left: 6vw; top: 12vh; width: 44vw; height: 60vh; } .im-parallax .l2 { right: 8vw; top: 38vh; width: 34vw; height: 52vh; }
.im-parallax .l3 { left: 30vw; top: 86vh; width: 38vw; height: 46vh; }
.im-parallax .im-words { position: absolute; z-index: 2; left: var(--s3); top: 66vh; max-width: 11ch; margin: 0; font: 800 clamp(40px, 8vw, 120px)/0.95 var(--display); letter-spacing: -0.05em; mix-blend-mode: normal; }
@supports (animation-timeline: view()) { .im-parallax .im-layer { animation: im-par linear both; animation-timeline: view(); } .im-parallax .l1 { --d: -90px; } .im-parallax .l2 { --d: 120px; } .im-parallax .l3 { --d: -50px; } }
@keyframes im-par { from { transform: translateY(calc(var(--d, 0px) * -1)); } to { transform: translateY(var(--d, 0px)); } }

/* 8 · Stack: each picture takes the whole screen and the next one slides up over it */
.im-stack .im-card { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.im-stack .im-card .im-num { position: absolute; z-index: 2; top: var(--s3); left: var(--s3); padding: 8px 14px; border-radius: var(--r-pill); font: 600 13px/1 var(--text); }
@supports (animation-timeline: view()) { .im-stack .im-card img { animation: im-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } }
@keyframes im-settle { from { transform: scale(1.12); } to { transform: scale(1); } }

/* 9 · Ribbon: two rows of pictures that drift in opposite directions, and stop when you point at them */
.im-ribbon { display: grid; gap: 12px; padding: var(--s3) 0; }
.im-ribbon .im-row { display: flex; width: max-content; gap: 12px; animation: im-ribbon 60s linear infinite; }
.im-ribbon .im-row:nth-child(2) { animation-direction: reverse; animation-duration: 75s; }
.im-ribbon:hover .im-row { animation-play-state: paused; }
.im-ribbon .im-row > div { flex: none; width: 34vh; height: 26vh; border-radius: var(--r-inner); corner-shape: squircle; overflow: hidden; }
.im-ribbon .im-row > div:nth-child(3n+2) { width: 44vh; }
@keyframes im-ribbon { to { transform: translateX(-50%); } }
.im-ribbon--edit .im-row { animation: none; width: auto; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .im-ribbon .im-row, .im-drift img { animation: none; } }

/* 10 · Grow: a small picture card that opens up to fill the whole screen as you scroll */
.im-grow { height: 240vh; }
.im-grow .im-stick { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; overflow: hidden; background: var(--bg); }
.im-grow .im-pic { width: 100vw; height: 100vh; overflow: hidden; }
.im-grow .im-cap { z-index: 3; }
@supports (animation-timeline: view()) {
  .im-grow { view-timeline: --grow block; }       /* the whole section is the timeline: the picture opens up as the section scrolls into view, then stays full */
  .im-grow .im-pic { animation: im-grow linear both; animation-timeline: --grow; animation-range: entry 10% entry 100%; }
  .im-grow .im-cap { animation: im-fade linear both; animation-timeline: --grow; animation-range: contain 4% contain 30%; }
}
@keyframes im-grow { from { width: 36vw; height: 46vh; border-radius: var(--r-card); } to { width: 100vw; height: 100vh; border-radius: 0; } }
@keyframes im-fade { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .im-grow .im-pic, .im-grow .im-cap, .im-parallax .im-layer, .im-stack .im-card img { animation: none !important; } }

/* Pictures in a slider are not dragged away by the browser (that would end the drag of the line) */
.im-compare img, .md-compare img { -webkit-user-drag: none; pointer-events: none; }

/* Before and after inside a written post (the ::::compare container, src/lib/markdown.ts): the same slider, in the text's column with rounded corners */
.md-compare { aspect-ratio: 3 / 2; margin: 1.6em 0; border-radius: var(--r-inner); corner-shape: squircle; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; --p: .5; }
.md-compare > .md-before, .md-compare > .md-after { position: absolute; inset: 0; }
.md-compare > .md-before { z-index: 1; clip-path: inset(0 calc((1 - var(--p, .5)) * 100%) 0 0); }
.md-compare p { height: 100%; margin: 0; }
.md-compare img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.md-compare .im-tag { z-index: 3; top: 14px; } .md-compare .im-tag--l { left: 14px; } .md-compare .im-tag--r { right: 14px; }
.md-compare .im-handle { z-index: 3; }