.fx-overlay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.fx-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity 320ms var(--ease); }
/* layers inside a side: text (1) < veil (2, darkens the other side) < scene (3) < requirements (4).
   The side you are on fades its own scene behind the requirements; the other side's scene sits above its veil, so it keeps full brightness. */
.side .fx-scene { z-index: 3; opacity: calc(1 - .88 * var(--f)); transition: none; }
.side canvas.hx-sky { will-change: transform; }

.fx-intro .side.left { animation: fx-in-left 900ms var(--ease) 250ms both; }
.fx-intro .side.right { animation: fx-in-right 900ms var(--ease) 250ms both; }
.fx-intro .seam { animation: fx-draw 700ms var(--ease) both; }
.fx-intro .title-wrap .hx-tiny { animation: fx-fade 500ms ease 1700ms both; }
.fx-intro .topbar, .fx-intro .bottombar { animation: fx-fade 600ms ease 900ms both; }
@keyframes fx-in-left { from { opacity: 0; transform: translateX(-60px); } }
@keyframes fx-in-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes fx-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fx-fade { from { opacity: 0; } }