.roll-band { position: relative; isolation: isolate; overflow: hidden; background: var(--photo-black); padding: clamp(3.5rem, 8vh, 5.5rem) 0 clamp(3.5rem, 8vh, 5.5rem); } .roll-band .rb-copy { position: relative; z-index: 3; text-align: center; } .roll-band .rb-top { margin-bottom: clamp(2rem, 5vh, 3rem); } .roll-band .rb-bottom { margin-top: clamp(2rem, 5vh, 3rem); } .rb-track { position: relative; z-index: 1; height: clamp(220px, 32vh, 340px); overflow: hidden; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 9%, #000 91%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 9%, #000 91%, transparent 100% ); } .rb-run { display: flex; height: 100%; width: max-content; animation: rb-roll 63s linear infinite; } .rb-run img { height: 100%; width: auto; display: block; flex: 0 0 auto; filter: grayscale(1) contrast(1.02); } @keyframes rb-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .rb-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 2; pointer-events: none; background: radial-gradient( 72% 60% at 50% 116%, rgba(255, 92, 57, 0.3) 0%, rgba(255, 92, 57, 0) 66% ); } .rb-stage { position: relative; } .rb-pause { position: absolute; z-index: 4; right: clamp(0.9rem, 2.4vw, 1.6rem); bottom: clamp(0.9rem, 2.4vw, 1.6rem); width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; color: var(--cream); background: rgba(12, 12, 14, 0.62); border: 1px solid rgba(249, 247, 242, 0.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .rb-pause:hover { background: rgba(12, 12, 14, 0.82); color: var(--orange); border-color: var(--orange); } .rb-pause:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .rb-pause svg { width: 17px; height: 17px; display: block; fill: currentColor; } .rb-pause .rb-i-play { display: none; } .roll-band.is-paused .rb-run { animation-play-state: paused; } .roll-band.is-paused .rb-pause .rb-i-pause { display: none; } .roll-band.is-paused .rb-pause .rb-i-play { display: block; } @media (prefers-reduced-motion: reduce) { .rb-run { animation: none; } .rb-pause { display: none; } } @media (max-width: 640px) { .roll-band { padding: clamp(2.6rem, 7vh, 4rem) 0; } .rb-track { height: clamp(190px, 30vh, 260px); } .rb-run { animation-duration: 55s; } }