/* Pikett · home 06 · Live demos (the reel). Owner: reel section.
   Grid rhythm: on desktop a 12-column grid in three rows that step across the
   page, each row its own height: 8|4 (shader, physics: the tall drop zone),
   4|8 (interface, type: a shorter band), 7|5 (chart, turntable). The type tile
   floods with ultraviolet. Tablet pairs the portrait tiles; phones stack with
   per-demo proportions. Demo-specific DOM uses the .demo- prefix. */

/* ---- grid ---------------------------------------------------------------- */
.reel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.reel__tile { display: flex; flex-direction: column; min-width: 0; }
.reel__tile .tile__media { flex: none; aspect-ratio: var(--ar, 4 / 3.3); }
.reel__tile--liquid { --ar: 4 / 3.4; }
.reel__tile--physics { --ar: 4 / 4.9; }
.reel__tile--ui { --ar: 4 / 4.7; }
.reel__tile--type { --ar: 4 / 3.3; }
.reel__tile--chart { --ar: 4 / 3.7; }
.reel__tile--turntable { --ar: 1 / 1; }

@media (min-width: 720px) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .reel__tile--liquid, .reel__tile--type { grid-column: span 2; }
  .reel__tile--liquid { --ar: 16 / 8.6; }
  .reel__tile--type { --ar: 16 / 8; }
  .reel__tile--physics, .reel__tile--ui { --ar: 4 / 5; }
  .reel__tile--chart, .reel__tile--turntable { --ar: 1 / 1.04; }
}
@media (min-width: 1100px) {
  .reel { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
  .reel__tile .tile__media { aspect-ratio: auto; height: var(--h); }
  .reel__tile--liquid, .reel__tile--physics { --h: clamp(460px, 41vw, 720px); }
  .reel__tile--ui, .reel__tile--type { --h: clamp(420px, 35.5vw, 620px); }
  .reel__tile--chart, .reel__tile--turntable { --h: clamp(440px, 38.5vw, 670px); }
  .reel__tile--liquid { grid-column: 1 / span 8; }
  .reel__tile--physics { grid-column: 9 / span 4; }
  .reel__tile--ui { grid-column: 1 / span 4; }
  .reel__tile--type { grid-column: 5 / span 8; }
  .reel__tile--chart { grid-column: 1 / span 7; }
  .reel__tile--turntable { grid-column: 8 / span 5; }
}

/* ---- tile ---------------------------------------------------------------- */
.reel__tile {
  background: var(--bg-2);
  transition: translate .7s var(--ease), border-color .45s var(--ease), box-shadow .7s var(--ease);
}
.reel__tile .tile__media { isolation: isolate; background: #0E0E12; }
.reel__tile .tile__body {
  grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-content: start;
  padding: 18px 22px 22px 18px;
}
.reel__no {
  grid-row: 1 / span 2; padding-top: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--fg-3);
  transition: color .4s var(--ease);
}
.reel__tile .tile__title, .reel__tile .tile__text { grid-column: 2; }
.reel__tile .tile__text { max-width: 46ch; text-wrap: pretty; }
.reel__tile .tile__tag { pointer-events: none; }
@media (min-width: 1100px) {
  /* wide tiles set title and line side by side */
  .reel__tile:is(.reel__tile--liquid, .reel__tile--type, .reel__tile--chart) .tile__body {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline;
  }
  .reel__tile:is(.reel__tile--liquid, .reel__tile--type, .reel__tile--chart) .reel__no { grid-row: 1; }
  .reel__tile:is(.reel__tile--liquid, .reel__tile--type, .reel__tile--chart) .tile__text { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
}
.reel__tile .tag i { transition: box-shadow .5s var(--ease), transform .5s var(--ease); }

/* live / paused chip: lit only while the scene is actually updating */
.reel__live {
  position: absolute; right: 14px; top: 14px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: rgba(10, 10, 12, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2);
  opacity: 0; transition: opacity .5s var(--ease);
}
.reel__live i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.reel__tile.is-live .reel__live, .reel__tile.is-paused .reel__live { opacity: 1; }
.reel__tile.is-live .reel__live i { background: var(--c); box-shadow: 0 0 8px var(--c); animation: reel-blink 2.4s var(--ease-io) infinite; }
@keyframes reel-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
html.reduced .reel__live { display: none; }

@media (hover: hover) and (pointer: fine) {
  .reel__tile:hover {
    translate: 0 -4px;
    border-color: color-mix(in srgb, var(--c) 42%, var(--line-2));
    box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--c) 55%, transparent);
  }
  .reel__tile:hover .tag i { transform: scale(1.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 26%, transparent), 0 0 12px var(--c); }
  .reel__tile:hover .reel__no { color: var(--c); }
}

/* flood tile: the whole card in the division colour, near-black type */
.reel__tile.reel__tile--flood {
  --fg: #0A0A0C; --fg-2: rgba(10, 10, 12, .74); --fg-3: rgba(10, 10, 12, .58);
  --line: rgba(10, 10, 12, .14); --line-2: rgba(10, 10, 12, .3);
  background: var(--c); border-color: transparent; color: var(--fg);
}
.reel__tile--flood .tile__media { background: var(--c); }
.reel__tile--flood .tile__body { border-top: 1px solid var(--line); }
.reel__tile--flood .tag, .reel__tile--flood .reel__live { background: rgba(10, 10, 12, .88); border-color: transparent; color: #F3F2EE; }
.reel__tile--flood .reel__no { color: var(--fg-2); }
@media (hover: hover) and (pointer: fine) {
  .reel__tile--flood:hover { border-color: transparent; box-shadow: 0 34px 80px -40px color-mix(in srgb, var(--c) 80%, transparent); }
  .reel__tile--flood:hover .reel__no { color: var(--fg); }
}

/* static fallbacks (no WebGL) */
.demo-fallback--liquid {
  background:
    radial-gradient(50% 70% at 28% 40%, rgba(59, 91, 255, .55), transparent 70%),
    radial-gradient(45% 60% at 72% 62%, rgba(255, 90, 31, .5), transparent 70%),
    radial-gradient(30% 40% at 60% 30%, rgba(255, 77, 157, .35), transparent 70%), #0A0A0C;
}
.demo-fallback--turntable {
  background: radial-gradient(45% 45% at 50% 48%, rgba(255, 90, 31, .28), transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(243, 242, 238, .06), transparent 70%), #0C0C10;
}

/* ---- 1 · liquid ---------------------------------------------------------- */
.demo-liquid { touch-action: pan-y; }

/* ---- 2 · physics --------------------------------------------------------- */
.reel__tile--physics .tile__media { background: radial-gradient(90% 55% at 50% 100%, rgba(255, 210, 63, .07), transparent 70%), #0E0E12; }
.demo-physics { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.demo-physics.is-over { cursor: grab; }
.demo-physics.is-grabbing, .demo-physics.is-grabbing * { cursor: grabbing; }

/* ---- 3 · type ------------------------------------------------------------ */
.demo-type { touch-action: pan-y; overflow: hidden; }
.demo-type__stage {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: #0A0A0C; font-family: var(--sans); font-size: 100px; line-height: .86; letter-spacing: 0;
  -webkit-user-select: none; user-select: none; pointer-events: none; contain: layout style;
}
.demo-type__line { display: flex; white-space: pre; }
.demo-type__ch { display: block; flex: none; font-kerning: none; translate: 0 .045em; }
.demo-type__meter {
  position: absolute; left: 16px; bottom: 14px; display: flex; gap: 16px; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(10, 10, 12, .62);
}
.demo-type__meter b { display: inline-block; min-width: 3ch; font-weight: 400; color: #0A0A0C; font-variant-numeric: tabular-nums; }
html.reduced .demo-type__meter { display: none; }

/* ---- 4 · chart ----------------------------------------------------------- */
.reel__tile--chart .tile__media { background: radial-gradient(80% 60% at 70% 100%, rgba(59, 91, 255, .12), transparent 70%), #0E0E12; }
.demo-chart { touch-action: pan-y; }
.demo-chart__head { position: absolute; left: 18px; top: 56px; display: grid; gap: 8px; pointer-events: none; }
.demo-chart__label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.demo-chart__value { display: flex; align-items: center; gap: 12px; }
.demo-chart__value b {
  font-size: clamp(30px, 3.1vw, 46px); font-stretch: 125%; font-weight: 800; letter-spacing: -.035em; line-height: .9;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.demo-chart__value em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; line-height: 1;
  padding: 5px 8px 4px; border-radius: 999px; font-variant-numeric: tabular-nums;
  color: #0A0A0C; background: var(--c-care);
  transition: background-color .4s var(--ease);
}
.demo-chart__value em.is-down { background: var(--c-motion); }
.demo-chart__bubble {
  position: absolute; left: 0; top: 0; z-index: 1; display: grid; gap: 3px; pointer-events: none; opacity: 0;
  padding: 8px 11px 9px; border-radius: 10px; white-space: nowrap;
  background: rgba(18, 18, 22, .9); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
  will-change: transform, opacity;
}
.demo-chart__bubble b { font-size: 17px; font-stretch: 112%; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.demo-chart__bubble span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--fg-2); }

/* ---- 5 · turntable ------------------------------------------------------- */
.reel__tile--turntable .tile__media {
  background:
    radial-gradient(60% 50% at 50% 34%, rgba(41, 198, 255, .10), transparent 72%),
    radial-gradient(70% 34% at 50% 92%, rgba(243, 242, 238, .05), transparent 70%),
    linear-gradient(#111116, #0A0A0C);
}
.demo-turntable { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.demo-turntable.is-dragging { cursor: grabbing; }

/* ---- 6 · interface ------------------------------------------------------- */
.reel__tile--ui .tile__media {
  background:
    radial-gradient(55% 45% at 50% 38%, rgba(35, 213, 160, .14), transparent 72%),
    radial-gradient(80% 50% at 50% 100%, rgba(35, 213, 160, .06), transparent 70%), #0E0E12;
}
.demo-ui__stage { position: absolute; inset: 0; overflow: hidden; font-size: 10px; -webkit-user-select: none; user-select: none; }
.demo-ui__phone {
  position: absolute; left: 50%; top: 56px; width: 30em; height: 100%; margin-left: -15em;
  padding: .9em .9em 0; border-radius: 4.8em 4.8em 0 0;
  background: linear-gradient(160deg, #34343C, #17171C 34%, #101014 70%);
  box-shadow: 0 0 0 1px rgba(243, 242, 238, .1), inset 0 1px 0 rgba(255, 255, 255, .16), 0 4em 7em -2em rgba(0, 0, 0, .75), 0 0 9em -2em rgba(35, 213, 160, .18);
}
.demo-ui__screen {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 1.4em;
  padding: 1.3em 1.6em 0; border-radius: 3.9em 3.9em 0 0; background: #0A0A0C; overflow: hidden;
  font-family: var(--sans); color: #F3F2EE; line-height: 1.25;
}
.demo-ui__status { position: relative; flex: none; height: 2.6em; display: flex; align-items: center; gap: .7em; padding: 0 .6em; }
.demo-ui__clock { font-size: 1.35em; font-weight: 650; font-stretch: 105%; font-variant-numeric: tabular-nums; }
.demo-ui__on {
  height: 1.7em; padding: 0 .7em; border-radius: 999px; display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 1em; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  color: #0A0A0C; background: var(--c-decks); transform-origin: 0 50%; opacity: 0;
}
.demo-ui__island { position: absolute; left: 50%; top: 50%; width: 8.4em; height: 2.5em; margin: -1.25em 0 0 -4.2em; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.demo-ui__sys { margin-left: auto; display: inline-flex; align-items: flex-end; gap: .25em; height: 1.2em; }
.demo-ui__sys i { width: .36em; border-radius: .1em; background: #F3F2EE; }
.demo-ui__sys i:nth-child(1) { height: .55em; } .demo-ui__sys i:nth-child(2) { height: .82em; } .demo-ui__sys i:nth-child(3) { height: 1.1em; }
.demo-ui__sys b { width: 2.3em; height: 1.1em; margin-left: .5em; border-radius: .34em; border: .12em solid rgba(243, 242, 238, .6); background: linear-gradient(90deg, #F3F2EE 72%, transparent 72%) content-box; padding: .12em; }
.demo-ui__head { flex: none; display: grid; gap: .3em; padding: 0 .4em; }
.demo-ui__day { font-family: var(--mono); font-size: 1.05em; letter-spacing: .08em; text-transform: uppercase; color: #A6A6B0; }
.demo-ui__today { font-size: 3em; font-weight: 800; font-stretch: 125%; letter-spacing: -.035em; line-height: .95; }
.demo-ui__stack { position: relative; flex: none; height: 10.5em; touch-action: pan-y; }
.demo-ui__card {
  position: absolute; left: 0; right: 0; top: 0; height: 8.2em;
  display: grid; grid-template-columns: 3.8em minmax(0, 1fr) auto; grid-template-areas: "icon ttl ago" "icon txt txt";
  column-gap: 1.1em; row-gap: .3em; align-content: start;
  padding: 1.25em 1.3em; border-radius: 2em; background: #1E1E25; border: 1px solid rgba(243, 242, 238, .1);
  transform-origin: 50% 0; touch-action: pan-y; cursor: grab; will-change: transform, opacity;
}
.demo-ui__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.demo-ui__icon {
  grid-area: icon; width: 3.8em; height: 3.8em; border-radius: 1.05em; display: grid; place-items: center;
  background: var(--k); color: #0A0A0C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.demo-ui__icon svg { width: 1.6em; height: auto; }
.demo-ui__ttl { grid-area: ttl; align-self: baseline; font-size: 1.5em; font-weight: 700; font-stretch: 110%; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-ui__ago { grid-area: ago; align-self: baseline; font-family: var(--mono); font-size: 1em; color: #6E6E78; white-space: nowrap; }
.demo-ui__txt { grid-area: txt; font-size: 1.3em; line-height: 1.3; color: #A6A6B0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.demo-ui__row {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1.3em 1.4em; border-radius: 2em; background: #15151A; border: 1px solid rgba(243, 242, 238, .06);
}
.demo-ui__rowtxt { display: grid; gap: .25em; min-width: 0; }
.demo-ui__rowtxt b { font-size: 1.5em; font-weight: 700; font-stretch: 110%; }
.demo-ui__rowtxt span { font-size: 1.25em; color: #A6A6B0; }
.demo-ui__toggle {
  position: relative; flex: none; width: 5.2em; height: 3em; padding: .2em; border-radius: 999px;
  background: #2A2A31; box-shadow: inset 0 .1em .3em rgba(0, 0, 0, .35); cursor: pointer;
}
.demo-ui__knob {
  display: block; width: 2.6em; height: 2.6em; border-radius: 50%; background: #F7F6F2;
  box-shadow: 0 .25em .6em rgba(0, 0, 0, .35), inset 0 -.15em .2em rgba(0, 0, 0, .08); transform-origin: 50% 50%;
}
.demo-ui__btn {
  position: relative; flex: none; display: grid; place-items: center; align-self: center; width: 100%; height: 5.2em;
  border-radius: 999px; background: var(--accent); color: #0A0A0C; overflow: hidden; cursor: pointer;
  box-shadow: 0 1em 2.4em -1em rgba(255, 90, 31, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.demo-ui__btn > * { grid-area: 1 / 1; }
.demo-ui__btnlabel { font-size: 1.6em; font-weight: 750; font-stretch: 112%; letter-spacing: -.005em; white-space: nowrap; }
.demo-ui__spin, .demo-ui__tick { width: 2.5em; height: 2.5em; opacity: 0; }
.demo-ui__finger {
  position: absolute; left: 0; top: 0; z-index: 5; width: 4.6em; height: 4.6em; margin: -2.3em 0 0 -2.3em; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14) 62%, rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 .5em 1.6em rgba(0, 0, 0, .45);
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.demo-type { touch-action: pan-y; } .demo-type__ch { transition: color .25s; }