/* ============================================================ Features v4 — Scroll Animation Initial States Loaded AFTER features-v3.css. Only sets pre-animation states + adds a scroll cue, viewport-snap, and a couple of motion-only refinements. Falls back to visible when JS / GSAP is unavailable. ============================================================ */ /* --- Brand logo (replaces the SVG diamond placeholder) ----- */ .nav-logo { display: inline-flex; align-items: center; padding: 0; } .nav-logo-img { height: 26px; width: auto; display: block; } .footer-logo-img { height: 22px; width: auto; display: block; opacity: 0.85; } /* --- Respect reduced motion -------------------------------- */ @media (prefers-reduced-motion: reduce) { html.fv4-motion .fv4-anim, html.fv4-motion .fv4-anim * { opacity: 1 !important; transform: none !important; } } /* --- Only apply the "hide-until-animated" rules when motion is active. We add `.fv4-motion` to from JS the moment GSAP is available, which prevents a flash of invisible content on no-JS / failed-CDN. ---------------- */ html.fv4-motion .fv4-anim { opacity: 0; } html.fv4-motion .fv4-anim-up { opacity: 0; transform: translate3d(0, 32px, 0); } html.fv4-motion .fv4-anim-down { opacity: 0; transform: translate3d(0, -16px, 0); } html.fv4-motion .fv4-anim-in-l { opacity: 0; transform: translate3d(-24px, 0, 0); } html.fv4-motion .fv4-anim-in-r { opacity: 0; transform: translate3d( 24px, 0, 0); } html.fv4-motion .fv4-anim-scale { opacity: 0; transform: scale(0.96); } html.fv4-motion .fv4-words .word { display: inline; opacity: 0; transform: translate3d(0, 0.55em, 0); will-change: transform, opacity; } /* ── Hero: full viewport + scroll cue ───────────────────────── */ .fv3-hero { min-height: 100vh; display: flex; align-items: center; position: relative; } .fv4-scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; font-family: var(--mp-font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); z-index: 3; pointer-events: none; user-select: none; } .fv4-scroll-cue .rail { width: 1px; height: 36px; background: linear-gradient( to bottom, transparent 0%, var(--mp-accent-400) 35%, var(--mp-accent-400) 65%, transparent 100% ); position: relative; overflow: hidden; } .fv4-scroll-cue .rail::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.85) 55%, transparent 100% ); transform: translateY(-100%); animation: fv4-cue 2.4s cubic-bezier(.55, .1, .25, 1) infinite; } @keyframes fv4-cue { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } } html.fv4-motion .fv4-scroll-cue { opacity: 0; } /* ── Personas section: full viewport ────────────────────────── */ .fv3-personas-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* ── Stack: stagger initial state for tiles ─────────────────── */ html.fv4-motion .fv3-legacy-tile { opacity: 0; transform: translate3d(-20px, 0, 0); } html.fv4-motion .fv3-mp-tile { opacity: 0; transform: translate3d(28px, 0, 0) scale(0.97); } html.fv4-motion .fv3-mp-tile li { opacity: 0; transform: translate3d(0, 8px, 0); } html.fv4-motion .fv3-stack-arrow { opacity: 0; } /* ── Chip TOC: stagger ──────────────────────────────────────── */ html.fv4-motion .fv3-mod-chips a { opacity: 0; transform: translate3d(0, 14px, 0); } /* ── CTA glow ──────────────────────────────────────────────── */ .cta-band { position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse 60% 50% at 50% 60%, rgba(212, 166, 74, 0.18) 0%, rgba(212, 166, 74, 0) 65% ); opacity: 0; transition: opacity 1.2s ease; } .cta-band.fv4-in::before { opacity: 1; animation: fv4-glow 6s ease-in-out infinite alternate; } @keyframes fv4-glow { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.08); opacity: 1; } } /* ── Module entry refinement: when not yet "entered", fade the screenshot frame a touch. ──────────────────── */ html.fv4-motion .fv3-monitor { will-change: transform; } /* ── Scrollytell module: subtle slide-up on enter (non-active modules stay slightly dimmed; the existing .active rule already handles opacity 1). ──────────────────────────── */ html.fv4-motion .fv3-module:not(.active) .m-caps li { opacity: 0.6; } html.fv4-motion .fv3-module.active .m-caps li { opacity: 1; transition: opacity 0.5s ease; }