/* The film, scene by scene: picture on the centre line, one line of type under it. */
html { scroll-snap-type: y proximity; }
.film { --pic: min(80vw, 54svh, 560px); }
.scene[data-hz] { --pic: min(80vw, 42svh, 500px); }
.scene { min-height: 100vh; min-height: 100svh; display: grid; justify-items: center; align-content: center; gap: 0;
  padding: 88px var(--gutter) 64px; scroll-snap-align: center; position: relative; text-align: center; }

.pic { width: var(--pic); height: var(--pic); position: relative; display: grid; place-items: center; }
.pic.wide { width: min(88vw, 760px); }
.pic.photo { width: min(88vw, var(--pic) * 1.52); height: auto; }
.pic.photo img { height: auto !important; aspect-ratio: 2000 / 1320; }
.pic.photo img { width: 100%; height: 100%; object-fit: cover; }

.cap { margin-top: clamp(32px, 5svh, 56px); max-width: 24em; min-height: 3em;
  font-size: clamp(17px, 1.9vw, 24px); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--text2); text-wrap: balance;
  opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease-out) .25s, transform 1.1s var(--ease-out) .25s; }
.scene.on .cap { opacity: 1; transform: none; }
.sub { margin-top: 20px; padding: 10px; color: var(--text2); opacity: 0; transition: opacity 1s ease .9s; }
.scene.on .sub { opacity: 1; }
@media (hover: hover) { .sub:hover { color: var(--ink); } }

/* plate */
.plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.scene.on .plate canvas { opacity: 1; }
.hz { margin-top: 24px; font-size: clamp(40px, 5vw, 64px); font-weight: 200; letter-spacing: -.04em; line-height: 1; }
.hz small { font-size: .32em; font-weight: 300; letter-spacing: 0; color: var(--grey); margin-left: 8px; }
.hz span { display: inline-block; transition: opacity .35s ease, transform .5s var(--ease-out); }
.hz span.swap { opacity: 0; transform: translateY(-30%); }

/* lockup */
.big-lockup { width: min(78vw, 520px); color: var(--ink); }
.big-lockup svg, .end-lockup svg { display: block; width: 100%; height: auto; overflow: visible; }
.big-lockup circle { stroke-dasharray: 1.02 2; stroke-dashoffset: 1.02; }
.big-lockup g[fill="currentColor"] { opacity: 0; }

/* breathing panel */
.panel { background: var(--panel); border: 1px solid var(--sep2); border-radius: 12px; }
.panel svg { width: 100%; height: 100%; display: block; }
.panel .corner { position: absolute; top: 16px; left: 18px; font-size: 10px; letter-spacing: 2.4px; }
.panel .corner.r { left: auto; right: 18px; }
.panel svg .guide { fill: none; stroke: var(--sep2); stroke-width: .6; }
.panel svg .grid { fill: none; stroke: var(--sep); stroke-width: .5; }
.panel svg .trace, .panel svg .progress { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.panel svg .progress { stroke-linecap: butt; stroke-linejoin: miter; }
.panel svg .tick { stroke: var(--grey); stroke-width: .5; }
.panel svg .tick.major { stroke: var(--ink); }
.panel svg .signal { fill: var(--signal); }
.panel svg .now { stroke: var(--signal); stroke-width: .5; }
.panel svg text { fill: var(--grey); font-family: Inter, sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 1.2px; }

/* the opening, phone-sized, scaled into the picture */
.op-box { width: 390px; height: 360px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--op-scale, 1)); }
.op-box .op-word { display: none; }
.op-box .op-intro-name span { font-weight: 300; font-size: 32px; letter-spacing: -1.2px; } /* thin, like "occupy slowness." */

/* marks: one hairline at every size */
.mk { position: relative; color: var(--c); }
.mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mk .st { stroke-width: var(--sw, 1.55); stroke-dasharray: 1.04 2; stroke-dashoffset: 1.05; }
.mk .fl { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.mk .mv { transform-box: view-box; transform-origin: 16px 16px; }
.grid9 { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; place-items: center; }
.grid9 .mk { width: 40%; aspect-ratio: 1; }
.one { width: 62%; aspect-ratio: 1; display: grid; place-items: center; }
.one .mk { width: 100%; aspect-ratio: 1; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; align-items: start; }
.three figure { display: grid; justify-items: center; gap: 20px; }
.three .mk { width: min(22vw, 132px); aspect-ratio: 1; }
.three figcaption, .card .name { font-size: clamp(20px, 2.4vw, 30px); font-weight: 300; letter-spacing: -.035em; opacity: 0; transform: translateY(12px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.card { display: grid; justify-items: center; }
.card .mk { width: 44%; aspect-ratio: 1; }
.card .name { margin-top: 32px; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.045em; line-height: 1.05; }
.card .kind { margin-top: 6px; font-size: clamp(14px, 1.5vw, 18px); color: var(--grey); opacity: 0; transition: opacity .9s ease .2s; }
.scene.on .shown, .scene.on .card .kind { opacity: 1; transform: none; }

/* listen: the nine marks as keys; the one that sounds stays, the rest step back */
.listen button { width: 40%; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border-radius: 50%;
  transition: opacity .6s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.listen button .mk { width: 100%; aspect-ratio: 1; }
.listen button:disabled { cursor: default; opacity: .35; }
.listen.playing button:not(.on) { opacity: .22; }
.listen button .mv { animation-play-state: paused; }
.listen button.on .mv { animation-play-state: running; }
@media (hover: hover) { .listen:not(.playing) button:not(:disabled):hover { opacity: .7; } }
.scene[data-scene="listen"] .cap.now { color: var(--ink); }

/* the rings slide together */
.rings { width: min(60vw, 360px); height: auto; overflow: visible; }
.rings circle { fill: none; stroke: var(--ink); stroke-width: .7; stroke-dasharray: 1.02 2; stroke-dashoffset: 1.02; }

/* end card */
.end { min-height: 92svh; }
.endcard { display: grid; justify-items: center; }
.occupy { font-size: clamp(44px, 7vw, 88px); font-weight: 300; letter-spacing: -.045em; line-height: 1.04; }
.end-lockup { width: clamp(140px, 16vw, 200px); margin-top: 40px; color: var(--ink); }
.store { margin-top: 28px; padding: 12px 16px; border: .5px solid var(--sep2); border-radius: 999px; color: var(--ink); }
@media (hover: hover) { .store:hover { border-color: var(--ink); } }
.endcard > * { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.end.on .endcard > * { opacity: 1; transform: none; }
.end.on .endcard > :nth-child(2) { transition-delay: .5s; }
.end.on .endcard > :nth-child(3) { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .cap, .sub, .endcard > *, .plate canvas { opacity: 1 !important; transform: none !important; transition: none !important; }
}