
#translations { row-gap:36px; }
.translation-marquee { grid-column:1/-1; min-width:0; overflow:hidden; background:#eee9ee; padding:34px 0 26px; position:relative; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.translation-track { display:flex; width:max-content; animation:translation-drift 52s linear infinite; animation-play-state:paused; will-change:transform; }
.translation-group { display:flex; flex:none; gap:28px; padding-right:28px; }
.translation-card { flex:none; width:clamp(210px,24vw,310px); margin:0; }
.translation-card img { display:block; width:100%; height:auto; aspect-ratio:1191/1684; object-fit:contain; background:white; box-shadow:0 8px 24px #28152f15; }
.translation-card figcaption { text-align:center; font-size:18px; font-weight:500; line-height:1.4; color:#5f016f; margin-top:18px; }
.translation-marquee.is-visible:not(.is-paused):not(.is-hidden) .translation-track { animation-play-state:running; }
.translation-motion { grid-column:1/-1; display:flex; justify-content:flex-end; margin-top:-18px; }
.translation-motion button { border:1px solid #d6d1d8; background:transparent; color:#67576c; border-radius:24px; padding:9px 15px; font:13px 'DM Sans',Arial,sans-serif; cursor:pointer; }
.translation-motion button:focus-visible { outline:2px solid #690078; outline-offset:3px; }
@keyframes translation-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(max-width:600px) { .translation-marquee { padding:24px 0 20px; } .translation-group { gap:20px; padding-right:20px; } .translation-card figcaption { margin-top:14px; font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .translation-marquee { overflow-x:auto; mask-image:none; scroll-snap-type:x proximity; } .translation-track { animation:none; will-change:auto; } .translation-group[aria-hidden=true] { display:none; } .translation-card { scroll-snap-align:start; } .translation-motion { display:none; } }
