/* * Buyvaro Motion — 21st.dev-flavored animation layer * Decorator over existing .bv-* selectors. No markup edits required. * * Initial-hidden states only apply when is set * (added by JS). If JS fails or hasn't run yet, content is fully visible. */ @property --bv-beam-angle { syntax: ""; initial-value: 0deg; inherits: false; } /* ============================ * Reveal entrance — titles * ============================ */ .bv-motion-active .bv-hero-title, .bv-motion-active .bv-section-title { opacity: 0; transform: translateY(20px); clip-path: inset(0 0 100% 0); transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity, clip-path; } .bv-motion-active .bv-hero-title.bv-revealed, .bv-motion-active .bv-section-title.bv-revealed { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* ============================ * Stagger fade-in for grids * ============================ */ .bv-motion-active .bv-featured > *, .bv-motion-active .bv-why > *, .bv-motion-active .bv-domains > *, .bv-motion-active [data-bv-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .bv-motion-active .bv-featured.bv-stagger-in > *, .bv-motion-active .bv-why.bv-stagger-in > *, .bv-motion-active .bv-domains.bv-stagger-in > *, .bv-motion-active [data-bv-stagger].bv-stagger-in > * { opacity: 1; transform: none; } /* ============================ * Product card — beam border + spring lift + cursor spotlight * ============================ */ .bv-product { position: relative; isolation: isolate; transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease-out; will-change: transform; } .bv-product::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient( from var(--bv-beam-angle, 0deg), transparent 0deg, transparent 280deg, rgba(200, 169, 81, 0.7) 340deg, rgba(217, 189, 107, 0.95) 360deg, transparent 360deg ); animation: bv-beam-rotate 8s linear infinite; z-index: -1; opacity: 0.55; pointer-events: none; } .bv-product::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 420px circle at var(--bv-mx, 50%) var(--bv-my, 50%), rgba(200, 169, 81, 0.16), transparent 45% ); opacity: 0; transition: opacity 300ms ease-out; z-index: 1; mix-blend-mode: screen; } .bv-product:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px -8px rgba(200, 169, 81, 0.35); } .bv-product:hover::after { opacity: 1; } @keyframes bv-beam-rotate { to { --bv-beam-angle: 360deg; } } /* ============================ * Gold button — sheen + magnetic pull + ripple * ============================ */ .bv-btn-gold { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow 200ms ease-out; will-change: transform; } .bv-btn-gold::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65% ); transform: translateX(-100%); animation: bv-sheen 8s linear infinite; pointer-events: none; z-index: 1; } .bv-btn-gold:hover { box-shadow: 0 8px 28px -8px rgba(200, 169, 81, 0.55); } .bv-btn-gold .bv-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%) scale(0); pointer-events: none; animation: bv-ripple 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; z-index: 2; mix-blend-mode: screen; } @keyframes bv-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes bv-ripple { to { transform: translate(-50%, -50%) scale(8); opacity: 0; } } /* ============================ * Marquee strip * ============================ */ .bv-marquee { position: relative; overflow: hidden; padding: 28px 0; background: linear-gradient( 180deg, transparent, rgba(200, 169, 81, 0.04), transparent ); border-block: 1px solid rgba(200, 169, 81, 0.12); } .bv-marquee-track { display: flex; width: max-content; animation: bv-marquee-scroll 40s linear infinite; will-change: transform; } .bv-marquee:hover .bv-marquee-track { animation-play-state: paused; } .bv-marquee ul { list-style: none; margin: 0; padding: 0 28px 0 0; display: flex; gap: 56px; align-items: center; } .bv-marquee li { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: 0.02em; color: var(--bv-muted, #a0a0a0); white-space: nowrap; display: flex; align-items: center; gap: 56px; } .bv-marquee li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bv-gold, #c8a951); flex: 0 0 6px; box-shadow: 0 0 12px rgba(200, 169, 81, 0.6); } @keyframes bv-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================ * Why-icons — gold framed SVG glyphs in feature cards * ============================ */ .bv-why-icon.bv-icon-injected { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(200, 169, 81, 0.10), rgba(200, 169, 81, 0.02)); border: 1px solid rgba(200, 169, 81, 0.28); color: var(--bv-gold, #c8a951); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease-out, background 320ms ease-out, border-color 320ms ease-out; will-change: transform; } .bv-why-icon.bv-icon-injected svg { width: 28px; height: 28px; display: block; } .bv-why > *:hover .bv-why-icon.bv-icon-injected { transform: rotate(-6deg) scale(1.06); background: linear-gradient(135deg, rgba(200, 169, 81, 0.18), rgba(200, 169, 81, 0.04)); border-color: rgba(200, 169, 81, 0.5); box-shadow: 0 10px 28px -10px rgba(200, 169, 81, 0.5); } /* ============================ * Burger menu — replace ☰ emoji with SVG * ============================ */ #bvBurger.bv-icon-injected { display: inline-flex; align-items: center; justify-content: center; color: var(--bv-text, #fff); font-size: 0; line-height: 1; background: transparent; border: 0; cursor: pointer; padding: 8px; transition: color 200ms ease-out, transform 200ms ease-out; } #bvBurger.bv-icon-injected:hover { color: var(--bv-gold, #c8a951); } #bvBurger.bv-icon-injected:active { transform: scale(0.94); } #bvBurger.bv-icon-injected svg { width: 26px; height: 26px; display: block; } /* ============================ * Product image placeholder — gold dotted pattern + serif "B" watermark * ============================ */ .bv-product-img.bv-pp-filled { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, rgba(200, 169, 81, 0.06), transparent 60%), linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); } .bv-product-img .bv-pp-host { position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .bv-product-img .bv-pp-host svg { width: 100%; height: 100%; display: block; } .bv-product-img.bv-pp-filled .bv-badge { position: absolute; z-index: 2; } .bv-product:hover .bv-product-img .bv-pp-host { transform: scale(1.05); } /* ============================ * Scroll reveal — 3D card unfolds as user scrolls * (vanilla port of Aceternity ContainerScroll — exact measurements) * Outer ⇒ React: h-[60rem] md:h-[80rem] flex items-center justify-center p-2 md:p-20 * Track ⇒ React: py-10 md:py-40 w-full relative perspective-1000 * Card ⇒ React: max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] border-4 #6C6C6C bg-#222 rounded-[30px] p-2 md:p-6 * Inner ⇒ React: dark:bg-zinc-900 rounded-2xl md:p-4 * ============================ */ .bv-sr { --bv-sr-p: 0; position: relative; height: 60rem; display: flex; align-items: center; justify-content: center; padding: 8px; background: radial-gradient(80% 40% at 50% 20%, rgba(200, 169, 81, 0.05), transparent 70%), linear-gradient(180deg, var(--bv-bg, #0a0a0a) 0%, var(--bv-bg-2, #111) 100%); overflow: hidden; box-sizing: border-box; } .bv-sr-track { width: 100%; padding: 40px 0; position: relative; perspective: 1000px; } .bv-sr-header { max-width: 64rem; /* max-w-5xl ≈ 1024px */ margin: 0 auto; text-align: center; padding: 0 16px; transform: translate3d(0, calc(var(--bv-sr-p) * -100px), 0); will-change: transform; } .bv-sr-eyebrow { display: inline-block; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bv-gold, #c8a951); margin: 0 0 18px; opacity: 0.9; } .bv-sr-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(34px, 5.2vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; color: var(--bv-text, #fff); margin: 0; } .bv-sr-headline { display: block; font-style: italic; font-weight: 600; color: var(--bv-gold, #c8a951); margin-top: 6px; } .bv-sr-card { max-width: 64rem; /* max-w-5xl */ width: 100%; margin: -48px auto 0; /* -mt-12 */ height: 30rem; border: 4px solid #6c6c6c; border-radius: 30px; background: #222; padding: 8px; box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003; transform-origin: 50% 50%; transform: rotateX(calc((1 - var(--bv-sr-p)) * 20deg)) scale(calc(0.7 + var(--bv-sr-p) * 0.2)); will-change: transform; box-sizing: border-box; } .bv-sr-card-inner { width: 100%; height: 100%; border-radius: 16px; /* rounded-2xl */ overflow: hidden; background: #18181b; /* dark:bg-zinc-900 */ position: relative; } .bv-sr-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 30%; user-select: none; -webkit-user-drag: none; } /* Image fallback — clean serif wordmark on luxe gradient */ .bv-sr-card-inner.bv-sr-fallback { background: radial-gradient(60% 45% at 50% 30%, rgba(200, 169, 81, 0.16), transparent 75%), linear-gradient(180deg, #1a1a1a, #0a0a0a); display: flex; align-items: center; justify-content: center; } .bv-sr-card-inner.bv-sr-fallback::before { content: 'Buyvaro'; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(56px, 11vw, 132px); letter-spacing: -0.02em; color: rgba(200, 169, 81, 0.55); text-shadow: 0 4px 32px rgba(200, 169, 81, 0.18); } @media (min-width: 769px) { .bv-sr { height: 80rem; padding: 80px; } .bv-sr-track { padding: 160px 0; } .bv-sr-card { height: 40rem; padding: 24px; transform: rotateX(calc((1 - var(--bv-sr-p)) * 20deg)) scale(calc(1.05 - var(--bv-sr-p) * 0.05)); } .bv-sr-card-inner { padding: 16px; } } /* ============================ * Reduced motion — disable all animation, show content * ============================ */ @media (prefers-reduced-motion: reduce) { .bv-motion-active .bv-hero-title, .bv-motion-active .bv-section-title, .bv-motion-active .bv-featured > *, .bv-motion-active .bv-why > *, .bv-motion-active .bv-domains > *, .bv-motion-active [data-bv-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .bv-product::before, .bv-btn-gold::before, .bv-marquee-track { animation: none !important; } .bv-product:hover { transform: none !important; box-shadow: none !important; } .bv-product::after { display: none; } .bv-why > *:hover .bv-why-icon.bv-icon-injected { transform: none !important; } .bv-product:hover .bv-product-img .bv-pp-host { transform: none !important; } .bv-sr-card, .bv-sr-header { transform: none !important; } } /* ============================ * Touch / no-hover — disable cursor-driven decoration * ============================ */ @media (hover: none) { .bv-product::after { display: none; } .bv-product:hover { transform: none; box-shadow: none; } .bv-btn-gold:hover { box-shadow: none; } }