/* Project detail: Lusion's flow skinned for Astro. One strip of images that moves sideways on desktop (wheel, keys, drag, swipe),
   a vertical stack at 812px and below, and the same stack with JavaScript off. The Launch website panel is the final step, the Next
   project link follows it. The project's own colours arrive as --pd-bg / --pd-text on .pd; everything else is derived from them. */
.pd {
  --pd-bg: #101112; --pd-text: #F1EBDD;
  --pd-mute: color-mix(in srgb, var(--pd-text) 62%, var(--pd-bg));
  --pd-line: color-mix(in srgb, var(--pd-text) 20%, var(--pd-bg));
  --pd-tint: color-mix(in srgb, var(--pd-text) 7%, var(--pd-bg));
  --pd-padx: max(5vw, 40px);
  --pd-pady: clamp(24px, 3.4vw, 48px);
  --pd-metaw: clamp(300px, 28vw, 460px);
  --pd-r: 24px;
  --pd-out: cubic-bezier(.16, 1, .3, 1);
  --pd-flood: cubic-bezier(.35, 0, 0, 1);
  position: relative;
  padding: var(--pd-pady) clamp(20px, 5vw, 40px) var(--s7);
  background: var(--pd-bg);
  color: var(--pd-text);
  text-align: left;
}
.pd ul { list-style: none; }
.pd a { text-decoration: none; }
.pd :focus-visible { outline: 2px solid var(--pd-text); outline-offset: 4px; }

/* until the script has taken over, hide the page so the layout switch is never seen; a JS failure shows the stacked page after 3s */
.js .pd:not(.pd-live) { visibility: hidden; animation: pd-safe 0s 3s forwards; }
@keyframes pd-safe { to { visibility: visible; } }

/* back control */
.pd-back { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 20px 0 16px; border: 1px solid var(--pd-line); color: var(--pd-text); font: 300 12px/1 var(--font-display); letter-spacing: .34em; text-transform: uppercase; transition: border-color var(--t-ctl) var(--ease); -webkit-tap-highlight-color: transparent; }
.pd-back-g { position: relative; display: block; width: 14px; height: 14px; overflow: hidden; flex: none; }
.pd-back-g svg { position: absolute; inset: 0; width: 14px; height: 14px; transition: transform .4s cubic-bezier(.4, 0, .1, 1), opacity .4s cubic-bezier(.4, 0, .1, 1); }
.pd-back-g svg + svg { transform: translateX(160%); opacity: 0; }
.pd-back-l { transition: transform .4s cubic-bezier(.4, 0, .1, 1); }
.pd-back:focus-visible { border-color: var(--pd-text); }
@media (hover: hover) and (pointer: fine) {
  .pd-back:hover { border-color: var(--pd-text); }
  .pd-back:hover .pd-back-g svg:first-child { transform: translateX(-160%); opacity: 0; }
  .pd-back:hover .pd-back-g svg + svg { transform: none; opacity: 1; }
  .pd-back:hover .pd-back-l { transform: translateX(-4px); }
}

/* meta column */
.pd-meta { margin-top: var(--s5); }
.pd-title { font: 200 clamp(34px, 9vw, 56px)/1.04 var(--font-display); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; color: var(--pd-text); }
.pd-title--logo { line-height: 0; font-size: 0; letter-spacing: 0; }
.pd-logo { display: block; height: clamp(36px, 4.4vw, 64px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.pd[data-tone="light"] .pd-logo { filter: brightness(0) invert(1); }
.pd[data-tone="dark"] .pd-logo { filter: brightness(0); }
.pd[data-tone="light"] .pd-logo--boxed { filter: grayscale(1) brightness(1.15); }
.pd[data-tone="dark"] .pd-logo--boxed { filter: grayscale(1); }
.pd-summary { max-width: 46ch; margin-top: var(--s3); color: var(--pd-mute); font-weight: 300; font-size: 15px; line-height: 1.75; }
.pd-facts { margin-top: var(--s4); }
.pd-fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s2); padding: 14px 0; border-top: 1px solid var(--pd-line); }
.pd-fact:last-child { border-bottom: 1px solid var(--pd-line); }
.pd-fact dt { font: 300 11px/1.7 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--pd-mute); }
.pd-fact dd { font-weight: 300; font-size: 15px; line-height: 1.6; }
.pd-fact li + li { margin-top: 2px; }
.pd-prev { display: inline-flex; flex-direction: column; gap: 2px; margin-top: var(--s4); min-height: 48px; justify-content: center; color: var(--pd-mute); transition: color var(--t-ctl) var(--ease); }
.pd-prev-k { font: 300 11px/1.6 var(--font-display); letter-spacing: .3em; text-transform: uppercase; }
.pd-prev-n { font-weight: 300; font-size: 14px; }
.pd-prev:hover, .pd-prev:focus-visible { color: var(--pd-text); }

/* strip: stacked by default (no JS, narrow, or before the script runs) */
.pd-win { margin-top: var(--s6); }
.pd-track { display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 8vw, 56px); max-width: 1100px; margin: 0 auto; }
.pd-item { position: relative; width: min(100%, calc(76svh * var(--arn, 1))); aspect-ratio: var(--ar, 4 / 3); overflow: hidden; background: var(--pd-tint); }
.pd-item img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }

/* the final step */
.pd-launch { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); width: 100%; min-height: 340px; padding: clamp(24px, 6vw, 40px); border: 1px solid var(--pd-line); overflow: hidden; color: var(--pd-text); -webkit-tap-highlight-color: transparent; transition: color .4s var(--pd-flood) .1s; }
.pd-launch::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--pd-tint); transform-origin: left center; }
.pd-launch-flood { position: absolute; inset: 0; z-index: -1; background: var(--pd-text); clip-path: circle(0% at var(--fx, 50%) var(--fy, 100%)); transition: clip-path .75s var(--pd-flood); }
.pd-launch-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; height: 4px; background: var(--pd-text); transform-origin: left center; }
.pd-launch-k { font: 300 12px/1.6 var(--font-display); letter-spacing: .34em; text-transform: uppercase; color: var(--pd-mute); transition: color .4s var(--pd-flood) .1s; }
.pd-launch-k b { margin-left: 14px; font-weight: 300; letter-spacing: .2em; }
.pd-launch-d { font: 200 clamp(26px, 6.4vw, 44px)/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.pd-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid currentColor; }
.pd-cta-l { font: 300 13px/1.4 var(--font-display); letter-spacing: .34em; text-transform: uppercase; transition: transform .4s var(--pd-flood) .1s; }
.pd-cta-a { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 1px solid currentColor; border-radius: 50%; overflow: hidden; }
.pd-cta-a svg { width: 22px; height: 22px; transition: transform .45s var(--pd-flood); }
.pd-launch:focus-visible { outline-offset: -4px; color: var(--pd-bg); }
.pd-launch:focus-visible .pd-launch-flood { clip-path: circle(150% at var(--fx, 50%) var(--fy, 100%)); }
.pd-launch:focus-visible .pd-launch-k { color: var(--pd-bg); }
.pd-launch:focus-visible .pd-launch-bar { background: var(--pd-bg); }
.pd-launch:focus-visible .pd-cta-l { transform: translateX(-6px); }
.pd-launch:focus-visible .pd-cta-a svg { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .pd-launch:hover { color: var(--pd-bg); }
  .pd-launch:hover .pd-launch-flood { clip-path: circle(150% at var(--fx, 50%) var(--fy, 100%)); }
  .pd-launch:hover .pd-launch-k { color: var(--pd-bg); }
  .pd-launch:hover .pd-launch-bar { background: var(--pd-bg); }
  .pd-launch:hover .pd-cta-l { transform: translateX(-6px); }
  .pd-launch:hover .pd-cta-a svg { transform: rotate(45deg); }
}
.pd-next { display: flex; flex-direction: column; gap: var(--s4); width: 100%; padding: var(--s5) 0 var(--s3); color: var(--pd-mute); transition: color .5s var(--ease); }
.pd-next-k { font: 300 12px/1.6 var(--font-display); letter-spacing: .34em; text-transform: uppercase; }
.pd-next-n { font: 200 clamp(30px, 8vw, 52px)/1.05 var(--font-display); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.pd-next-f { display: flex; align-items: center; gap: var(--s3); }
.pd-next-f svg { width: 22px; height: 22px; flex: none; transition: transform .45s var(--pd-flood); }
.pd-next-bar { position: relative; flex: 1; height: 4px; background: color-mix(in srgb, var(--pd-text) 14%, var(--pd-bg)); overflow: hidden; }
.pd-next-bar i { position: absolute; inset: 0; background: var(--pd-text); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--pd-out); }
.pd-next:focus-visible { color: var(--pd-text); }
.pd-next:focus-visible .pd-next-bar i { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .pd-next:hover { color: var(--pd-text); }
  .pd-next:hover .pd-next-bar i { transform: none; }
  .pd-next:hover .pd-next-f svg { transform: translateX(6px); }
}

/* progress row: only meaningful once the script drives the strip */
.pd-foot { display: none; }

/* reveal states, armed only by the script (class pd-live). The mask grows 60% to 100% and the image relaxes from 1.667x. */
.pd-live [data-pd-step] { clip-path: inset(20% round var(--pd-r)); }
.pd-live .pd-item img { transform: scale(1.667); }
.pd-live [data-pd-step].is-in { clip-path: inset(0 round 0); transition: clip-path 1s var(--pd-out); }
.pd-live .pd-item.is-in img { transform: none; transition: transform 1s var(--pd-out); }
.pd-live .pd-launch::before { transform: scaleX(0); }
.pd-live .pd-launch.is-in::before { transform: none; transition: transform 1.3s var(--pd-out) .1s; }
.pd-live .pd-launch-bar { transform: scaleX(0); }
.pd-live .pd-launch.is-in .pd-launch-bar { transform: none; transition: transform 1.5s var(--pd-out) .25s, background-color .4s var(--pd-flood); }
.pd-live .pd-launch-in { opacity: 0; transform: translate3d(0, 30px, 0); }
.pd-live .pd-launch.is-in .pd-launch-in { opacity: 1; transform: none; transition: opacity .45s var(--pd-out) var(--d, .15s), transform .45s var(--pd-out) var(--d, .15s), color .4s var(--pd-flood) .1s; }
.pd-launch-in:nth-child(4) { --d: .2s; } /* .pd-launch-k is child 3 (after flood and bar) */
.pd-launch-in:nth-child(5) { --d: .25s; }
.pd-live .pd-next { opacity: 0; transform: translate3d(0, 30px, 0); }
.pd-live .pd-next.is-in { opacity: 1; transform: none; transition: opacity .6s var(--pd-out) .1s, transform .6s var(--pd-out) .1s, color .5s var(--ease); }

/* desktop: the strip moves sideways, the meta column stays pinned at the left and drifts out as the strip starts */
@media (min-width: 813px) {
  .pd-live { --pd-r: 20px; padding: 0; height: calc(100svh - var(--pd-top, 65px)); min-height: 520px; overflow: hidden; overflow: clip; }
  .pd-live .pd-back { position: absolute; z-index: 3; top: var(--pd-pady); left: var(--pd-padx); }
  .pd-live .pd-meta { position: absolute; z-index: 2; left: var(--pd-padx); top: 50%; width: var(--pd-metaw); margin: 0; transform: translateY(-50%); }
  .pd-live .pd-title { font-size: clamp(36px, 3.7vw, 60px); }
  .pd-live .pd-win { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--pd-pady) + 48px + 20px); bottom: clamp(64px, 10vh, 92px); margin: 0; overflow: hidden; overflow: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .pd-live.is-drag .pd-win { cursor: grabbing; }
  .pd-live .pd-track { position: relative; flex-direction: row; align-items: stretch; gap: clamp(40px, 5vw, 80px); width: max-content; max-width: none; height: 100%; margin: 0; padding: 0 var(--pd-padx) 0 calc(var(--pd-padx) + var(--pd-metaw) + 5vw); will-change: transform; }
  .pd-live .pd-item { flex: none; width: auto; height: 100%; }
  .pd-live .pd-launch { flex: none; width: clamp(420px, 38vw, 620px); height: 100%; min-height: 0; }
  .pd-live .pd-next { flex: none; width: clamp(300px, 26vw, 420px); height: 100%; justify-content: space-between; padding: 0 0 var(--s2); }
  .pd-live .pd-next-k { margin-top: 0; }
  .pd-live .pd-foot { position: absolute; z-index: 2; left: var(--pd-padx); right: var(--pd-padx); bottom: var(--pd-pady); display: flex; align-items: center; gap: var(--s4); }
  .pd-count { font: 300 12px/1 var(--font-display); letter-spacing: .3em; color: var(--pd-mute); white-space: nowrap; }
  .pd-count b { font-weight: 300; color: var(--pd-text); }
  .pd-bar { position: relative; flex: 1; height: 1px; background: var(--pd-line); }
  .pd-bar i { position: absolute; left: 0; top: -1px; right: 0; height: 3px; background: var(--pd-text); transform: scaleX(0); transform-origin: left center; }
  .pd-hint { display: inline-flex; align-items: center; gap: 12px; font: 300 12px/1 var(--font-display); letter-spacing: .34em; text-transform: uppercase; color: var(--pd-mute); white-space: nowrap; transition: opacity .6s linear; }
  .pd-hint svg { width: 14px; height: 14px; }
  .pd-live.pd-moved .pd-hint { opacity: 0; }
}

/* stacked with the script running: a fixed progress row */
@media (max-width: 812px) {
  .pd-live .pd-foot { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--s3); padding: 12px clamp(20px, 5vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, color-mix(in srgb, var(--pd-bg) 92%, transparent) 55%); transition: opacity .4s linear; }
  .pd-live .pd-foot.is-off { opacity: 0; }
  .pd-count { font: 300 12px/1 var(--font-display); letter-spacing: .3em; color: var(--pd-mute); white-space: nowrap; }
  .pd-count b { font-weight: 300; color: var(--pd-text); }
  .pd-bar { position: relative; flex: 1; height: 1px; background: var(--pd-line); }
  .pd-bar i { position: absolute; left: 0; top: -1px; right: 0; height: 3px; background: var(--pd-text); transform: scaleX(0); transform-origin: left center; }
  .pd-hint { display: none; }
  .pd-live { padding-bottom: calc(var(--s7) + 24px); }
  .pd-live .pd-item { margin-inline: auto; }
}
@media (max-width: 560px) {
  .pd-fact { grid-template-columns: 88px minmax(0, 1fr); }
  .pd-back { letter-spacing: .26em; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-live [data-pd-step], .pd-live [data-pd-step].is-in { clip-path: none; transition: none; }
  .pd-live .pd-item img, .pd-live .pd-item.is-in img { transform: none; transition: none; }
  .pd-live .pd-launch::before, .pd-live .pd-launch-bar, .pd-live .pd-launch-in, .pd-live .pd-next { transform: none; opacity: 1; transition: none; }
  .pd-launch-flood, .pd-back-g svg, .pd-back-l, .pd-cta-l, .pd-cta-a svg, .pd-next-bar i { transition: none; }
  .pd-hint { transition: none; }
}

/* ---- the site bar over a detail page (shared bar and menu: js/site-menu.js, css/site-menu.css) ----
   js/project-detail.js asks for the overlay mode (html.sm-over while a detail page is live): the header leaves the flow and the strip
   starts at the very top, in the project's own colours. The Back pill is this page's own and sits in the bar, beside the wordmark. */
html.sm-over body .sub-head { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--sb-h); }

/* the Back pill moves into the bar, next to the wordmark; the page gets the strip's full height back */
html.sm-over .pd .pd-back { position: absolute; z-index: 30; top: calc((var(--sb-h) - 34px) / 2); left: calc(var(--sb-padx) + var(--sb-brand) + 24px); min-height: 34px; gap: 10px; padding: 0 14px 0 12px; font-size: 11px; letter-spacing: .26em; border-color: var(--pd-line); }
html.sm-over .pd .pd-back-g, html.sm-over .pd .pd-back-g svg { width: 12px; height: 12px; }
@media (max-width: 812px) {
  html.sm-over .pd { padding-top: calc(var(--sb-h) + var(--s4)); }
}
@media (min-width: 813px) {
  html.sm-over .pd-live .pd-win { top: calc(var(--sb-h) + 20px); }
}