/* Vein-Hub — pre-page "curtain" intro. * * Shows on the main pages only (index / tutorial / materials / crafting — * gated in includes/header.php). It is a ONE-SHOT: main.js runs the sequence * once (1.2s) and then removes the node entirely, so nothing here stays in * the paint path. The centre-out reveal is a "sparkling grid" that a * droplet ripple wipes in (main.js), drawn only while the overlay is alive — * the rAF loop is cancelled and the canvas destroyed on cleanup, so there is * no loop at rest. * * Safety: * - No-JS never sees it. The overlay is `display:none` until the inline * script adds `.js` to ; a no-JS visitor gets the site * straight away with no stuck black screen. * - `prefers-reduced-motion` skips the canvas/ripple entirely and collapses * it to a single short, linear curtain part (main.js); the media block * below is the CSS-only backstop. * - A pure-CSS failsafe fades/disables the overlay after 8s even if main.js * never runs, so the page can't be left permanently covered. * * Palette: black / greyscale only (the grid sparkles are white), with the * site's red as the single accent (the centre light-seam). See base.css. */ .intro { display: none; } .js .intro { display: block; position: fixed; inset: 0; z-index: 9990; overflow: hidden; /* Opaque so the transparent canvas draws the grid on black and the page never peeks through the centre before the curtains part. */ background-color: #060607; /* Last-resort: if main.js never executes, don't trap the visitor. */ animation: intro-failsafe 0s linear 8s forwards; } /* --- Sparkling-grid canvas (centre-out droplet reveal) ---------------- */ /* Sits ABOVE the curtain panels so the grid + ripple read full-screen from the first frame, with the curtains parting behind the sparkle field. */ .intro__grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 4; pointer-events: none; } @keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* While the intro is on screen, freeze the page behind it (removed by main.js as soon as the sequence finishes or is skipped). */ .intro-lock { overflow: hidden !important; } /* --- Curtain panels (the two halves that part) ------------------------- */ .intro__panel { position: absolute; top: -2px; bottom: -2px; width: calc(50% + 2px); /* slight overlap at centre → no seam gap */ z-index: 2; /* above the grid canvas, so parting reveals the grid beneath */ background-color: #0c0c0e; background-image: /* faint vertical folds, greyscale only */ repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.03) 0 1px, rgba(0, 0, 0, 0) 1px 22px ), repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.32) 0 2px, rgba(0, 0, 0, 0) 2px 46px ), linear-gradient(90deg, #060607 0%, #131317 48%, #060607 100%); will-change: transform; } .intro__panel--l { left: 0; box-shadow: inset -28px 0 46px rgba(0, 0, 0, 0.62); } .intro__panel--r { right: 0; box-shadow: inset 28px 0 46px rgba(0, 0, 0, 0.62); } /* --- Centre light-seam (the only saturated element while closed) ------- */ .intro__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: linear-gradient( 180deg, rgba(216, 30, 44, 0) 0%, var(--red-dim) 20%, var(--red) 50%, var(--red-dim) 80%, rgba(216, 30, 44, 0) 100% ); box-shadow: 0 0 22px 4px var(--red-glow), 0 0 8px var(--red-dim); z-index: 3; /* the droplet's point of impact, above grid and panels */ will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { /* main.js plays a short, linear parting instead of the full sequence; this only tightens the CSS-only backstop for the no-JS-at-all case. */ .js .intro { animation-delay: 3s; } }