/* ========================================================================== PSBacWater Effects (motion layer) Gated on , which is only set when the visitor has not asked for reduced motion. ========================================================================== */ /* -------------------------------------------------------------------------- Scroll reveal -------------------------------------------------------------------------- */ .psbw-anim [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .psbw-anim [data-reveal="left"] { transform: translateX(-44px); } .psbw-anim [data-reveal="right"] { transform: translateX(44px); } .psbw-anim [data-reveal="zoom"] { transform: scale(0.88); } .psbw-anim [data-reveal="flip"] { transform: perspective(900px) rotateX(-18deg) translateY(30px); transform-origin: top center; } .psbw-anim [data-reveal].is-visible { opacity: 1; transform: none; } .psbw-anim [data-tilt].is-visible { transition: transform 0.18s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Step numbers pop after the card */ .psbw-anim .step-num { transform: scale(0.3) rotate(-30deg); opacity: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s, opacity 0.3s ease 0.25s; } .psbw-anim .step-card.is-visible .step-num { transform: none; opacity: 1; } /* Section label dot pulse */ .section-label::before { animation: dot-pulse 2.4s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--aqua-3); } 50% { box-shadow: 0 0 0 7px rgba(34, 201, 186, 0.12); } } /* Underline draws in on revealed headings */ .psbw-anim .text-gradient { background-size: 0 8px; transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; } .psbw-anim .is-visible .text-gradient, .psbw-anim .hero .text-gradient { background-size: 40px 8px; } /* -------------------------------------------------------------------------- Page + hero entrance -------------------------------------------------------------------------- */ @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } .psbw-anim .site-main { animation: page-in 0.5s ease both; } @keyframes hero-in { to { opacity: 1; transform: none; } } .psbw-anim .hero-content > * { opacity: 0; transform: translateY(28px); animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .psbw-anim .hero-content > *:nth-child(1) { animation-delay: 0.05s; } .psbw-anim .hero-content > *:nth-child(2) { animation-delay: 0.18s; } .psbw-anim .hero-content > *:nth-child(3) { animation-delay: 0.32s; } .psbw-anim .hero-content > *:nth-child(4) { animation-delay: 0.46s; } .psbw-anim .hero-content > *:nth-child(5) { animation-delay: 0.60s; } .psbw-anim .hero-visual { opacity: 0; transform: translateY(40px) scale(0.94); animation: hero-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards; } /* Headline words rise one by one */ .psbw-anim .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.6em) rotate(3deg); animation: word-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .psbw-anim .hero h1 .w:nth-child(1) { animation-delay: 0.20s; } .psbw-anim .hero h1 .w:nth-child(2) { animation-delay: 0.28s; } .psbw-anim .hero h1 .w:nth-child(3) { animation-delay: 0.36s; } .psbw-anim .hero h1 .w:nth-child(4) { animation-delay: 0.44s; } .psbw-anim .hero h1 .w:nth-child(5) { animation-delay: 0.52s; } .psbw-anim .hero h1 .w:nth-child(6) { animation-delay: 0.60s; } @keyframes word-in { to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Blobs, panel, vial, chips -------------------------------------------------------------------------- */ .blob { animation: blob-morph 14s ease-in-out infinite; } .blob--2 { animation-duration: 18s; animation-direction: reverse; } .blob--3 { animation-duration: 11s; } @keyframes blob-morph { 0%, 100% { border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; transform: translate(0, 0) rotate(0deg); } 33% { border-radius: 58% 42% 39% 61% / 39% 61% 39% 61%; transform: translate(14px, -18px) rotate(6deg); } 66% { border-radius: 39% 61% 55% 45% / 61% 45% 55% 39%; transform: translate(-12px, 12px) rotate(-4deg); } } .hero-panel { animation: panel-float 7s ease-in-out infinite; } @keyframes panel-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hero-vial { animation: vial-float 6.5s ease-in-out infinite; filter: drop-shadow(0 24px 30px rgba(26, 18, 38, 0.28)); } @keyframes vial-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } } .hero-vial .wave { animation: wave-slide 4s linear infinite; } .hero-vial .wave--2 { animation-duration: 6.5s; animation-direction: reverse; opacity: 0.55; } @keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(-120px); } } .hero-vial .bubble { animation: vial-bubble var(--d, 5s) ease-in infinite; animation-delay: var(--dl, 0s); } @keyframes vial-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 60% { transform: translateY(-70px) translateX(4px); } 100% { transform: translateY(-125px) translateX(-3px); opacity: 0; } } .float-chip { animation: chip-float var(--t, 6s) ease-in-out infinite; animation-delay: var(--dl, 0s); } @keyframes chip-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } } /* -------------------------------------------------------------------------- Ticker marquee -------------------------------------------------------------------------- */ .ticker-track { animation: ticker-scroll 32s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- Tilt cards -------------------------------------------------------------------------- */ [data-tilt] { transform-style: preserve-3d; position: relative; } [data-tilt] .tilt-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.5), transparent 55%); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } [data-tilt]:hover .tilt-shine { opacity: 1; } .pack-card--featured .tilt-shine { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 45, 135, 0.35), transparent 55%); } /* Feature icons wiggle */ .feature-card:hover .feature-icon svg, .cert-card:hover .cert-icon svg { animation: icon-wiggle 0.6s ease; } @keyframes icon-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.12); } 75% { transform: rotate(10deg) scale(1.12); } } /* Magnetic buttons (transform set by JS) */ .btn--magnetic { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease, background 0.15s ease; } /* -------------------------------------------------------------------------- Header behaviour, progress, cart, back-to-top -------------------------------------------------------------------------- */ .site-header { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .site-header.is-hidden { transform: translateY(calc(-100% - 20px)); } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--pink), var(--aqua)); z-index: 10001; pointer-events: none; transition: width 0.1s linear; } @keyframes cart-bump { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(0.95) rotate(4deg); } 100% { transform: scale(1); } } .header-cart-link.is-bumping { animation: cart-bump 0.6s ease; background: var(--pink); } .back-to-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-hard-pink); cursor: pointer; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 9000; } .back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .back-to-top:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pink); } .back-to-top svg { width: 20px; height: 20px; } /* Cursor glow that follows the pointer over the hero */ .hero-glow-cursor { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 106, 169, 0.35), transparent 65%); pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s ease; z-index: 1; filter: blur(10px); } .hero:hover .hero-glow-cursor { opacity: 1; } /* -------------------------------------------------------------------------- Responsive + reduced motion -------------------------------------------------------------------------- */ @media (max-width: 960px) { .hero-glow-cursor { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .hero h1 .w { opacity: 1 !important; transform: none !important; } .ticker-track { animation: none !important; } .text-gradient { background-size: 40px 8px !important; } } /* Brand vial image motion */ .hero-vial-img { animation: vial-float 6.5s ease-in-out infinite; } .hero-vial-reflection { animation: reflection-pulse 6.5s ease-in-out infinite; } @keyframes reflection-pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(0.82); opacity: 0.6; } } .hero-ghost-vial { animation: ghost-drift 18s ease-in-out infinite; } @keyframes ghost-drift { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(10deg) translateY(-24px); } } .psbw-anim .pack-visual img { opacity: 0; transform: translateX(-50%) translateY(30px) rotate(0deg); } .psbw-anim .pack-card.is-visible .pack-visual img { opacity: 1; transform: translateX(-50%) translateX(var(--x, 0px)) rotate(var(--r, 0deg)); transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease; transition-delay: calc(0.3s + var(--i, 0) * 80ms); } .psbw-anim .pack-card.is-visible:hover .pack-visual img { transform: translateX(-50%) translateX(calc(var(--x, 0px) * 1.35)) rotate(calc(var(--r, 0deg) * 1.5)) translateY(-8px); transition-delay: calc(var(--i, 0) * 30ms); } .psbw-anim .pack-card.is-visible:hover .pack-visual--1 img { transform: translateX(-50%) rotate(-8deg) translateY(-8px) scale(1.06); } @media (prefers-reduced-motion: reduce) { .pack-visual img { opacity: 1 !important; } } /* -------------------------------------------------------------------------- v2.2 motion: header fill glow, reconstitution scene, 404 spill, thank-you pop, cursor bubbles -------------------------------------------------------------------------- */ /* Header vial: glow once full */ .logo-mark.is-full .logo-fill { animation: fill-glow 0.9s ease-in-out infinite alternate; } @keyframes fill-glow { from { opacity: 0.75; } to { opacity: 1; filter: drop-shadow(0 0 6px var(--aqua)); } } /* Reconstitution scene (12s loop, paused until scrolled into view) */ .recon-svg .rv-anim { animation-duration: 12s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; } .recon-stage.is-visible .rv-anim { animation-play-state: running; } .rv-water { transform-box: fill-box; transform-origin: bottom center; animation-name: rv-water; } .rv-mix { transform-box: fill-box; transform-origin: bottom center; transform: scaleY(0); animation-name: rv-mix; } .rv-powder { animation-name: rv-powder; } .rv-bubbles { opacity: 0; animation-name: rv-bubbles; } .rv-vial-r { transform-box: fill-box; transform-origin: bottom center; animation-name: rv-swirl; } .rv-pad { opacity: 0; transform: translate(90px, 100px); animation-name: rv-pad; } .rv-sparkle { opacity: 0; animation-name: rv-sparkle; } .rv-syr { transform: translate(137px, -200px); animation-name: rv-syr; } .rv-plunger { animation-name: rv-plunger; } .rv-syr-fill { transform-box: fill-box; transform-origin: bottom center; transform: scaleY(0); animation-name: rv-syrfill; } @keyframes rv-pad { 0% { transform: translate(96px, 100px); opacity: 0; } 3% { opacity: 1; } 12% { transform: translate(204px, 100px); opacity: 1; } 16% { transform: translate(436px, 100px); opacity: 1; } 26% { transform: translate(544px, 100px); opacity: 1; } 30%, 100% { transform: translate(600px, 100px); opacity: 0; } } @keyframes rv-sparkle { 0%, 4% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 0.2; } 18% { opacity: 1; } 24% { opacity: 0.2; } 28% { opacity: 1; } 32%, 100% { opacity: 0; } } @keyframes rv-syr { 0%, 30% { transform: translate(137px, -200px); } 36%, 52% { transform: translate(137px, -5px); } 58% { transform: translate(137px, -130px); } 64% { transform: translate(477px, -130px); } 68%, 84% { transform: translate(477px, -5px); } 90%, 100% { transform: translate(477px, -200px); } } @keyframes rv-plunger { 0%, 36% { transform: translateY(0); } 52%, 68% { transform: translateY(-88px); } 82%, 100% { transform: translateY(0); } } @keyframes rv-syrfill { 0%, 36% { transform: scaleY(0); } 52%, 68% { transform: scaleY(1); } 82%, 100% { transform: scaleY(0); } } @keyframes rv-water { 0%, 36% { transform: scaleY(1); } 52%, 100% { transform: scaleY(0.8); } } @keyframes rv-mix { 0%, 68% { transform: scaleY(0); } 82%, 100% { transform: scaleY(0.85); } } @keyframes rv-powder { 0%, 70% { opacity: 1; } 84%, 100% { opacity: 0.12; } } @keyframes rv-bubbles { 0%, 84% { opacity: 0; transform: translateY(0); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } } @keyframes rv-swirl { 0%, 84% { transform: rotate(0deg); } 88% { transform: rotate(-4deg); } 92% { transform: rotate(4deg); } 96% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } } /* Step cards light up in sync with the scene */ .recon-stage.is-visible .recon-step { animation: 12s ease-in-out infinite; transition: none; } .recon-stage.is-visible .recon-step--1 { animation-name: rv-s1; } .recon-stage.is-visible .recon-step--2 { animation-name: rv-s2; } .recon-stage.is-visible .recon-step--3 { animation-name: rv-s3; } @keyframes rv-s1 { 0%, 29% { opacity: 1; border-color: var(--ink); background: var(--blush); transform: translateY(-4px); } 31%, 100% { opacity: 0.55; border-color: var(--line); background: #fff; transform: none; } } @keyframes rv-s2 { 0%, 29% { opacity: 0.55; border-color: var(--line); background: #fff; transform: none; } 31%, 62% { opacity: 1; border-color: var(--ink); background: var(--blush); transform: translateY(-4px); } 64%, 100% { opacity: 0.55; border-color: var(--line); background: #fff; transform: none; } } @keyframes rv-s3 { 0%, 62% { opacity: 0.55; border-color: var(--line); background: #fff; transform: none; } 64%, 100% { opacity: 1; border-color: var(--ink); background: var(--blush); transform: translateY(-4px); } } /* 404 spill */ .spill-vial { animation: spill-tip 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } @keyframes spill-tip { from { transform: translateX(-50%) rotate(0deg) translateY(-20px); } to { transform: translateX(-30%) rotate(96deg) translateY(30px); } } .spill-puddle { animation: puddle-grow 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; } @keyframes puddle-grow { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } } .spill-drop { animation: drop-fall 1.2s ease-in infinite; } .spill-drop--1 { animation-delay: 1.3s; } .spill-drop--2 { animation-delay: 1.7s; } .spill-drop--3 { animation-delay: 2.1s; } @keyframes drop-fall { 0% { opacity: 0; transform: translateY(0) scaleY(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px) scaleY(1.2); } } /* Thank-you vial pop */ .thankyou-vial { animation: vial-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both, vial-float 6s ease-in-out 1.1s infinite; } @keyframes vial-pop { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Cursor bubbles */ .cursor-bubble { animation: bubble-trail 1.15s ease-out forwards; } @keyframes bubble-trail { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 15% { opacity: 1; } 80% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 110px)) scale(1); opacity: 0.9; } 100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 128px)) scale(1.7); opacity: 0; border-width: 0.5px; } } @media (prefers-reduced-motion: reduce) { .recon-svg .rv-anim, .recon-stage.is-visible .recon-step { animation: none !important; } .recon-step { opacity: 1 !important; } .rv-syr { transform: translate(137px, -200px) !important; } .rv-mix { transform: scaleY(0.85) !important; } .spill-vial { transform: translateX(-30%) rotate(96deg) translateY(30px) !important; } .spill-puddle { transform: translateX(-50%) scale(1) !important; } .cursor-bubble { display: none !important; } }