/* The landing page's welcome (welcome.js): a blank page of the journal * (dark by night, cream by day), the fairy flying in with her light, and a * burst from her wand uncovering the scene. * * is set before the first paint by welcome-gate.js, and * only when the welcome will play: "waiting" until welcome.js takes over, * "playing" while it runs. Without it (no script, reduced motion, a page * opened part way down, or once the welcome is over) none of this applies. */ /* The radius of the opening, animated on the paper, the header and the * header's paper fade alike; registered so that it can be. Within it the * scene is uncovered; the blank page returns over a third as far again, so * the edge is soft, and widens as it spreads. */ @property --welcome-r { syntax: ""; inherits: false; initial-value: 0px; } .sb-welcome { display: none; } /* Over the scene and under the fairy: the fairy is in the same layer, later * in the source. */ [data-welcome] .sb-welcome { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; } /* The blank page, with a rim of lantern light on the edge of the opening. */ .sb-welcome__paper { position: absolute; inset: 0; background: radial-gradient(circle at var(--welcome-x, 50%) var(--welcome-y, 50%), color-mix(in oklab, var(--color-glow) 45%, transparent) var(--welcome-r), transparent calc(var(--welcome-r) * 1.33)), var(--sb-journal); mask-image: radial-gradient(circle at var(--welcome-x, 50%) var(--welcome-y, 50%), transparent var(--welcome-r), #000 calc(var(--welcome-r) * 1.33)); } /* The header's paper fade opens with it, so it never pales the fairy or her * dust on the blank page. */ [data-welcome] .site-header, [data-welcome] .sb-headfade { mask-image: radial-gradient(circle at var(--welcome-x, 50%) var(--welcome-y, 50%), #000 var(--welcome-r), transparent calc(var(--welcome-r) * 1.33)); } /* Until the flight starts she is not on the page yet. */ [data-welcome="waiting"] .sb-flyer { visibility: hidden; } /* The sparkle, placed and played by welcome.js. */ .sb-welcome__mote, .sb-welcome__star, .sb-welcome__bloom { position: absolute; top: 0; left: 0; opacity: 0; } .sb-welcome__mote { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--fairy-star); box-shadow: 0 0 6px 2px color-mix(in oklab, var(--fairy-star) 60%, transparent); } .sb-welcome__mote:nth-child(3n) { background: var(--fairy-dress); } .sb-welcome__star { width: 20px; height: 20px; margin: -10px 0 0 -10px; overflow: visible; fill: var(--fairy-glow); stroke: var(--fairy-dress); stroke-width: 0.8; stroke-linejoin: round; } .sb-welcome__bloom { width: 18rem; height: 18rem; margin: -9rem 0 0 -9rem; border-radius: 50%; background: radial-gradient(closest-side, #fff, color-mix(in oklab, var(--fairy-glow) 80%, transparent) 35%, transparent); }