/* ════════════════════════════════════════════════════════════════
   NERV — lifted from VAMP. Scoped to elements within .right.
   Gives us: tree branches, ruler ticks, trunk line, phosphor flash,
   CRT reveal, scanline sweep, item burn/activate.
   ════════════════════════════════════════════════════════════════ */

:root {
  --color-like: #e47f6b;
  --color-like-rgb: 228, 127, 107;
  --color-like-hover: #f5a692;
  --color-phosphor-light: #ffcbb8;
  --color-surface-1: #000;
  --color-text: #e0e0e0;
  --color-text-muted: #666;
  --color-text-dim: #333;
}

/* ── Branches: horizontal stub repeating from a vertical edge ── */
.nerv-branches {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      var(--color-like) 27px,
      var(--color-like) 29px,
      transparent 29px,
      transparent 56px
    );
  background-size: 12px auto;
  background-repeat: repeat-y;
}
.nerv-branches.right-edge { background-position: right top; }
.nerv-branches.left-edge  { background-position: left top; }

/* ── Trunk: solid vertical 2px orange line ── */
.nerv-trunk {
  position: relative;
}
.nerv-trunk::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-like);
  pointer-events: none;
  z-index: 0;
}
.nerv-trunk.left::before  { left: 0; }
.nerv-trunk.right::before { right: 0; }

/* ── Ruler ticks: 32px big + 8px small + center rail ── */
.nerv-ruler-track {
  background-image:
    repeating-linear-gradient(
      to top,
      rgb(var(--color-like-rgb) / 0.33) 0px, rgb(var(--color-like-rgb) / 0.33) 1px,
      transparent 1px, transparent 32px
    ),
    repeating-linear-gradient(
      to top,
      rgb(var(--color-like-rgb) / 0.2) 0px, rgb(var(--color-like-rgb) / 0.2) 1px,
      transparent 1px, transparent 8px
    ),
    linear-gradient(to right,
      transparent calc(50% - 0.5px),
      rgb(var(--color-like-rgb) / 0.2) calc(50% - 0.5px),
      rgb(var(--color-like-rgb) / 0.2) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  background-size: 10px 100%, 5px 100%, 100% 100%;
  background-position: center bottom, center bottom, center bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* ── Keyframes ── */

@keyframes nerv-line-shoot {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes nerv-scanline-sweep {
  0%   { top: -4px; opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes nerv-crt-reveal {
  0%   { clip-path: inset(0 0 100% 0); }
  99.9% { clip-path: inset(0 0 -10px 0); }
  100% { clip-path: none; }
}

@keyframes nerv-item-phosphor {
  0%   { filter: brightness(2.0); text-shadow: 0 0 6px rgb(var(--color-like-rgb) / 0.53), 0 0 12px rgb(var(--color-like-rgb) / 0.27); }
  40%  { filter: brightness(1.3); text-shadow: 0 0 3px rgb(var(--color-like-rgb) / 0.27); }
  100% { filter: brightness(1); text-shadow: none; }
}

@keyframes nerv-item-burn {
  0%   { filter: brightness(1); text-shadow: none; opacity: 1; }
  30%  { filter: brightness(1.8); text-shadow: 0 0 6px rgb(var(--color-like-rgb) / 0.53), 0 0 12px rgb(var(--color-like-rgb) / 0.27); opacity: 1; }
  100% { filter: brightness(0.3); text-shadow: none; opacity: 0; }
}

@keyframes nerv-item-activate {
  0%   { opacity: 0; filter: brightness(1); }
  40%  { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; filter: none; }
}

@keyframes nerv-trunk-pseudo-phosphor {
  0%   { background: var(--color-phosphor-light); box-shadow: 0 0 6px rgb(var(--color-like-rgb) / 0.53), 0 0 12px rgb(var(--color-like-rgb) / 0.27); }
  100% { background: var(--color-like); box-shadow: none; }
}

@keyframes nerv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--color-like-rgb) / 0.6); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--color-like-rgb) / 0); }
}

/* ── Composite scanline element you can drop into a relative container ── */
.nerv-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(180deg,
    transparent,
    rgb(var(--color-like-rgb) / 0.8),
    transparent);
  box-shadow:
    0 0 12px rgb(var(--color-like-rgb) / 0.53),
    0 0 24px rgb(var(--color-like-rgb) / 0.27);
  pointer-events: none;
  z-index: 20;
  top: -4px;
  animation: nerv-scanline-sweep 600ms ease-in-out both;
}