/* ===================================================================== Insight Bay — Homepage Cinematic Motion Layer (v2 — bold) --------------------------------------------------------------------- Scoped entirely to → homepage only. The signature move (matching the reference video): each section GLIDES UP as a unit as it scrolls in, while its eyebrow / title / cards cascade inside it. Plus a title "wipe" reveal and a slow living aurora behind the hero. • Pure transform / opacity / filter / clip-path — GPU friendly. • No copy changes. Builds on the existing .ib-reveal trigger. • Fully disabled under prefers-reduced-motion. Updated 2026-06-26. ===================================================================== */ /* ---------- 1. SIGNATURE: whole content sections glide up ---------- */ .ib-home-cinematic section.ib-cine-sec{ opacity: 0; transform: translateY(70px) scale(.985); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,.84,.28,1); will-change: transform, opacity; } .ib-home-cinematic section.ib-cine-sec.is-in{ opacity: 1; transform: none; } /* Inside a gliding section, content cascades by fade + scale (no compounding travel, so the section-glide stays clean). */ .ib-home-cinematic .ib-cine-sec .ib-reveal{ opacity: 0; transform: scale(.93); filter: blur(5px); transition: opacity .75s ease, transform .9s cubic-bezier(.2,.8,.25,1), filter .75s ease; transition-delay: var(--d, 0s); will-change: transform, opacity, filter; } .ib-home-cinematic .ib-cine-sec .ib-reveal.is-visible{ opacity: 1; transform: none; filter: blur(0); } /* ---------- 2. Reveals OUTSIDE gliding sections (trust band) ------- */ .ib-home-cinematic .ib-reveal{ opacity: 0; transform: translateY(48px) scale(.96); filter: blur(6px); transition: opacity .85s ease, transform 1s cubic-bezier(.16,.84,.28,1), filter .8s ease; transition-delay: var(--d, 0s); } .ib-home-cinematic .ib-reveal.is-visible{ opacity: 1; transform: none; filter: blur(0); } /* Trust counters "deal in" with a soft 3D tilt */ .ib-home-cinematic .ib-trust-grid{ perspective: 1400px; } .ib-home-cinematic .ib-trust-grid > .ib-reveal{ transform: translateY(54px) rotateX(12deg) scale(.95); transform-origin: 50% 100%; } .ib-home-cinematic .ib-trust-grid > .ib-reveal.is-visible{ transform: none; } /* ---------- 3. Title WIPE + heading choreography ------------------ */ .ib-home-cinematic [data-cine="head"] > *{ opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.16,.84,.28,1); } .ib-home-cinematic [data-cine="head"].is-in > *{ opacity: 1; transform: none; } .ib-home-cinematic [data-cine="head"].is-in > :nth-child(1){ transition-delay: .04s; } .ib-home-cinematic [data-cine="head"].is-in > :nth-child(2){ transition-delay: .14s; } .ib-home-cinematic [data-cine="head"].is-in > :nth-child(3){ transition-delay: .26s; } .ib-home-cinematic [data-cine="head"].is-in > :nth-child(n+4){ transition-delay: .34s; } /* the h2 unmasks upward as it rises — a clean "title reveal" */ .ib-home-cinematic [data-cine="head"] > h2{ clip-path: inset(0 0 102% 0); transition: opacity .7s ease, transform .9s cubic-bezier(.16,.84,.28,1), clip-path .95s cubic-bezier(.16,.84,.28,1); } .ib-home-cinematic [data-cine="head"].is-in > h2{ clip-path: inset(0 0 -6% 0); } /* ---------- 4. Cinematic hero entrance + living aurora ------------- */ .ib-home-cinematic .ib-hero{ position: relative; overflow: hidden; } .ib-home-cinematic .ib-hero::before{ content: ""; position: absolute; inset: -25% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none; background: radial-gradient(42% 55% at 22% 28%, rgba(196,91,60,.20), transparent 70%), radial-gradient(38% 50% at 82% 22%, rgba(201,162,77,.18), transparent 70%), radial-gradient(45% 60% at 62% 88%, rgba(196,91,60,.12), transparent 72%); filter: blur(8px); animation: ib-aurora 16s ease-in-out infinite alternate; } .ib-home-cinematic .ib-hero > .ib-container{ position: relative; z-index: 1; } @keyframes ib-aurora{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.06); } 100% { transform: translate3d(-2%, -1%, 0) scale(1.03); } } .ib-home-cinematic .ib-hero .ib-anim{ animation: ib-cine-rise 1s cubic-bezier(.16,.84,.28,1) both; } @keyframes ib-cine-rise{ 0% { opacity: 0; transform: translateY(44px) scale(.98); filter: blur(9px); } 55% { filter: blur(0); } 100%{ opacity: 1; transform: none; filter: none; } } .ib-home-cinematic .ib-hero-visual.ib-anim{ animation: ib-cine-pop 1.2s cubic-bezier(.16,.9,.28,1) both; animation-delay: .18s; } @keyframes ib-cine-pop{ 0% { opacity: 0; transform: translateY(36px) scale(.88) rotate(-3deg); } 100%{ opacity: 1; transform: none; } } .ib-home-cinematic .ib-hero-visual{ will-change: transform, translate; } /* ---------- 5. Marquee: soft edges -------------------------------- */ .ib-home-cinematic .ib-marquee{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } /* ---------- 6. Respect reduced motion — disable everything -------- */ @media (prefers-reduced-motion: reduce){ .ib-home-cinematic section.ib-cine-sec, .ib-home-cinematic .ib-cine-sec .ib-reveal, .ib-home-cinematic .ib-reveal, .ib-home-cinematic .ib-trust-grid > .ib-reveal{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .ib-home-cinematic [data-cine="head"] > *, .ib-home-cinematic [data-cine="head"] > h2{ opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .ib-home-cinematic .ib-hero::before{ animation: none !important; } .ib-home-cinematic .ib-hero .ib-anim, .ib-home-cinematic .ib-hero-visual.ib-anim{ animation: none !important; } }