/* What's new (#380): the small loops beside each entry, built by renderWhatsNewMedia().
   Every still demo is one 9 s loop; sizes follow the demo's width (cqw). */
.wn-demo{position:relative;aspect-ratio:16/10;container-type:inline-size;border-radius:1rem;overflow:hidden;background:#f3f4f6;outline:1px solid #1118270d}
.wn-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wn-chip{position:absolute;top:3.5cqw;left:3.5cqw;padding:.8cqw 2cqw;border-radius:999px;background:#ffffffeb;color:#111827;font:600 max(11px,2.6cqw)/1.2 Inter,sans-serif;box-shadow:0 2px 8px #0002}
.wn-chip-before{animation:wn-before 9s infinite}
.wn-chip-after{opacity:0;background:#b05039;color:#fff;animation:wn-after 9s infinite}

/* Room photo, the added photos rise in, then the result wipes (or fades) over the room. */
.wn-result{animation:wn-wipe 9s infinite}
.wn-fade .wn-result{animation-name:wn-fade}
.wn-refs{position:absolute;right:3.5cqw;bottom:4cqw;display:flex;gap:2cqw}
.wn-ref{width:21cqw;aspect-ratio:1;border-radius:1.6cqw;overflow:hidden;background:#fff;box-shadow:0 6px 20px #11182733;outline:2px solid #fff;opacity:0;animation:wn-ref 9s infinite;animation-delay:calc(var(--i) * .3s)}
.wn-ref img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes wn-ref{0%,6%{opacity:0;transform:translateY(25%) scale(.92)}14%,38%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-12%) scale(.7)}}
@keyframes wn-wipe{0%,42%{clip-path:inset(0 100% 0 0);opacity:1}58%,88%{clip-path:inset(0);opacity:1}96%,100%{clip-path:inset(0);opacity:0}}
@keyframes wn-fade{0%,42%{opacity:0}56%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes wn-before{0%,40%{opacity:1}46%,94%{opacity:0}100%{opacity:1}}
@keyframes wn-after{0%,52%{opacity:0}58%,88%{opacity:1}94%,100%{opacity:0}}

/* Crop: the frame moves through 16:9, 9:16 and 1:1 on a 16:10 photo. */
.wn-frame{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 999px #111827a6;animation:wn-crop 9s infinite}
.wn-formats{left:50%;top:auto;bottom:3.5cqw;transform:translateX(-50%);display:grid;opacity:0;animation:wn-formats 9s infinite}
.wn-format{grid-area:1/1;text-align:center;opacity:0;animation:wn-f1 9s infinite}
.wn-format:nth-child(2){animation-name:wn-f2}
.wn-format:nth-child(3){animation-name:wn-f3}
@keyframes wn-crop{0%,6%{width:100%;height:100%;opacity:0}10%{width:100%;height:100%;opacity:1}14%,30%{width:96%;height:86.4%;opacity:1}38%,56%{width:32.3%;height:92%;opacity:1}64%,84%{width:57.5%;height:92%;opacity:1}92%,100%{width:100%;height:100%;opacity:0}}
@keyframes wn-formats{0%,10%{opacity:0}14%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes wn-f1{0%,12%{opacity:0}15%,32%{opacity:1}35%,100%{opacity:0}}
@keyframes wn-f2{0%,35%{opacity:0}38%,58%{opacity:1}61%,100%{opacity:0}}
@keyframes wn-f3{0%,61%{opacity:0}64%,86%{opacity:1}89%,100%{opacity:0}}

/* 4K: a soft detail turns sharp behind a moving line. */
.wn-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 8px #0006;opacity:0;animation:wn-line 9s infinite}
@keyframes wn-line{0%,42%{left:0;opacity:0}44%{opacity:1}58%{left:100%;opacity:1}60%,100%{left:100%;opacity:0}}

@media (prefers-reduced-motion:reduce){
    .wn-demo *{animation:none !important}
    .wn-result,.wn-chip-after{opacity:1;clip-path:none}
    .wn-chip-before,.wn-ref,.wn-frame,.wn-formats,.wn-line{display:none}
}