/* Page styles for site/animation-catalog.html (loads after demo.css). */

.anim-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.anim-card {
  border: 1px solid var(--demo-border);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--demo-surface);
}
.anim-card h3 {
  margin: 0;
  font-size: 1rem;
}
.anim-sample {
  margin: 0.75rem 0 0.5rem;
  min-height: 3em;
  display: flex;
  align-items: center;
}
.anim-desc {
  color: var(--demo-muted);
  font-size: 0.875rem;
}
.anim-replay {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.3rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--demo-border);
  border-radius: 999px;
  background: var(--demo-surface);
  color: var(--demo-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms var(--demo-ease), background 160ms var(--demo-ease), transform 160ms var(--demo-ease);
}
.anim-replay:hover {
  border-color: var(--demo-border-strong);
  background: rgba(36, 71, 168, 0.04);
  transform: translateY(-1px);
}
.seed-stage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.seed-stage font-kku {
  font-family: inherit;
}
.seed-stage + .anim-desc {
  margin-top: 0.75rem;
}

/* Standalone grid heading (matches .demo-panel h2 typography). */
.demo-shell > h2 {
  margin: 1.5rem 0 0.8rem;
  font-family: var(--demo-serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  color: var(--demo-ink);
  line-height: 1.2;
}

/* Global motion pause toggle ([data-motion-toggle] button). */
[data-motion-paused] font-kku *,
[data-motion-paused] .font-kku * {
  animation-play-state: paused !important;
}

:where(font-kku[data-fy-animate^="jamo-"]) [part~="jamo"] {
  --fy-jamo-base-top: var(--fy-top, var(--fy-slot-top, var(--fy-role-top, 0)));
  --fy-jamo-base-left: var(--fy-left, var(--fy-slot-left, var(--fy-role-left, 0)));
}

:where(font-kku[data-fy-animate="jamo-rise"]) [part~="jamo"] {
  animation: fy-jamo-rise 520ms cubic-bezier(.18, .86, .28, 1) both;
  animation-delay: calc(var(--fy-glyph-index, 0) * 70ms + var(--fy-jamo-index, 0) * 26ms);
}

:where(font-kku[data-fy-animate="jamo-stagger"]) [part~="jamo"] {
  animation: fy-jamo-stagger 700ms ease both;
  animation-delay: calc(var(--fy-glyph-index, 0) * 90ms + var(--fy-jamo-index, 0) * 32ms);
}

:where(font-kku[data-fy-animate="jamo-wave"]) [part~="jamo"] {
  animation: fy-jamo-wave 1.7s ease-in-out infinite;
  animation-delay: calc(var(--fy-jamo-index, 0) * -90ms);
}

:where(font-kku[data-fy-animate="jamo-spark"]) [part~="jamo"] {
  animation: fy-jamo-spark 1.9s ease-in-out infinite;
  animation-delay: calc(var(--fy-jamo-index, 0) * -110ms);
}

:where(font-kku[data-fy-animate="jamo-assemble"]) [part~="jamo"] {
  --fy-jamo-start-x: 0;
  --fy-jamo-start-y: 0;
  animation: fy-jamo-assemble 760ms cubic-bezier(.16, .84, .32, 1) both;
  animation-delay: calc(var(--fy-glyph-index, 0) * 70ms + var(--fy-jamo-index, 0) * 18ms);
}
:where(font-kku[data-fy-animate="jamo-assemble"]) [part~="choseong"] {
  --fy-jamo-start-x: -0.16em;
  --fy-jamo-start-y: -0.12em;
}
:where(font-kku[data-fy-animate="jamo-assemble"]) [part~="jungseong"] {
  --fy-jamo-start-x: 0.18em;
  --fy-jamo-start-y: 0.04em;
}
:where(font-kku[data-fy-animate="jamo-assemble"]) [part~="jongseong"] {
  --fy-jamo-start-x: -0.04em;
  --fy-jamo-start-y: 0.18em;
}

:where(font-kku[data-fy-animate="jamo-type"]) [part~="jamo"] {
  animation: fy-jamo-type 150ms ease-out both;
  animation-delay: calc(var(--fy-jamo-input-order, 0) * 150ms);
}

:where(font-kku[data-fy-animate="jamo-roles"]) [part~="choseong"] {
  animation: fy-jamo-choseong 2.4s ease-in-out infinite;
}
:where(font-kku[data-fy-animate="jamo-roles"]) [part~="jungseong"] {
  animation: fy-jamo-jungseong 2.4s ease-in-out infinite;
  animation-delay: -800ms;
}
:where(font-kku[data-fy-animate="jamo-roles"]) [part~="jongseong"] {
  animation: fy-jamo-jongseong 2.4s ease-in-out infinite;
  animation-delay: -1.6s;
}

/* Custom demo hook: per-jamo drift using --fy-jamo-seed */
:where(font-kku[font="sebul"][data-fy-animate="jamo-drift"]) [part~="jamo"] {
  transform-origin: center;
  animation: fy-seed-drift 3.2s ease-in-out infinite;
  animation-delay: calc((var(--fy-jamo-seed, 0.5) - 0.5) * 2s);
}
@keyframes fy-jamo-rise {
  from {
    opacity: 0;
    inset-block-start: calc(var(--fy-jamo-base-top) + 0.18em);
  }
  to {
    opacity: 1;
    inset-block-start: var(--fy-jamo-base-top);
  }
}
@keyframes fy-jamo-stagger {
  0% {
    opacity: 0;
    filter: blur(0.025em);
  }
  70%, 100% {
    opacity: 1;
    filter: none;
  }
}
@keyframes fy-jamo-wave {
  0%, 100% {
    inset-block-start: var(--fy-jamo-base-top);
  }
  50% {
    inset-block-start: calc(var(--fy-jamo-base-top) - 0.1em);
  }
}
@keyframes fy-jamo-spark {
  0%, 100% {
    opacity: 0.82;
    color: inherit;
    text-shadow: none;
    filter: none;
  }
  45% {
    opacity: 1;
    color: #bd3a2a;
    text-shadow: 0 0 0.22em rgba(189, 58, 42, 0.36);
    filter: brightness(1.12);
  }
}
@keyframes fy-jamo-assemble {
  from {
    opacity: 0;
    inset-block-start: calc(var(--fy-jamo-base-top) + var(--fy-jamo-start-y));
    inset-inline-start: calc(var(--fy-jamo-base-left) + var(--fy-jamo-start-x));
  }
  to {
    opacity: 1;
    inset-block-start: var(--fy-jamo-base-top);
    inset-inline-start: var(--fy-jamo-base-left);
  }
}
@keyframes fy-jamo-type {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(0.025em);
  }
  80% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}
@keyframes fy-jamo-choseong {
  0%, 100% { color: inherit; opacity: 0.82; }
  35% { color: #9a3f2a; opacity: 1; }
}
@keyframes fy-jamo-jungseong {
  0%, 100% { color: inherit; opacity: 0.82; }
  35% { color: #246a73; opacity: 1; }
}
@keyframes fy-jamo-jongseong {
  0%, 100% { color: inherit; opacity: 0.82; }
  35% { color: #6b5b9a; opacity: 1; }
}
@keyframes fy-seed-drift {
  0%, 100% {
    inset-block-start: var(--fy-jamo-base-top);
    opacity: 0.9;
    filter: none;
  }
  50%      {
    inset-block-start: calc(var(--fy-jamo-base-top) - 0.04em);
    opacity: 1;
    filter: drop-shadow(0 0 0.12em rgba(189, 58, 42, 0.22));
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(font-kku[data-fy-animate^="jamo-"]) [part~="jamo"],
  :where(font-kku[data-fy-animate="jamo-drift"]) [part~="jamo"] {
    animation: none !important;
    transition: none !important;
  }
}