/* Quiet Bands · QB Spatial Hero · visual system
   Black. Soft white. One family, Hubot Sans: an engineered grotesk with flat sides and rectangular counters, whose width and
   weight axes are the hierarchy. QUIET black and expanded, near the glass. BANDS light and tracked, behind it, partly under it.
   The shadow QUIET casts onto BANDS lives at BANDS's depth, so it stays attached to the surface it falls on.
   Purple is a state: a word that has become legible. Nothing else is ever purple. No surfaces. */
:root{
  --black:#000; --white:#ECEAF0; --violet:#8B5CFF;
  --P:900px;
  --q:20.4vw;                         /* QUIET's size; the composition is built from it. QUIET is 4.34em wide: 20.4vw fills the 22px margins exactly (v1.4.5) */
  --q-left:22px; --q-top:34vh;         /* inside the margins on a phone; the object sits just above centre, the air is below it */
  --b:16.6vw; --b-left:calc(100vw - 22px - var(--b) * 3.96);   /* BANDS (3.96em wide) ends on the right margin */
  --b-top:calc(var(--q-top) + var(--q) * .63);   /* BANDS's cap line just inside QUIET's foot: a 17% interlock (~14px on a phone), so pitch never separates the words (v1.4.5) */
  --line-left:22px; --line-width:calc(100vw - 44px);
  --line-top:calc(var(--b-top) + var(--b) * .8 + 28px);  /* the rule sits 28px under BANDS's feet: a ground line with air, not a baseline the letters stand on (v1.4.5) */
  --final-left:22px; --final-width:calc(100vw - 44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{font-family:'Hubot Sans',system-ui,sans-serif;font-weight:500;font-stretch:100%;background:var(--black);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;touch-action:manipulation}

.track{position:relative;height:380vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--black)}
/* the window: one perspective, origin at the centre. Objects are placed in layout and then carried to their depth. */
.volume{position:absolute;inset:0;perspective:var(--P);perspective-origin:50% 50%;transform-style:preserve-3d;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.world{position:absolute;will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden}
.slats{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}   /* a flat container would discard the slats' depth */

/* the glass, in front of everything: an anti-reflective coating with a travelling specular. Larger than the window so its parallax never shows an edge. */
.coat{left:-25vw;top:-25vh;width:150vw;height:150vh;pointer-events:none}
.spec{--lx:50%;--ly:50%;--sp:.025;position:absolute;inset:0;opacity:var(--sp);
  background:linear-gradient(112deg,transparent calc(var(--lx) - 16%),rgba(236,234,240,.9) calc(var(--lx) - 1%),rgba(236,234,240,1) var(--lx),rgba(95,214,232,.5) calc(var(--lx) + 1.5%),transparent calc(var(--lx) + 12%));
  -webkit-mask-image:radial-gradient(90% 120% at var(--lx) var(--ly),#000 20%,transparent 75%);mask-image:radial-gradient(90% 120% at var(--lx) var(--ly),#000 20%,transparent 75%)}

/* the wordmark: one sculpture at two depths */
.quiet,.qshadow{left:var(--q-left);top:var(--q-top);font-size:var(--q);font-weight:900;font-stretch:125%;line-height:.8;letter-spacing:-.012em;text-transform:uppercase;white-space:nowrap}
.qshadow{color:#000;translate:.032em .05em}     /* the light is upper-left; the shadow falls down and right onto BANDS, and only exists where BANDS is */
.bands{left:var(--b-left);top:var(--b-top);font-size:var(--b);font-weight:300;font-stretch:110%;line-height:.8;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

/* the line: the reference depth. The six slats stand in it. */
.line{left:var(--line-left);top:var(--line-top);width:var(--line-width);translate:0 -50%;display:flex;align-items:center;gap:14px;font-size:15px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.line i{flex:1;height:1px;background:rgba(236,234,240,.55)}
/* the stratum: the hidden language stands on the line itself, packed so the nearer words occlude the deeper ones.
   Geometry test (v1.4): no words. Six uniform surfaces stand edge-on in the rule; open, each is a plain outlined plane, violet only with exposure. */
.slat{left:calc(var(--line-left) + var(--t) * var(--line-width));top:var(--line-top);translate:-50% -50%;
  width:48px;height:14px;box-sizing:border-box;--p:0;--a:.55;
  background:var(--black);                                       /* the volume's own black: a nearer slat occludes a deeper one, and shows nothing of itself */
  border:1px solid color-mix(in oklab,rgba(236,234,240,var(--a)),rgba(139,92,255,var(--a)) calc(var(--p) * 100%));opacity:0}
@supports not (color:color-mix(in oklab,#000,#fff)){ .slat{border-color:rgba(139,92,255,.7)} }

.where{left:22px;top:calc(var(--line-top) + 22px);font-size:12px;font-weight:400;letter-spacing:.02em}   /* the base of the object, under the line */

/* the resolution: far behind everything until the camera reaches it; laid out where the camera aims, so it arrives centred */
.final{left:var(--final-left);width:var(--final-width);top:var(--line-top);translate:0 -50%;display:flex;flex-direction:column;align-items:flex-start;gap:26px;pointer-events:none}
.final.on{pointer-events:auto}
.res{--near:0;font-size:clamp(30px,8.6vw,72px);font-weight:800;font-stretch:95%;line-height:.94;letter-spacing:-.015em;text-transform:uppercase}
.cta{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.03em;padding:14px 0;border-bottom:1px solid rgba(236,234,240,.4);transition:transform 140ms cubic-bezier(.23,1,.32,1),color .3s,border-color .3s}
.cta:active{transform:scale(.97);color:var(--violet);border-color:var(--violet)}
@media (hover:hover) and (pointer:fine){.cta:hover{border-color:var(--violet)}}
.volume:focus-visible{outline:1px solid var(--violet);outline-offset:-8px}

/* desktop: a different framing of the same environment. The sculpture runs off the left and the right; the line sits inside BANDS's span; the left half is left alone. */
@media (min-width:820px){
  :root{
    --q:21vw; --q-left:-4vw; --q-top:12vh;
    --b:17vw; --b-left:44vw;
    --line-left:44vw; --line-width:46vw; --line-top:calc(var(--b-top) + var(--b) * .8 + 30px);
    --final-left:44vw; --final-width:48vw;
  }
  .line{font-size:16px}
  .slat{width:64px;height:16px}
  .where{left:44vw;top:calc(var(--line-top) + 26px)}
  .res{font-size:4.2vw}
}

/* ---------- reduced motion / no JS: the same information as a still composition ---------- */
html.rm .track,html:not(.js):not(.rm) .track{height:auto}
html.rm .stage,html:not(.js):not(.rm) .stage{position:relative;height:auto;overflow:visible;padding:calc(24px + env(safe-area-inset-top)) 22px 64px}
html.rm .volume,html:not(.js):not(.rm) .volume{position:relative;inset:auto;perspective:none;transform-style:flat;display:flex;flex-direction:column;gap:22px;cursor:default}
html.rm .world,html:not(.js):not(.rm) .world{position:relative;inset:auto;translate:none;transform:none!important;opacity:1!important;visibility:visible!important}
html.rm .coat,html.rm .qshadow,html:not(.js):not(.rm) .coat,html:not(.js):not(.rm) .qshadow{display:none}
html.rm .quiet,html:not(.js):not(.rm) .quiet{font-size:23vw;margin-left:-1vw;order:0}
html.rm .bands,html:not(.js):not(.rm) .bands{font-size:19vw;align-self:flex-end;margin-top:-4vw;opacity:.7!important;order:1}
html.rm .line,html.rm .slats,html.rm .where,html.rm .final,html:not(.js):not(.rm) .line,html:not(.js):not(.rm) .slats,html:not(.js):not(.rm) .where,html:not(.js):not(.rm) .final{order:2}
html.rm .line,html:not(.js):not(.rm) .line{width:100%;margin-top:40px}
html.rm .slats,html:not(.js):not(.rm) .slats{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:10px 22px;pointer-events:auto}
html.rm .slat,html:not(.js):not(.rm) .slat{position:relative;left:auto;top:auto;translate:none;opacity:1;--p:1}
html.rm .where,html:not(.js):not(.rm) .where{margin-top:12px}
html.rm .final,html:not(.js):not(.rm) .final{left:auto;width:auto;top:auto;translate:none;margin-top:56px;pointer-events:auto}