/* YOU.0 ON A PHONE (src/views/app-showcase.js; public/js/app-showcase.js).
   Arian, 2026-10-01, with a picture of it: "pop out of the phone not on
   it", "Make the background have its own panel and more darker and some pop
   of color behind it", "the panels need to be see through matte glass like
   the dock".

   A stage of its own, darker than the page in either theme, with a glow
   behind the phone in the colour of the moment playing. The phone is dark,
   as in his picture, and plays the page's own recordings, light or Obsidian.
   The panels are the dock's own material (components.css, .dock): the
   ground at half strength, frosted, the faintest hairline, a slight shade.
   They come out of the phone: from its middle, small, to where they stand.
   Everything is sized from the phone, so the whole stage scales as one.
   It is one screen, and it plays: "stuff like this needs to be just as
   simple as a play or pause" (the page's scroll does not drive it). */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #3a66ff; }

.show {
  --ph: clamp(22rem, calc(100svh - var(--nav-h) - var(--dock-room, 0px) - 10rem), 46rem);
  --pad: calc(var(--ph) * .014);
  --status: calc(var(--ph) * .042);
  --pw: calc((var(--ph) - 2 * var(--pad) - var(--status)) * .4622 + 2 * var(--pad));
  position: relative;
  background: var(--bg);
}
/* One screen, a stop like every other band (home.css, THE PAGES STOP);
   nothing inside it holds the scroll (Arian, of the stops there were inside
   it when the scroll drove it: "As if it's trying to stop the scroll from
   happening"). */
.show__pin {
  display: grid;
  min-height: calc(100svh - var(--nav-h));
  padding: clamp(.6rem, 1.6svh, 1.1rem) var(--gutter) calc(var(--dock-room, 0px) + clamp(.6rem, 1.6svh, 1.1rem));
}

/* ── The stage ──────────────────────────────────────────────────────── */
.show__stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center;
  padding: clamp(.9rem, 2.4svh, 1.5rem) 1rem 1.25rem;
  border-radius: 18px;
  background: radial-gradient(130% 80% at 50% 0%, #11131a 0%, #08090c 62%, #050608 100%);
  color: var(--fg);
  transition: --glow 1.6s cubic-bezier(.4, 0, .2, 1);
}
/* The pop of colour behind the phone, breathing slowly. */
.show__glow {
  position: absolute; z-index: -1; left: 50%; top: 58%;
  width: calc(var(--pw) * 2.9); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--glow) 78%, transparent) 0%, color-mix(in oklab, var(--glow) 32%, transparent) 30%, transparent 64%);
  filter: blur(calc(var(--pw) * .08));
}
/* It holds still: a glow that breathed made every glass panel over it draw
   again on every frame. It only changes colour, slowly, with the moment. */

/* PLAY · PAUSE: the dock's glass, round; on a phone at the stage's top
   corner, beside the phone's shoulder (never under the dock), on a wide
   screen in the stage's foot corner. */
.show__play {
  position: absolute; z-index: 6; right: .55rem; top: calc(clamp(.9rem, 2.4svh, 1.5rem) + 2.3rem);
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.show__play:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 3px; }
.show__play .show__i-play, .show__play[aria-pressed="true"] .show__i-pause { display: none; }
.show__play[aria-pressed="true"] .show__i-play { display: block; }

/* ── The moments, named ─────────────────────────────────────────────── */
.show__steps {
  display: flex; gap: .5rem; width: 100%; max-width: 24rem; margin: 0; padding: 0; list-style: none;
}
.show__steps li { flex: 0 0 1.75rem; display: grid; gap: .5rem; align-content: start; min-width: 0; transition: flex-grow .5s var(--ease); }
.show__steps li.is-on { flex: 1 1 auto; }
.show__go {
  display: flex; align-items: baseline; gap: .5rem; min-width: 0; padding: .9rem 0; margin: -.9rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: color-mix(in srgb, var(--fg) 42%, transparent); text-align: left; transition: color var(--t-fast);
}
.show__n { font-size: .74rem; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.show__name { font-size: .64rem; font-weight: 500; letter-spacing: .22em; white-space: nowrap; }
.show__steps li:not(.is-on) .show__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 359px) { .show__steps { gap: .35rem; } .show__name { font-size: .56rem; letter-spacing: .1em; } .show__go { gap: .35rem; } }
.show__steps li.is-on .show__go { color: var(--fg); }
.show__go:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 4px; border-radius: var(--r-pill); }
/* The line that fills as the moment plays. */
.show__bar { display: block; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; }
.show__bar b { display: block; height: 100%; border-radius: inherit; background: var(--fg); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.show__steps li.is-done .show__bar b { transform: none; background: color-mix(in srgb, var(--fg) 55%, transparent); }
.show__line { display: none; margin: 0; font-size: var(--fs-small); line-height: 1.5; color: color-mix(in srgb, var(--fg) 72%, transparent); }

/* ── The phone ──────────────────────────────────────────────────────── */
.show__scene { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.show__device {
  position: relative; height: var(--ph); width: var(--pw);
  padding: var(--pad); border-radius: calc(var(--ph) * .074);
  background: #0e0f12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 calc(var(--ph) * .05) calc(var(--ph) * .1) -.5rem rgba(0, 0, 0, .7);
}
.show__screen { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--ph) * .061); background: #08090b; }
.show__island {
  position: absolute; z-index: 3; top: calc(var(--pad) + var(--status) * .2); left: 50%; translate: -50% 0;
  width: 30%; height: calc(var(--status) * .62); border-radius: 99px; background: #050506;
}
/* Under the island, a status strip in the recording's own top colour. */
.show__moment { position: absolute; inset: 0; padding-top: var(--status); background: #232323; opacity: 0; transition: opacity 1s cubic-bezier(.4, 0, .2, 1); }
:root[data-theme="light"] .show__moment { background: #e8ebf1; }
.show__moment.is-on { opacity: 1; }
.show__v, .show__still { position: absolute; inset: var(--status) 0 0; width: 100%; height: calc(100% - var(--status)); object-fit: cover; object-position: top; }
.show__v--light, .show__still--light { display: none; }
:root[data-theme="light"] .show__v--light, :root[data-theme="light"] .show__still--light { display: block; }
:root[data-theme="light"] .show__v--dark, :root[data-theme="light"] .show__still--dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .show__v--light, :root:not([data-theme]) .show__still--light { display: block; }
  :root:not([data-theme]) .show__v--dark, :root:not([data-theme]) .show__still--dark { display: none; }
}
.show__still { z-index: 0; }
.show__v { z-index: 1; }
html:not(.js) .show__v { display: none !important; }

/* ── The panels: the dock's matte glass ─────────────────────────────── */
.gp {
  --w: calc(var(--pw) * 1.05);
  position: absolute; z-index: 5; width: var(--w);
  padding: calc(var(--w) * .066);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  color: var(--fg); line-height: 1.3;
  opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.6);
  /* Going back into the phone, quickly and evenly. */
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1), box-shadow .8s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
  pointer-events: none;
}
/* Coming out: a long, even glide that settles without a bounce, a beat
   after the last one has gone back in. */
.gp.is-out {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1) .22s, transform 1.1s cubic-bezier(.16, 1, .3, 1) .22s, box-shadow .8s cubic-bezier(.4, 0, .2, 1);
}
/* The panel of the moment playing carries its colour at its edge. */
.gp.is-on { box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 0 1px color-mix(in oklab, var(--glow) 45%, transparent), 0 0 2.4em -.4em color-mix(in oklab, var(--glow) 55%, transparent); }
/* Only the panel of the moment playing floats, slowly. */
@media (prefers-reduced-motion: no-preference) {
  .gp.is-out.is-on { animation: gp-float 8s ease-in-out 1.3s infinite; }
  @keyframes gp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.25em; } }
}
.gp p { margin: 0; }
.gp__k { font-size: .62em; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 72%, transparent); white-space: nowrap; }
.gp__k--rule { padding-bottom: .35em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fg) 45%, transparent); }
.gp__num {
  font-weight: 400; font-size: 2em; line-height: 1; letter-spacing: .02em;
  color: var(--ga); background: linear-gradient(90deg, var(--ga), var(--gb)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gp__num--s { font-size: 1.05em; }
.gp__pct { font-size: .8em; margin-left: .1em; color: var(--ga); background: linear-gradient(90deg, var(--ga), var(--gb)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gp__val { display: inline-flex; align-items: center; gap: .3em; }
.gp__ico { display: inline-grid; place-items: center; line-height: 0; }
.gp__ico .i-leaf { width: 1.25em; height: auto; }
.gp__bolt { width: 1.2em; height: 1.2em; }
.gp__eyebrow { font-size: .7em; font-weight: 600; letter-spacing: .2em; color: var(--ga); }
.gp__eyebrow--blue { color: #6fa8ff; }

/* TODAY's three figures. */
.gp__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.gp__stat { display: grid; justify-items: center; gap: .55em; padding-inline: .4em; }
.gp__stat + .gp__stat { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fg) 14%, transparent); }

/* THE ACADEMY's ring and its three rows. */
.gp__ring { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: 1em; }
.gp__dial { position: relative; display: grid; place-items: center; }
.gp__dial svg { width: 100%; height: auto; rotate: -90deg; }
.gp__track, .gp__arc { fill: none; stroke-width: 7; }
.gp__track { stroke: color-mix(in srgb, var(--fg) 12%, transparent); }
.gp__arc { stroke: var(--ga); stroke-linecap: round; stroke-dasharray: 3 270.2; }
.gp__dial p { position: absolute; display: grid; justify-items: center; gap: .25em; }
.gp__dial .gp__num { font-size: 1.6em; }
.gp__rows { display: grid; gap: .8em; margin: 0; padding: 0; list-style: none; }
.gp__rows li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6em; align-items: center; }
.gp__rows .gp__k { font-size: .56em; }
.gp__rows .gp__num { grid-column: 2; justify-self: end; }
.gp__badge {
  grid-row: span 2; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
  font-size: .62em; color: var(--ga); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ga) 55%, transparent);
}
.gp__badge--ico svg { width: 1.2em; height: 1.2em; }

/* SYSTEM RESET's way on. */
.gp__go { display: grid; gap: .55em; }
.gp__title { font-family: var(--font-display); font-size: 1.15em; letter-spacing: .06em; line-height: 1.15; text-wrap: balance; }
.gp__row { display: flex; justify-content: space-between; margin-top: .3em; }
.gp__row .gp__k { font-size: .54em; }
.gp__dots { display: flex; justify-content: space-between; align-items: center; height: 1em; padding-inline: .1em; background: linear-gradient(color-mix(in srgb, var(--fg) 14%, transparent), color-mix(in srgb, var(--fg) 14%, transparent)) center / 100% 1px no-repeat; }
.gp__dots i { width: .45em; height: .45em; border-radius: 50%; background: color-mix(in srgb, var(--fg) 34%, transparent); }
.gp__dots i.is-on { width: .8em; height: .8em; background: var(--ga); box-shadow: 0 0 0 .25em color-mix(in oklab, var(--ga) 28%, transparent); }
.gp__cta {
  justify-self: center; margin-top: .45em; padding: .85em 2.4em; border-radius: var(--r-pill);
  font-size: .72em; font-weight: 600; letter-spacing: .22em; color: #15151C;
  background: linear-gradient(90deg, var(--ga), var(--gb));
}

/* USE A SHAPE: its colours and three of its shapes. */
.gp__shape { display: grid; gap: .9em; }
/* All eleven, one row the panel's width: the free blue first. */
.gp__colours { display: grid; grid-template-columns: repeat(11, 1fr); gap: .45em; }
.gp__colours i { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.gp__colours i.is-on { box-shadow: 0 0 0 .14em #08090c, 0 0 0 .26em color-mix(in oklab, var(--c) 80%, #fff); }
.gp__colours i.is-locked svg { position: absolute; top: -22%; right: -22%; width: 58%; height: auto; aspect-ratio: 1; padding: 9%; border-radius: 50%; background: #0e0f12; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.gp__discs { display: flex; justify-content: space-between; }
.gp__disc { display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, #000 35%, transparent); }
.gp__disc .face-mark { display: block; width: 84%; height: 84%; }

/* The BODY CHECK-IN's place. */
.gp__check { display: grid; gap: .7em; }
.gp__chip { width: fit-content; padding: .5em .95em; border-radius: var(--r-pill); font-size: .74em; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.gp__areas { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.gp__areas span {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em; padding: .8em .3em; border-radius: var(--r-pill);
  font-size: .54em; letter-spacing: .16em; white-space: nowrap; background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.gp__areas span.is-on { color: #6fa8ff; box-shadow: inset 0 0 0 1px color-mix(in oklab, #6fa8ff 45%, transparent); }
.gp__areas svg { width: 1.2em; height: 1.2em; }

/* ── Where they stand ───────────────────────────────────────────────────
   A phone, or a narrow screen: the moment's own panel, over the phone's
   foot (where the app's dock is), wider than the phone: out of it. */
.gp {
  --w: min(calc(var(--pw) * 1.32), calc(100vw - 2 * var(--gutter) - 1.5rem));
  left: calc(50% - var(--w) / 2); bottom: calc(var(--ph) * -.035); --fy: -30%;
  font-size: calc(var(--w) * .036);
}
.gp--today { --w: min(calc(var(--pw) * 1.42), calc(100vw - 2 * var(--gutter) - 1.5rem)); }

/* A wide screen: every panel round the phone, as in his picture. */
@media (min-width: 1100px) {
  /* The phone no taller than leaves room for the panels either side. */
  .show { --ph: min(clamp(22rem, calc(100svh - var(--nav-h) - 10.5rem), 46rem), calc((100vw - 2 * var(--gutter) - 4rem) / 1.55)); }
  .show__stage { padding-bottom: 1.5rem; }
  .show__play { top: auto; bottom: 1rem; right: 1rem; width: 44px; height: 44px; }
  .show__steps { width: auto; max-width: none; gap: 2.2rem; justify-content: center; }
  .show__steps li, .show__steps li.is-on { flex: 0 0 auto; min-width: 7rem; }
  .show__steps li:not(.is-on) .show__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .show__name { font-size: .68rem; }
  .show__line { display: block; }
  .gp { bottom: auto; font-size: calc(var(--pw) * .044); --fy: 0; }
  .gp--academy { --w: calc(var(--pw) * 1.05); left: auto; right: calc(100% - var(--pw) * .07); top: 5%; --fx: calc(var(--pw) * .62); --d: 1; }
  .gp--checkin { --w: calc(var(--pw) * .96); left: auto; right: calc(100% - var(--pw) * .03); top: 40%; --fx: calc(var(--pw) * .58); --d: 3; }
  .gp--today { --w: calc(var(--pw) * 1.46); left: auto; right: calc(100% - var(--pw) * .3); top: 73%; --fx: calc(var(--pw) * .5); --d: 0; }
  .gp--systemreset { --w: calc(var(--pw) * 1.08); left: calc(100% - var(--pw) * .07); top: 3%; --fx: calc(var(--pw) * -.62); --d: 2; }
  .gp--shape { --w: calc(var(--pw) * .98); left: calc(100% - var(--pw) * .04); top: 51%; --fx: calc(var(--pw) * -.58); --d: 4; }
}

/* Less motion asked for: each moment's last frame, the panels at rest. */
@media (prefers-reduced-motion: reduce) {
  .show__v { display: none !important; }
  .gp, .show__moment { transition: opacity .3s; }
  .gp { transform: none; }
}
/* Without scripts: the first moment, its panel out. */
html:not(.js) .gp[data-show-panel="0"] { opacity: 1; transform: none; }