/* ZincArt — Skeleton system (ALL sections) * * Skeletons show for every
inside
. Hero (first section) * fades out on first paint when animations.js runs; below-fold sections * keep their skeleton until they scroll into view, then fade out as * content animates in. * * Lifecycle: * 1. First paint: applies skeleton * styling to EVERY main > section (so users see subtle placeholders * instead of bare text / flashing images, no matter their viewport * height). * 2. animations.js runs ~80ms after window.load: * a. Adds .zinc-skel-pending to every below-fold section (so they * stay in skeleton state even after .zinc-anim-pending is gone). * b. Removes .zinc-anim-pending from (hero skeleton starts * fading; hero content animates in via GSAP). * 3. As user scrolls, IntersectionObserver fires per section: * a. Removes .zinc-skel-pending from the section (skeleton fades * over 0.22s via CSS transitions). * b. GSAP simultaneously slides/scales content into place. * 4. The two effects OVERLAP smoothly — the real text/content appears * ABOVE the still-visible skeleton via alpha interpolation of * `color` (transparent → natural) and `background-color` (skeleton * → natural). The skeleton fades while content emerges on top of * it, not behind. * * CRITICAL: GSAP must NOT animate opacity on skeletonized elements. * Opacity on the element itself would hide BOTH the text and the * skeleton bg (since the bg is painted on the element). Let CSS handle * the fade via color/bg transitions; let GSAP handle motion only. * * Skeleton appearance: opaque, very subtle (close to surface colour), * not flashy. A hint of structure, not a loading shimmer. */ :root { /* Subtle, opaque skeleton colours (close to their surface, low contrast) */ --skeleton-bg: oklch(94% 0.003 286); /* on light surfaces — barely visible */ --skeleton-bg-dark: oklch(22% 0.008 286); /* on dark surfaces — barely visible */ /* Per-primitive radii */ --skeleton-radius-text: 0.25rem; --skeleton-radius-heading: 0.5rem; --skeleton-radius-button: 9999px; --skeleton-radius-card: 0.75rem; --skeleton-radius-image: 0.75rem; /* Fade-out duration — fast (skeleton shouldn't linger) */ --skeleton-fade: 0.28s; } /* Dark section detection — swap the token to the dark variant, per section */ main > section[class*="bg-zinc-9"], main > section[class*="bg-black"], main > section[class*="bg-[url"], main > section[class*="from-zinc-9"], main > section[class*="bg-foreground"] { --skeleton-bg: var(--skeleton-bg-dark); } /* ── 1. CSS TRANSITIONS — always defined so that when .zinc-anim-pending * (html) or .zinc-skel-pending (section) is removed, the properties * smoothly transition from skeleton state back to natural state. * `color` transition interpolates alpha, so text fades in ON TOP of * the skeleton bg which simultaneously fades out. ─────────────── */ main > section h1, main > section h2, main > section h3, main > section h4, main > section p, main > section blockquote, main > section a[class*="inline-flex"][class*="rounded"], main > section button[class*="inline-flex"][class*="rounded"], main > section .grid > *, main > section [class*="grid-cols"] > *, main > section details, main > section figure { transition: color var(--skeleton-fade) ease-out, background-color var(--skeleton-fade) ease-out, border-color var(--skeleton-fade) ease-out; } /* Nested children also transition opacity so they fade in smoothly * (instead of snapping visible like `visibility: hidden` → visible). */ main > section h1 > *, main > section h2 > *, main > section h3 > *, main > section h4 > *, main > section p > *, main > section blockquote > *, main > section a[class*="inline-flex"][class*="rounded"] > *, main > section button[class*="inline-flex"][class*="rounded"] > *, main > section .grid > * > *, main > section [class*="grid-cols"] > * > *, main > section details > *, main > section figure > * { transition: opacity var(--skeleton-fade) ease-out; } main > section img:not([src*="logo"]), main > section iframe { transition: opacity var(--skeleton-fade) ease-out; } /* ── 2. SKELETON STATE ───────────────────────────────────────────── * Active when EITHER: * (a) html.zinc-anim-pending — first-paint, covers all sections * (b) section.zinc-skel-pending — per-section, applied to below-fold * sections by JS so they stay in skeleton state after (a) is gone * ───────────────────────────────────────────────────────────────── */ /* --- Text primitives: transparent text + subtle bg block --- */ html.zinc-anim-pending main > section h1, html.zinc-anim-pending main > section h2, html.zinc-anim-pending main > section h3, html.zinc-anim-pending main > section h4, html.zinc-anim-pending main > section p, html.zinc-anim-pending main > section blockquote, main > section.zinc-skel-pending h1, main > section.zinc-skel-pending h2, main > section.zinc-skel-pending h3, main > section.zinc-skel-pending h4, main > section.zinc-skel-pending p, main > section.zinc-skel-pending blockquote { color: transparent !important; background-color: var(--skeleton-bg); border-radius: var(--skeleton-radius-text); } html.zinc-anim-pending main > section h1, html.zinc-anim-pending main > section h2, html.zinc-anim-pending main > section h3, html.zinc-anim-pending main > section h4, main > section.zinc-skel-pending h1, main > section.zinc-skel-pending h2, main > section.zinc-skel-pending h3, main > section.zinc-skel-pending h4 { border-radius: var(--skeleton-radius-heading); } html.zinc-anim-pending main > section blockquote, main > section.zinc-skel-pending blockquote { border-radius: var(--skeleton-radius-card); } /* Hide nested children of text elements (icons, nested spans) — fades out smoothly */ html.zinc-anim-pending main > section h1 > *, html.zinc-anim-pending main > section h2 > *, html.zinc-anim-pending main > section h3 > *, html.zinc-anim-pending main > section h4 > *, html.zinc-anim-pending main > section p > *, html.zinc-anim-pending main > section blockquote > *, main > section.zinc-skel-pending h1 > *, main > section.zinc-skel-pending h2 > *, main > section.zinc-skel-pending h3 > *, main > section.zinc-skel-pending h4 > *, main > section.zinc-skel-pending p > *, main > section.zinc-skel-pending blockquote > * { opacity: 0; } /* --- Cards / grid children / details / figures --- */ html.zinc-anim-pending main > section .grid > *, html.zinc-anim-pending main > section [class*="grid-cols"] > *, html.zinc-anim-pending main > section details, html.zinc-anim-pending main > section figure, main > section.zinc-skel-pending .grid > *, main > section.zinc-skel-pending [class*="grid-cols"] > *, main > section.zinc-skel-pending details, main > section.zinc-skel-pending figure { background-color: var(--skeleton-bg) !important; background-image: none !important; border-radius: var(--skeleton-radius-card); box-shadow: none !important; border-color: transparent !important; } html.zinc-anim-pending main > section .grid > * > *, html.zinc-anim-pending main > section [class*="grid-cols"] > * > *, html.zinc-anim-pending main > section details > *, html.zinc-anim-pending main > section figure > *, main > section.zinc-skel-pending .grid > * > *, main > section.zinc-skel-pending [class*="grid-cols"] > * > *, main > section.zinc-skel-pending details > *, main > section.zinc-skel-pending figure > * { opacity: 0; } /* --- Buttons / CTAs: pill skeletons, hide content --- */ html.zinc-anim-pending main > section a[class*="inline-flex"][class*="rounded"], html.zinc-anim-pending main > section button[class*="inline-flex"][class*="rounded"], main > section.zinc-skel-pending a[class*="inline-flex"][class*="rounded"], main > section.zinc-skel-pending button[class*="inline-flex"][class*="rounded"] { background-color: var(--skeleton-bg) !important; background-image: none !important; color: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: var(--skeleton-radius-button); } html.zinc-anim-pending main > section a[class*="inline-flex"][class*="rounded"] > *, html.zinc-anim-pending main > section button[class*="inline-flex"][class*="rounded"] > *, main > section.zinc-skel-pending a[class*="inline-flex"][class*="rounded"] > *, main > section.zinc-skel-pending button[class*="inline-flex"][class*="rounded"] > * { opacity: 0; } /* --- Images and iframes: opacity-based hide so CSS transition fades them in. * opacity:0 hides the element entirely (incl pixels) BEFORE the browser * has a chance to render the loaded image — no flash. --- */ html.zinc-anim-pending main > section img:not([src*="logo"]), html.zinc-anim-pending main > section iframe, main > section.zinc-skel-pending img:not([src*="logo"]), main > section.zinc-skel-pending iframe { opacity: 0; } /* Reduced-motion users: no skeletons, no inline script adds the class, * and animations.js never adds .zinc-skel-pending. Real content renders * directly. No rules needed here. */