with the SAME background image but offset background-position-x so the visible slice = that strip's region of the logo. image 1672x941 displayed at 540x303.7 (scale 0.323) DEUCE band: image y 337..603 → display y 109..195 (height 86) wrap height 96, center y=48 → bg-position-y = -104 */ .logo-blocks { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .logo-block { position: absolute; top: 0; bottom: 0; background-image: url('media/deuce-logo.png'); background-size: 540px auto; background-repeat: no-repeat; opacity: 0; /* background-position-x is set per-block via JS so each strip shows its own region */ } .ph-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; } /* placeholder pieces (Phase 1) — small INVERSION WINDOWS, not solid black rects. backdrop-filter: invert(1) flips whatever is behind the piece: - over white background → appears as a BLACK square - over a black logo block behind → that part of the logo appears WHITE This is the Sutera trick: the rect itself looks black, but any logo geometry beneath shows up as white inside the rect. */ .ph-piece { position: absolute; background: transparent; -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); opacity: 0; } /* White squares — a SECOND independent stream that hides the logo where they fall (white-on-black-or-white logo region erases visibility there). Sized identically to the black inversion squares; random positions/timing chosen independently. */ .ph-white { position: absolute; background: #ffffff; opacity: 0; } /* white covers (Phase 4) — exact 5-equal-strip partition of the DEUCE band so each strip fully erases its letter when its opacity reaches 1 */ .cv { position: absolute; top: -10%; bottom: -10%; background: #ffffff; opacity: 0; } .cv[data-i="0"] { left: 9.4%; width: 16.52%; } .cv[data-i="1"] { left: 25.92%; width: 16.52%; } .cv[data-i="2"] { left: 42.44%; width: 16.52%; } .cv[data-i="3"] { left: 58.96%; width: 16.52%; } .cv[data-i="4"] { left: 75.48%; width: 16.52%; } /* ===== Subtext (scramble decode) ===== */ .subtext-svg { display: block; margin: 22px auto 0; width: 540px; height: 18px; opacity: 0; /* SVG text rendering bypasses Chromium's DOM-text RGB subpixel rasterizer, which is what was producing per-glyph color fringes during scramble */ shape-rendering: geometricPrecision; } .subtext-svg text { text-transform: uppercase; font-weight: 400; } /* ===== Bottom progress bar + counter ===== */ .bar-track { position: fixed; left: 0; right: 0; bottom: 0; height: 1px; background: #ececec; z-index: 10000; } .bar-fill { position: fixed; left: 0; bottom: 0; height: 2px; width: 0; background: #000; z-index: 10001; will-change: width; } .counter { position: fixed; bottom: 9px; left: 0; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; letter-spacing: 0.12em; color: #000; opacity: 0; white-space: nowrap; pointer-events: none; z-index: 10002; will-change: left, transform; } /* ===== Mobile: pull the logo back into frame ===== The whole stage (logo blocks + subtext) is hard-keyed to a 540px design width, which overflows narrow viewports (the DEUCE wordmark bleeds off both edges). Scaling .stage as one transform shrinks everything *proportionally* — the per-block %/px geometry and the timeline animation stay pixel-identical, just rendered smaller. The bar-fill/counter (position:fixed, outside .stage) are untouched, so the JS getBoundingClientRect math is unaffected. Tune the single scale() value to taste (smaller = more pulled-back). */ @media (max-width: 600px) { .stage { transform: translate(-50%, -50%) scale(0.54); } } @media (max-width: 360px) { .stage { transform: translate(-50%, -50%) scale(0.46); } }