/* Components: marquee, lightbox, modal, helpers */

/* Marquee */
.marquee { --speed: 35s; }
.marquee__track { animation: marquee var(--speed) linear infinite; }
.marquee:hover .marquee__track { animation-duration: calc(var(--speed) * 1.5); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Lightbox overlay */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; z-index: 60; backdrop-filter: blur(2px); }
.lightbox.open { display: grid; place-items: center; }
.lightbox__inner { background: white; padding: 1rem; border-radius: var(--radius); width: min(900px, 92%); box-shadow: var(--shadow-md); }
.lightbox__img { width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); }
.lightbox__caption { font-size: var(--fs-sm); color: rgba(28,28,26,.7); margin-top: .5rem; }

/* Dialog: demo notice */
dialog#demoNotice { border: none; border-radius: 16px; width: min(560px, 92%); box-shadow: var(--shadow-md); padding: 1.25rem 1.25rem 1rem; }
dialog#demoNotice::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.notice__title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: .25rem; }
.notice__body { color: rgba(28,28,26,.78); }
.notice__actions { margin-top: 1rem; display: flex; gap: .6rem; justify-content: flex-end; }

/* Small helpers */
.pill { display: inline-block; padding: .3rem .6rem; border: 1px solid rgba(28,28,26,.12); border-radius: 999px; font-size: var(--fs-sm); color: rgba(28,28,26,.7); }
.accent { color: var(--color-accent); }
.gold { color: var(--color-gold); }