/* The slate wipe.
   One clapperboard edge travels across the pinned screen, right to left the way
   an Arabic call sheet reads, and the world behind it changes. Left of the edge
   is the scattered way: four threads, four versions, a sheet printed before the
   location moved. Right of it is Klaket: one sheet, one thread, one version.
   The edge carries the 45 degree stripes, because the thing doing the wiping is
   the board itself. Both worlds put their sentence at the same height, so the
   wipe does not move the line, it changes what it says. */

/* Registered so the edge can be animated as a real percentage and so one value
   drives the two clips and the bar together. */
@property --x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 112%;
}

.vwipe { position: relative; }

.vwipe__pin {
  /* The edge starts past the right of the screen, not on it, so the first chip
     is still crisp when the section arrives. */
  --x: 112%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}

.vwipe__world { position: absolute; inset: 0; display: grid; place-items: start center; }
.vwipe__world--mess { clip-path: inset(0 max(0px, calc(100% - var(--x))) 0 0); }
.vwipe__world--good {
  clip-path: inset(0 0 0 max(0px, var(--x)));
  background:
    radial-gradient(120% 90% at 72% 18%, rgba(15, 92, 87, 0.38), transparent 64%),
    var(--ink);
}

.vwipe__stage {
  position: relative;
  width: min(100% - var(--gut) * 2, 1180px);
  height: 100%;
  will-change: transform;
}

/* ---- the sentence, at the same height in both worlds ---- */
.vwipe__say {
  position: absolute;
  top: 58%;
  left: 0; right: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-3xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-align: center;
  text-wrap: balance;
  margin-inline: auto;
  max-width: 18ch;
}
.vwipe__say--problem { color: var(--muted); }
.vwipe__rule {
  display: block;
  height: 2px;
  width: min(220px, 40%);
  margin: clamp(1rem, 2.5vh, 1.75rem) auto 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}

/* ---- the scattered side ---- */
.vwipe__chips { position: absolute; inset: 0; }
.vwipe__chip {
  position: absolute;
  width: clamp(200px, 23vw, 282px);
  background: var(--surface);
  border-radius: 12px;
  padding: 0.8rem 0.9rem 0.9rem;
  box-shadow: 0 1px 0 0 rgba(246, 235, 217, 0.06) inset, 0 22px 50px -26px rgba(0, 0, 0, 0.9);
  will-change: transform, opacity, filter;
}
.vwipe__chip:nth-child(1) { top: 7%;  left: 0;    transform: rotate(-3.5deg); }
.vwipe__chip:nth-child(2) { top: 13%; right: 1%;  transform: rotate(2.5deg); }
.vwipe__chip:nth-child(3) { top: 33%; left: 11%;  transform: rotate(1.5deg); }
.vwipe__chip:nth-child(4) { top: 40%; right: 10%; transform: rotate(-2deg); }

.vwipe__row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.vwipe__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.vwipe__app { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.vwipe__time { margin-inline-start: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.vwipe__who { font-weight: 600; font-size: var(--t-sm); }
.vwipe__body { font-size: var(--t-sm); color: var(--muted); line-height: 1.45; margin-top: 0.15rem; }

/* The printed sheet is the one thing on this screen that is actually wrong, so
   it gets the only signal on the screen. */
.vwipe__chip--stale { box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.9), inset 3px 0 0 0 var(--signal); }
.vwipe__chip--stale .vwipe__dot { background: var(--signal); }

/* ---- the Klaket side ---- */
.vwipe__sheet {
  position: absolute;
  top: 20%;
  left: 50%;
  width: clamp(272px, 30vw, 372px);
  transform: translateX(-50%);
  background: var(--teal);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 0 0 1px rgba(246, 235, 217, 0.18) inset, 0 34px 80px -26px rgba(15, 92, 87, 0.85);
  will-change: transform, opacity;
}
.vwipe__sheet .vwipe__app, .vwipe__sheet .vwipe__time { color: rgba(246, 235, 217, 0.68); }
.vwipe__sheet .vwipe__who { color: var(--paper); }
.vwipe__sheet .vwipe__body { color: rgba(246, 235, 217, 0.84); }
.vwipe__sheet .vwipe__dot { background: var(--teal-pale); }

/* ---- each world states its own name, and loses it with the wipe ---- */
.vwipe__state { position: absolute; bottom: clamp(1.25rem, 4vh, 2.5rem); }
.vwipe__world--mess .vwipe__state { left: 0; }
.vwipe__world--good .vwipe__state { right: 0; color: var(--accent); }

/* ---- the edge ---- */
.vwipe__bar {
  position: absolute;
  top: -5%; bottom: -5%;
  left: var(--x);
  width: clamp(54px, 6.5vw, 92px);
  z-index: 4;
  transform: translateX(-50%) rotate(0.9deg);
  --stripe-a: var(--paper);
  --stripe-b: var(--ink);
  --stripe-w: 15px;
  box-shadow: -34px 0 64px -18px rgba(0, 0, 0, 0.9), 34px 0 74px -22px rgba(0, 0, 0, 0.7);
}
.vwipe__bar::before, .vwipe__bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--paper);
}
.vwipe__bar::before { left: 0; }
.vwipe__bar::after { right: 0; }

@media (max-width: 860px) {
  .vwipe__say { top: 60%; font-size: var(--t-2xl); max-width: 16ch; }
  /* A phone has no room to scatter four threads without one of them landing on
     the sentence, so the mess piles instead: a flowed stack, each one knocked
     off the last, which is what the pile actually looks like. Flow rather than
     absolute positions, so a chip that wraps to one more line pushes the pile
     instead of cutting into the one below it. */
  .vwipe__chips { inset: 1% 0 auto; display: grid; gap: clamp(0.4rem, 1.2vh, 0.9rem); }
  .vwipe__chip { position: static; width: min(74vw, 286px); }
  .vwipe__chip .vwipe__body { font-size: var(--t-xs); }
  .vwipe__chip:nth-child(odd) { margin-inline-end: auto; }
  .vwipe__chip:nth-child(even) { margin-inline-start: auto; }
  .vwipe__chip:nth-child(1) { transform: rotate(-2.5deg); }
  .vwipe__chip:nth-child(2) { transform: rotate(2deg); }
  .vwipe__chip:nth-child(3) { transform: rotate(1.5deg); }
  .vwipe__chip:nth-child(4) { transform: rotate(-2deg); }
  .vwipe__sheet { top: 16%; width: min(80vw, 320px); }
}

/* A short phone in landscape has the same pile and a third of the height. */
@media (max-width: 860px) and (max-height: 720px) {
  .vwipe__chip { padding: 0.55rem 0.7rem 0.6rem; }
  .vwipe__chip .vwipe__row { margin-bottom: 0.25rem; }
  .vwipe__chip .vwipe__who { font-size: var(--t-xs); }
}

/* ---- the still version: the same argument as a before and after ---- */
.vwipe--still .vwipe__pin {
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.vwipe--still .vwipe__world { position: static; clip-path: none; display: block; padding: clamp(1.5rem, 4vw, 3rem) 0; }
.vwipe--still .vwipe__stage { height: auto; width: min(100% - var(--gut) * 1.2, 560px); margin-inline: auto; }
.vwipe--still .vwipe__chips { position: static; display: grid; gap: 0.75rem; }
.vwipe--still .vwipe__chip { position: static; width: auto; transform: none; }
.vwipe--still .vwipe__sheet { position: static; width: auto; transform: none; margin-bottom: 0.75rem; }
.vwipe--still .vwipe__say { position: static; margin: clamp(1.25rem, 3vh, 2rem) 0 0; text-align: start; font-size: var(--t-2xl); }
.vwipe--still .vwipe__rule { margin-inline: 0; transform: none; }
.vwipe--still .vwipe__state { position: static; display: block; margin-bottom: 0.9rem; }
.vwipe--still .vwipe__bar {
  position: static;
  order: -1;
  grid-column: 1 / -1;
  width: auto;
  height: clamp(16px, 2.6vw, 26px);
  transform: none;
  box-shadow: none;
}
.vwipe--still .vwipe__bar::before, .vwipe--still .vwipe__bar::after { content: none; }

@media (max-width: 760px) {
  .vwipe--still .vwipe__pin { grid-template-columns: 1fr; }
}