/*
 * Motion layer for the OnayDOC home page.
 * Keep movement calm, monochrome, and optional for reduced-motion users.
 */

.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.motion-ready [data-reveal="scale"] {
    transform:
        translateY(18px)
        scale(0.985);
}

.motion-ready [data-reveal-delay="1"] {
    transition-delay: 80ms;
}

.motion-ready [data-reveal-delay="2"] {
    transition-delay: 160ms;
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
    will-change: auto;
}

.motion-ready .document-sheet {
    animation:
        document-float
        6s ease-in-out infinite;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.status-lock {
    width: 18px;
    height: 18px;
    display: block;
    overflow: visible;
    flex: 0 0 18px;
}

.status-lock rect,
.status-lock path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.status-lock__closed {
    animation:
        lock-closed
        3.2s ease-in-out infinite;
}

.status-lock__open {
    opacity: 0;
    animation:
        lock-open
        3.2s ease-in-out infinite;
}

.motion-ready .signature-card__mark {
    animation:
        verified-mark
        3.2s ease-in-out infinite;
}

@keyframes document-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes lock-closed {
    0%,
    40%,
    82%,
    100% {
        opacity: 1;
    }

    50%,
    72% {
        opacity: 0;
    }
}

@keyframes lock-open {
    0%,
    40%,
    82%,
    100% {
        opacity: 0;
    }

    50%,
    72% {
        opacity: 1;
    }
}

@keyframes verified-mark {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(21, 23, 26, 0);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(21, 23, 26, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-ready [data-reveal],
    .motion-ready [data-reveal="scale"] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .motion-ready .document-sheet,
    .status-lock__closed,
    .status-lock__open,
    .motion-ready .signature-card__mark {
        animation: none;
    }

    .status-lock__closed {
        opacity: 1;
    }

    .status-lock__open {
        opacity: 0;
    }
}