/* Feature clips on the homepage (src/web/home/clips.rs). Everything inside is
   sized in em off a width-based font size, so a clip scales like a video. Base
   styles are the last frame, which is what reduced-motion visitors get. */

.fc {
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 740 / 415;
}
.fc-stage {
    position: relative;
    height: 100%;
    overflow: hidden;
    font-size: 2.2cqw;
    line-height: 1.35;
    color: var(--color-base-content);
    background: var(--color-base-100);
    border: 1px solid var(--color-base-300);
    border-radius: 0.75rem;
}
.fc-body {
    position: absolute;
    inset: 0;
    animation: fc-loop 10s linear infinite;
}
.fc-cursor {
    position: absolute;
    top: 86%;
    left: 80%;
    z-index: 5;
    width: 1.7em;
    height: 1.7em;
    filter: drop-shadow(0 0.1em 0.2em rgb(0 0 0 / 0.35));
}
.fc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    align-items: center;
    font-size: 0.9em;
    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.fc-strong {
    font-weight: 600;
    color: var(--color-base-content);
}
.fc-tag {
    padding: 0.1em 0.65em;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-base-content) 18%, transparent);
    border-radius: 1em;
}
.fc-tag-lead {
    color: var(--color-success-content);
    background: var(--color-success);
    border-color: transparent;
}
.fc-tag-warn {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    border-color: transparent;
}
.fc-text {
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.fc-btn {
    padding: 0.3em 0.7em;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.35em;
}
.fc-btn-ghost {
    border: 1px solid var(--color-base-300);
}
.fc-btn-primary {
    color: var(--color-primary-content);
    background: var(--color-primary);
}
.fc-btn-end {
    margin-left: auto;
}
.fc-credit {
    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.fc-success {
    color: var(--color-success);
}
/* Two values in one grid cell; the keyframes swap which one shows. */
.fc-swap {
    display: inline-grid;
    justify-items: center;
}
.fc-swap > * {
    grid-area: 1 / 1;
}
.fc-swap-start {
    align-items: center;
    justify-items: start;
}

/* Reply */
.fc-post {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    padding: 1.6em;
}
.fc-clicks {
    margin-left: auto;
    color: var(--color-success);
}
.fc-draft {
    position: relative;
    flex: 1;
    padding: 0.7em 0.9em;
    background: var(--color-base-200);
    border: 1px solid var(--color-base-300);
    border-radius: 0.5em;
}
.fc-spin {
    position: absolute;
    top: 0.8em;
    left: 0.9em;
    width: 1em;
    height: 1em;
    border: 0.15em solid var(--color-base-300);
    border-top-color: var(--color-base-content);
    border-radius: 50%;
}
.fc-r-spin {
    opacity: 0;
    animation: fc-r-spin 10s linear infinite;
}
.fc-actions {
    position: relative;
    height: 2.2em;
}
.fc-action-row {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 0.4em;
    align-items: center;
}
.fc-copy-from,
.fc-mark-from {
    opacity: 0;
}
.fc-copy-from {
    animation: fc-copy-from 10s step-end infinite;
}
.fc-copy-to {
    animation: fc-copy-to 10s step-end infinite;
}
.fc-mark-from {
    animation: fc-mark-from 10s step-end infinite;
}
.fc-mark-to {
    animation: fc-mark-to 10s step-end infinite;
}
.fc-cursor-reply {
    animation: fc-cursor-reply 10s ease-in-out infinite;
}

/* Leads */
.fc-leads {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    padding: 1.3em 1.4em;
}
.fc-leads-head {
    display: flex;
    gap: 0.6em;
    align-items: baseline;
}
.fc-count {
    font-size: 1.3em;
    font-weight: 700;
}
.fc-lead {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    padding: 0.7em 0.9em;
    background: var(--color-base-200);
    border-radius: 0.5em;
}
.fc-lead-hot {
    box-shadow: inset 0.2em 0 0 var(--color-success);
}
.fc-lead-text {
    font-weight: 500;
}
.fc-dismiss {
    opacity: 0;
    animation: fc-dismiss 10s linear infinite;
}
.fc-cursor-leads {
    animation: fc-cursor-leads 10s ease-in-out infinite;
}

/* Moment */
.fc-moment {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1.4em;
}
.fc-spark {
    flex: 1;
    width: 100%;
    min-height: 0;
}
.fc-spark-line {
    fill: none;
    stroke: var(--color-warning);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    animation: fc-spark 10s linear infinite;
}
.fc-moment-card {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 0.9em 1em;
    background: var(--color-base-200);
    border-radius: 0.5em;
    box-shadow: inset 0.2em 0 0 var(--color-warning);
}
.fc-moment-foot {
    display: flex;
    gap: 0.9em;
    align-items: center;
}
.fc-link {
    text-decoration: underline;
}
.fc-hourly-from {
    animation: fc-hourly-from 10s step-end infinite;
    opacity: 0;
}
.fc-hourly-to {
    font-size: 0.9em;
    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
    animation: fc-hourly-to 10s step-end infinite;
}
.fc-cursor-moment {
    animation: fc-cursor-moment 10s ease-in-out infinite;
}

/* Shared timing: fc-in-N appears at N% and stays, fc-out-N leaves at N%,
   fc-type-A-B types a line between A% and B%. */
.fc-in-10 { animation: fc-in-10 10s linear infinite; }
.fc-in-16 { animation: fc-in-16 10s linear infinite; }
.fc-in-22 { animation: fc-in-22 10s linear infinite; }
.fc-in-28 { animation: fc-in-28 10s linear infinite; }
.fc-in-34 { animation: fc-in-34 10s linear infinite; }
.fc-in-50 { animation: fc-in-50 10s linear infinite; }
.fc-in-84 { animation: fc-in-84 10s linear infinite; }
.fc-out-50 {
    opacity: 0;
    animation: fc-out-50 10s linear infinite;
}
.fc-type-28-50 {
    display: inline-block;
    animation: fc-type-28-50 10s linear infinite;
}

@keyframes fc-loop {
    0%, 100% { opacity: 0; }
    3%, 96% { opacity: 1; }
}
@keyframes fc-in-10 {
    0%, 10% { opacity: 0; transform: translateY(0.5em); }
    12%, 100% { opacity: 1; transform: none; }
}
@keyframes fc-in-16 {
    0%, 16% { opacity: 0; transform: translateY(0.5em); }
    18%, 100% { opacity: 1; transform: none; }
}
@keyframes fc-in-22 {
    0%, 22% { opacity: 0; transform: translateY(0.5em); }
    24%, 100% { opacity: 1; transform: none; }
}
@keyframes fc-in-28 {
    0%, 28% { opacity: 0; transform: translateY(0.5em); }
    30%, 100% { opacity: 1; transform: none; }
}
@keyframes fc-in-34 {
    0%, 34% { opacity: 0; transform: translateY(0.5em); }
    36%, 100% { opacity: 1; transform: none; }
}
@keyframes fc-in-50 {
    0%, 50% { opacity: 0; }
    51%, 100% { opacity: 1; }
}
@keyframes fc-in-84 {
    0%, 84% { opacity: 0; transform: translateY(0.3em); }
    86%, 100% { opacity: 1; transform: none; }
}
@keyframes fc-out-50 {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
@keyframes fc-type-28-50 {
    0% { clip-path: inset(0 100% 0 0); }
    28% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(40, end); }
    50%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes fc-r-spin {
    0%, 17% { opacity: 0; transform: rotate(0); }
    18% { opacity: 1; transform: rotate(0); }
    27% { opacity: 1; transform: rotate(720deg); }
    28%, 100% { opacity: 0; }
}
@keyframes fc-copy-from {
    0% { opacity: 1; }
    60% { opacity: 0; }
}
@keyframes fc-copy-to {
    0% { opacity: 0; }
    60% { opacity: 1; }
}
@keyframes fc-mark-from {
    0% { opacity: 1; }
    74% { opacity: 0; }
}
@keyframes fc-mark-to {
    0% { opacity: 0; }
    74% { opacity: 1; }
}
@keyframes fc-cursor-reply {
    0%, 3% { top: 60%; left: 60%; transform: scale(1); }
    13% { top: 88%; left: 12%; transform: scale(1); }
    15% { top: 88%; left: 12%; transform: scale(0.8); }
    20%, 50% { top: 70%; left: 45%; transform: scale(1); }
    58% { top: 91%; left: 9%; transform: scale(1); }
    60% { top: 91%; left: 9%; transform: scale(0.8); }
    62%, 64% { top: 91%; left: 9%; transform: scale(1); }
    72% { top: 91%; left: 64%; transform: scale(1); }
    74% { top: 91%; left: 64%; transform: scale(0.8); }
    76% { top: 91%; left: 64%; transform: scale(1); }
    86%, 100% { top: 60%; left: 60%; transform: scale(1); }
}
@keyframes fc-dismiss {
    0%, 34% { opacity: 0; transform: translateY(0.5em); }
    36%, 62% { opacity: 1; transform: none; }
    66%, 100% { opacity: 0; transform: translateX(1.5em); }
}
@keyframes fc-cursor-leads {
    0%, 40% { top: 86%; left: 80%; transform: scale(1); }
    58% { top: 80%; left: 93%; transform: scale(1); }
    60% { top: 80%; left: 93%; transform: scale(0.8); }
    62% { top: 80%; left: 93%; transform: scale(1); }
    74%, 100% { top: 86%; left: 80%; transform: scale(1); }
}
@keyframes fc-spark {
    0%, 4% { stroke-dashoffset: 1; }
    32%, 100% { stroke-dashoffset: 0; }
}
@keyframes fc-hourly-from {
    0% { opacity: 1; }
    64% { opacity: 0; }
}
@keyframes fc-hourly-to {
    0% { opacity: 0; }
    64% { opacity: 1; }
}
@keyframes fc-cursor-moment {
    0%, 42% { top: 40%; left: 70%; transform: scale(1); }
    60% { top: 90%; left: 36%; transform: scale(1); }
    62% { top: 90%; left: 36%; transform: scale(0.8); }
    64% { top: 90%; left: 36%; transform: scale(1); }
    78%, 100% { top: 40%; left: 70%; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fc-body,
    .fc-body * {
        animation: none !important;
    }
    .fc-cursor {
        display: none;
    }
}