/* Explain: CSS for the happy families gallery, including entry and typing animations. */
/* Mutlu Ailelerimiz galerisi: giriş ve yazı yazma animasyonları */
.gallery-reveal .family-photo {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms ease, box-shadow 400ms ease;
}

.gallery-reveal .family-photo.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-reveal .family-photo:nth-child(3n + 2) {
    transition-delay: 90ms;
}

.gallery-reveal .family-photo:nth-child(3n) {
    transition-delay: 180ms;
}

.family-caption.is-typing::after {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    background: var(--accent-color);
    vertical-align: -0.12em;
    content: "";
    animation: captionCaret 0.8s steps(1) infinite;
}

@keyframes captionCaret {
    0%,
    50% {
        opacity: 1;
    }
    50.01%,
    100% {
        opacity: 0;
    }
}

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

    .family-caption.is-typing::after {
        animation: none;
    }
}