File: /var/www/viitorx.stgviitor.com/wp-content/themes/viitorx/css/section-reveal.css
/**
* Scroll-triggered section reveal (Offerings + Industries templates).
* Toggled by js/section-reveal.js → .section-reveal--visible
*/
[data-section-reveal] {
opacity: 0;
transform: translate3d(0, 52px, 0) scale(0.985);
transition:
opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
[data-section-reveal].section-reveal--visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
will-change: auto;
}
/* Offerings: animation-based (offerings.css loads reliably) */
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > * {
animation: section-reveal-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > *:nth-child(1) { animation-delay: 0.06s; }
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > *:nth-child(2) { animation-delay: 0.12s; }
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > *:nth-child(3) { animation-delay: 0.18s; }
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > *:nth-child(n + 4) { animation-delay: 0.24s; }
.offerings-page [data-section-reveal].section-reveal--visible .offering-matrix > *,
.offerings-page [data-section-reveal].section-reveal--visible .visual__img {
animation: section-reveal-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
animation-delay: 0.2s;
}
/* Industries: starting state lives in critical.css (inline) to prevent 3G FOUC.
This file only needs the revealed state. */
.industries-page [data-section-reveal].section-reveal--visible .industry__text > *,
.industries-page [data-section-reveal].section-reveal--visible .industry__media {
opacity: 1;
transform: none;
}
.industries-page [data-section-reveal].section-reveal--visible .industry__text > *:nth-child(1) { transition-delay: 0.04s; }
.industries-page [data-section-reveal].section-reveal--visible .industry__text > *:nth-child(2) { transition-delay: 0.08s; }
.industries-page [data-section-reveal].section-reveal--visible .industry__text > *:nth-child(3) { transition-delay: 0.12s; }
.industries-page [data-section-reveal].section-reveal--visible .industry__text > *:nth-child(n + 4) { transition-delay: 0.16s; }
.industries-page [data-section-reveal].section-reveal--visible .industry__media { transition-delay: 0.06s; }
/* Hero is always in viewport — override the section-reveal hidden state immediately.
* Removing the JS dependency (section-reveal--visible) from the hero cuts LCP by
* the full JS execution delay (~4-7 s on slow connections). */
.hero-inner__content[data-section-reveal] {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
/* Hero entrance stagger fires via CSS on paint — no .section-reveal--visible needed */
.offerings-page .hero-inner__content[data-section-reveal] > *,
.industries-page .hero-inner__content[data-section-reveal] > * {
animation: section-reveal-rise 0.78s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.offerings-page .hero-inner__content[data-section-reveal] > *:nth-child(1),
.industries-page .hero-inner__content[data-section-reveal] > *:nth-child(1) {
animation-delay: 0.07s;
}
.offerings-page .hero-inner__content[data-section-reveal] > *:nth-child(2),
.industries-page .hero-inner__content[data-section-reveal] > *:nth-child(2) {
animation-delay: 0.14s;
}
.offerings-page .hero-inner__content[data-section-reveal] > *:nth-child(3),
.industries-page .hero-inner__content[data-section-reveal] > *:nth-child(3) {
animation-delay: 0.22s;
}
/* Stats + contact blocks */
.industries-page .stats[data-section-reveal].section-reveal--visible .stat-card {
animation: section-reveal-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.industries-page .stats[data-section-reveal].section-reveal--visible .stat-card:nth-child(1) {
animation-delay: 0.06s;
}
.industries-page .stats[data-section-reveal].section-reveal--visible .stat-card:nth-child(2) {
animation-delay: 0.12s;
}
.industries-page .stats[data-section-reveal].section-reveal--visible .stat-card:nth-child(3) {
animation-delay: 0.18s;
}
.industries-page .stats[data-section-reveal].section-reveal--visible .stat-card:nth-child(4) {
animation-delay: 0.24s;
}
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__left > *,
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__right > *,
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__left > *,
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__right > * {
animation: section-reveal-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__left > *:nth-child(1),
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__left > *:nth-child(1) {
animation-delay: 0.08s;
}
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__left > *:nth-child(2),
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__left > *:nth-child(2) {
animation-delay: 0.14s;
}
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__right > *,
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__right > * {
animation-delay: 0.16s;
}
@keyframes section-reveal-rise {
from {
opacity: 0;
transform: translate3d(0, 28px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* ── OFFERINGS PAGE: GSAP owns offering/visual/contact animations ─ */
/* The hero content [data-section-reveal] still uses CSS stagger above. */
.offerings-page .offering[data-section-reveal],
.offerings-page .visual[data-section-reveal],
.offerings-page .contact[data-section-reveal] {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > *,
.offerings-page [data-section-reveal].section-reveal--visible .offering-matrix > *,
.offerings-page [data-section-reveal].section-reveal--visible .visual__img,
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__left > *,
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__right > * {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
[data-section-reveal] {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
.offerings-page [data-section-reveal].section-reveal--visible .offering__header > *,
.industries-page [data-section-reveal].section-reveal--visible .industry__text > *,
.offerings-page [data-section-reveal].section-reveal--visible .offering-matrix > *,
.offerings-page [data-section-reveal].section-reveal--visible .visual__img,
.industries-page [data-section-reveal].section-reveal--visible .industry__media,
.offerings-page .hero-inner__content[data-section-reveal] > *,
.industries-page .hero-inner__content[data-section-reveal] > *,
.industries-page .stats[data-section-reveal].section-reveal--visible .stat-card,
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__left > *,
.offerings-page .contact[data-section-reveal].section-reveal--visible .contact__right > *,
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__left > *,
.industries-page .contact[data-section-reveal].section-reveal--visible .contact__right > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}