/* AudioSnag landing-only interaction layer. Keeps the supplied composition intact. */

#landing .nav a {
  border-bottom-color: transparent !important;
  transition: border-color .12s steps(2,end), transform .12s steps(2,end);
}

#landing .nav a:hover,
#landing .nav a:focus-visible,
#landing .nav a[data-home-hover="true"] {
  border-bottom-color: var(--or) !important;
  transform: translateY(-1px);
  outline: none;
}

#landing .nav a canvas {
  transition: filter .1s steps(2,end), opacity .1s linear;
}

#landing .nav a:hover canvas,
#landing .nav a:focus-visible canvas,
#landing .nav a[data-home-hover="true"] canvas {
  filter: brightness(0) saturate(100%) invert(50%) sepia(98%) saturate(3227%) hue-rotate(348deg) brightness(101%) contrast(90%);
}

/* DOS-style field notes use the landing-page deadspace rather than becoming a tooltip. */
.home-intel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.home-intel__line {
  position: absolute;
  max-width: min(36ch, 32vw);
  color: #8d8578;
  font-family: var(--m);
  font-size: clamp(8px, .72vw, 10px);
  line-height: 1.65;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  clip-path: inset(0 100% 0 0);
  transition: opacity .08s linear, transform .18s steps(4,end);
  text-shadow: 0 0 12px rgba(242,106,33,.08);
  white-space: normal;
}

.home-intel__line::before {
  content: "> ";
  color: var(--or);
}

.home-intel__line:nth-child(1) { left: 9%; top: 30%; color: var(--paper2); }
.home-intel__line:nth-child(2) { right: 8%; top: 31%; text-align: right; color: var(--tl); }
.home-intel__line:nth-child(3) { left: 12%; bottom: 27%; color: var(--or); }
.home-intel__line:nth-child(4) { right: 10%; bottom: 25%; text-align: right; max-width: min(48ch, 39vw); color: var(--paper2); }

.home-intel[data-active="true"] .home-intel__line {
  opacity: .9;
  transform: none;
  animation: home-intel-type .34s steps(12,end) both;
}
.home-intel[data-active="true"] .home-intel__line:nth-child(2) { animation-delay: .06s; }
.home-intel[data-active="true"] .home-intel__line:nth-child(3) { animation-delay: .12s; }
.home-intel[data-active="true"] .home-intel__line:nth-child(4) { animation-delay: .18s; }

@keyframes home-intel-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.home-intel__cursor {
  display: inline-block;
  width: .72em;
  height: 1.05em;
  margin-left: .55em;
  vertical-align: -.17em;
  background: currentColor;
  animation: home-intel-cursor .72s steps(1,end) infinite;
}

@keyframes home-intel-cursor { 50% { opacity: 0; } }

/* The normal click ring is replaced on the landing only by the canvas wave field. */
body.home-wave-active .as-hit { display: none !important; }

.home-wave-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
  mix-blend-mode: screen;
  filter: blur(1.1px) saturate(1.25);
  image-rendering: auto !important;
}

@media (max-width: 760px) {
  .home-intel__line { max-width: 38vw; font-size: 7.5px; letter-spacing: .09em; }
  .home-intel__line:nth-child(1) { left: 7%; top: 25%; }
  .home-intel__line:nth-child(2) { right: 7%; top: 25%; }
  .home-intel__line:nth-child(3) { left: 7%; bottom: 24%; }
  .home-intel__line:nth-child(4) { right: 7%; bottom: 22%; max-width: 44vw; }
}

@media (pointer: coarse) {
  .home-intel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-intel__line { animation: none !important; clip-path: none; transition: none; }
  .home-intel__cursor { animation: none; }
  .home-wave-canvas { display: none; }
}