/* ==========================================================================
THE PROCESS
One pinned macOS window carried across four steps. The program monitor and
the timeline are never torn down between steps - they persist and change
state, so the sequence reads as a single session instead of four slides.
Narration lives entirely in the rail. The window stays purely visual.
========================================================================== */
.process-sequence {
position: relative;
/* The same tail every other section has, which also leaves room for the
add-on cards' hover glow before the next section paints over it. */
padding-block: var(--section-lead) var(--section-tail);
background: var(--black);
}
/* During an automatic handoff the viewport stays at the trigger while the
scene advances on its own timeline. Keep native scroll behaviour and the
continuously-driven layers out of that animation so there is one easing
curve, not a stack of delayed CSS transitions chasing it. */
html.process-auto-scrolling {
scroll-behavior: auto !important;
overscroll-behavior: none;
}
html.process-auto-scrolling .monitor-video,
html.process-auto-scrolling .monitor-veil,
html.process-auto-scrolling .monitor-idle,
html.process-auto-scrolling .monitor-cue,
html.process-auto-scrolling .monitor-hint,
html.process-auto-scrolling .monitor-scrubber,
html.process-auto-scrolling .monitor-grade,
html.process-auto-scrolling .timeline-lanes,
html.process-auto-scrolling .monitor-export,
html.process-auto-scrolling .progress-ring--export,
html.process-auto-scrolling .process-rail {
transition: none;
}
/* The heading scrolls past on the shared grid, then the workbench pins. The
frame's verticals run through both, which is what ties them together. */
.process-sequence > .section-shell {
padding-bottom: clamp(1rem, 2vw, 1.75rem);
}
/* Scroll track ------------------------------------------------------------ */
/* Opt-in. Until the visitor clicks the invitation, the track is exactly one
screen: the window sits on the page like any other section and scrolling
carries straight past it. Engaged, it opens into the runway. Only the
visitor's beats need scroll (the edit and the render play on their own
clock), at 8.7vh per SEGMENTS unit. */
.process-track {
position: relative;
height: 100svh;
}
.process-sequence.is-engaged .process-track {
height: 2306vh;
}
.process-stage {
position: sticky;
top: 0;
display: grid;
place-items: center;
height: 100svh;
/* Offsets the fixed header so the window reads optically centred rather
than mathematically centred behind it. */
padding-top: 76px;
overflow: hidden;
}
.process-workbench {
display: flex;
justify-content: center;
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--gutter);
/* Perspective lives here so the window can tilt without flattening its
children into the transform. */
perspective: 1900px;
perspective-origin: 50% 45%;
/* Small on the way past, full size when you are with it. */
transform: scale(calc(0.8 + 0.2 * var(--focus, 1)));
transform-origin: 50% var(--focus-anchor, 0%);
}
/* Window ------------------------------------------------------------------ */
.workbench-window {
position: relative;
width: 100%;
/* Everything lives inside the window now, so it takes the room it can get:
bounded by width, and by the height a 16:9 canvas plus titlebar needs. */
max-width: min(76rem, calc((78svh - 2.6rem) * 16 / 9));
overflow: hidden;
border: 1px solid var(--white-14);
border-radius: 14px;
background: var(--black-soft);
/* Layered rather than one flat drop: a contact shadow, a long cast, and a
hairline of light along the top edge. That stack is most of what separates
a composited frame from a div with a box-shadow on it. */
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.6),
0 24px 60px -20px rgba(0, 0, 0, 0.85),
0 60px 140px -40px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
transform-style: preserve-3d;
opacity: 0;
transform: translate3d(0, 26px, 0);
transition: opacity 900ms var(--ease-out), transform 1s var(--ease-out);
will-change: transform;
}
/* While the pointer is over it the window tracks the cursor rather than
easing behind it. */
.workbench-window.is-tilting {
transition: opacity 700ms var(--ease-out), transform 90ms linear;
}
.process-sequence.is-entered .workbench-window {
opacity: 1;
transform:
rotateX(var(--tilt-x, 0deg))
rotateY(var(--tilt-y, 0deg))
translate3d(0, 0, 0);
}
/* What we offer --------------------------------------------------------
The same section's payoff: what goes into the edit, then what can be
booked on top of it. Two tiers, told apart at a glance: the edit as a calm
grid of six, the add-ons as orange-edged cards you could pick up. */
.process-deliverables {
padding-top: clamp(3.5rem, 7vw, 6.5rem);
}
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.deliverables-head {
margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.deliverables-head h3 {
margin: 0;
font-size: clamp(1.9rem, 3.4vw, 3.2rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.045em;
color: var(--white);
}
.offer-group + .offer-group {
margin-top: clamp(3rem, 6vw, 5rem);
}
.offer-group-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1.1rem;
margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}
.offer-tag {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--white);
}
/* The same live dot the section kickers use, in the tier's colour. */
.offer-tag::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--white-52);
}
.offer-tag--signal { color: var(--signal); }
.offer-tag--signal::before {
background: var(--signal);
box-shadow: 0 0 10px rgba(255, 61, 23, 0.8);
}
.offer-note {
color: var(--white-52);
font-size: var(--fs-small);
}
/* Shared: the orange number and the line under each label. */
.offer-index {
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.06em;
color: var(--signal);
}
.offer-detail {
max-width: 34ch;
margin: 0;
color: var(--white-52);
font-size: var(--fs-small);
line-height: 1.5;
}
.offer-icon svg,
.addon-icon svg,
.addon-chip svg,
.addon-link svg {
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* The edit: six, in a grid of three, hairlines between. */
.offer-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 0;
border-top: 1px solid var(--white-14);
list-style: none;
}
.offer-item {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-content: start;
gap: 0.9rem 1rem;
padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.8rem) clamp(1.6rem, 2.6vw, 2.2rem) 0;
border-bottom: 1px solid var(--white-14);
}
.offer-item:not(:nth-child(3n + 1)) {
padding-left: clamp(1rem, 2vw, 1.8rem);
border-left: 1px solid var(--white-14);
}
.offer-icon {
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
border: 1px solid var(--white-14);
border-radius: 10px;
background: rgba(242, 240, 234, 0.03);
color: var(--white);
transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease;
}
.offer-icon svg {
width: 1.25rem;
height: 1.25rem;
}
.offer-item .offer-index {
align-self: start;
justify-self: end;
padding-top: 0.2rem;
}
.offer-label {
grid-column: 1 / -1;
margin: 0.4rem 0 0;
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--white);
}
.offer-item .offer-detail {
grid-column: 1 / -1;
}
.offer-item:hover .offer-icon {
border-color: rgba(255, 61, 23, 0.55);
background: rgba(255, 61, 23, 0.08);
color: var(--signal);
}
/* The add-ons: cards with an orange edge, marked as extras you can add. */
.addon-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.8rem, 1.6vw, 1.25rem);
margin: 0;
padding: 0;
list-style: none;
}
.addon-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: clamp(1.3rem, 2.2vw, 1.8rem);
border: 1px solid rgba(255, 61, 23, 0.3);
border-radius: var(--radius-media);
background:
radial-gradient(120% 80% at 0% 0%, rgba(255, 61, 23, 0.12), transparent 60%),
rgba(255, 61, 23, 0.025);
transition: border-color 300ms ease, transform 420ms var(--ease-out), box-shadow 300ms ease;
}
.addon-card:hover {
border-color: rgba(255, 61, 23, 0.75);
/* Reaches at most ~36px below the card: inside the section's tail. */
box-shadow: 0 16px 42px -22px rgba(255, 61, 23, 0.4);
transform: translateY(-3px);
}
.addon-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.4rem;
}
.addon-icon {
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
border-radius: 12px;
background: rgba(255, 61, 23, 0.14);
color: var(--signal);
}
.addon-icon svg {
width: 1.4rem;
height: 1.4rem;
}
.addon-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.65rem 0.35rem 0.5rem;
border: 1px solid rgba(255, 61, 23, 0.45);
border-radius: var(--radius-control);
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--signal);
}
.addon-chip svg {
width: 0.85rem;
height: 0.85rem;
stroke-width: 2.2;
}
.addon-label {
margin: 0;
font-size: clamp(1.25rem, 1.8vw, 1.6rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.035em;
color: var(--white);
}
.addon-points {
display: grid;
gap: 0.45rem;
margin: 0.2rem 0 0;
padding: 0;
list-style: none;
color: var(--white-76);
font-size: var(--fs-small);
}
.addon-points li {
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.addon-points li::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--signal);
transform: translateY(-2px);
}
.addon-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
width: fit-content;
margin-top: auto;
padding-top: 0.6rem;
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--signal);
}
.addon-link svg {
width: 0.95rem;
height: 0.95rem;
transition: transform 300ms var(--ease-out);
}
.addon-link:hover svg,
.addon-card:hover .addon-link svg {
transform: translateX(4px);
}
@media (max-width: 1080px) {
.offer-list,
.addon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-item:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
.offer-item:nth-child(2n) { padding-left: clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--white-14); }
}
@media (max-width: 640px) {
.offer-list,
.addon-list { grid-template-columns: 1fr; }
.offer-item:nth-child(2n) { padding-left: 0; border-left: 0; }
/* One row for the icon, the title and the number, so the list is not a
tower of icons. */
.offer-item {
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem 0.9rem;
padding-block: 1.2rem 1.35rem;
}
.offer-label {
grid-column: 2;
grid-row: 1;
margin: 0;
}
.offer-item .offer-index {
grid-column: 3;
grid-row: 1;
align-self: center;
padding-top: 0;
}
.offer-icon {
width: 2.3rem;
height: 2.3rem;
}
}
/* The bar itself is the progress read-out: it floods left to right rather
than carrying a hairline that creeps along underneath it. */
.titlebar-fill {
position: absolute;
inset: 0;
transform-origin: left center;
transform: scaleX(var(--sequence-progress, 0));
background: linear-gradient(90deg, #d8330f, var(--signal) 62%, #ff6a45);
box-shadow: 0 0 26px rgba(255, 61, 23, 0.45);
}
/* Once someone has opted in: step back, step on, or skip to the end. Top
right in the window chrome, one family of pills. */
.titlebar-controls {
position: relative;
display: flex;
gap: 0.45rem;
margin-left: auto;
opacity: 0;
pointer-events: none;
transition: opacity 400ms var(--ease-out);
}
.process-sequence.is-engaged .titlebar-controls {
opacity: 1;
pointer-events: auto;
}
.titlebar-button {
padding: 0.42rem 0.8rem;
border: 1px solid var(--white-14);
border-radius: var(--radius-control);
background: rgba(8, 8, 8, 0.78);
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--white);
white-space: nowrap;
cursor: pointer;
transition: opacity 250ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.titlebar-button span {
color: var(--white-64);
transition: color 200ms ease;
}
.titlebar-skip span {
margin-left: 0.3em;
letter-spacing: -0.04em;
color: var(--signal);
}
.titlebar-button:not(:disabled):hover,
.titlebar-button:focus-visible {
border-color: var(--white);
background: var(--white);
color: var(--black);
}
.titlebar-button:not(:disabled):hover span,
.titlebar-button:focus-visible span {
color: var(--black);
}
.titlebar-button:disabled {
opacity: 0.32;
cursor: default;
}
@media (max-width: 860px) {
.titlebar-button:not(.titlebar-skip) { display: none; }
}
.window-titlebar {
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
height: 42px;
padding-inline: 1rem;
border-bottom: 1px solid var(--white-08);
background: var(--panel);
user-select: none;
overflow: hidden;
}
.traffic-lights {
position: relative;
display: inline-flex;
gap: 7px;
}
.traffic-lights .light {
width: 11px;
height: 11px;
border-radius: 50%;
}
.light--red { background: #ff5f56; }
.light--yellow { background: #ffbd2e; }
.light--green { background: #27c93f; }
/* Superseded by .titlebar-fill. */
.window-progress-unused {
position: absolute;
inset: auto 0 -1px 0;
display: block;
height: 2px;
background: var(--signal);
transform: scaleX(var(--sequence-progress, 0));
transform-origin: left center;
}
/* Canvas ------------------------------------------------------------------ */
/* One shape for the whole sequence: the canvas is 16:9 and never changes
size, so the picture can fill it exactly when the timeline slides away. */
.window-canvas {
--timeline-h: clamp(150px, 34%, 250px);
--ring-size: clamp(7rem, 13vw, 9.5rem);
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
transform: translate3d(var(--impact-x, 0), var(--impact-y, 0), 0)
scale(var(--impact-scale, 1));
transform-origin: center;
will-change: transform;
}
/* A single-frame-feeling flash at the upload-to-edit impact. */
.window-canvas::after {
content: "";
position: absolute;
inset: 0;
z-index: 20;
background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.96), rgba(255, 93, 49, 0.72) 42%, transparent 78%);
opacity: var(--impact-flash, 0);
pointer-events: none;
}
/* Program monitor - persistent across all four steps ---------------------- */
.workbench-monitor {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--black);
}
.workbench-monitor.is-live {
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7), 0 0 44px rgba(255, 61, 23, 0.16);
}
.monitor-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter:
saturate(calc(1.18 - var(--monitor-desat, 0) * 1.18))
contrast(calc(1.1 - var(--monitor-desat, 0) * 0.16))
brightness(calc(1 - var(--monitor-dim, 0)))
blur(var(--monitor-blur, 0px));
opacity: var(--monitor-alpha, 0);
transition: opacity 500ms var(--ease-out), filter 600ms var(--ease-out);
}
.monitor-video:not(.monitor-video--log) {
clip-path: circle(calc((75% * (1 - var(--iris, 0)) + var(--ring-size) * 0.4 * var(--iris, 0)) * (1 - var(--iris-out, 0))) at 50% 50%);
rotate: calc(var(--iris, 0) * var(--iris, 0) * -32deg + var(--iris-spin, 0) * 1deg);
scale: calc(1 + 0.18 * var(--iris, 0));
}
/* The ungraded plate, wiped away from the left by the handle. */
.monitor-video--log {
position: absolute;
inset: 0;
z-index: 2;
filter: saturate(0.1) contrast(0.72) brightness(calc(1.16 - var(--monitor-dim, 0))) blur(var(--monitor-blur, 0px));
/* Position comes from the playhead, not from a pointer. */
opacity: calc(var(--monitor-alpha, 0) * var(--grade-alpha, 0));
clip-path: polygon(var(--grade-pos, 0%) 0, 100% 0, 100% 100%, var(--grade-pos, 0%) 100%);
/* Same expression as the line, so the wipe edge and the playhead are one. */
}
.monitor-veil {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(180deg, rgba(5,5,5,0.55) 0%, transparent 26%, transparent 52%, rgba(5,5,5,0.74) 100%),
linear-gradient(90deg, rgba(5,5,5,0.52) 0%, transparent 38%);
opacity: var(--veil-alpha, 0);
transition: opacity 500ms var(--ease-out);
}
.monitor-idle {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: var(--black);
opacity: calc(1 - var(--monitor-alpha, 0));
transition: opacity 500ms var(--ease-out);
pointer-events: none;
}
.idle-label {
font: 400 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--white-28);
}
/* The invitation, before anything has happened. */
.monitor-cue {
position: absolute;
inset: 0;
z-index: 7;
display: grid;
align-content: center;
justify-items: center;
gap: 1.3rem;
opacity: var(--cue, 0);
pointer-events: none;
transition: opacity 420ms var(--ease-out);
}
.cue-button {
display: inline-flex;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.6rem 1rem 1.25rem;
border: 1px solid rgba(255, 61, 23, 0.6);
border-radius: var(--radius-control);
background: rgba(255, 61, 23, 0.07);
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--signal);
cursor: pointer;
pointer-events: auto;
animation: cue-breathe 2.4s ease-in-out infinite;
transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.cue-button:hover,
.cue-button:focus-visible {
border-color: var(--signal);
background: var(--signal);
color: var(--black);
animation-play-state: paused;
}
/* Only clickable while it can be seen. */
.monitor-cue.is-gone .cue-button {
pointer-events: none;
visibility: hidden;
}
/* A drawn play triangle, so no glyph is involved. */
.cue-play {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid currentColor;
}
@keyframes cue-breathe {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 23, 0); }
50% { box-shadow: 0 0 34px -4px rgba(255, 61, 23, 0.55); }
}
.cue-chevrons {
display: grid;
gap: 5px;
justify-items: center;
}
/* Three drawn chevrons cascading down, on a loop. */
.cue-chevrons i {
width: 13px;
height: 13px;
border-right: 2px solid var(--signal);
border-bottom: 2px solid var(--signal);
transform: rotate(45deg);
animation: cue-fall 1.15s ease-in-out infinite;
}
.cue-chevrons i:nth-child(2) { animation-delay: 0.10s; }
.cue-chevrons i:nth-child(3) { animation-delay: 0.20s; }
@keyframes cue-fall {
0%, 100% { opacity: 0.16; transform: rotate(45deg) translate3d(-2px, -2px, 0); }
45% { opacity: 1; transform: rotate(45deg) translate3d(0, 0, 0); }
}
/* Dead centre of the frame on the beats the visitor drives. In step 1 that is
the middle of the upload ring; in step 3, the middle of the picture, with
the notes landing around it. Two short lines so it fits inside the ring. */
.monitor-hint {
position: absolute;
top: calc(50% - var(--hint-lift, 0) * var(--timeline-h) / 2 + var(--hint-drop, 0) * (var(--ring-size) / 2 + 4.7rem));
left: 50%;
z-index: 12;
display: grid;
justify-items: center;
gap: 0.6rem;
opacity: var(--hint, 0);
transform: translate(-50%, -50%);
pointer-events: none;
transition: opacity 420ms var(--ease-out);
}
.hint-text {
font: 500 var(--fs-label) / 1.45 var(--font-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--signal);
text-align: center;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
white-space: nowrap;
}
/* A soft dark backing wherever there is a picture behind the hint, so it
reads over any frame (and the playhead passes behind it, not through). */
.monitor-hint::before {
content: "";
position: absolute;
inset: -0.75rem -1.1rem;
z-index: -1;
border-radius: 16px;
background: rgba(5, 5, 5, 0.62);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
opacity: var(--hint-backdrop, 0);
}
.monitor-hint.is-light .hint-text {
color: #fff;
text-shadow: 0 1px 10px rgba(120, 20, 0, 0.35);
}
.monitor-hint.is-light .cue-chevrons i {
border-color: #fff;
}
.cue-chevrons--small {
gap: 3px;
}
.cue-chevrons--small i {
width: 10px;
height: 10px;
}
/* Review scrubber. Sits on the picture because by step 3 the timeline has
gone, and the notes still need something to be timed against. */
.monitor-scrubber {
position: absolute;
right: clamp(1rem, 3%, 2rem);
bottom: clamp(0.9rem, 4%, 1.6rem);
left: clamp(1rem, 3%, 2rem);
z-index: 5;
opacity: var(--scrubber-alpha, 0);
transition: opacity 420ms var(--ease-out);
pointer-events: none;
}
.scrubber-track {
position: relative;
height: 2px;
background: rgba(255, 255, 255, 0.24);
}
.scrubber-fill {
display: block;
width: var(--scrubber-pos, 0%);
height: 100%;
background: var(--signal);
}
.scrubber-tick {
position: absolute;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--white-52);
transform: translate(-50%, -50%);
transition: background-color 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.scrubber-tick.is-in {
background: var(--signal);
transform: translate(-50%, -50%) scale(1.35);
}
.scrubber-head {
position: absolute;
top: -5px;
bottom: -5px;
left: var(--scrubber-pos, 0%);
width: 2px;
background: var(--white);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
transform: translateX(-50%);
}
/* Step 2: flat-to-graded wipe -------------------------------------------- */
.monitor-grade {
position: absolute;
inset: 0;
z-index: 3;
/* The wipe itself stays under the timeline; only the line rises above it. */
opacity: var(--grade-alpha, 0);
pointer-events: none;
transition: opacity 450ms var(--ease-out);
}
.grade-stamp {
position: absolute;
bottom: 0.6rem;
padding: 0.2rem 0.55rem;
border: 1px solid var(--white-14);
border-radius: var(--radius-control);
background: rgba(5, 5, 5, 0.82);
font: 400 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.grade-stamp--graded {
left: 0.7rem;
color: var(--signal);
}
.grade-stamp--flat {
right: 0.7rem;
color: var(--white-52);
}
.grade-handle {
display: none;
}
/* This line is a sibling of both monitor and timeline, so it really can run
through the full canvas instead of disappearing beneath the timeline. */
.sequence-playhead {
position: absolute;
top: 0;
bottom: 0;
left: var(--grade-pos, 0%);
z-index: 8;
width: 2px;
margin-left: -1px;
background: var(--signal);
box-shadow: 0 0 12px rgba(255, 61, 23, 0.8);
opacity: var(--playhead-alpha, 0);
pointer-events: none;
}
/* Step 3: notes on the picture ------------------------------------------- */
.monitor-notes {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.monitor-note {
position: absolute;
display: flex;
/* Bottom-aligned so the dot sits at the squared corner the bubble points
from. Centred, the tail aimed at empty frame below it. */
align-items: flex-end;
gap: 0.55rem;
opacity: 0;
transform: translate3d(0, 8px, 0) scale(0.9);
transform-origin: left center;
transition: opacity 300ms var(--ease-out), transform 380ms var(--ease-out);
}
/* Popped: each note bursts and is gone as the export takes over. */
.monitor-note.is-in.is-popped {
opacity: 0;
transform: scale(1.35);
transition: opacity 240ms ease-in, transform 300ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.monitor-note.is-in {
opacity: 1;
transform: none;
}
.note-beacon {
position: relative;
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 12px var(--signal);
}
.note-beacon::after {
content: "";
position: absolute;
inset: -5px;
border: 1.5px solid var(--signal);
border-radius: 50%;
animation: beacon-pulse 1.9s ease-out infinite;
}
@keyframes beacon-pulse {
0% { opacity: 0.85; transform: scale(0.7); }
70% { opacity: 0; transform: scale(1.5); }
100% { opacity: 0; transform: scale(1.5); }
}
/* Reads as a note somebody left, not a tooltip: an avatar, the comment, and a
tail pointing back at the dot it belongs to. */
.note-bubble {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.85rem 0.5rem 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px 12px 12px 3px;
background: rgba(12, 12, 12, 0.93);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
font-size: var(--fs-small);
line-height: 1.25;
color: var(--white);
white-space: nowrap;
}
/* The commenter's initial, in the accent the dot already uses. */
.note-bubble::before {
content: "M";
display: grid;
place-items: center;
flex: none;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: var(--signal);
font: 500 0.65rem / 1 var(--font-mono);
color: #fff;
}
.monitor-note:nth-of-type(2) .note-bubble::before { content: "S"; background: #3f7bd8; }
.monitor-note:nth-of-type(3) .note-bubble::before { content: "M"; }
.monitor-note:nth-of-type(4) .note-bubble::before { content: "S"; background: #3f7bd8; }
.note-bubble b {
margin-right: 0.4rem;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
color: var(--signal);
}
/* Timeline - persistent, then handed off to export ------------------------ */
/* Docked to the foot of the picture rather than sitting in its own row, so
the monitor never has to shrink and the window never changes size. The
panel slides out of frame for the review, and the picture is simply there
underneath it - that slide is the morph to full screen. */
.workbench-timeline {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
height: var(--timeline-h);
border-top: 1px solid rgba(242, 240, 234, calc(0.14 * var(--lanes-alpha, 0)));
background: #070707;
overflow: hidden;
transform: translate3d(0, calc((1 - var(--lanes-alpha, 0)) * 100%), 0);
}
.timeline-lanes {
position: absolute;
inset: 0;
}
/* Empty lanes at step 1 read as a project that is already open, which is the
opposite of the point. The timeline arrives with the footage. */
.timeline-lanes {
display: flex;
flex-direction: column;
opacity: var(--lanes-alpha, 0);
transition: opacity 450ms var(--ease-out);
}
.lane {
display: flex;
flex: 1;
min-height: 0;
border-bottom: 1px solid var(--white-08);
}
.lane:last-of-type {
border-bottom: 0;
}
.lane-label {
display: grid;
place-items: center;
flex: none;
width: 44px;
border-right: 1px solid var(--white-08);
background: var(--panel);
font: 400 var(--fs-label) / 1 var(--font-mono);
color: var(--white-52);
user-select: none;
}
/* Lanes are plain: the clips carry the detail. */
.lane-track {
position: relative;
flex: 1;
min-width: 0;
}
/* Clips, drawn the way an editor's timeline draws them. Video is a light
block with a thumbnail at its head; audio is a dark, orange-tinted block
with its waveform in it. The playhead lays each one down as it passes
(--reveal, 0..1, from process.js): a hot edge leads it across, and it
flashes once as it locks in. */
.clip {
position: absolute;
inset-block: 3px;
left: var(--clip-start, 0%);
display: flex;
align-items: center;
gap: 0.5rem;
width: var(--clip-width, 20%);
padding: 0 0.55rem 0 0;
overflow: hidden;
border-radius: 5px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
rgba(242, 240, 234, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(5, 5, 5, 0.18);
font: 600 var(--fs-label) / 1 var(--font-sans);
letter-spacing: -0.01em;
color: rgba(5, 5, 5, 0.84);
white-space: nowrap;
user-select: none;
clip-path: inset(0 calc((1 - var(--reveal, 0)) * 100%) 0 0 round 5px);
--clip-glow: rgba(242, 240, 234, 0.55);
}
.clip span {
position: relative;
z-index: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* The thumbnail: the head frame of the shot, full clip height, 16:9. */
.clip::before {
content: "";
flex: none;
align-self: stretch;
aspect-ratio: 16 / 9;
background: var(--thumb, url("../assets/thumbs/clip-1.jpg")) 50% 50% / cover;
box-shadow: 1px 0 0 rgba(5, 5, 5, 0.3);
}
.clip--t1 { --thumb: url("../assets/thumbs/clip-1.jpg"); }
.clip--t2 { --thumb: url("../assets/thumbs/clip-2.jpg"); }
.clip--t3 { --thumb: url("../assets/thumbs/clip-3.jpg"); }
.clip--t4 { --thumb: url("../assets/thumbs/clip-4.jpg"); }
/* Motion graphics: their own colour, no thumbnail, a faint diagonal sheen
so they read as rendered graphics rather than footage. */
.clip--mograph {
padding-left: 0.55rem;
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 6px, transparent 6px 14px),
linear-gradient(180deg, #ff6a45, var(--signal));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(5, 5, 5, 0.2);
color: rgba(5, 5, 5, 0.86);
--clip-glow: rgba(255, 61, 23, 0.8);
}
.clip--mograph::before {
content: none;
}
/* B-roll sits on the upper track, a shade quieter than the main cameras. */
.clip--v2 {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%),
rgba(242, 240, 234, 0.74);
}
/* The leading edge: white-hot while the clip is being laid down, gone at
either end of the reveal. */
.clip::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--reveal, 0) * 100% - 1.6rem);
width: 1.6rem;
background: linear-gradient(90deg, transparent, var(--lead, rgba(255, 255, 255, 0.75)));
opacity: calc(min(1, var(--reveal, 0) * 12) * min(1, (1 - var(--reveal, 0)) * 12));
pointer-events: none;
}
/* Fully drawn: the clip-path is dropped so the lock flash can bloom past the
clip's own edge. */
/* Locked in: a flare right where the playhead leaves the clip, so the flash
happens at the playhead, not across the whole block. */
.clip.is-locked {
clip-path: none;
}
.clip.is-locked::after {
animation: clip-flare 560ms ease-out;
}
@keyframes clip-flare {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* Falling out of the timeline at the end of the edit (--fall 0..1 and --spin
per clip, from process.js). */
.clip {
translate: 0 calc(var(--fall, 0) * 260px);
rotate: calc(var(--fall, 0) * var(--spin, 0deg));
}
/* Audio: label up top, waveform below it, on a dark orange tint. */
.clip--beat,
.clip--mic,
.clip--fx,
.clip--music {
align-items: flex-start;
padding: 0.26rem 0.55rem 0;
text-shadow: 0 1px 3px rgba(5, 5, 5, 0.9);
background:
var(--clip-fade, none) var(--fade-side, right) top / 14% 100% no-repeat,
var(--wave) left 0 bottom 2px / 600px 52% repeat-x,
rgba(255, 61, 23, var(--tint, 0.14));
box-shadow: inset 0 0 0 1px rgba(255, 61, 23, var(--edge, 0.42));
color: rgba(242, 240, 234, 0.9);
--clip-glow: rgba(255, 61, 23, 0.7);
--lead: rgba(255, 140, 110, 0.55);
}
.clip--beat::before,
.clip--mic::before,
.clip--fx::before,
.clip--music::before {
content: none;
}
.clip--beat {
--wave: url("data:image/svg+xml,");
--tint: 0.24;
--edge: 0.7;
}
.clip--mic { --wave: url("data:image/svg+xml,"); }
.clip--fx { --wave: url("data:image/svg+xml,"); }
.clip--music {
--wave: url("data:image/svg+xml,");
--tint: 0.1;
}
/* The fade: the volume line an editor would see, drawn corner to corner
across the end being faded, with the silenced side darkened. */
.clip--music-out {
--clip-fade: linear-gradient(to bottom left, rgba(5, 5, 5, 0.62) 49%, rgba(255, 61, 23, 0.95) 49.6% 50.8%, transparent 51.4%);
--fade-side: right;
}
.clip--music-in {
--clip-fade: linear-gradient(to bottom right, rgba(5, 5, 5, 0.62) 49%, rgba(255, 61, 23, 0.95) 49.6% 50.8%, transparent 51.4%);
--fade-side: left;
}
/* Step 4: the export happens on the picture ------------------------------
The same ring as the upload owns the centre. The deliverables pop in
around it as it fills, loose and floating rather than lined up, and at
100% the frame floods orange out of the ring and they burst into place
around the closing line.
------------------------------------------------------------------------ */
.monitor-export {
position: absolute;
inset: 0;
z-index: 6;
display: grid;
place-items: center;
opacity: var(--export-alpha, 0);
pointer-events: none;
transition: opacity 500ms var(--ease-out), background-color 500ms var(--ease-out);
}
/* Collapses into its own centre as the flood comes out of it. */
.progress-ring--export .ring-label {
display: none;
}
.progress-ring--export {
opacity: calc(1 - var(--readout-out, 0));
transform: scale(calc(1 - var(--readout-out, 0) * 0.35));
transition: opacity 340ms var(--ease-out), transform 480ms var(--ease-out);
}
/* Above the flood, so the same files carry straight on to the end screen.
Position, tilt, scale and opacity are all written by process.js from two
poses (around the ring, then around the closing line) on the scene's
curve, so none of it is transitioned here. */
.monitor-files {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.export-file {
position: absolute;
top: calc(var(--y, 50) * 1%);
left: calc(var(--x, 50) * 1%);
display: grid;
justify-items: center;
gap: 0.45rem;
text-align: center;
opacity: var(--o, 0);
transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(var(--s, 1));
will-change: transform;
}
/* Alive: each file floats on its own slow loop, out of phase with the
others. Individual properties, so it composes with the pose above. */
.export-file img {
width: clamp(40px, 4.2vw, 54px);
height: auto;
filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
animation: file-float 1.9s ease-in-out var(--float-delay, 0s) infinite alternate;
}
.export-file--master img {
width: clamp(52px, 5.4vw, 70px);
}
@keyframes file-float {
from { translate: 0 3px; rotate: -3.5deg; }
to { translate: 0 -5px; rotate: 3.5deg; }
}
.export-file span {
font: 500 var(--fs-label) / 1.2 var(--font-mono);
color: #fff;
opacity: var(--label, 1);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
white-space: nowrap;
}
.export-file:nth-child(1) { --float-delay: -0.4s; }
.export-file:nth-child(2) { --float-delay: -1.9s; }
.export-file:nth-child(3) { --float-delay: -0.9s; }
.export-file:nth-child(4) { --float-delay: -2.3s; }
.export-file:nth-child(5) { --float-delay: -1.3s; }
.export-file:nth-child(6) { --float-delay: -0.1s; }
.export-file:nth-child(7) { --float-delay: -1.6s; }
/* The payoff. The flood grows out of the ring as a circle and the line is
stated plainly: the one moment in the sequence allowed to be loud. */
.monitor-success {
position: absolute;
inset: 0;
z-index: 9;
background: radial-gradient(125% 95% at 50% 45%, #ff5f33 0%, var(--signal) 46%, #c22b0a 100%);
clip-path: circle(calc(var(--success, 0) * 75%) at 50% 50%);
pointer-events: none;
}
.success-head {
position: absolute;
top: 28%;
left: 50%;
display: grid;
justify-items: center;
gap: 0.9rem;
width: 100%;
transform: translate(-50%, -50%) scale(calc(1 + 0.03 * var(--hold, 0)));
}
.success-caption {
position: absolute;
bottom: 8%;
left: 50%;
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
opacity: var(--headline, 0);
transform: translate(-50%, calc((1 - var(--headline, 0)) * 10px));
}
/* Confetti: the reward. Each piece is placed by process.js. */
.monitor-confetti {
position: absolute;
inset: 0;
z-index: 11;
overflow: hidden;
pointer-events: none;
}
.monitor-confetti i {
position: absolute;
top: 0;
left: 0;
width: var(--w, 7px);
height: var(--h, 11px);
border-radius: var(--round, 2px);
background: var(--tone, #fff);
opacity: var(--o, 0);
transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg));
will-change: transform;
}
.success-mark {
position: relative;
width: clamp(2.2rem, 4vw, 3.1rem);
height: clamp(2.2rem, 4vw, 3.1rem);
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 50%;
opacity: var(--headline, 0);
transform: scale(calc(0.55 + 0.45 * var(--headline, 0)));
}
/* A drawn tick, so no glyph is involved. */
.success-mark::after {
content: "";
position: absolute;
top: 46%;
left: 50%;
width: 30%;
height: 56%;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translate(-50%, -55%) rotate(45deg);
}
.monitor-success strong {
font-size: clamp(1.9rem, 3.8vw, 3.4rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.05em;
color: #fff;
opacity: var(--headline, 0);
transform: translate3d(0, calc((1 - var(--headline, 0)) * 14px), 0);
}
/* Step 1: intake ---------------------------------------------------------- */
.workbench-intake {
position: absolute;
/* Bottom inset rather than padding: a percentage padding would resolve
against the canvas width, an inset resolves against its height - which
is what the docked timeline actually occupies. */
inset: 0 0 calc(var(--timeline-h) * var(--lanes-alpha, 0)) 0;
z-index: 6;
display: grid;
place-items: center;
padding: clamp(0.8rem, 1.8vh, 1.4rem);
pointer-events: none;
transition: opacity 360ms var(--ease-out);
}
.intake-deck {
/* Distance from the ring's centre to each file's centre: the ring's radius
plus enough to clear a file and its name. */
--orbit: calc(var(--ring-size) / 2 + 6rem);
position: absolute;
inset: 0;
perspective: 1000px;
}
/* Each axis is capped against the canvas separately, so on a short canvas the
circle flattens into an ellipse rather than pushing files out of frame. */
.intake-file {
position: absolute;
left: calc(50% + var(--ox) * min(var(--orbit), 40%));
top: calc(50% + var(--oy) * min(var(--orbit-y, var(--orbit)), 34%));
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
transform-origin: 50% 80%;
/* Waiting just outside its slot, a little small and a little turned. It
drifts in, settles with the faintest overshoot, and goes back out the
same way if the visitor scrolls back. */
opacity: 0;
scale: 0.74;
translate: calc(var(--ox, 0) * 46px) calc(var(--oy, 0) * 46px);
rotate: calc(var(--land-tilt, 0) * 1deg);
transform: translate(-50%, -50%) rotate(var(--orbit-angle, 0deg));
transition:
opacity 420ms ease,
scale 680ms cubic-bezier(0.22, 1.15, 0.36, 1),
translate 680ms cubic-bezier(0.22, 1, 0.36, 1),
rotate 680ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* --ox / --oy (the unit position on the orbit) are written by process.js
from each file's data-angle, so the same values can spiral inwards at the
handoff. The tilt is just character. */
.intake-file:nth-child(1) { --orbit-angle: 5deg; --wiggle-delay: -0.10s; --land-tilt: -10; }
.intake-file:nth-child(2) { --orbit-angle: 7deg; --wiggle-delay: -0.31s; --land-tilt: 8; }
.intake-file:nth-child(3) { --orbit-angle: 3deg; --wiggle-delay: -0.05s; --land-tilt: -7; }
.intake-file:nth-child(4) { --orbit-angle: -4deg; --wiggle-delay: -0.22s; --land-tilt: 10; }
.intake-file:nth-child(5) { --orbit-angle: -7deg; --wiggle-delay: -0.38s; --land-tilt: -8; }
.intake-file:nth-child(6) { --orbit-angle: -3deg; --wiggle-delay: -0.16s; --land-tilt: 7; }
.intake-file.is-in {
opacity: 1;
scale: 1;
translate: 0 0;
rotate: 0deg;
}
/* Handed off: the files are drawn into the ring on a spiral, one after the
other, and the impact lands as the last one goes in. process.js drives
the path (--ox / --oy), the per-file progress (--handoff) and the fade
(--vanish), all on the scene's curve, so no CSS easing here. */
.intake-file.is-handing-off {
opacity: calc(1 - var(--vanish, 0));
scale: 1;
translate: 0 0;
rotate: 0deg;
transform:
translate(-50%, -50%)
rotate(calc(var(--orbit-angle, 0deg) * (1 - var(--handoff, 0)) + var(--handoff, 0) * 70deg))
scale(calc(1 - var(--handoff, 0) * 0.74));
transition: none;
}
.intake-file-icon {
display: block;
width: 72px;
height: 88px;
object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.75));
/* Restless as the upload nears 100%. The amplitude is --wiggle (0..1, from
process.js); at 0 the animation runs but moves nothing. Individual
rotate/translate, so it composes with the file's own transform. */
animation: file-wiggle 0.42s ease-in-out var(--wiggle-delay, 0s) infinite alternate;
}
/* The document icon is square with wide margins; cropping the margins makes
the page itself the same size as its neighbours. */
.intake-file-icon--doc {
object-fit: cover;
}
@keyframes file-wiggle {
from { rotate: calc(var(--wiggle, 0) * -3deg); translate: 0 calc(var(--wiggle, 0) * 1.2px); }
to { rotate: calc(var(--wiggle, 0) * 3deg); translate: 0 calc(var(--wiggle, 0) * -1.2px); }
}
.intake-file-name {
font-size: var(--fs-label);
line-height: 1.25;
color: var(--white-76);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
white-space: nowrap;
}
/* One progress element, used by both the upload and the render. r=53 gives a
circumference of 333.0, which is the dash length below. */
.progress-ring {
position: relative;
display: grid;
place-items: center;
width: var(--ring-size);
aspect-ratio: 1;
}
/* Plain: one size, one weight, from 0% to 100%. */
.progress-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
transform-origin: center;
overflow: visible;
}
.progress-ring circle {
fill: none;
}
.ring-track { stroke: none; }
/* One weight and one glow throughout: the ring grows with the fill, the line
does not thicken. */
.ring-fill {
stroke: var(--signal);
stroke-width: 2.75;
stroke-linecap: round;
stroke-dasharray: 333;
stroke-dashoffset: calc(333 - 333 * var(--ring, 0));
/* A round cap on an empty dash still paints a dot at 12 o'clock. */
stroke-opacity: clamp(0, calc(var(--ring, 0) * 60), 1);
filter: drop-shadow(0 0 6px rgba(255, 61, 23, 0.5));
}
/* The centre belongs to the instruction (step 1) or the status (step 4); the
number sits under the ring, in the gap the orbit leaves at 6 o'clock. */
.ring-pct {
position: absolute;
top: calc(100% + 0.8rem);
left: 50%;
font: 500 clamp(1rem, 1.5vw, 1.3rem) / 1 var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--signal);
transform: translateX(-50%);
}
.ring-label {
position: absolute;
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white-76);
white-space: nowrap;
}
/* Rail - the only narrator ------------------------------------------------ */
/* Top left, where the eye lands first. At the foot of the frame the step was
too easily missed, and it had to dodge the timeline as well. */
.process-rail {
position: absolute;
inset: 0 0 auto;
z-index: 8;
padding: clamp(1.1rem, 4%, 2.2rem) clamp(1.2rem, 4%, 2.6rem) 0;
opacity: calc(1 - var(--success, 0));
pointer-events: none;
transition: opacity 320ms var(--ease-out);
}
/* Its own gradient, so the type reads over any frame underneath it. */
.process-rail::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: calc(100% + clamp(4.5rem, 14%, 7.5rem));
background: linear-gradient(180deg,
rgba(4, 4, 4, 0.97) 0%,
rgba(4, 4, 4, 0.9) 22%,
rgba(4, 4, 4, 0.55) 58%,
transparent 100%);
/* Only needed once there is a picture to read over. On the black upload
frame it would just darken the files at the top of the orbit. */
opacity: var(--scrim, 0);
pointer-events: none;
}
.rail-steps {
position: relative;
z-index: 1;
width: 100%;
min-height: clamp(4.2rem, 8.5vh, 6rem);
margin: 0;
padding: 0;
list-style: none;
}
.rail-step {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: max-content;
max-width: 100%;
opacity: 0;
transform: translate3d(0, -10px, 0);
pointer-events: none;
transition: opacity 520ms var(--ease-out), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rail-step.is-active {
opacity: 1;
transform: none;
pointer-events: auto;
}
.rail-step-index {
margin-bottom: 0.7rem;
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--signal);
}
.rail-step h3 {
margin: 0;
font-size: clamp(1.5rem, 2.6vw, 2.6rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.045em;
color: var(--white);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
}
/* The closing beat swaps the ordinal for the payoff. */
.rail-step--done .rail-step-index { color: var(--white); }
.rail-step--done h3 { color: var(--signal); }
/* Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
.process-workbench {
grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.rail-step h3 {
font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}
}
@media (max-width: 860px) {
.process-sequence.is-engaged .process-track {
height: 2048vh;
}
.process-stage {
align-items: center;
}
.rail-step h3 {
font-size: clamp(1.3rem, 4.6vw, 1.8rem);
}
/* The canvas is ratio-driven now; a fixed height here squashed it out of
16:9 on narrow screens. */
.window-canvas {
--timeline-h: clamp(112px, 32%, 168px);
}
.intake-file-icon {
width: 54px;
height: 66px;
}
}
@media (max-width: 560px) {
.intake-file-icon {
width: 44px;
height: 54px;
}
.intake-file-name {
width: 6.5rem;
white-space: normal;
}
.intake-deck { --orbit: calc(var(--ring-size) / 2 + 3.8rem); }
.lane-label {
width: 30px;
}
}
/* Phones ------------------------------------------------------------------
A 16:9 window on a phone is a letterbox a couple of hundred pixels tall,
with everything inside it crammed together. Idle, it stays that compact,
so it is not a tall black block to scroll past. Once the visitor clicks
in, the canvas grows to fill the screen, portrait, like an app, and every
step inside is laid out for that shape. Keyed to the screen's shape, not
just its width, so a portrait tablet gets it too and a landscape one keeps
the widescreen window. `phone` in process.js uses the same query. */
@media (max-width: 900px) and (orientation: portrait) {
.process-stage {
--head: 76px;
padding-top: var(--head);
padding-bottom: 0.75rem;
}
.workbench-window {
max-width: none;
}
.window-canvas {
aspect-ratio: auto;
height: calc((100vw - 2 * var(--gutter)) * 9 / 16);
transition: height 760ms var(--ease-out);
}
.process-sequence.is-engaged .window-canvas {
height: calc(100svh - var(--head) - 42px - 1.5rem);
}
.rail-step h3 {
font-size: clamp(1.35rem, 6vw, 1.7rem);
}
/* Step 1: the orbit uses the height it now has. */
.intake-deck {
--orbit-y: calc(var(--orbit) * 1.45);
}
/* Step 3: notes wrap, and stack down the left of the frame, clear of the
scroll hint in the middle. */
.monitor-note {
max-width: 84%;
}
.note-bubble {
white-space: normal;
}
.monitor-note[data-note="1"] { left: 6% !important; top: 19% !important; }
.monitor-note[data-note="2"] { left: 12% !important; top: 31% !important; }
.monitor-note[data-note="3"] { left: 6% !important; top: 61% !important; }
.monitor-note[data-note="4"] { left: 12% !important; top: 73% !important; }
/* The end screen: the line higher and a little smaller, so the fan and
the hint both have room below it. */
.success-head {
top: 25%;
padding-inline: 1.2rem;
}
.monitor-success strong {
font-size: clamp(2rem, 9vw, 2.8rem);
line-height: 1.02;
text-align: center;
}
}
/* The header is shorter on phones. */
@media (max-width: 760px) and (orientation: portrait) {
.process-stage { --head: 66px; }
}
@media (prefers-reduced-motion: reduce) {
.workbench-window {
opacity: 1;
transform: none;
transition: none;
}
.note-beacon::after {
animation: none;
}
.intake-file,
.clip,
.export-file,
.monitor-note,
.scrubber-tick,
.rail-step,
.monitor-success {
transition-duration: 1ms;
}
/* Pointer tilt is motion the user asked not to have. */
.workbench-window { transform: none !important; }
}