/* E·SYNX · Week 5 picture tasks: picture questions, picture answers, the moving-picture film, the then/now slider, the archive gallery.
   All classes start with w5- (nothing here changes existing classes). */
.w5-ipic { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 6px; margin: 0 0 10px; }
.w5-isay { margin: 6px 0 10px; }
.w5-popts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.w5-popt { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; border-radius: 8px !important; line-height: 1.2; }
.w5-popt img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.w5-popt:hover img { transform: scale(1.04); }
.w5-popt span { display: block; padding: 6px 8px; font-size: 14px; }
.w5-popt.right { outline: 3px solid #3d7a4f; outline-offset: -3px; }
.w5-popt.wrong { opacity: .45; }

.w5-film { margin-top: 6px; }
.w5-fstage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #1e1a16; }
.w5-fslide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.w5-fslide.on { opacity: 1; }
.w5-fslide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.w5-fslide.kb img { animation: w5-kb 9s ease-out both; }
.w5-fslide:nth-child(even).kb img { animation-name: w5-kb2; }
@keyframes w5-kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes w5-kb2 { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1.03) translate(0, 0); } }
.w5-fslide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px; color: #f6f1e8;
  background: linear-gradient(transparent, rgba(15,12,9,.82)); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.w5-fen { display: block; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.35; }
.w5-fslide figcaption .zh, .w5-fslide figcaption [class*="zh"] { color: #e0d6c6; font-size: 13px; margin-top: 4px; }
.w5-fbar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.18); }
.w5-fbar i { display: block; height: 100%; width: 0; background: #e8c27a; transition: width .5s ease; }

.w5-cmp { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #1e1a16; margin-top: 6px; }
.w5-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.w5-cthen { clip-path: inset(0 calc(100% - var(--p)) 0 0); filter: sepia(.35); }
.w5-cline { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #f6f1e8; box-shadow: 0 0 10px rgba(0,0,0,.5); pointer-events: none; }
.w5-ctag { position: absolute; top: 10px; padding: 3px 9px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; background: rgba(20,16,12,.65); color: #f6f1e8; pointer-events: none; }
.w5-ctag.l { left: 10px; } .w5-ctag.r { right: 10px; }
.w5-cmp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.w5-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.w5-gal figure { margin: 0; }
.w5-gal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.w5-gal figcaption { font-size: 13px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .w5-fslide.kb img { animation: none; } .w5-fslide { transition: none; } }