/* TrackingTCG — site-wide ambient card layer + scroll reveals. Drop-in partial. Pairs with ambient-cards.js. Requires the shared token stylesheet (colour + holo tokens) to be loaded first. ── DEVIATIONS FROM THE DESIGN HANDOFF ────────────────────────────────────── The handoff ships this layer at `z-index: 0` and requires every page to wrap its content in `

` (position:relative; z-index:1). This codebase has NO shared HTML layout — 42 templates emit their own — so that wrapper would mean 84 hand-placed edit points, several of them in templates with irregular nesting. Instead the layer sits at `z-index: -1` and `.ttcg-above` is not used at all. At -1 the layer paints in the negative-z step of the ROOT stacking context, which is below in-flow block backgrounds, floats, inline content and every positioned element. Page content therefore sits above it automatically, with no wrapper and — critically — no new stacking context, so every existing z-index relationship on the site is preserved exactly. (Wrapping content in a z-index:1 context would have capped in-page overlays like the card popup and the stats toast against the three elements injected directly onto /: the loading bar, the age-attestation modal and the settings save bar.) TWO INVARIANTS THIS DEPENDS ON — breaking either kills the layer silently: 1. must never get a transform, filter, opacity < 1, will-change, contain, isolation or z-index. Any of those makes it a stacking context and traps the layer behind the page. 2. must never get an opaque background again. The page background lives on (see shared/style.css). ──────────────────────────────────────────────────────────────────────────── Density is read from `data-ambient` on (set by templates/partials/head-foundation.php from an optional $pageAmbient), with as a fallback: off | light | normal | rich. */ @keyframes ttcg-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* The layer itself — fixed behind everything, never interactive. */ .ttcg-ambient { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } .ttcg-ambient-card { position: absolute; aspect-ratio: 5 / 7; } .ttcg-ambient-face { width: 100%; height: 100%; border-radius: 14px; will-change: transform; } /* Translucent panel — lets the drifting cards ghost through. Use in place of a solid `background: var(--colour-paper)` on hero/content shells. The plain declaration is a required fallback, not decoration: where color-mix() is unsupported the whole declaration is dropped, and a panel with NO background over a drifting card layer is unreadable rather than merely less pretty. */ .ttcg-panel { background: var(--colour-paper); background: color-mix(in srgb, var(--colour-paper) 88%, transparent); } .ttcg-panel-strong { background: var(--colour-paper); background: color-mix(in srgb, var(--colour-paper) 94%, transparent); } /* Scroll reveals — CSS owns both states; JS only toggles .is-revealed. An animation is used rather than a transition: a transition started by clearing an inline value can strand at currentTime 0 and pin the element at its from-value. PLACEMENT RULE: `transform` on the resting state makes the element a containing block for any position:fixed descendant, for as long as it stays unrevealed — which is forever if it never intersects. Never put data-reveal on ,

, .page-content, .hero-contents, or any ancestor of .popup / .popup-nav-arrow / .popup-toast / .stats-toast / .share-embed-modal / .delete-modal-overlay / .card-preview-overlay. Tag leaf sections only. */ [data-reveal] { opacity: 0; transform: translateY(26px); } [data-reveal].is-revealed { animation: ttcg-reveal 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes ttcg-reveal { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ttcg-ambient-face { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Print is one of the handoff's "off" cases. */ @media print { .ttcg-ambient { display: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } }