/* motion.css — all animation & transitions that are motion-led */

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 0.7; }
}

.js-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--duration-slow) var(--ease-emphasized),
    transform var(--duration-slow) var(--ease-emphasized);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.home-hero__scroll-line {
  animation: scroll-pulse 2.6s var(--ease-standard) infinite;
}

.progress {
  transform-origin: left center;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .reference:hover {
    transform: translateY(-2px);
  }

  .principle-preview:hover::after,
  .principle-preview:focus-within::after {
    transform: translate(-50%, -58%) scale(1.1);
  }

  .principle-preview:hover,
  .principle-preview:focus-within {
    border-color: transparent;
  }

  .principle-preview:hover .principle-preview__title,
  .principle-preview:focus-within .principle-preview__title {
    color: var(--card-hover-fg);
  }

  .principle-preview:hover .principle-preview__text,
  .principle-preview:focus-within .principle-preview__text {
    color: var(--card-hover-muted);
  }

  .doc-card:hover .doc-card__icon,
  .doc-card:focus-within .doc-card__icon {
    color: var(--card-hover-muted);
  }

  .doc-card:hover .doc-card__status,
  .doc-card:focus-within .doc-card__status {
    color: var(--card-hover-muted);
  }

  .doc-card:hover .principle-preview__num,
  .doc-card:focus-within .principle-preview__num {
    color: var(--card-hover-muted);
  }

  .lib-card:hover .lib-status,
  .lib-card:focus-within .lib-status,
  .lib-card:hover .lib-card__meta,
  .lib-card:focus-within .lib-card__meta,
  .lib-card:hover .principle-preview__num,
  .lib-card:focus-within .principle-preview__num {
    color: var(--card-hover-muted);
  }

  .lib-card:hover .lib-card__preview,
  .lib-card:focus-within .lib-card__preview {
    background: rgba(255, 255, 255, 0.14);
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }

  .lib-card:not(.principle-preview--accent):hover .lib-card__preview,
  .lib-card:not(.principle-preview--accent):focus-within .lib-card__preview {
    background: rgba(255, 255, 255, 0.16);
    border-bottom-color: rgba(255, 255, 255, 0.24);
  }

  .lib-card:hover .pv,
  .lib-card:focus-within .pv {
    color: rgba(255, 255, 255, 0.85);
  }
}

.principle-preview {
  --card-bg: var(--surface);
  --card-fg: var(--text-primary);
  --card-muted: var(--text-secondary);
  --card-fill: var(--accent);
  --card-hover-fg: #ffffff;
  --card-hover-muted: rgba(255, 255, 255, 0.74);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--card-fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}

.principle-preview--accent {
  --card-bg: var(--accent);
  --card-fg: #ffffff;
  --card-muted: rgba(255, 255, 255, 0.74);
  --card-fill: #ffffff;
  --card-hover-fg: #0f1724;
  --card-hover-muted: #5f6673;
  border-color: transparent;
}

.principle-preview::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 100%;
  width: 240%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card-fill);
  transform: translate(-50%, 0) scale(0.72);
  transition: transform var(--duration-slow) var(--ease-emphasized);
  pointer-events: none;
}

.principle-preview__num,
.principle-preview__title,
.principle-preview__text {
  position: relative;
  z-index: 1;
  transition: color var(--duration-slow) var(--ease-emphasized);
}

.principle-preview__num {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.principle-preview--accent .principle-preview__num {
  color: rgba(255, 255, 255, 0.55);
}

.principle-preview__title {
  margin: 0 0 var(--space-2);
  font-family: var(--lim-font-sans);
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  color: var(--card-fg);
}

.principle-preview__text {
  margin: 0;
  color: var(--card-muted);
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-hero__scroll-line {
    animation: none !important;
  }

  .principle-preview::after {
    transition: none;
  }

  .principle-preview:hover::after,
  .principle-preview:focus-within::after {
    transform: translate(-50%, 0) scale(0.72);
  }

  .reference:hover {
    transform: none;
  }
}