/*
* ============================================================
* WB ANIMATION KIT v1 — wesbarker.ca
* Minimal scroll + load animations
* Import:
* JS: One IntersectionObserver block — see wb-anim-v1-INIT.js
* ============================================================
*
* CLASS REFERENCE
* ───────────────
* [SCROLL — add class, observer fires .wb-vis]
* .wb-fade Fade up — universal, use everywhere
* .wb-fade-left Fade from left — bio image, side panels
* .wb-fade-right Fade from right — bio text, stat panels
* .wb-flip Flip open top-hinge — show date cards only
* .wb-wipe Cinema gold wipe — key headings only (2 max/page)
*
* [STAGGER — add .wb-stagger on parent, children auto-delay]
* .wb-stagger Staggers direct children with .wb-fade or .wb-flip
*
* [LOAD — fire on page load, no scroll trigger]
* .wb-logo Hero logo: drop + settle + subtle glow
*
* [HOVER — pure CSS, no JS needed]
* .wb-lift Card lifts 4px on hover
* .wb-edge Gold left-border slides up on hover
*
* [ALWAYS ON — pure CSS, no trigger needed]
* .wb-badge-pulse Red urgency badge breathes
* .wb-play-pulse Video play button breathes
* .wb-marquee SeenOn ticker (apply to inner track div)
* ============================================================
*/
/* ─────────────────────────────────────────────────────────
SHARED TRANSITION BASE
All scroll animations start hidden, .wb-vis reveals them
───────────────────────────────────────────────────────── */
.wb-fade,
.wb-fade-left,
.wb-fade-right,
.wb-flip {
opacity: 0;
will-change: opacity, transform;
}
/* Default transition values — override per-element if needed */
.wb-fade { transform: translateY(20px); }
.wb-fade-left { transform: translateX(-24px); }
.wb-fade-right { transform: translateX(24px); }
.wb-flip {
transform: rotateX(-72deg);
transform-origin: top center;
}
/* Reveal state — added by IntersectionObserver */
.wb-fade.wb-vis,
.wb-fade-left.wb-vis,
.wb-fade-right.wb-vis {
opacity: 1;
transform: translate(0, 0);
transition:
opacity .6s cubic-bezier(.4, 0, .2, 1),
transform .6s cubic-bezier(.4, 0, .2, 1);
}
.wb-flip.wb-vis {
opacity: 1;
transform: rotateX(0deg);
transition:
opacity .55s cubic-bezier(.34, 1.15, .64, 1),
transform .55s cubic-bezier(.34, 1.15, .64, 1);
}
/* ─────────────────────────────────────────────────────────
STAGGER — .wb-stagger on parent
Auto-delays each direct child by 85ms
Children must have .wb-fade or .wb-flip
───────────────────────────────────────────────────────── */
.wb-stagger > *:nth-child(1) { transition-delay: 0ms !important; }
.wb-stagger > *:nth-child(2) { transition-delay: 85ms !important; }
.wb-stagger > *:nth-child(3) { transition-delay: 170ms !important; }
.wb-stagger > *:nth-child(4) { transition-delay: 255ms !important; }
.wb-stagger > *:nth-child(5) { transition-delay: 340ms !important; }
.wb-stagger > *:nth-child(6) { transition-delay: 425ms !important; }
/* ─────────────────────────────────────────────────────────
CINEMA WIPE — .wb-wipe on a wrapper div
Wraps heading. Gold bar sweeps left→right, retracts.
Use max 2× per page. Apply sparingly.
HTML structure:
───────────────────────────────────────────────────────── */
.wb-wipe {
position: relative;
display: block;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.wb-wipe-bar {
position: absolute;
inset: -2px;
background: #F5B800;
border-radius: inherit;
transform: scaleX(0);
transform-origin: left;
z-index: 3;
pointer-events: none;
}
.wb-wipe-bar.wb-vis {
animation: wbWipe .68s cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes wbWipe {
0% { transform: scaleX(0); transform-origin: left; }
50% { transform: scaleX(1); transform-origin: left; }
51% { transform: scaleX(1); transform-origin: right; }
100% { transform: scaleX(0); transform-origin: right; }
}
.wb-wipe-content {
opacity: 0;
position: relative;
z-index: 1;
}
.wb-wipe-content.wb-vis {
/* Content appears just as wipe bar retracts */
animation: wbWipeReveal .01s ease .33s forwards;
}
@keyframes wbWipeReveal { to { opacity: 1; } }
/* ─────────────────────────────────────────────────────────
HERO LOGO — .wb-logo on the logo img or wrapper
Drop from above + elastic settle + subtle glow on impact
Fire on page load (not scroll — see JS init)
HTML structure:
───────────────────────────────────────────────────────── */
.wb-logo {
opacity: 0;
transform: translateY(-28px) scale(1.04);
display: block;
}
.wb-logo.wb-vis {
animation: wbLogoDrop .72s cubic-bezier(.34, 1.38, .64, 1) .12s forwards;
}
@keyframes wbLogoDrop {
0% { opacity: 0; transform: translateY(-28px) scale(1.04); filter: brightness(1.35) blur(1px); }
55% { opacity: 1; transform: translateY(3px) scale(.988); filter: brightness(1.10) blur(0); }
74% { transform: translateY(-2px) scale(1.003);filter: brightness(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
/* Glow halo — sibling element inside .wb-logo-wrap */
.wb-logo-glow {
position: absolute;
inset: -40px;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 65%,
rgba(245, 184, 0, .10) 0%,
rgba(245, 184, 0, .03) 45%,
transparent 70%);
opacity: 0;
pointer-events: none;
transform: scale(.65);
}
.wb-logo-glow.wb-vis {
animation: wbLogoGlow .9s ease .12s forwards;
}
@keyframes wbLogoGlow {
0% { opacity: 0; transform: scale(.65); }
42% { opacity: 1; transform: scale(1.0); }
100% { opacity: 0; transform: scale(1.18); }
}
/* Floor reflection */
.wb-logo-floor {
position: absolute;
bottom: -12px;
left: 20%; right: 20%;
height: 10px;
background: radial-gradient(ellipse at 50% 0%, rgba(245, 184, 0, .07), transparent 70%);
filter: blur(5px);
opacity: 0;
transform: scaleX(.75);
}
.wb-logo-floor.wb-vis {
animation: wbLogoFloor .3s ease .52s forwards;
}
@keyframes wbLogoFloor {
to { opacity: 1; transform: scaleX(1); }
}
/* Wrapper — needed for glow/floor positioning */
.wb-logo-wrap {
position: relative;
display: inline-block;
}
/* ─────────────────────────────────────────────────────────
HOVER — LIFT
Add .wb-lift on any card or block
───────────────────────────────────────────────────────── */
.wb-lift {
transition: transform .25s cubic-bezier(.34, 1.2, .64, 1),
border-color .2s ease;
}
.wb-lift:hover {
transform: translateY(-4px);
}
/* ─────────────────────────────────────────────────────────
HOVER — GOLD EDGE
Add .wb-edge on show cards / any link card
───────────────────────────────────────────────────────── */
.wb-edge {
position: relative;
overflow: hidden;
}
.wb-edge::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: #F5B800;
transform: scaleY(0);
transform-origin: bottom;
transition: transform .2s ease;
border-radius: 0 2px 2px 0;
}
.wb-edge:hover::before {
transform: scaleY(1);
}
/* ─────────────────────────────────────────────────────────
ALWAYS ON — BADGE PULSE
Add .wb-badge-pulse on "Going Fast" / urgency badges
───────────────────────────────────────────────────────── */
.wb-badge-pulse {
animation: wbBadgePulse 2.2s ease-in-out infinite;
}
@keyframes wbBadgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 57, 28, 0); }
50% { box-shadow: 0 0 0 4px rgba(232, 57, 28, .14); }
}
/* ─────────────────────────────────────────────────────────
ALWAYS ON — PLAY BUTTON PULSE
Add .wb-play-pulse on the video play button
───────────────────────────────────────────────────────── */
.wb-play-pulse {
animation: wbPlayPulse 2.5s ease-in-out infinite;
}
@keyframes wbPlayPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0); }
50% { box-shadow: 0 0 0 12px rgba(245, 184, 0, 0); }
}
/* ─────────────────────────────────────────────────────────
ALWAYS ON — MARQUEE (SeenOn ticker)
Add .wb-marquee on the inner track div (duplicate content)
Parent needs: overflow:hidden + mask-image fade edges
───────────────────────────────────────────────────────── */
.wb-marquee {
display: flex;
gap: 40px;
animation: wbMarquee 16s linear infinite;
flex-shrink: 0;
white-space: nowrap;
}
@keyframes wbMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ─────────────────────────────────────────────────────────
GOLD LINE DRAW
Add .wb-line on an hr or empty div
Thin gold line draws left→right on scroll
───────────────────────────────────────────────────────── */
.wb-line {
height: 1px;
background: #2A2C31;
position: relative;
overflow: hidden;
}
.wb-line::after {
content: '';
position: absolute;
inset: 0;
background: #F5B800;
transform: scaleX(0);
transform-origin: left;
transition: transform .7s cubic-bezier(.4, 0, .2, 1) .1s;
}
.wb-line.wb-vis::after {
transform: scaleX(1);
}
/* ─────────────────────────────────────────────────────────
REDUCED MOTION — respect system preference
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.wb-fade, .wb-fade-left, .wb-fade-right, .wb-flip,
.wb-logo, .wb-logo-glow, .wb-logo-floor,
.wb-wipe-bar, .wb-badge-pulse, .wb-play-pulse,
.wb-marquee, .wb-line::after {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ─────────────────────────────────────────────────────────
NO-JS FALLBACK (added by Simple Créatif)
If never gets the .wb-js class (JS disabled / failed),
force all hidden elements to be visible. Belt + suspenders for SEO.
───────────────────────────────────────────────────────── */
html:not(.wb-js) .wb-fade,
html:not(.wb-js) .wb-fade-left,
html:not(.wb-js) .wb-fade-right,
html:not(.wb-js) .wb-flip,
html:not(.wb-js) .wb-logo,
html:not(.wb-js) .wb-logo-glow,
html:not(.wb-js) .wb-logo-floor,
html:not(.wb-js) .wb-wipe-content {
opacity: 1 !important;
transform: none !important;
}
/* ─────────────────────────────────────────────────────────
SITE-SPECIFIC: SeenOn marquee container
The .home-hero-seenon-track-wrap div around .wb-marquee
needs overflow:hidden + mask-image to fade edges.
───────────────────────────────────────────────────────── */
.home-hero-seenon-track-wrap {
overflow: hidden;
flex: 1 1 0;
min-width: 0;
max-width: 100%;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
/* Pause marquee on hover so users can read it */
.home-hero-seenon-track-wrap:hover .wb-marquee {
animation-play-state: paused;
}
/* Same marquee container treatment for the corporate "Trusted by" row */
.corp-trust-track-wrap {
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.corp-trust-track-wrap:hover .wb-marquee {
animation-play-state: paused;
}
/* Wider gap between chips on the corporate marquee since the chips are larger */
.corp-trust-track-wrap .wb-marquee {
gap: 56px;
}
/* ─────────────────────────────────────────────────────────
CONTEXTUAL OVERRIDE: FAQ wipe should follow parent's text-align
The FAQ section is left-aligned, so the centered wb-wipe looks wrong.
───────────────────────────────────────────────────────── */
.faq-top .wb-wipe,
.faq-card .wb-wipe {
margin-left: 0;
margin-right: 0;
}
/* ─────────────────────────────────────────────────────────
MOBILE FIX: marquee track wrappers in column flex contexts
On mobile, .corp-trust-row becomes flex-direction:column.
.home-hero-seenon also needs to stack vertically.
In column flex, flex:1 1 0 grows VERTICALLY — wraps collapse to 0 width.
Force them to span the full row width so the marquee renders correctly
AND the label/divider sit on top instead of being squeezed off-screen.
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Stack home SeenOn label/divider/track on their own rows */
.home-hero-seenon {
flex-direction: column;
gap: 14px;
}
.home-hero-seenon-divider {
width: 64px !important;
}
/* Both track wraps: full row width, no flex grow, marquee renders inside */
.home-hero-seenon-track-wrap,
.corp-trust-track-wrap {
flex: 0 0 auto;
width: 100%;
max-width: 100vw;
}
/* Slow the marquee a touch on mobile (less to scroll across narrow viewport) */
.home-hero-seenon-track-wrap .wb-marquee,
.corp-trust-track-wrap .wb-marquee {
animation-duration: 22s;
}
}