/* ═════════════════════════════════════════════════════════════════════════
BUFO — Reveal FX v4.3.0
-------------------------------------------------------------------------
A unified reveal-on-scroll system. Fixes the footer "flash" (where
elements painted → disappeared → re-revealed) by hiding them BEFORE
paint via an inline-critical rule set, then releasing them once the
IntersectionObserver says they are on screen.
Principles
- No cumulative layout shift: hidden state uses opacity + transform,
never display/visibility/height.
- Zero JS required to degrade gracefully: a tier-3 / reduced-motion
match immediately reveals everything.
- FX tiers degrade: perf-tier-2 shortens animation, perf-tier-3 skips
it entirely (reveal is instant).
- Author hook: [data-bufo-reveal] on any element. Variants via
[data-bufo-reveal="up|down|left|right|scale|blur"].
Markup pattern
…
The `.bufo-reveal-init` class is applied to by inline JS in
wp_head (priority 1) — it guarantees the hidden state is applied on
the very first paint. A 6-second safety timer removes the class so
elements show up even if IntersectionObserver fails.
═════════════════════════════════════════════════════════════════════════ */
/* ── Base: author-tagged elements ───────────────────────────────────── */
.bufo-reveal-init [data-bufo-reveal] {
opacity: 0;
transform: translate3d(0, 22px, 0);
will-change: opacity, transform;
transition:
opacity .75s cubic-bezier(.2, .8, .2, 1),
transform .75s cubic-bezier(.2, .8, .2, 1),
filter .75s ease;
}
[data-bufo-reveal].is-revealed {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
filter: none !important;
}
/* Direction variants */
.bufo-reveal-init [data-bufo-reveal="up"] { transform: translate3d(0, 28px, 0); }
.bufo-reveal-init [data-bufo-reveal="down"] { transform: translate3d(0, -22px, 0); }
.bufo-reveal-init [data-bufo-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.bufo-reveal-init [data-bufo-reveal="right"] { transform: translate3d(28px, 0, 0); }
.bufo-reveal-init [data-bufo-reveal="scale"] { transform: scale(.92); }
.bufo-reveal-init [data-bufo-reveal="blur"] { filter: blur(10px); transform: none; }
.bufo-reveal-init [data-bufo-reveal="clip"] {
clip-path: inset(0 0 100% 0);
transform: none;
opacity: 1;
}
[data-bufo-reveal="clip"].is-revealed {
clip-path: inset(0 0 0 0) !important;
transition: clip-path .9s cubic-bezier(.7, 0, .2, 1);
}
/* Heading underline draw — combine with [data-bufo-reveal="line"] */
.bufo-reveal-init [data-bufo-reveal="line"] {
opacity: 0;
transform: translate3d(0, 12px, 0);
}
.bufo-reveal-init [data-bufo-reveal="line"]::before {
content: "";
position: absolute;
left: 0; bottom: -6px;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--bufo-green-bright, #4ade80), transparent);
transition: width 1.1s cubic-bezier(.2, .8, .2, 1) 0.2s;
}
[data-bufo-reveal="line"].is-revealed::before { width: 3.5em; }
/* ── Auto-targets: sitewide components hidden until revealed ─────────── */
.bufo-reveal-init :is(
/* Footer */
.bufo-footer__intel-bar,
.bufo-footer__col,
.bufo-footer__stat-card,
.bufo-footer__channel,
.bufo-footer__social,
.bufo-footer__link,
.bufo-footer__legal-row,
/* Archive / search / homepage cards */
.ba-card,
.bi-card,
.bi-featured,
.bi-area-card,
.featured-card,
/* Post content */
.prose-content > h2,
.prose-content > h3,
.prose-content > .wp-block-heading,
.prose-content > blockquote,
.prose-content > .wp-block-quote,
.prose-content > figure,
.prose-content > .wp-block-image,
.prose-content > .wp-block-pullquote,
.prose-content > .wp-block-gallery,
.prose-content > ul,
.prose-content > ol,
.prose-content > hr,
.prose-content > details,
.prose-content > .wp-block-details,
.prose-content > table,
.prose-content > .wp-block-table,
/* Custom BUFO blocks */
.prose-content > .bc-hero,
.prose-content > .bc-stats,
.prose-content > .bc-spine,
.prose-content > .bc-coords,
.prose-content > .bc-verdict,
.prose-content > .bc-doc,
.prose-content > .bc-divider,
.prose-content > .bb-alerta,
.prose-content > .bb-terminal,
.prose-content > .bb-ficha,
.prose-content > .bb-testigo,
.prose-content > .bb-senal,
.prose-content > .bb-compare,
/* Bufo pages */
.bp-widget,
.bp-related__item,
/* Search cards */
.bsearch-card
) {
opacity: 0;
transform: translate3d(0, 22px, 0);
will-change: opacity, transform;
transition:
opacity .7s cubic-bezier(.2, .8, .2, 1),
transform .7s cubic-bezier(.2, .8, .2, 1);
}
.is-revealed {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
}
/* Slight horizontal variety for certain classes to feel less mechanical. */
.bufo-reveal-init :is(.bufo-footer__stat-card, .bc-stat) { transform: translate3d(0, 14px, 0) scale(.96); }
.bufo-reveal-init .bufo-footer__channel { transform: translate3d(18px, 0, 0); }
.bufo-reveal-init .bufo-footer__social { transform: scale(.75); }
.bufo-reveal-init .bufo-footer__social.is-revealed { transform: scale(1) !important; }
/* Staggering: when a parent has [data-bufo-stagger], its direct children
reveal with a cascading delay (JS sets --_i on each child). */
.bufo-reveal-init [data-bufo-stagger] > * {
transition-delay: calc(var(--_i, 0) * 60ms);
}
/* ── FX tier degradation ─────────────────────────────────────────────── */
/* Tier 1 (lite): mildly shorten + reduce travel. */
html.perf-tier-1 .bufo-reveal-init [data-bufo-reveal],
html.perf-tier-1 .bufo-reveal-init :is(.bufo-footer__col, .ba-card, .bi-card, .prose-content > *) {
transition-duration: .55s !important;
}
html.perf-tier-1 .bufo-reveal-init [data-bufo-reveal],
html.perf-tier-1 .bufo-reveal-init :is(.bufo-footer__col, .bufo-footer__channel, .ba-card, .bi-card) {
transform: translate3d(0, 14px, 0);
}
/* Tier 2: very small slide, no blur/scale. */
html.perf-tier-2 .bufo-reveal-init [data-bufo-reveal],
html.perf-tier-2 .bufo-reveal-init :is(.bufo-footer__col, .bufo-footer__channel, .ba-card, .bi-card, .prose-content > *) {
transform: translate3d(0, 8px, 0) !important;
filter: none !important;
transition-duration: .35s !important;
}
/* Tier 3 + reduced-motion: no animation, everything revealed instantly. */
html.perf-tier-3 .bufo-reveal-init [data-bufo-reveal],
html.perf-tier-3 .bufo-reveal-init :is(.bufo-footer__col, .bufo-footer__channel, .bufo-footer__stat-card, .bufo-footer__social, .bufo-footer__link, .bufo-footer__legal-row, .bufo-footer__intel-bar, .ba-card, .bi-card, .prose-content > *) {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
.bufo-reveal-init [data-bufo-reveal],
.bufo-reveal-init :is(.bufo-footer__col, .bufo-footer__channel, .bufo-footer__stat-card, .bufo-footer__social, .bufo-footer__link, .bufo-footer__legal-row, .bufo-footer__intel-bar, .ba-card, .bi-card, .prose-content > *) {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* ── Polish: sitewide cinematic extras ──────────────────────────────── */
/*
* Heading scroll-underline: an inside .prose-content grows a glowing
* underline when it enters the viewport. Uses the generic is-revealed hook.
*/
.prose-content > h2 {
position: relative;
}
.bufo-reveal-init .prose-content > h2::after {
content: "";
position: absolute;
left: 0; bottom: -8px;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--bufo-green-bright, #4ade80), transparent);
box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
transition: width 1.2s cubic-bezier(.2, .8, .2, 1) .18s;
pointer-events: none;
}
.prose-content > h2.is-revealed::after { width: 4em; }
/*
* Cursor spotlight — a subtle glow that follows the cursor across the
* footer's intel bar. Pure CSS; JS just sets --mx/--my in pixel space.
*/
.bufo-footer { position: relative; }
.bufo-footer::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, 30%),
rgba(34, 197, 94, 0.08),
transparent 60%
);
pointer-events: none;
opacity: 0;
transition: opacity .4s ease;
}
.bufo-footer:hover::before { opacity: 1; }
html.perf-tier-3 .bufo-footer::before,
html.ufo-lite .bufo-footer::before { display: none; }
/*
* Scroll-linked hero parallax.
*
…
* JS sets --scroll (0..1) based on viewport progress; the bg shifts on Y.
*/
.bufo-parallax .bp-hero__bg,
.bufo-parallax .bc-hero__bg,
.bufo-parallax > [data-parallax-bg] {
transform: translate3d(0, calc(var(--scroll, 0) * var(--_speed, .25) * 100px), 0);
will-change: transform;
}
html.perf-tier-2 .bufo-parallax .bp-hero__bg,
html.perf-tier-3 .bufo-parallax .bp-hero__bg,
html.perf-tier-2 .bufo-parallax .bc-hero__bg,
html.perf-tier-3 .bufo-parallax .bc-hero__bg { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.bufo-parallax .bp-hero__bg,
.bufo-parallax .bc-hero__bg,
.bufo-parallax > [data-parallax-bg] { transform: none !important; }
}
/*
* Word-by-word reveal — apply to each word of a
* hero title; JS (reveal-fx.js) can split automatically when the parent
* has [data-bufo-split]. Each word fades in with a cascading delay.
*/
.bufo-reveal-init [data-bufo-split] .fx-word {
opacity: 0;
display: inline-block;
transform: translateY(0.5em);
transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
transition-delay: calc(var(--_w, 0) * 55ms);
}
[data-bufo-split].is-revealed .fx-word {
opacity: 1;
transform: none;
}
html.perf-tier-3 [data-bufo-split] .fx-word {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
[data-bufo-split] .fx-word {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}