/* ========================================================================== YOPPY motion.css — PURE CSS animations (no JS dependency) -------------------------------------------------------------------------- Shared by index.html (B2C) and trade.html (B2B). Everything here animates only `transform` and `opacity` for GPU compositing. The final `prefers-reduced-motion` block disables all of it. ========================================================================== */ /* ======================================================================== */ /* FLAVOR MARQUEE / TICKER */ /* ======================================================================== */ .marquee { background: var(--red, #EA1F25); color: #fff; overflow: hidden; padding-block: 0.9rem; border-block: 2px solid rgba(0, 0, 0, 0.08); } .marquee-viewport { overflow: hidden; width: 100%; } .marquee-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marquee-scroll 20s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--font-display, "Anton", sans-serif); font-size: clamp(1.1rem, 3vw, 1.9rem); letter-spacing: 0.04em; text-transform: uppercase; padding-inline: 1.1rem; } .marquee-track .sep { opacity: 0.65; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* content duplicated 2x => seamless */ } /* ======================================================================== */ /* FLOATING PEANUT BLOBS (hero ambient motion) */ /* ======================================================================== */ .blob { position: absolute; display: block; will-change: transform; pointer-events: none; } /* Green blobs at 15% opacity, red at 10% — per brand spec. */ .blob svg { display: block; width: 100%; height: 100%; } .blob-green { color: rgba(13, 99, 52, 0.15); } .blob-red { color: rgba(234, 31, 37, 0.10); } /* Restrained variant for the B2B hero (green @ 8%) */ .blob-quiet { color: rgba(13, 99, 52, 0.08); } .blob-1 { width: 220px; height: 150px; top: 12%; left: 6%; animation: blob-drift-1 19s ease-in-out infinite; } .blob-2 { width: 160px; height: 110px; top: 58%; left: 14%; animation: blob-drift-2 23s ease-in-out infinite; } .blob-3 { width: 280px; height: 190px; top: 20%; right: 8%; animation: blob-drift-3 27s ease-in-out infinite; } .blob-4 { width: 130px; height: 90px; top: 70%; right: 18%; animation: blob-drift-4 21s ease-in-out infinite; } .blob-5 { width: 100px; height: 70px; top: 40%; left: 44%; animation: blob-drift-2 25s ease-in-out infinite reverse; } .blob-6 { width: 190px; height: 130px; top: 80%; left: 60%; animation: blob-drift-1 30s ease-in-out infinite reverse; } @keyframes blob-drift-1 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(40px, -30px) scale(1.12) rotate(8deg); } 100% { transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes blob-drift-2 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-34px, 26px) scale(0.9) rotate(-10deg); } 100% { transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes blob-drift-3 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-26px, 40px) scale(1.08) rotate(6deg); } 100% { transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes blob-drift-4 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(30px, 34px) scale(1.15) rotate(-6deg); } 100% { transform: translate(0, 0) scale(1) rotate(0deg); } } /* ======================================================================== */ /* SCROLL-REVEAL INITIAL STATE */ /* Elements start hidden; motion.js (GSAP) animates + clears them. */ /* `.js-motion` is set on ONLY when JS + motion are active, so */ /* no-JS / reduced-motion users never get stuck with invisible content. */ /* ======================================================================== */ .js-motion .fade-up-init { opacity: 0; transform: translateY(40px); will-change: transform, opacity; } .js-motion .scale-in-init { opacity: 0; transform: scale(0.92); will-change: transform, opacity; } /* ======================================================================== */ /* REDUCED MOTION — disable everything, show final state */ /* ======================================================================== */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; transform: none; } .blob { animation: none !important; } .js-motion .fade-up-init, .js-motion .scale-in-init { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }