/* Hero right: in-place showcase on #home only (loads after style.css). */

#home .hero-image-wrapper {
    overflow: hidden;
}

#home .hero-right .hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: min(760px, 100%);
    margin: 0 auto;
    min-height: min(52vh, 440px);
    aspect-ratio: 4 / 3;
}

#home .hero-right .hero-mockup-image {
    z-index: 2;
}

#home .hero-right .animated-circle {
    z-index: 0;
}

#home .hero-mockup-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: infinite;
    animation-name: none;
}

#home .hero-mockup-image img {
    width: 100%;
    max-width: min(100%, 720px);
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

@keyframes hero-inplace-1 {
    0%, 100% { opacity: 0; transform: translate(0, -12%); }
    2% { opacity: 0; transform: translate(0, -12%); }
    8% { opacity: 1; transform: translate(0, 0); }
    20% { opacity: 1; transform: translate(0, 0); }
    25% { opacity: 0; transform: translate(0, 0); }
    26%, 74% { opacity: 0; transform: translate(0, 12%); }
    76% { opacity: 0; transform: translate(0, 12%); }
    82% { opacity: 1; transform: translate(0, 0); }
    94% { opacity: 1; transform: translate(0, 0); }
    99.5% { opacity: 0; transform: translate(0, 0); }
}

@keyframes hero-inplace-2 {
    0%, 24.5% { opacity: 0; transform: translate(-12%, 0); }
    27% { opacity: 0; transform: translate(-12%, 0); }
    33% { opacity: 1; transform: translate(0, 0); }
    45% { opacity: 1; transform: translate(0, 0); }
    49.5% { opacity: 0; transform: translate(0, 0); }
    50%, 100% { opacity: 0; transform: translate(-12%, 0); }
}

@keyframes hero-inplace-3 {
    0%, 49.5% { opacity: 0; transform: translate(12%, 0); }
    52% { opacity: 0; transform: translate(12%, 0); }
    58% { opacity: 1; transform: translate(0, 0); }
    70% { opacity: 1; transform: translate(0, 0); }
    74.5% { opacity: 0; transform: translate(0, 0); }
    75%, 100% { opacity: 0; transform: translate(12%, 0); }
}

#home .hero-mockup-image-1 { animation-name: hero-inplace-1; animation-duration: 16s; }
#home .hero-mockup-image-2 { animation-name: hero-inplace-2; animation-duration: 16s; }
#home .hero-mockup-image-3 { animation-name: hero-inplace-3; animation-duration: 16s; }

@media (prefers-reduced-motion: reduce) {
    #home .hero-mockup-image { animation: none !important; opacity: 0; transform: none !important; }
    #home .hero-mockup-image-1 { opacity: 1; }
}