/* Boot sequence (see boot.js). Everything here is inert unless <html> has .boot. */

:root {
  --ink: var(--fg);
  --hair: #d6d6d6;
  --rest: #6b6b6b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hair: #3a3a3a;
    --rest: #8a8a8a;
  }
}

.reel-strip,
.rows { position: relative; }

.idx, .count, .hot { transition: color 0.45s ease-out, opacity 0.3s linear; }
.idx, .count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--rest);
}
.hot { color: var(--ink) !important; }
.out { opacity: 0; }

/* ephemeral labels: created by the script, removed when the boot ends */
.idx { position: fixed; z-index: 2; pointer-events: none; }
.count { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; pointer-events: none; }

/* frames: a 1px outline per tile that exists only while booting */
.tile::after,
.reel-item::after,
.store-main::after,
.store-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--hair);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* the rail: one line travels */
.rail { position: absolute; left: 0; right: 0; top: -14px; height: 1px; pointer-events: none; transition: opacity 0.3s linear; }
.rail i { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--hair); }
.rail i::after { content: ""; position: absolute; right: 0; top: 0; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--ink)); }
.rail.out { opacity: 0; }

/* hidden states, only while `boot` is on */
.boot .tile img,
.boot .tile video,
.boot .reel-item video { opacity: 0; }
.boot-chrome .nav a { visibility: hidden; }
.boot [data-bt] { visibility: hidden; }

/* store page blocks */
.store-main, .store-card { position: relative; }
.store-card { transition: border-color 0.25s linear; }
.boot .store-card:not([data-dev]) { border-color: transparent; }
.boot .store-main img { opacity: 0; }
.boot .tile iframe { opacity: 0; }

/* contact window: frame flash while it opens (see site.js) */
.contact-box.booting::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--hair);
  border-radius: inherit;
  pointer-events: none;
  animation: frame-flash 0.2s steps(6, end) both;
}

.boot [data-frame]::after { opacity: 1; animation: frame-flash 0.2s steps(6, end) both; }
.boot [data-dev] img,
.boot [data-dev] video,
.boot [data-dev] iframe { animation: develop 0.17s steps(5, end) both; }
.boot [data-dev]::after { opacity: 0; transition: opacity 0.25s linear; }

@keyframes frame-flash {
  0% { border-color: var(--ink); }
  33% { border-color: var(--hair); }
  66% { border-color: var(--ink); }
  100% { border-color: var(--hair); }
}
@keyframes develop {
  from { opacity: 0; filter: brightness(0.25) contrast(1.35); }
  to { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile::after, .reel-item::after, .store-main::after, .store-card::after, .contact-box.booting::after, .rail { display: none; }
}