/*
 * "you are here" marker styles (film-style layer).
 *
 * A compact DOS-green CRT phosphor data plate: a clean labeled frame, not a
 * fake film slate. This is the one place the deeper Matrix green + CRT
 * treatment lives; the rest of the lesson keeps the page lime accent. Pairs
 * with you-are-here.js.
 *
 * Respects prefers-reduced-motion (no flicker, fade, or rec pulse). Legible
 * on a phone. No build step.
 */

[data-you-are-here] {
  --phos: #33ff66; /* phosphor green */
  --phos-dim: #1f6b3a; /* faint eyebrow label */
  --phos-bright: #7dffae; /* the live phase marker */
  --slate: #050805; /* crt black, a touch green */
  margin: 28px 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.yah-plate {
  position: relative;
  max-width: 400px;
  padding: 14px 16px 15px;
  border: 1px solid #0f2a16;
  border-radius: 4px;
  overflow: hidden;
  background: var(--slate);
  color: var(--phos);
  text-shadow:
    0 0 4px rgba(51, 255, 102, 0.6),
    0 0 11px rgba(51, 255, 102, 0.25);
  animation: yah-fade 420ms ease both;
}
@keyframes yah-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* scanlines + faint flicker */
.yah-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.28) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  animation: yah-flicker 3.2s steps(60) infinite;
}
/* vignette */
.yah-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.55);
}
@keyframes yah-flicker {
  0%,
  97%,
  100% {
    opacity: 0.92;
  }
  98% {
    opacity: 0.74;
  }
  99% {
    opacity: 1;
  }
}

.yah-eyebrow {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--phos-dim);
  margin-bottom: 8px;
}

/* The single plain phase marker, e.g. "macro ideation". */
.yah-now {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--phos-bright);
}

@media (max-width: 560px) {
  .yah-plate {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yah-plate,
  .yah-plate::after {
    animation: none;
  }
}