.animation-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.animation-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-block);
background: var(--bg);
}
.animation-card[hidden] { display: none; }
.animation-stage {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #11151d;
isolation: isolate;
}
.animation-frame,
.animation-lid,
.animation-scene,
.animation-shake-base,
.animation-shake-echo,
.animation-shake-overlay {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.animation-stage--contain .animation-frame {
object-fit: contain;
}
.animation-stage--indicator .animation-frame {
inset: auto;
right: 9.5%;
bottom: 2%;
width: 28px;
height: 28px;
object-fit: contain;
}
.animation-scene {
z-index: 0;
}
.animation-frame {
opacity: 0;
transition: opacity 0s;
}
.animation-frame.is-visible {
opacity: 1;
}
.animation-lid {
z-index: 1;
}
.animation-lid--upper {
transform: translateY(-100%);
}
.animation-lid--lower {
transform: translateY(100%);
}
.animation-stage[data-lids="closed"] .animation-lid {
transform: translateY(0);
}
.animation-stage--snow {
background: linear-gradient(#101c2d, #28465d);
}
.animation-snow {
display: block;
width: 100%;
height: 100%;
}
.animation-stage--shake .animation-shake-echo {
clip-path: inset(0);
opacity: 1;
}
.animation-shake-echo:not([src]) { visibility: hidden; }
.animation-stage--shake .animation-shake-overlay {
z-index: 1;
}
.animation-stage--sequence .animation-effect-overlay,
.animation-stage--flash .animation-effect-overlay,
.animation-stage--blackout .animation-effect-overlay {
position: absolute;
z-index: 2;
inset: 0;
background: #fff;
opacity: 0;
pointer-events: none;
}
.animation-stage--sequence .animation-effect-overlay,
.animation-stage--blackout .animation-effect-overlay {
background: #000;
}
.animation-card-body {
padding: 15px 17px 17px;
}
.animation-card-body h3 {
margin: 0;
font-family: var(--font-serif);
font-size: 1.25rem;
line-height: 1.35;
}
.animation-card-body p {
min-height: 3em;
margin: 7px 0 14px;
color: var(--text-soft);
font-size: var(--fs-ui);
line-height: 1.5;
}
.animation-variant-label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
color: var(--text-soft);
font-size: var(--fs-ui);
}
.animation-variant-label select {
min-width: 0;
max-width: 100%;
min-height: 44px;
padding: 5px 28px 5px 9px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text);
font: inherit;
}
.animation-variant-label select:focus-visible,
.animation-play:focus-visible,
.animation-card-actions a:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
}
.animation-card-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 16px;
}
.animation-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
background: var(--accent);
color: var(--bg);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.animation-play span { display: inline-flex; }
.animation-play span[hidden] { display: none; }
.animation-play:hover {
border-color: var(--accent-hover);
background: var(--accent-hover);
}
.animation-play[aria-pressed="true"] {
background: transparent;
color: var(--text);
}
.animation-card-actions a {
color: var(--link);
font-size: var(--fs-ui);
}
@media (max-width: 48em) {
.animation-gallery {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.animation-card-body p {
min-height: 0;
}
}
.animation-section { margin-bottom: 36px; }
.animation-name { display: block; margin-top: 5px; color: var(--text-soft); overflow-wrap: anywhere; }
.animation-related { margin-top: 12px; font-size: var(--fs-ui); }
.animation-related summary { cursor: pointer; color: var(--link); }
.animation-related ul { margin: 8px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.animation-related a { color: var(--link); }
.animation-card-body .animation-error { min-height: 0; color: var(--text); }
.animation-play[hidden], .animation-error[hidden],
.animation-tools[hidden], .animation-timeline[hidden], .animation-empty[hidden] { display: none; }
.animation-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 24px; }
.animation-search { flex: 1 1 320px; display: grid; gap: 6px; }
.animation-search input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; }
.animation-search input::placeholder { color: var(--text-soft); }
.animation-search input:focus-visible, .animation-timeline input:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.animation-count { padding-bottom: 12px; color: var(--text-soft); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.animation-timeline { display: flex; align-items: center; gap: 12px; margin-block: 6px 12px; }
.animation-timeline label { flex: 1; min-width: 0; }
.animation-timeline input { display: block; width: 100%; min-height: 44px; margin: 0; cursor: pointer; }
.animation-timeline output { min-width: 13ch; color: var(--text-soft); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; text-align: end; }
.animation-usage { margin-top: 12px; font-size: var(--fs-ui); }
.animation-usage summary, .animation-related summary { display: list-item; box-sizing: border-box; min-height: 44px; padding-block: 10px; cursor: pointer; color: var(--link); }
.animation-usage pre { margin: 8px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-code); background: var(--code-bg); overflow-wrap: anywhere; white-space: pre-wrap; }
.animation-card-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.animation-variant-label select { font-size: var(--fs-body); }
@media (prefers-reduced-motion: reduce) {
.animation-card *, .animation-card *::before, .animation-card *::after { transition: none; animation: none; }
}