/* SoloNova — a case study over the view.

   The page is a page: the copy scrolls in a centred column of the bench's
   glass panes, in the product's own colour, and the world sits behind it —
   flown through the glazing on the way in (vista.js), then still. The bar,
   the panes and the type come from bench.css; this file is the column and
   what goes inside it. */

/* the product's colour lives in the column; the bar stays the studio's */
body[data-app="pt"] .vista-main      { --hud-rgb: 140, 255, 214; --hud: rgb(var(--hud-rgb)); }
body[data-app="belle"] .vista-main   { --hud-rgb: 122, 190, 255; --hud: rgb(var(--hud-rgb)); }
body[data-app="segno"] .vista-main   { --hud-rgb: 201, 166, 255; --hud: rgb(var(--hud-rgb)); }
body[data-app="meletao"] .vista-main { --hud-rgb: 255, 196, 107; --hud: rgb(var(--hud-rgb)); }

/* The canvas is kept out of sight until the photograph is loaded and the
   page has decided how to arrive. From the home the flight starts in the
   dark; from another case study the photograph itself stands in for the
   view until the canvas, showing the same view, fades in over it. */
.stage { background: #04060b url('/assets/img/vista.jpg') center / cover no-repeat; }
/* AVIF at a quarter of the JPEG, WebP behind it, the JPEG for the rest */
.stage { background-image: image-set(url('/assets/img/vista.avif') type('image/avif'), url('/assets/img/vista.webp') type('image/webp'), url('/assets/img/vista.jpg') type('image/jpeg')); }
html.js.is-from-home .stage { background-image: none; }
html.js .stage-gl { opacity: 0; transition: opacity .45s ease; }
html.js.is-ready .stage-gl { opacity: 1; }
html.nogl .stage { background-image: url('/assets/img/vista.jpg'); background-image: image-set(url('/assets/img/vista.avif') type('image/avif'), url('/assets/img/vista.webp') type('image/webp'), url('/assets/img/vista.jpg') type('image/jpeg')); }
html.nogl .stage-gl { display: none; }

.vista-main {
  position: relative; z-index: 6;
  width: min(54rem, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: calc(var(--bar-h) + 2.4rem) 0 5rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
}
/* the bench's portrait rules name grid areas for its own panels; in this
   column every pane is simply the next row */
.vista-main > .pane { grid-area: auto; }
/* the copy arrives with the view, not before it */
html.js .vista-main { opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform .9s var(--ease); }
/* from another case study the copy changes hands sideways: in from the
   right, out to the left, quicker than the flight's own fade */
html.js.is-from-case .vista-main { transform: translateX(28px); transition: opacity .45s ease, transform .45s var(--ease); }
html.js .vista-main.is-in { opacity: 1; transform: none; }
html.js .vista-main.is-leaving { opacity: 0; transform: translateX(-28px); transition: opacity .28s ease, transform .28s ease; }
@media (prefers-reduced-motion: reduce) { html.js .vista-main, html.js .vista-main.is-leaving { transition: none; transform: none; } }

/* the rim lights of neighbouring panes are never in step (rims.js paces
   each by its own perimeter; these only offset the start) */
.pane-sec:nth-of-type(even) { --rim-d: -7s; }
.pane-sec:nth-of-type(even)::before { animation-delay: -6.5s; }
.pane-sec:nth-of-type(3n) { --rim-d: -3.5s; }

/* ---- the hero pane ------------------------------------------------------ */
.pane-hero { padding: 1.3rem 1.4rem 1.35rem; }
.pane-hero h1 {
  margin: .1rem 0 .7rem;
  font: 500 clamp(1.8rem, 4vw, 2.7rem)/1.05 var(--font-ui);
  letter-spacing: -.01em; text-transform: uppercase; color: #F4F8FD;
  text-shadow: var(--halo);
}
.pane-hero h1 b { display: block; font-weight: 700; color: rgb(var(--hud-rgb)); }
.pane .lede { font-size: 1.02rem; line-height: 1.55; max-width: 62ch; }
.pane .lede strong { color: var(--text-hi); font-weight: 600; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1rem 0 0; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .6rem; border-radius: 4px;
  font: 600 .58rem/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-hi); border: 1px solid rgba(var(--hud-rgb), .38); background: rgba(var(--hud-rgb), .12);
  text-shadow: var(--halo);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px rgba(var(--ok-rgb), .9); }
.pill--wip::before { background: var(--hot); box-shadow: 0 0 7px rgba(var(--hot-rgb), .9); }
.chip {
  display: inline-block; padding: .38rem .55rem; border-radius: 4px;
  font: 500 .58rem/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mid); border: 1px solid rgba(var(--hud-rgb), .18); background: rgba(6, 10, 17, .45);
  text-shadow: var(--halo); white-space: nowrap;
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.hero-ctas .av-stores { margin: 0; }

/* ---- a section pane ----------------------------------------------------- */
.pane-sec { padding: 1.2rem 1.4rem 1.3rem; }
.pane-sec h2 {
  margin: 0 0 .5rem;
  font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.15 var(--font-ui);
  letter-spacing: -.005em; color: #F4F8FD; text-shadow: var(--halo);
}
.pane-sec .lede { margin-bottom: 1.05rem; }
.sec-k {
  display: block; margin-bottom: .45rem;
  font: 600 .56rem/1 var(--font-data); letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--hud-rgb)); text-shadow: var(--halo);
}

/* the captures: a desktop window and a phone on one baseline, or a row of
   phones, or one monitor */
.rig { display: grid; grid-template-columns: 3.47fr 1fr; gap: clamp(.7rem, 1.7vw, 1.35rem); align-items: end; }
.rig--short { grid-template-columns: 4.88fr 1fr; }
.rig--phones { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: start; gap: clamp(.6rem, 1.5vw, 1.1rem); }
.rig--mono { grid-template-columns: 1fr; }
.rig-desk, .rig-phone { min-width: 0; }
.cap {
  position: relative; overflow: hidden; border-radius: 8px;
  background: rgba(6, 10, 17, .88);
  border: 1px solid rgba(var(--hud-rgb), .30);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .85);
}
.cap-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .38rem .7rem;
  background: rgba(var(--hud-rgb), .08);
  border-bottom: 1px solid rgba(var(--hud-rgb), .22);
}
.cap-bar .url {
  font: 400 .56rem/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mid); text-shadow: var(--halo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap .shot, .phone-cap .shot, .monitor-cap .shot { display: block; width: 100%; height: auto; }
.phone-cap { position: relative; margin: 0; }
.phone-cap .shot {
  padding: 12px 6px 8px; border-radius: 22px;
  background: rgba(6, 10, 17, .92);
  border: 1px solid rgba(var(--hud-rgb), .34);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .85);
}
.phone-cap::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 30px; height: 3px; border-radius: 2px; background: rgba(4, 6, 11, .9);
}
.cap, .monitor-cap { margin: 0; }
.phone-cap figcaption, .cap figcaption {
  padding: .45rem .5rem .1rem; text-align: center;
  font: 500 .56rem/1.4 var(--font-data); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mid); text-shadow: var(--halo);
}
.monitor-cap {
  position: relative; padding: 9px 9px 12px; border-radius: 9px;
  background: rgba(6, 10, 17, .92);
  border: 1px solid rgba(var(--hud-rgb), .34);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .85);
}
.monitor-cap .shot { border-radius: 3px; }
.monitor-cap::after {
  content: ""; display: block; margin: 8px auto 0; width: 22%; height: 3px; border-radius: 2px;
  background: rgba(var(--hud-rgb), .28);
}
.device-caption {
  margin: .85rem 0 0; text-align: center;
  font: 500 .6rem/1.4 var(--font-data); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mid); text-shadow: var(--halo);
}
.callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-top: 1.1rem; }
.callout { padding: .1rem 0 0 .7rem; border-left: 1px solid rgba(var(--hud-rgb), .32); }
.callout h3, .feat h3 { margin: 0 0 .25rem; font: 600 .82rem/1.3 var(--font-ui); color: var(--text-hi); text-shadow: var(--halo); }
.callout p, .feat p { margin: 0; max-width: none; font-size: .8rem; line-height: 1.45; color: #D5DFEC; }

/* one phone beside its notes: the capture left, the callouts stacked right */
.sec-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.sec-split .callouts { grid-template-columns: 1fr; margin-top: 0; }
.sec-split + .device-caption { margin-top: 1.1rem; }
.rig--one { grid-template-columns: minmax(0, 260px); justify-content: center; }
@media (max-width: 860px) {
  .sec-split { grid-template-columns: 1fr; justify-items: center; }
  .sec-split > figure { width: min(270px, 72%); }
  .sec-split .callouts { width: 100%; }
}

/* the inventory: everything it does, in one pane */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1rem; margin-top: .7rem; }
.feat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat { padding-left: .7rem; border-left: 1px solid rgba(var(--hud-rgb), .32); }
.tech { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }

/* a legal page: several short sections in one pane, lists and the odd code name */
.legal .sec-k + .sec-k, .legal p + .sec-k, .legal ul + .sec-k { margin-top: 1.15rem; }
.legal ul { margin: .1rem 0 0; padding-left: 1.15rem; max-width: 62ch; }
.legal li { margin: .35rem 0; font-size: .95rem; line-height: 1.5; color: #D5DFEC; }
.legal li::marker { color: rgba(var(--hud-rgb), .8); }
.legal code { font: 500 .82em/1 var(--font-data); color: var(--text-hi); background: rgba(var(--hud-rgb), .12); padding: .12em .4em; border-radius: 3px; white-space: nowrap; }
.legal .lede { margin-bottom: 0; }
.legal a { color: rgb(var(--hud-rgb)); text-decoration: underline; text-decoration-color: rgba(var(--hud-rgb), .45); text-underline-offset: .15em; }
@media (max-width: 860px) { .legal li { font-size: .9rem; } }
/* the closing panes reuse the bench's exhibit rows and fine print */
.pane-avail .ex-grid { margin-top: .2rem; }

@media (max-width: 860px) {
  .vista-main { width: calc(100% - 24px); padding-top: calc(var(--bar-h) + 1rem); gap: .7rem; }
  .pane-hero, .pane-sec { padding: 1rem 1rem 1.05rem; }
  .pane-hero h1 { font-size: 1.6rem; }
  .pane .lede { font-size: .94rem; }
  .rig, .rig--short { grid-template-columns: 1fr; justify-items: center; }
  .rig-desk { width: 100%; }
  .rig-phone { width: min(270px, 72%); }
  .rig--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callouts, .feat-grid { grid-template-columns: 1fr; }
}