/* Waterfall Interactive page — only loaded by waterfall.html */
.wf { padding: clamp(2.6rem, 7vw, 5.5rem) var(--pad) clamp(3rem, 7vw, 5rem); }
.wf-top { padding-bottom: clamp(2rem, 5vw, 3.4rem); }
.wf-wall { padding-top: clamp(2rem, 5vw, 3.4rem); }
.wf > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.wf-h { font-weight: 900; font-size: clamp(3rem, 11vw, 9.5rem); line-height: .86; letter-spacing: -.05em; }
.wf-h > span { display: inline-block; }
.wf-sub { margin-top: 1.2rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.4; color: var(--grey); }
.wf-sub span { display: block; max-width: 44rem; }

.pins { columns: 2; column-gap: .7rem; }
@media (min-width: 48rem) { .pins { columns: 3; column-gap: 1rem; } }
@media (min-width: 72rem) { .pins { columns: 4; } }
.pin { position: relative; display: block; margin: 0 0 .7rem; break-inside: avoid; overflow: hidden; border-radius: 14px; background: var(--pale); }
@media (min-width: 48rem) { .pin { margin-bottom: 1rem; } }
.pin img { width: 100%; aspect-ratio: var(--r, 4/3); object-fit: cover; }
.pin-t { position: absolute; inset: auto 0 0 0; padding: 2.4rem .9rem .8rem; background: linear-gradient(transparent, rgb(14 16 23 / .82)); color: var(--paper); font-weight: 700; font-size: .95rem; line-height: 1.2; opacity: 0; transform: translateY(.4rem); transition: opacity .3s, transform .3s; }
.pin:hover .pin-t { opacity: 1; transform: none; }
@media (hover: none) { .pin-t { opacity: 1; transform: none; font-size: .8rem; padding: 1.6rem .6rem .5rem; } }
@media (prefers-reduced-motion: reduce) { .pin-t { transition: none; } }

.wf-cta { margin-top: clamp(2.4rem, 5vw, 3.6rem); }

/* marquee of game titles, right to left */
.marquee { overflow: hidden; background: var(--ink); color: var(--paper); border-block: 2px solid var(--ink); }
.mq-track { display: flex; width: max-content; animation: mq 60s linear infinite; }
@media (hover: hover) { .marquee:hover .mq-track { animation-play-state: paused; } }
.mq-list { display: flex; margin: 0; padding: 0; list-style: none; }
.mq-list li { display: flex; align-items: center; white-space: nowrap; padding: clamp(1rem, 2.4vw, 1.6rem) 0; font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 3.6rem); letter-spacing: -.035em; line-height: 1; }
.mq-list li::after { content: ""; width: .5em; height: .5em; margin: 0 .9em; border-radius: 50%; background: var(--o); }
@keyframes mq { to { transform: translateX(-50%); } }
/* owner wants it moving: with Reduce Motion on it runs, only slower */
@media (prefers-reduced-motion: reduce) { .mq-track { animation: mq 160s linear infinite !important; } }  /* beats the global "* { animation: none !important }" */