/* Bladeren door de tafel: Cover Flow, zoals de hoezen op een iPod nano.
   De laag ligt over de tafel (z-index 4) maar onder het paneel (5) en de
   sluitknop (6). Tik je een hoes aan, dan komt het paneel er dus gewoon
   overheen en blijft de rij eronder staan. */

/* De sluier is het vilt zelf, een paar tinten dieper: kiest de bezoeker een
   andere viltkleur, dan gaat de rij mee. De tafel blijft er met al zijn
   voorwerpen onder liggen, hij is alleen even uit het zicht. */
#flow {
  --flow-h: 40vh;      /* de hoogte van de middelste hoes, JS schrijft hem */
  --flow-basis: 48%;   /* op deze lijn staan alle hoezen met hun onderkant */
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  background: color-mix(in srgb, var(--felt) 78%, #0b100d);
  touch-action: none;
  opacity: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms ease;
}
#flow[hidden] { display: none; }
#flow.is-aan { opacity: 1; }
#flow.is-sleep { cursor: grabbing; }
#flow:focus { outline: none; }

/* ---------- de rij ---------- */

.flow-rij {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% calc(var(--flow-basis) - var(--flow-h) / 2);
  transform-style: preserve-3d;
  transition: opacity 300ms ease;
}

/* Breedte, hoogte en de halve breedte naar links staan per hoes in de stijl:
   ze volgen de ratio van het voorwerp. Per frame schrijft JS alleen transform
   en opacity. */
.flow-hoes {
  position: absolute;
  left: 50%;
  bottom: var(--flow-basis);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}
.flow-hoes[hidden] { display: none; }

.flow-vlak {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #142b23;
  box-shadow:
    inset 0 0 0 1px rgba(236, 238, 232, .18),
    0 2px 6px rgba(0, 0, 0, .4),
    0 20px 38px rgba(0, 0, 0, .45);
}

.flow-vlak img,
.flow-spiegel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* De spiegeling hangt onder de hoes en draait met hem mee. Het masker zit op
   het vlak en de omkering op het beeld: zet je scaleY(-1) op het vlak zelf,
   dan klapt het masker mee en staat het verloop op zijn kop. Zelfde src, dus
   geen tweede aanvraag aan het netwerk. */
.flow-spiegel {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 60%);
}
.flow-spiegel img { transform: scaleY(-1); }

/* ---------- titel en ondertitel ---------- */

/* De onderrand van een telefoon is niet de onderrand van het scherm: daar staat
   de streep van de thuisknop. De titel schuift er met de veilige zone bovenuit. */
.flow-tekst {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(20px, 5.5vh, 58px) + env(safe-area-inset-bottom, 0px));
  width: min(32rem, 88vw);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.flow-tekst.is-aan { opacity: 1; }

/* Een titel uit de tafel kan lang zijn (een hele productnaam met streepjes);
   twee regels houdt de rij op zijn plek. */
.flow-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  line-height: 1.14;
  color: var(--chalk);
  text-wrap: balance;
}

.flow-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin: .34rem 0 0;
  font-family: var(--font-text);
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  line-height: 1.35;
  color: var(--chalk-dim);
}

/* ---------- de knoppen ---------- */

/* Dezelfde hoek als de sluitknop van het paneel, dus als er een voorwerp
   opengaat verdwijnt deze (zie onderaan dit bestand). De veilige zone erbij,
   anders staat hij liggend onder de notch. */
.flow-knop {
  position: absolute;
  top: calc(clamp(12px, 2.2vw, 24px) + env(safe-area-inset-top, 0px));
  right: calc(var(--gap) + env(safe-area-inset-right, 0px));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(236, 238, 232, .45);
  border-radius: 999px;
  background: rgba(11, 16, 13, .45);
  color: var(--chalk);
  font: 400 24px/1 var(--font-text);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.flow-knop:hover { background: rgba(236, 238, 232, .09); border-color: var(--chalk); }
.flow-knop:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

/* Twee stille pijlen, op ooghoogte van de middelste hoes. Op een smal scherm
   veeg je en staan ze in de weg. */
.flow-pijl {
  position: absolute;
  top: calc(var(--flow-basis) - var(--flow-h) / 2);
  z-index: 3;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chalk);
  font: 400 30px/1 var(--font-text);
  opacity: .55;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.flow-pijl.is-terug { left: max(8px, calc(var(--gap) - 10px)); }
.flow-pijl.is-verder { right: max(8px, calc(var(--gap) - 10px)); }
.flow-pijl:hover { opacity: 1; }
.flow-pijl:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; opacity: 1; }

@media (min-width: 720px) { .flow-pijl { display: grid; } }

/* ---------- wat de tafel eronder doet ---------- */

/* Zolang je bladert liggen de knoppen van de tafel stil: ze horen bij het
   vilt, niet bij de rij. Zelfde greep als .table.is-open in styles.css. */
.flow-aan .spoor,
.flow-aan .knoppen,
.flow-aan .kleur,
.flow-aan .filters,
.flow-aan .sfeer {
  opacity: 0;
  pointer-events: none;
}

/* Tilt de rij een voorwerp op, dan zakt hij weg achter het paneel, net zoals
   de voorwerpen op tafel dat doen. De sluitknop gaat helemaal weg: hij staat
   op dezelfde plek als die van het paneel, en dat is er een te veel. */
.table.is-open .flow-rij,
.table.is-open .flow-tekst,
.table.is-open .flow-pijl { opacity: .3; pointer-events: none; }
.table.is-open .flow-knop { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #flow, .flow-rij, .flow-tekst, .flow-knop, .flow-pijl { transition-duration: 120ms !important; }
}