/* Shared verse ASCII motion surface. The engine safe area handles clipping; CSS keeps one visible card only. */

.ascii-motion-scene {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  --hover: 0;
  --focus-x: 0.5;
  --focus-y: 0.5;
  --glow: 0;
  --warmth: 0;
  --drift-x: 0px;
  --drift-y: 0px;
  --lift-y: 0px;
}

.ascii-shadow-root {
  display: grid;
  position: relative;
  height: clamp(148px, 42vw, 250px);
  min-height: clamp(148px, 42vw, 250px);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(43, 37, 32, calc(0.08 + var(--warmth) * 0.08));
  background:
    radial-gradient(
      circle at calc(var(--focus-x) * 100%) calc(var(--focus-y) * 100%),
      rgba(255, 249, 235, calc(0.12 + var(--glow) * 0.06)),
      transparent 46%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(239, 233, 223, 0.94));
  box-shadow:
    0 18px 42px rgba(20, 17, 15, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  transform: translate3d(0, var(--lift-y), 0) scale(calc(1 + var(--hover) * 0.006));
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.ascii-shadow-root::before,
.ascii-shadow-root::after {
  display: none;
}

.ascii-motion-scene.is-hovered .ascii-shadow-root {
  border-color: rgba(117, 93, 65, 0.2);
  box-shadow:
    0 24px 52px rgba(20, 17, 15, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.ascii-motion-frame {
  display: block;
  height: 100%;
  min-height: inherit;
}

.ascii-shadow-target {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  border-radius: inherit;
}

.ascii-shadow-target::before {
  display: none;
}

.ascii-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(calc(1 + var(--hover) * 0.004));
  transform-origin: center;
  filter:
    saturate(calc(0.95 + var(--warmth) * 0.28))
    contrast(calc(1 + var(--hover) * 0.06))
    brightness(calc(0.98 + var(--glow) * 0.04));
  transition:
    transform 180ms ease-out,
    filter 180ms ease-out,
    opacity 180ms ease-out;
}

@media (min-width: 760px) {
  .ascii-shadow-root {
    height: clamp(210px, 25vw, 292px);
    min-height: clamp(210px, 25vw, 292px);
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ascii-shadow-root,
  .ascii-canvas {
    transition: none;
    transform: none;
    filter: none;
  }
}