Symptom
A faint ~1px light/white horizontal line in the teal of the homepage hero, at the top edge of the centre door-arch stack (.studioCenter > div:nth-child(3) = .studioArch). Firefox only (invisible in Chrome / headless Chromium). Appears after the first door→scene transition and resurfaces under vigorous scrolling, then fades. Faint and intermittent — not a hard break.
Root cause (diagnosed, not fully fixable with the current structure)
The door arch is a STACK of ~10 GPU-composited layers: the door <img>, 8 scene <img>s, and the flash — most clipped by mask-image (arch-mask-white.png, a layer-promoter), inside a box that is transform: scale()-ed AND filter: drop-shadow-ed (two more promoters). They all share a box-TOP that sits up in the teal (the box is taller than the visible dome). Firefox antialiases that shared layer-stack top edge against the teal into the line.
Confirmed via a Firefox-console getBoundingClientRect sweep: studioCenter, studioArch, studioArchImg, studioDoorScene, 8× studioPeekImg, studioFlash ALL have top@387 = the line's y. It's the stack's shared top edge, not any single element — which is why removing one layer-promoter reduces but never eliminates it.
The scene PNGs are NOT the cause: validate-arch-assets.js confirms all 9 conform to the canonical arch bbox (no fringe).
What was tried (all reduced it, none fully killed it under vigorous scroll)
transform: scale() → width/margin/top (biggest single improvement)filter: drop-shadow moved off .studioArch onto inner .studioArchImgisolation: isolate removal; outline: 1px solid transparent; clip-path: inset(28% 0 0 0)- masking the door layer identically to the scene; hiding scene/flash/door individually (line persists — shared edge)
All speculative CSS was reverted after the investigation; the codebase is back to the original arch construction.
Concrete fix (deferred — needs a restructure)
Collapse the door + scene + flash stack into ONE pre-composited layer per state (one layer can't seam against itself). E.g. render the active door/scene to a single element instead of cross-fading ~10 masked <img> layers. This is the only approach likely to fully eliminate it.
Severity
Faint, Firefox-only, vigorous-scroll-only; on the default animation house a normal visitor rarely triggers it. Low priority.
Originating skill: maintain-homepage-hero (gotcha #15). Full investigation log: firefox-arch-seam-investigation memory. Date: 2026-06-30.
Symptom
A faint ~1px light/white horizontal line in the teal of the homepage hero, at the top edge of the centre door-arch stack (
.studioCenter > div:nth-child(3)=.studioArch). Firefox only (invisible in Chrome / headless Chromium). Appears after the first door→scene transition and resurfaces under vigorous scrolling, then fades. Faint and intermittent — not a hard break.Root cause (diagnosed, not fully fixable with the current structure)
The door arch is a STACK of ~10 GPU-composited layers: the door
<img>, 8 scene<img>s, and the flash — most clipped bymask-image(arch-mask-white.png, a layer-promoter), inside a box that istransform: scale()-ed ANDfilter: drop-shadow-ed (two more promoters). They all share a box-TOP that sits up in the teal (the box is taller than the visible dome). Firefox antialiases that shared layer-stack top edge against the teal into the line.Confirmed via a Firefox-console
getBoundingClientRectsweep:studioCenter, studioArch, studioArchImg, studioDoorScene, 8× studioPeekImg, studioFlashALL havetop@387= the line's y. It's the stack's shared top edge, not any single element — which is why removing one layer-promoter reduces but never eliminates it.The scene PNGs are NOT the cause:
validate-arch-assets.jsconfirms all 9 conform to the canonical arch bbox (no fringe).What was tried (all reduced it, none fully killed it under vigorous scroll)
transform: scale()→width/margin/top(biggest single improvement)filter: drop-shadowmoved off.studioArchonto inner.studioArchImgisolation: isolateremoval;outline: 1px solid transparent;clip-path: inset(28% 0 0 0)All speculative CSS was reverted after the investigation; the codebase is back to the original arch construction.
Concrete fix (deferred — needs a restructure)
Collapse the door + scene + flash stack into ONE pre-composited layer per state (one layer can't seam against itself). E.g. render the active door/scene to a single element instead of cross-fading ~10 masked
<img>layers. This is the only approach likely to fully eliminate it.Severity
Faint, Firefox-only, vigorous-scroll-only; on the default animation house a normal visitor rarely triggers it. Low priority.
Originating skill:
maintain-homepage-hero(gotcha #15). Full investigation log:firefox-arch-seam-investigationmemory. Date: 2026-06-30.