/* aLiquidReality V4 */
:root {
  color-scheme: dark;
  --navy: #05061a;
  --cream: #ffe9cc;
  --cyan: #38d6ff;
  --hud: rgba(160, 240, 255, .75);
  --hud-dim: rgba(160, 240, 255, .28);
  --sense: var(--cyan);
  --mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy) radial-gradient(120% 90% at 50% 45%, #1b2a7a 0%, #2a0f4a 40%, #05061a 80%);
  color: var(--cream); font-family: var(--mono); overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button { font: inherit; color: inherit; }
a { color: inherit; }

#liquid { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.4) 100%);
  mix-blend-mode: multiply;
}

/* ---------- HUD ring around the eye (no sweep line) ---------- */
#hud { position: fixed; left: 0; top: 0; width: 300px; height: 300px; pointer-events: none; z-index: 2;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .8s; }
#hud.on { opacity: 1; }
#hud svg { width: 100%; height: 100%; overflow: visible; }
#hud .ring { fill: none; stroke: var(--hud-dim); stroke-width: .8; }
#hud .dash { stroke-dasharray: 2 6; stroke: var(--hud); }
#hud .arc { fill: none; stroke: var(--sense); stroke-width: 2.2; opacity: .8; transition: stroke .6s; }
#hud .arc.thin { stroke-width: .8; opacity: .6; }
#hud .tick { stroke: var(--hud-dim); stroke-width: .8; }
#hud .tick.major { stroke: var(--hud); }
#hud .cross line { stroke: var(--hud); stroke-width: .8; }
#hud text { fill: var(--hud); font: 7px var(--mono); letter-spacing: .08em; }
.spin-a { animation: spin 60s linear infinite; }
.spin-b { animation: spin 90s linear infinite reverse; }
.spin-c { animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#hud.draw .ring, #hud.draw .arc { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawin 1.8s ease forwards; }
@keyframes drawin { to { stroke-dashoffset: 0; } }

/* ---------- brand, mode switch, readouts ---------- */
#brand { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px; z-index: 30; display: flex; gap: 10px; align-items: center;
  opacity: 0; transform: translateY(-10px); transition: opacity .8s, transform .8s; }
#brand.on { opacity: 1; transform: none; }
#brand img { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(56,214,255,.5)); }
#brand h1 { margin: 0; font: 900 20px/1 var(--display); letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--cream), #ffc3df 40%, var(--cyan) 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: flow 8s ease-in-out infinite alternate; }
#brand p { margin: 4px 0 0; font-size: 11.5px; color: var(--hud); letter-spacing: .16em; text-transform: uppercase; }
@keyframes flow { to { background-position: 100% 0; } }

#modeSwitch { position: fixed; z-index: 30; top: max(18px, env(safe-area-inset-top)); right: 16px; display: flex; padding: 4px; border-radius: 999px;
  background: rgba(10,12,40,.45); border: 1px solid rgba(160,240,255,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .8s; }
#modeSwitch.on { opacity: 1; }
#modeSwitch button { border: 0; background: none; cursor: pointer; padding: 7px 15px; border-radius: 999px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--hud); }
#modeSwitch button[aria-pressed="true"] { background: var(--cream); color: #1a0b2e; }
#modeSwitch button:focus-visible { outline: 1px dashed var(--cream); outline-offset: 2px; }

.readout { position: fixed; z-index: 4; display: flex; flex-direction: column; gap: 3px; font-size: 12px; letter-spacing: .14em;
  color: var(--hud); opacity: 0; transition: opacity 1s; pointer-events: none; text-shadow: 0 0 8px rgba(0,200,255,.5); }
.readout.on { opacity: .8; }
.readout.tl { left: 18px; bottom: 18px; }

/* ---------- orbit nodes: V1's clean circles ---------- */
#orbit { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.node { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; --c: #9fb4d8; will-change: transform, opacity; transition: filter .4s;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.node.grabbed { cursor: grabbing; }
.node .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); position: relative;
  box-shadow: 0 0 8px var(--c); transition: transform .4s, box-shadow .4s, background .4s; }
.node .dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--c); opacity: .55; transition: border-color .4s; }
.node .lbl { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--c);
  padding: 3px 7px; border-radius: 3px; background: rgba(4,6,24,.42); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  text-shadow: 0 1px 3px #000; transition: color .4s, background .4s, border-color .4s; }
.node[data-lvl] .lbl { color: #fff; background: rgba(4,6,24,.72); border-color: var(--c); text-shadow: 0 1px 3px #000, 0 0 2px #000;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.node[data-lvl="1"] .dot { transform: scale(1.6); box-shadow: 0 0 22px var(--c); }
.node[data-lvl="2"] .dot { transform: scale(1.3); box-shadow: 0 0 14px var(--c); }
.node.dim { filter: brightness(.45) saturate(.4); }
.node:hover, .node:focus-visible { filter: none; outline: none; }
.node:hover .dot, .node:focus-visible .dot { transform: scale(1.8); box-shadow: 0 0 24px var(--c); }
.node:focus-visible .lbl { outline: 1px dashed var(--cream); outline-offset: 3px; }

#caption { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 5; text-align: center; pointer-events: none; }
#caption .name { font: 900 clamp(26px, 4.6vw, 44px)/1 var(--display); color: var(--cream); text-shadow: 0 0 24px var(--sense); }
#caption > div { animation: liquidIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes liquidIn { from { opacity: 0; filter: blur(10px); transform: translateY(10px) scaleY(1.4); } }

/* ---------- sense dock (bottom navigation) ---------- */
#senses { position: fixed; z-index: 8; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 30px);
  display: flex; gap: 8px; padding: 8px; border-radius: 999px; opacity: 0; transition: opacity .8s, transform .8s cubic-bezier(.2,.9,.2,1.2);
  background: rgba(10,12,40,.38); border: 1px solid rgba(160,240,255,.22); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
#senses.on { opacity: 1; transform: translate(-50%, 0); }
.sense { --c: var(--cyan); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; border: 0;
  background: transparent; cursor: pointer; transition: background .4s, color .4s, box-shadow .4s; color: var(--cream); }
.sense svg, .ls-sense svg, .social svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sense svg { color: var(--c); }
.sense b { font: 700 15px/1 var(--display); letter-spacing: .04em; }
.sense:hover { background: rgba(255,255,255,.07); }
.sense.on { background: color-mix(in srgb, var(--c) 26%, transparent); color: #fff; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 0 1px var(--c); }
.sense.on svg { filter: drop-shadow(0 0 6px var(--c)); }
.sense:focus-visible { outline: 1px dashed var(--cream); outline-offset: 2px; }

#hint { position: fixed; z-index: 7; left: 0; right: 0; text-align: center; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 72px);
  margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hud); opacity: 0; transition: opacity 1s; pointer-events: none; padding: 0 16px;
  text-shadow: 0 1px 3px #000; }
#hint.on { opacity: .85; }

body.away #orbit, body.away #senses, body.away #hint, body.away .readout, body.away #hud, body.away #caption, body.away #overlay {
  opacity: 0 !important; pointer-events: none !important; transition: opacity .5s; }
/* switching views: the circles stay in sight and ride the zoom into or out of the eye */
body.away.zooming #orbit { opacity: 1 !important; }
body.zooming .node { pointer-events: none; }
body.panel-open #orbit, body.panel-open #senses, body.panel-open #hint, body.panel-open #caption { pointer-events: none; }

/* ---------- windows: floating panel + list column 3 share this ---------- */
.win { position: relative; overflow: hidden; }
.win-world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.win-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px 26px 40px; scrollbar-width: thin; scrollbar-color: var(--sense) transparent; }

#panel { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(3,1,10,.4);
  padding: max(78px, calc(env(safe-area-inset-top) + 70px)) 16px max(24px, env(safe-area-inset-bottom)); }
#panel[hidden] { display: none; }
.pw-glass { width: min(1120px, 100%); height: min(820px, 100%); border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--sense) 45%, transparent);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--sense) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
  background: #07081c; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

.w-head { margin: 4px 0 26px; max-width: 760px; position: relative; }
.w-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.return { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; margin-bottom: 18px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,233,204,.45); letter-spacing: .2em; text-transform: uppercase; font-size: 11px;
  background: rgba(5,6,26,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.return:hover { background: rgba(255,233,204,.15); }
.return:focus-visible { outline: 1px dashed var(--cream); outline-offset: 2px; }
.w-head .kicker { margin: 0 0 8px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--hud); }
.w-head h2 { margin: 0; font: 900 clamp(32px, 6vw, 72px)/.95 var(--display); letter-spacing: -.02em; color: var(--cream);
  text-shadow: 0 0 36px var(--sense), 0 2px 0 rgba(0,0,0,.4); text-wrap: balance; }
.w-head h2 .word { display: inline-block; white-space: nowrap; }
.w-head h2 .word span { display: inline-block; animation: letterDrip 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--k) * 35ms + 150ms); }
@keyframes letterDrip { from { opacity: 0; transform: translateY(-0.6em) scaleY(1.8); filter: blur(6px); } }
.w-head .blurb { font-size: 15px; line-height: 1.5; margin: 14px 0 0; max-width: 52ch; text-shadow: 0 1px 8px rgba(0,0,0,.95); }
.w-head.center .blurb { margin-left: auto; margin-right: auto; font-size: 17px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; perspective: 1200px; }
.card { display: block; text-decoration: none; color: var(--cream); position: relative; outline: none; }
.card .frame { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2a1050, #0c3a6b);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,233,204,.18); transition: transform .35s cubic-bezier(.2,.9,.2,1.3), box-shadow .35s; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* still frame on top; the moving version shows through on hover once it has loaded */
.frame .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; transition: opacity .2s; }
.frame.play.ready .still { opacity: 0; }
.w-film .frame .still { left: 16px; width: calc(100% - 32px); }
.frame.noimg::after, .shirt-cloth.noimg::after { content: attr(data-file); position: absolute; inset: 0; display: grid; place-items: center; padding: 10px;
  font-size: 11px; text-align: center; color: var(--cream); }
.card .meta { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 10px 4px 0; }
.card .title { font: 700 13.5px/1.25 var(--display); text-shadow: 0 1px 8px rgba(0,0,0,.95); }
.card .src { font-size: 10px; letter-spacing: .16em; color: var(--hud); white-space: nowrap; }
.card:hover .frame, .card:focus-visible .frame { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 2px var(--sense), 0 0 30px var(--sense); }
.card.soon .frame { display: grid; place-items: center; background: rgba(5,6,26,.55); border: 1px dashed rgba(255,233,204,.5); box-shadow: none;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hud); text-align: center; padding: 10px; }

/* film-world cards get sprocket holes */
.w-film .card .frame { padding: 0 16px; background: #120c08; border-radius: 4px; }
.w-film .card .frame::before, .w-film .card .frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16px; z-index: 2;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, #e9dcc4 6px 12px, transparent 12px 18px) center / 8px 100% no-repeat; }
.w-film .card .frame::before { left: 0; } .w-film .card .frame::after { right: 0; }
.w-film .card img { border-radius: 2px; }

/* prints hang from a pin */
.ent-hang .card .frame { overflow: visible; }
.ent-hang .card .frame img, .ent-hang .card .frame .still { border-radius: 12px; }
.ent-hang .card:not(.soon) .frame::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #fff, #ff5f9a 60%, #6a1236); box-shadow: 0 2px 4px rgba(0,0,0,.6); }

/* ---------- the clothes rack (T-Shirts) ---------- */
.rack { position: relative; padding-top: 6px; }
.rod { height: 10px; border-radius: 5px; margin: 0 -10px; position: relative; z-index: 1;
  background: linear-gradient(to bottom, #f6f2ea, #9b9488 45%, #4e4a44 55%, #cfc8bb); box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.rack-track { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; margin-top: -8px; padding: 0 40px 30px 30px;
  perspective: 1100px; scrollbar-width: thin; scrollbar-color: var(--sense) transparent; min-height: 360px; }
.shirt { --rot: -62deg; flex: 0 0 auto; width: 190px; margin-right: -96px; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--cream);
  transform-origin: 50% 0; transform: rotateY(var(--rot)); transition: transform .55s cubic-bezier(.2,.9,.2,1.1), margin .55s cubic-bezier(.2,.9,.2,1.1), filter .55s;
  filter: brightness(.72); position: relative; outline: none; }
.shirt:nth-child(even) { --rot: -58deg; }
/* the hanger sits inside the shirt: its arms run under the shoulders, so only the hook and the neck show */
.shirt .hanger { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0;
  fill: none; stroke: #d9d3c7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.shirt .hanger path { vector-effect: non-scaling-stroke; }
.shirt-body { position: relative; width: 190px; height: 205px; margin-top: 28px; filter: drop-shadow(0 16px 18px rgba(0,0,0,.55)); }
.shirt-cloth { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: linear-gradient(160deg, #2c2b31, #0b0b0f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108'%3E%3Cpath d='M33 3 L19 8 L2 25 L14 39 L22 33 L22 105 L78 105 L78 33 L86 39 L98 25 L81 8 L67 3 C63 11 37 11 33 3 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108'%3E%3Cpath d='M33 3 L19 8 L2 25 L14 39 L22 33 L22 105 L78 105 L78 33 L86 39 L98 25 L81 8 L67 3 C63 11 37 11 33 3 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.shirt-cloth img { position: absolute; left: 24%; top: 22%; width: 52%; height: 46%; object-fit: contain; object-position: center top; }
.shirt-cloth::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35)), repeating-linear-gradient(170deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px); }
.tag-label { margin-top: 10px; font: 700 11.5px/1.25 var(--display); text-align: center; max-width: 180px; opacity: 0; transform: translateY(-6px); transition: .4s;
  text-shadow: 0 1px 8px rgba(0,0,0,.95); }
.shirt.aim { --rot: 0deg; margin-left: 70px; margin-right: -30px; filter: none; z-index: 5; }
.shirt.aim .tag-label { opacity: 1; transform: none; }
.shirt:focus-visible .shirt-body { outline: 1px dashed var(--cream); outline-offset: 6px; }
.rack-hint { margin: 4px 0 0; font-size: 11px; letter-spacing: .14em; color: var(--hud); text-transform: uppercase; }
.shirt { opacity: 0; }
.shirt.in { opacity: 1; animation: rackIn 1.1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 110ms + 200ms); }
@keyframes rackIn { 0% { opacity: 0; transform: translateX(120vw) rotateY(var(--rot)) rotateZ(-8deg); } 70% { opacity: 1; transform: translateX(-6px) rotateY(var(--rot)) rotateZ(3deg); }
  85% { transform: rotateY(var(--rot)) rotateZ(-1.5deg); } 100% { transform: rotateY(var(--rot)); } }

/* ---------- feature layout (VJx Mixer) ---------- */
.feature { max-width: 680px; margin: 0 auto; text-align: center; }
.w-head.center .blurb { display: inline-block; padding: 10px 20px; border-radius: 14px; background: rgba(0,0,0,.62); color: #f4efe6;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.feature-text { max-width: 62ch; margin: 0 auto; padding: 20px 26px 10px; border-radius: 18px; background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.feature p { font-size: 15.5px; line-height: 1.65; margin: 0 auto 12px; color: #f4efe6; }
.feature-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; margin-top: 28px; }
.vjx-card { width: min(320px, 100%); text-align: left; }
.vjx-thumb { display: block; }
.cta-patreon { display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px 16px 20px; border-radius: 16px; background: #ff424d; color: #fff;
  box-shadow: 0 14px 34px rgba(255,66,77,.35); transition: transform .3s, box-shadow .3s; text-align: left; }
.cta-patreon svg { width: 34px; height: 34px; color: #fff; }
.cta-patreon b { display: block; font: 700 15px/1.2 var(--display); }
.cta-patreon small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-top: 3px; }
.cta-patreon:hover, .cta-patreon:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 44px rgba(255,66,77,.5); outline: none; }

/* ---------- entrance animations, one per sub category ---------- */
.card { opacity: 0; }
.card.in { opacity: 1; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-delay: calc(var(--i) * 90ms + 250ms); }
.ent-bloom .card.in    { animation-name: e-bloom; animation-duration: 1.2s; }
.ent-beatdrop .card.in { animation-name: e-beatdrop; animation-delay: calc(var(--i) * 250ms + 200ms); animation-timing-function: linear; }
.ent-reel .card.in     { animation-name: e-reel; animation-duration: .9s; animation-delay: calc(var(--i) * 70ms + 200ms); }
.ent-unfold .card.in   { animation-name: e-unfold; transform-origin: left center; animation-duration: 1.1s; }
.ent-waveform .card.in { animation-name: e-waveform; animation-delay: calc((1 + sin(var(--i) * 1rad)) * 300ms + 200ms); }
.ent-develop .card.in  { animation-name: e-develop; animation-duration: 2.2s; animation-delay: calc(var(--i) * 300ms + 200ms); }
.ent-static .card.in   { animation-name: e-static; animation-duration: .8s; animation-timing-function: steps(1, end); }
.ent-static .card.in .frame { animation: e-crt .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: inherit; }
.ent-flipbook .card.in { animation-name: e-flip; animation-timing-function: steps(7, end); animation-duration: .9s; transform-origin: top center; }
.ent-slice .card.in    { animation-name: e-slice; animation-duration: .9s; }
.ent-draw .card.in     { animation-name: e-draw; animation-duration: 1.3s; animation-timing-function: cubic-bezier(.6,0,.2,1); }
.ent-orbit .card.in    { animation-name: e-orbit; animation-duration: 1.6s; }
.ent-drip .card.in     { animation-name: e-drip; animation-duration: 1.6s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
.ent-pop .card.in      { animation-name: e-pop; animation-duration: .9s; animation-delay: calc(var(--i) * 160ms + 250ms); animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
.ent-hang .card.in     { animation-name: e-hang; animation-duration: 2s; transform-origin: 50% 0; animation-delay: calc(var(--i) * 220ms + 250ms); animation-timing-function: ease-out; }

@keyframes e-bloom { 0% { opacity: 0; transform: scale(.15); filter: blur(24px) hue-rotate(180deg) saturate(3); }
  60% { opacity: 1; filter: blur(2px) hue-rotate(40deg) saturate(1.6); } }
@keyframes e-beatdrop { 0% { opacity: 0; transform: translateY(-90vh); } 40% { opacity: 1; transform: translateY(0) scaleY(.8) scaleX(1.08); }
  55% { transform: translateY(-28px); } 70% { transform: translateY(0) scaleY(.92); } 82% { transform: translateY(-8px); } 100% { transform: none; } }
@keyframes e-reel { 0% { opacity: 0; transform: translateX(-120vw) skewX(-25deg); filter: blur(10px); } 70% { opacity: 1; transform: translateX(16px) skewX(4deg); filter: blur(0); } }
@keyframes e-unfold { 0% { opacity: 0; transform: rotateY(-95deg) rotateX(20deg); } 60% { opacity: 1; transform: rotateY(12deg); } }
@keyframes e-waveform { 0% { opacity: 0; transform: scaleY(.02) scaleX(1.2); } 45% { opacity: 1; transform: scaleY(1.3) scaleX(.95); } 70% { transform: scaleY(.88); } }
@keyframes e-develop { 0% { opacity: 0; transform: translateY(40px) rotate(-7deg); filter: brightness(3) sepia(1) contrast(.3) blur(4px); }
  30% { opacity: 1; transform: rotate(3deg); } 100% { filter: none; } }
@keyframes e-static { 0% { opacity: 0; } 10% { opacity: 1; } 15% { opacity: .2; } 25% { opacity: 1; } 32% { opacity: .4; } 40% { opacity: 1; } }
@keyframes e-crt { 0% { transform: scale(1, .006); filter: brightness(6) contrast(3); } 40% { transform: scale(1, .006); } 70% { transform: scale(1.02, 1.05); filter: brightness(1.6) saturate(2); } }
@keyframes e-flip { 0% { opacity: 0; transform: rotateX(-110deg) translateY(-30px); } 30% { opacity: 1; } }
@keyframes e-slice { 0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(-30px); }
  20% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translateX(24px); filter: hue-rotate(90deg) saturate(4); }
  40% { clip-path: inset(50% 0 20% 0); transform: translateX(-16px); }
  60% { clip-path: inset(0 0 40% 0); transform: translateX(8px); filter: hue-rotate(-60deg); }
  80% { clip-path: inset(0 0 0 0); transform: translateX(-3px); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes e-draw { 0% { opacity: 1; clip-path: inset(0 100% 98% 0); } 40% { clip-path: inset(0 0 98% 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes e-orbit { 0% { opacity: 0; transform: rotate(-300deg) translateX(45vw) rotate(300deg) scale(.2); } 30% { opacity: 1; } 100% { transform: rotate(0) translateX(0) rotate(0) scale(1); } }
@keyframes e-drip {
  0% { opacity: 1; clip-path: polygon(0 0,12% 0,25% 0,37% 0,50% 0,62% 0,75% 0,87% 0,100% 0,100% 0,0 0); transform: translateY(-20px); }
  50% { clip-path: polygon(0 0,100% 0,100% 30%,87% 55%,75% 20%,62% 80%,50% 35%,37% 60%,25% 15%,12% 70%,0 40%); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,87% 100%,75% 100%,62% 100%,50% 100%,37% 100%,25% 100%,12% 100%,0 100%); transform: none; } }
@keyframes e-pop { 0% { opacity: 0; transform: translateY(60px) scale(.3) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
@keyframes e-hang { 0% { opacity: 0; transform: translateY(-60vh) rotate(0); } 35% { opacity: 1; transform: translateY(0) rotate(9deg); }
  50% { transform: rotate(-6deg); } 65% { transform: rotate(3.5deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: none; } }

/* ---------- LIST MODE ---------- */
#list { position: fixed; z-index: 20; left: 0; right: 0; top: 0; bottom: 0;
  padding: max(84px, calc(env(safe-area-inset-top) + 76px)) 16px max(18px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(180px, 230px) minmax(200px, 270px) minmax(0, 1fr); gap: 18px;
  opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s .7s; }
body.mode-list #list { opacity: 1; visibility: visible; transform: none; transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
body.mode-list #brand, body.mode-list #modeSwitch { z-index: 30; }
.lcol { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lc-head { margin: 0 0 12px; font: 400 10.5px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--hud); padding-left: 4px; }
#listSenses { display: flex; flex-direction: column; gap: 10px; }
.ls-sense { --c: var(--cyan); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid rgba(160,240,255,.16); background: rgba(10,12,40,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: .35s; }
.ls-sense svg { color: var(--c); flex: 0 0 auto; }
.ls-sense b { display: block; font: 700 15px/1 var(--display); }
.ls-sense:hover { border-color: var(--c); }
.ls-sense.on { background: color-mix(in srgb, var(--c) 22%, rgba(10,12,40,.6)); border-color: var(--c); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 40%, transparent); }
.ls-sense:focus-visible, .ls-sub:focus-visible { outline: 1px dashed var(--cream); outline-offset: 2px; }

#listSubs { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding: 2px 4px 2px 2px; scrollbar-width: thin; }
.ls-sub { --c: #9fb4d8; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; border: 1px solid transparent; background: none;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; max-height: 48px; overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), margin .5s, padding .5s, opacity .4s, transform .5s cubic-bezier(.4,0,.2,1), background .3s, border-color .3s; }
.ls-sub .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--c); box-shadow: 0 0 10px var(--c); position: relative; }
.ls-sub .dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--c); opacity: .5; }
.ls-sub .nm { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-sub .rk { font-size: 9px; letter-spacing: .14em; color: var(--c); }
.ls-sub:hover { background: rgba(255,255,255,.05); border-color: rgba(160,240,255,.2); }
.ls-sub.on { background: color-mix(in srgb, var(--c) 20%, rgba(10,12,40,.6)); border-color: var(--c); }
.ls-sub.away { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; opacity: 0; transform: translateX(-50px) scaleY(.4); pointer-events: none; border-width: 0; }

.lc-links .win { flex: 1; min-height: 0; border-radius: 22px; border: 1px solid rgba(160,240,255,.22);
  background: rgba(7,8,28,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.lc-links .win.has-cat { border-color: color-mix(in srgb, var(--sense) 50%, transparent); }
.home-card { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 0; }
.home-card img { width: min(220px, 50%); height: auto; filter: drop-shadow(0 0 30px rgba(56,214,255,.35)); animation: float 7s ease-in-out infinite; }
.home-card h2 { margin: 18px 0 6px; font: 900 clamp(24px, 3.4vw, 40px)/1 var(--display); }
.home-card .sub { margin: 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--hud); }
.social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin: 26px 0 0; }
.social a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid rgba(255,233,204,.35); background: rgba(5,6,26,.5); transition: .3s; }
.social a:hover, .social a:focus-visible { border-color: var(--cyan); box-shadow: 0 0 20px rgba(56,214,255,.35); outline: none; }
.social svg { width: 20px; height: 20px; }
.home-hint { margin-top: 26px; font-size: 11px; letter-spacing: .14em; color: var(--hud); }
#list .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }

/* ---------- intro ---------- */
#intro { position: fixed; inset: 0; z-index: 80; background: #000; transition: opacity 1s; }
#intro canvas { width: 100%; height: 100%; display: block; }
#intro.gone { opacity: 0; pointer-events: none; }
#skip { position: absolute; right: 18px; bottom: 18px; background: none; border: 1px solid var(--hud-dim); color: var(--hud);
  border-radius: 999px; padding: 6px 14px; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; cursor: pointer; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--display); }
body.nogl { background: radial-gradient(60% 40% at 50% 45%, #fff 0 8%, #38d6ff 9% 18%, #2a0f4a 19% 22%, transparent 23%),
  conic-gradient(from 0deg at 50% 45%, #1b2a7a, #ff5f9a, #38d6ff, #2a0f4a, #1b2a7a); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  #list { display: block; overflow-y: auto; }
  .lcol { display: block; margin-bottom: 18px; }
  #listSenses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ls-sense { flex-direction: column; gap: 6px; padding: 10px 4px; text-align: center; }
  .ls-sense b { font-size: 11px; }
  #list { top: calc(env(safe-area-inset-top) + 66px); padding-top: 8px; }
  #listSubs { overflow: visible; }
  .ls-sub { padding: 7px 10px; margin-bottom: 4px; background: rgba(10,12,40,.45); border-color: rgba(160,240,255,.14); }
  .ls-sub .nm { font-size: 11px; }
  .lc-links .win { height: 78vh; }
}
@media (max-width: 640px) {
  #brand h1 { font-size: 14px; } #brand img { width: 34px; height: 34px; }
  #brand p { font-size: 8.5px; letter-spacing: .12em; }
  #modeSwitch button { padding: 6px 10px; font-size: 10px; letter-spacing: .14em; }
  .readout, #caption { display: none; }
  #senses { gap: 2px; padding: 6px; width: calc(100% - 24px); justify-content: space-between; }
  .sense { flex-direction: column; gap: 4px; padding: 8px 6px; flex: 1; }
  .sense b { font-size: 11.5px; }
  .sense svg { width: 24px; height: 24px; }
  #hint { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 82px); font-size: 11px; }
  .node .lbl { font-size: 12.5px; letter-spacing: .07em; padding: 2px 6px; }
  #panel { padding: max(64px, calc(env(safe-area-inset-top) + 58px)) 10px 12px; }
  .pw-glass { border-radius: 20px; }
  .win-scroll { padding: 16px 14px 30px; }
  .grid, #list .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .card .title { font-size: 11px; } .card .src { display: none; }
  .w-film .card .frame { padding: 0 11px; }
  .w-film .frame .still { left: 11px; width: calc(100% - 22px); }
  .w-film .card .frame::before, .w-film .card .frame::after { width: 11px; background-size: 6px 100%; }
  .shirt { width: 150px; margin-right: -78px; } .shirt-body { width: 150px; height: 162px; margin-top: 22px; }
  .shirt.aim { margin-left: 56px; margin-right: -20px; }
  .rack-track { min-height: 290px; }
}

@media (max-height: 520px) { .readout { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .spin-a, .spin-b, .spin-c, .pw-glass, .home-card img { animation: none; }
  .card.in, .shirt.in { animation: none !important; opacity: 1; }
  .card.in .frame { animation: none !important; }
}
/* ==========================================================================
   FLOW mode: one long scroll of square tiles, each piece playing on its own
   little 3D screen (inspired by buttermax.net). The theme is picked in
   content.js (FLOW_TEXT.theme): "brand" (navy + sense colors), "butter", "gold".
   ========================================================================== */
#flow { --bg: #05061a; --ink: #ffe9cc; --line: rgba(160,240,255,.13); --muted: rgba(255,233,204,.6); --on-ink: #05061a;
  --tile: #05061a; --screen: #000; --shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(160,240,255,.14);
  --hero-bg: radial-gradient(110% 85% at 50% 62%, #1b2a7a 0%, #2a0f4a 42%, #05061a 82%);
  --foot-bg: radial-gradient(120% 110% at 50% 115%, #3a1466 0%, #121546 45%, #05061a 82%); --foot-ink: #ffe9cc; --foot-fill: #05061a;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(.215,.61,.355,1);
  --gm: clamp(12px, 9vw - 30px, 120px); --pad: 3.5vw;
  position: fixed; inset: 0; z-index: 20; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(transparent 55%, var(--bg)) 0 0 / 100% 100vh no-repeat local, var(--hero-bg) 0 0 / 100% 100vh no-repeat local, var(--bg); color: var(--ink); font-family: var(--sans); font-stretch: 112%; font-weight: 600;
  opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s .7s; scrollbar-width: thin; scrollbar-color: rgba(160,240,255,.35) transparent; }
#flow[data-theme="butter"] { --bg: #ffd600; --ink: #101010; --line: rgba(16,16,16,.13); --muted: rgba(16,16,16,.62); --on-ink: #101010;
  --tile: #ffd600; --screen: #101010; --shadow: 0 24px 40px rgba(0,0,0,.28); --hero-bg: linear-gradient(#ffd600, #ffd600); --foot-bg: #101010; --foot-ink: #ffd600; --foot-fill: #101010;
  scrollbar-color: #101010 transparent; }
#flow[data-theme="gold"] { --bg: #070a24; --ink: #f5c542; --line: rgba(245,197,66,.22); --muted: rgba(245,197,66,.66); --on-ink: #070a24;
  --tile: #070a24; --screen: #000; --hero-bg: radial-gradient(110% 85% at 50% 62%, #2b2410 0%, #070a24 75%); --foot-bg: #f5c542; --foot-ink: #070a24; --foot-fill: #f5c542;
  scrollbar-color: #f5c542 transparent; }
/* the about section is a window onto Orbit's liquid, which stays behind the page as it scrolls past
   (flow.js turns this on and sets where the window is) */
#flow.fl-window { background: linear-gradient(transparent 55%, var(--bg)) 0 0 / 100% 100vh no-repeat local, var(--hero-bg) 0 0 / 100% 100vh no-repeat local,
  linear-gradient(var(--bg) var(--hole-a, 0px), transparent var(--hole-a, 0px), transparent var(--hole-b, 0px), var(--bg) var(--hole-b, 0px)) 0 0 / 100% 100% no-repeat local; }
body.mode-flow #flow { opacity: 1; visibility: visible; transition: opacity .7s; }
body.mode-flow .scanlines { opacity: 0; }
.scanlines { transition: opacity .6s; }
.fl-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.fl-track { position: relative; z-index: 1; }

/* the header: the name steps aside while reading down and comes back, on a pill, on the way up */
body.mode-flow #brand { transition: opacity .8s, transform .5s cubic-bezier(.215,.61,.355,1); }
body.fl-hide #brand { transform: translateY(calc(-100% - 30px)); }
#brand::before { content: ""; position: absolute; z-index: -1; inset: -6px -16px -6px -6px; border-radius: 999px; pointer-events: none;
  background: rgba(5,6,26,.74); border: 1px solid rgba(160,240,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .35s; }
body.mode-flow.fl-past #brand::before { opacity: 1; }
/* butter theme: dark type on yellow */
body.fl-light #brand h1 { background: none; color: #101010; -webkit-text-fill-color: #101010; }
body.fl-light #brand p { color: #101010; }
body.fl-light #brand::before { background: rgba(255,214,0,.9); border-color: rgba(16,16,16,.16); }
body.fl-light #modeSwitch { background: #101010; border-color: #101010; }
body.fl-light #modeSwitch button { color: #ffd600; }
body.fl-light #modeSwitch button[aria-pressed="true"] { background: #ffd600; color: #101010; }

/* ---- hero: giant name, a small tagline under it, big objects taking turns in the middle ---- */
.fl-hero { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; }
.fl-mast { position: absolute; left: 0; right: 0; top: clamp(70px, 10.5vh, 116px); padding: 0 var(--pad); pointer-events: none; }
.fl-word { white-space: nowrap; font: 900 12vw/.8 var(--display); letter-spacing: -.045em; color: var(--ink); }
.fl-word span { display: inline-block; padding: .04em 0 .12em; }
#flow[data-theme="brand"] .fl-word span { background: linear-gradient(90deg, var(--cream), #ffc3df 40%, var(--cyan) 80%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 8s ease-in-out infinite alternate; }
.fl-tag { margin: .9em 0 0; max-width: 34em; font-size: clamp(11px, 1vw, 15px); line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.fl-stage { position: absolute; left: 50%; top: 58%; width: min(46vw, 62vh, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.fl-hit { position: absolute; inset: 4%; display: block; border-radius: 28px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.fl-stage-img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: cover; border-radius: 16px; display: none; box-shadow: var(--shadow);
  transition: opacity .36s var(--ease), transform .66s cubic-bezier(.34,1.56,.64,1); }
.fl-stage-img.is-wide { left: 3%; top: 23%; width: 94%; height: 53%; }
.fl-stage-img.is-tall { left: 27%; top: 5%; width: 46%; height: 90%; border-radius: 26px; }
.fl-stage-img.is-shirt { object-fit: contain; border-radius: 0; box-shadow: none; }
.fl-stage-img.swap { opacity: 0; transform: scale(.88) translateY(3%); transition: opacity .15s, transform .19s; }
#flow:not(.has-gl) .fl-stage-img { display: block; }
/* what's on stage: its name (a link, like the object itself) and a bar for each object that fills while it stays */
.fl-now { position: absolute; right: var(--pad); bottom: 22px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: min(42vw, 400px); }
.fl-now[hidden] { display: none; }
.fl-ticks { display: flex; gap: 6px; }
.fl-ticks button { position: relative; width: 30px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.fl-ticks button::before, .fl-ticks i { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; }
.fl-ticks button::before { background: color-mix(in srgb, var(--ink) 24%, transparent); transition: background .3s; }
.fl-ticks i { background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.fl-ticks button:hover::before { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.fl-ticks button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.fl-cap { --c: var(--cyan); display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 14px 10px 16px; border: 2px solid var(--ink); border-radius: 999px;
  color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s, color .3s; outline: none; overflow: hidden; }
.fl-cap-k { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.fl-cap-k::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.fl-cap-t { min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-cap svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.fl-cap:hover, .fl-cap:focus-visible, .fl-now.hot .fl-cap { background: var(--ink); color: var(--bg); }
.fl-cap:hover svg, .fl-cap:focus-visible svg, .fl-now.hot .fl-cap svg { transform: translate(2px, -2px); }
.fl-cap.swap .fl-cap-k, .fl-cap.swap .fl-cap-t { animation: flCap .35s var(--ease) backwards; }
.fl-cap.swap .fl-cap-t { animation-delay: .04s; }
@keyframes flCap { from { opacity: 0; transform: translateY(70%); } }
.fl-meta { position: absolute; left: var(--pad); bottom: 26px; margin: 0; display: flex; gap: 14px; font: 400 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fl-down { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px;
  border: 2px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); cursor: pointer; font: 600 12px var(--sans); letter-spacing: .02em; text-transform: uppercase;
  transition: background .3s, color .3s; }
.fl-down svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fl-down:hover, .fl-down:focus-visible { background: var(--ink); color: var(--bg); outline: none; }

/* ---- about: the liquid shows through behind it ---- */
.fl-about { position: relative; padding: clamp(90px, 18vh, 220px) var(--gm); }
#flow.fl-window .fl-statement, #flow.fl-window .fl-kicker { text-shadow: 0 2px 26px rgba(5,6,26,.55); }
.fl-kicker { position: absolute; left: var(--gm); margin: .75em 0 0; font-size: clamp(11px, 1vw, 15px); letter-spacing: -.01em; text-transform: uppercase; color: var(--muted); }
.fl-statement { margin: 0; text-indent: 26%; font-size: clamp(26px, 3.9vw, 66px); line-height: .92; letter-spacing: -.05em; text-transform: uppercase; }

/* ---- the sections: one square tile each, opening in place to show its pieces ---- */
.fl-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-flow: row dense; margin: 0 var(--gm) clamp(80px, 14vh, 160px);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fl-cell { position: relative; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); container-type: inline-size; }
.fl-head, .fl-item { color: var(--ink); background: var(--tile); outline: none; transition: color .35s var(--ease); }
.fl-head { --tp: clamp(12px, 6cqw, 30px); aspect-ratio: 1; cursor: pointer; scroll-margin-top: 90px; -webkit-tap-highlight-color: transparent; }
.fl-item { display: block; aspect-ratio: 1; text-decoration: none; }
.fl-head::before, .fl-item::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--c); opacity: 0; transition: opacity .5s var(--ease); }
#flow:not([data-theme="butter"]) .fl-head::after, #flow:not([data-theme="butter"]) .fl-item::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 52% at 50% 46%, color-mix(in srgb, var(--c) 16%, transparent), transparent 72%); transition: opacity .5s; }
.fl-head.on, .fl-head.open, .fl-item.on { color: var(--on-ink); }
.fl-head.on::before, .fl-head.open::before, .fl-item.on::before { opacity: 1; }
.fl-head.on::after, .fl-head.open::after, .fl-item.on::after { opacity: 0; }
.fl-item:focus-visible { box-shadow: inset 0 0 0 3px var(--ink); }
.fl-head:has(.fl-btn:focus-visible) { box-shadow: inset 0 0 0 3px currentColor; }
.fl-num { font: 400 12px var(--mono); letter-spacing: .2em; display: flex; align-items: center; gap: 10px; }
.fl-num::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
#flow[data-theme="butter"] .fl-num::after { background: var(--c); box-shadow: 0 0 12px var(--c); }
.fl-count { font: 400 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.fl-head .fl-num, .fl-head .fl-count { position: absolute; z-index: 2; top: var(--tp); }
.fl-head .fl-num { left: var(--tp); }
.fl-head .fl-num::after { background: var(--c); box-shadow: 0 0 10px var(--c); transition: background .35s; }
.fl-head.on .fl-num::after, .fl-head.open .fl-num::after { background: currentColor; box-shadow: none; }
.fl-head .fl-count { right: var(--tp); }
.fl-name { position: absolute; z-index: 2; left: var(--tp); right: calc(var(--tp) + clamp(34px, 11cqw, 50px) + 10px); bottom: var(--tp); margin: 0;
  font-size: clamp(20px, 9cqw, 96px); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; overflow-wrap: break-word; }
.fl-head.wide { --tp: clamp(12px, 3cqw, 30px); }
.fl-head.wide .fl-name { right: 45%; }
.fl-btn { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; line-height: inherit; cursor: pointer; outline: none; }
.fl-plus { position: absolute; z-index: 2; right: var(--tp); bottom: var(--tp); width: clamp(34px, 11cqw, 50px); aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%;
  transition: transform .5s var(--ease); }
.fl-plus::before, .fl-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38%; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.fl-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.fl-head.open .fl-plus { transform: rotate(135deg); }
/* a section that opens in a window shows an arrow instead of the plus */
.fl-go::before, .fl-go::after { display: none; }
.fl-go svg { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; transform: translate(-50%, -50%); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease); }
.fl-head.on .fl-go svg { transform: translate(-38%, -62%); }
.fl-head .fl-mq { top: 47%; }
.fl-head.wide .fl-mq { top: 50%; }

/* a section that drops open (Visuals): its pieces slide open under the row of its tile, a little smaller than the tiles above */
.fl-panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease) .12s; }
.fl-panel.open { grid-template-rows: 1fr; transition-delay: 0s; }
.fl-panel-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .7s; }
.fl-panel.open .fl-panel-in { visibility: visible; transition-delay: 0s; }
.fl-sub { display: grid; grid-template-columns: repeat(var(--icols, 3), minmax(0, 1fr)); }
/* the pieces arrive one after another */
.fl-panel.open .fl-item .fl-label { animation: flRise .6s var(--ease) backwards; animation-delay: calc(var(--i) * 75ms + 160ms); }
#flow:not(.has-gl) .fl-panel.open .fl-screen { animation: flPop .6s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--i) * 75ms + 120ms); }
@keyframes flRise { from { opacity: 0; transform: translateY(16px); } }
@keyframes flPop { from { opacity: 0; transform: scale(.6); } }
.fl-label { position: absolute; z-index: 2; left: clamp(16px, 2.3vw, 35px); right: 18%; bottom: clamp(14px, 2.1vw, 32px); margin: 0;
  font-size: clamp(14px, 1.15vw, 17px); line-height: 1.1; letter-spacing: -.02em; }
@container (max-width: 240px) { .fl-label { font-size: 13px; } }
.fl-label sup { margin-left: .35em; font-size: .62em; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; vertical-align: top; }
#flow[data-theme="brand"] .fl-label sup { color: var(--c); transition: color .35s; }
#flow[data-theme="brand"] .fl-item.on .fl-label sup { color: inherit; }
.fl-item.soon .fl-label sup { opacity: .6; }
/* with 3D on, the liquid, the giant name and the scrolling titles are drawn by WebGL under the words */
#flow.has-gl .fl-item, #flow.has-gl .fl-head { background: transparent; }
#flow.has-gl .fl-item::before, #flow.has-gl .fl-item::after, #flow.has-gl .fl-head::before, #flow.has-gl .fl-head::after, #flow.has-gl .fl-mq { display: none; }
#flow.has-gl .fl-word { visibility: hidden; }

/* the scrolling title behind the screen while the pointer is on a tile */
.fl-mq { position: absolute; left: 0; right: 0; top: 47%; z-index: 1; transform: translateY(-50%); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.fl-mq-in { display: flex; width: max-content; animation: flmq 10s linear infinite; animation-play-state: paused; }
.fl-mq p { margin: 0; padding-right: .35em; font-size: 24cqw; line-height: .84; letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; color: var(--on-ink); }
.fl-head.wide .fl-mq p { font-size: 14cqw; }
.fl-item.on .fl-mq, .fl-head.on .fl-mq { opacity: 1; }
.fl-item.on .fl-mq-in, .fl-head.on .fl-mq-in { animation-play-state: running; }
@keyframes flmq { to { transform: translateX(-50%); } }

/* flat screens: shown when there is no 3D */
.fl-screen { position: absolute; left: 14%; right: 14%; top: 18%; bottom: 28%; z-index: 1; overflow: hidden; border-radius: 14px; background: var(--screen);
  box-shadow: var(--shadow); transition: transform .5s var(--ease); }
.fl-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-txt { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 8%; text-align: center;
  font-weight: 800; font-size: 7.5cqw; line-height: .9; letter-spacing: -.04em; text-transform: uppercase; color: var(--c); }
.fl-item.noimg .fl-txt, .fl-item.soon .fl-txt { display: flex; }
.fl-item.noimg .fl-screen img, .fl-item.soon .fl-screen img { display: none; }
.fl-dev-phone { left: 36%; right: 36%; top: 12%; bottom: 22%; border-radius: 22px; }
.fl-dev-record, .fl-dev-poster { left: 22%; right: 22%; top: 14%; bottom: 30%; border-radius: 4px; }
.fl-dev-shirt { background: transparent; box-shadow: none; left: 24%; right: 24%; top: 14%; bottom: 26%; }
.fl-dev-shirt img { object-fit: contain; }
.fl-head .fl-screen { left: 22%; right: 22%; top: 20%; bottom: 32%; }
.fl-head .fl-dev-phone { left: 39%; right: 39%; top: 16%; bottom: 28%; }
.fl-head .fl-dev-record, .fl-head .fl-dev-poster, .fl-head .fl-dev-shirt { left: 28%; right: 28%; top: 18%; bottom: 30%; }
.fl-head.wide .fl-screen { left: 50%; right: 12%; top: 20%; bottom: 20%; }
.fl-head.noimg .fl-screen { display: none; }
.fl-item.on .fl-screen, .fl-head.on .fl-screen { transform: scale(1.04) translateY(-2%); }
#flow.has-gl .fl-screen { display: none; }

/* ---- footer ---- */
.fl-foot { position: relative; min-height: 64vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 90px 3.5vw 120px; text-align: center; background: var(--foot-bg); color: var(--foot-ink); }
.fl-foot h3 { margin: 0; font-size: clamp(54px, 11vw, 190px); line-height: .84; letter-spacing: -.06em; text-transform: uppercase; }
.fl-foot ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fl-foot a, .fl-top { position: relative; z-index: 0; display: inline-flex; align-items: center; overflow: hidden; padding: 11px 20px; border: 2px solid currentColor; border-radius: 999px;
  background: none; color: inherit; cursor: pointer; text-decoration: none; font: 600 14px var(--sans); letter-spacing: -.01em; text-transform: uppercase; transition: color .45s var(--ease); }
.fl-foot a::before, .fl-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foot-ink); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.fl-foot a:hover, .fl-top:hover, .fl-foot a:focus-visible, .fl-top:focus-visible { color: var(--foot-fill); outline: none; }
.fl-foot a:hover::before, .fl-top:hover::before, .fl-foot a:focus-visible::before, .fl-top:focus-visible::before { transform: none; transform-origin: bottom; }
.fl-copy { position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; font: 400 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

@media (max-width: 760px) {
  #flow { --pad: 14px; }
  .fl-mast { top: calc(env(safe-area-inset-top) + 80px); }
  .fl-stage { top: 50%; width: min(92vw, 54vh); }
  .fl-meta { display: none; }
  .fl-now { left: 50%; right: auto; bottom: 74px; transform: translateX(-50%); align-items: center; width: max-content; max-width: calc(100vw - 28px); }
  .fl-cap-t { font-size: 14px; }
  .fl-label { font-size: 15px; }
  .fl-statement { text-indent: 0; }
  .fl-kicker { position: static; margin: 0 0 18px; }
  .fl-head .fl-num, .fl-head .fl-count { font-size: 11px; letter-spacing: .14em; }
  .fl-head .fl-num::after { width: 8px; height: 8px; }
}
/* phones on their side: a smaller stage so the name stays in view */
@media (max-height: 520px) and (orientation: landscape) {
  .fl-hero { min-height: 0; }
  .fl-mast { top: calc(env(safe-area-inset-top) + 62px); }
  .fl-stage { left: 68%; top: 57%; width: min(66vh, 36vw); }
  .fl-meta { display: none; }
  .fl-now { left: var(--pad); right: auto; bottom: 16px; transform: none; align-items: flex-start; }
  .fl-down { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-mq-in { animation: none; }
  #flow[data-theme="brand"] .fl-word span { animation: none; }
  .fl-panel, .fl-panel-in { transition: none; }
  .fl-panel.open .fl-item .fl-label, #flow:not(.has-gl) .fl-panel.open .fl-screen, .fl-cap.swap .fl-cap-k, .fl-cap.swap .fl-cap-t { animation: none; }
}