/*
 * The craft layer's styling.
 *
 * "i just want it almost awwwards worthy". Everything here is additive: no
 * content depends on it, nothing is hidden by it, and every element it styles
 * is created by site/flair.js at runtime, so a browser that runs no JavaScript
 * never meets any of it.
 */

/* ------------------------------------------------------------------- grain
 *
 * The single highest ratio of effect to bytes on the page. It takes the flat
 * digital black off everything and makes the whole thing sit like printed
 * matter rather than like a screen.
 *
 * `mix-blend-mode: overlay` rather than a flat opacity, so it lifts the dark
 * areas without greying out the bright ones, and `pointer-events: none` so it
 * is never in the way of anything.
 */
.vaki-grain {
  position: fixed;
  inset: -50%;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  /* Animated in steps so it crawls like film grain rather than sliding. */
  animation: vaki-grain-shift 0.7s steps(4) infinite;
}
@keyframes vaki-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------------ cursor
 *
 * A ring that leads the real pointer and swells over anything pressable. The
 * native cursor is deliberately NOT hidden: hiding it is the usual way this is
 * done and it is a bad trade, because the moment the script hiccups there is
 * nothing on screen to point with.
 */
.vaki-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483001;
  pointer-events: none;
  will-change: transform;
}
.vaki-cursor .ring {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--key, #F0A264);
  border-radius: 50%;
  opacity: 0.5;
}
.vaki-cursor .pip {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  background: var(--key, #F0A264);
  border-radius: 50%;
}

/* -------------------------------------------------------------------- eyes
 *
 * The idea, rather than the polish. Vaki means the wakeful one, so the page
 * watches back. Two divs rather than an image: crisp at any size, nothing to
 * load, and they only appear where the markup asks with `data-eyes`.
 */
[data-eyes] {
  display: flex;
  gap: clamp(5px, 0.7vw, 9px);
  align-items: center;
  /* Its own line, above the eyebrow. The first version had no margin and the
     eyes sat on top of the words underneath them, which read as a mistake
     rather than as a device. */
  margin: 0 0 clamp(14px, 2vw, 26px);
}
.vaki-eye {
  position: relative;
  /* Small enough to be a mark rather than a cartoon. At 62px they were googly
     eyes; at 26 they are the brand watching you, which is the point. */
  width: clamp(20px, 2vw, 28px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink, #F2EBE4);
  display: block;
  flex: 0 0 auto;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.22);
}
.vaki-eye i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  margin: -19% 0 0 -19%;
  border-radius: 50%;
  background: var(--ground, #0B1113);
  display: block;
}

/* ----------------------------------------------------------------- marquee
 *
 * A strip of moving type, which is the one device that says "designed" in half
 * a second. Here it is not decoration: the thirteen languages ARE the claim.
 */
.marquee {
  overflow: hidden;
  display: flex;
  width: 100%;
  border-block: 1px solid var(--hairline, #243235);
  padding-block: clamp(14px, 2vw, 26px);
  /* Faded at both ends so it reads as passing through rather than as a box of
     text that happens to be moving. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee > span {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(22px, 3.5vw, 58px);
  padding-right: clamp(22px, 3.5vw, 58px);
  white-space: nowrap;
  font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--ink, #F2EBE4);
}
.marquee > span b { font-weight: 800; color: var(--key, #F0A264); }

/* ---------------------------------------------------------------- progress */
.vaki-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: var(--key, #F0A264);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2147482999;
  pointer-events: none;
}

/* ------------------------------------------------------------------- still
 *
 * Belt to the braces in site/flair.js, which already returns early for each of
 * these. A reader who asked their machine for less movement gets a page with
 * no crawling grain, no chasing dot and no marquee.
 */
@media (prefers-reduced-motion: reduce) {
  .vaki-grain { animation: none; }
  .vaki-cursor { display: none; }
  .marquee > span { animation: none; }
}