/* Opening intro (cut A, "Watcher"): shown once per visitor, over the shop. */
.intro {
  --i-void: #000;
  --i-iris: #d4e64a;
  --i-ink: #e8ecd6;
  --i-dim: #4b4f40;
  --i-line: #262a1d;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--i-void);
  color: var(--i-ink);
  font-family: "Michroma", "Eurostile", "Arial", sans-serif;
}
.no-intro .intro { display: none; }
html.intro-on, html.intro-on body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

.intro.leaving { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.intro-eyes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.intro-hash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: "Audiowide", "Eurostile", "Arial Black", sans-serif;
  font-size: clamp(36px, 10.5vw, 168px);
  white-space: nowrap;
}
.intro-hash span { display: inline-block; opacity: 0; }

.intro-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(38rem, calc(100% - 40px));
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  font-size: clamp(14px, 1.75vw, 20px);
  line-height: 1.65;
}
.intro-copy p { margin: 0; transition: color .7s ease; }
.intro-copy p.dim { color: var(--i-dim); }
.intro-copy .num {
  font-family: "Audiowide", "Eurostile", "Arial Black", sans-serif;
  font-size: clamp(34px, 6.4vw, 78px);
  line-height: 1.1;
  color: var(--i-iris);
  font-variant-numeric: tabular-nums;
}
.intro .caret {
  display: inline-block;
  width: .55em;
  height: 1.02em;
  margin-left: .1em;
  vertical-align: -.16em;
  background: var(--i-iris);
  visibility: hidden;
  animation: intro-blink 1.05s steps(1) infinite;
}
.intro .active .caret { visibility: visible; }
@keyframes intro-blink { 50% { opacity: 0; } }

.intro-final {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  margin: 0;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  text-align: center;
  font-family: "Audiowide", "Eurostile", "Arial Black", sans-serif;
  font-size: clamp(34px, 7.6vw, 120px);
  line-height: 1.05;
  color: var(--i-iris);
}

.intro-skip, .intro-enter {
  position: absolute;
  font: 11px/1 "Michroma", "Eurostile", "Arial", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro-skip {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  padding: 10px 12px;
  border: 1px solid var(--i-line);
  background: transparent;
  color: var(--i-ink);
  opacity: .55;
  transition: opacity .3s ease;
}
.intro-skip:hover, .intro-skip:focus-visible { opacity: 1; }
.intro-enter {
  left: 50%;
  bottom: calc(max(28px, 7vh) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 14px 26px;
  border: 0;
  background: var(--i-iris);
  color: var(--i-void);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.intro-enter.show { opacity: 1; pointer-events: auto; }
.intro-skip:focus-visible, .intro-enter:focus-visible { outline: 2px solid var(--i-iris); outline-offset: 3px; }
.intro .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }