/* ============================================================ Reflective — gentle motion system Every animation here is slow, soft, and optional: the whole file collapses to "everything visible, nothing moves" under prefers-reduced-motion. Motion should feel like breathing, never like a notification. ============================================================ */ /* Scroll reveal — elements start visible (no-JS safe); the .js class on arms the hidden initial state. */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.js .reveal.in { opacity: 1; transform: none; } /* Staggered children: put .reveal-group on the parent */ html.js .reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } html.js .reveal-group.in > * { opacity: 1; transform: none; } html.js .reveal-group.in > *:nth-child(1) { transition-delay: 0.05s; } html.js .reveal-group.in > *:nth-child(2) { transition-delay: 0.16s; } html.js .reveal-group.in > *:nth-child(3) { transition-delay: 0.27s; } html.js .reveal-group.in > *:nth-child(4) { transition-delay: 0.38s; } html.js .reveal-group.in > *:nth-child(5) { transition-delay: 0.49s; } html.js .reveal-group.in > *:nth-child(6) { transition-delay: 0.6s; } /* Watercolor drift — barely-there, 50s round trip */ .drift { animation: drift 50s ease-in-out infinite alternate; } @keyframes drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-1.8%, 1.2%, 0) rotate(-0.6deg); } } /* Breathing — a slow inhale/exhale on soft background shapes. Timed to a calm breath cycle (~9s). */ .breathe { animation: breathe 9s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.055); opacity: 1; } } /* Floating product chips over hero art */ .float-soft { animation: floatSoft 7.5s ease-in-out infinite; } .float-soft.alt { animation-delay: -3.7s; animation-duration: 8.5s; } @keyframes floatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* 167-hours dot grid: dots bloom in sequence once visible */ html.js .hour-dots i { opacity: 0; transform: scale(0.4); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); transition-delay: calc(var(--dot-i, 0) * 14ms); } html.js .hour-dots.in i { opacity: 1; transform: scale(1); } /* The single session dot keeps a quiet pulse after blooming */ html.js .hour-dots.in i.session { animation: sessionPulse 6s ease-in-out 2.8s infinite; } @keyframes sessionPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(112, 41, 99, 0.3); } 45% { box-shadow: 0 0 0 6px rgba(112, 41, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(112, 41, 99, 0); } } /* Workflow timeline: the plum line inks itself in once the section is visible, the numbered nodes bloom behind it, then a single dot keeps walking the week — slowly, like a reminder finding its moment. */ .wf-ink { transition: stroke-dashoffset 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; } html.js .workflow.in .wf-ink { stroke-dashoffset: 0; } html.js .wf-node span { opacity: 0; transform: scale(0.5); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1); } html.js .workflow.in .wf-step:nth-child(1) .wf-node span { opacity: 1; transform: none; transition-delay: 0.7s; } html.js .workflow.in .wf-step:nth-child(2) .wf-node span { opacity: 1; transform: none; transition-delay: 1.5s; } html.js .workflow.in .wf-step:nth-child(3) .wf-node span { opacity: 1; transform: none; transition-delay: 2.3s; } html.js .wf-step .wf-art { opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } html.js .workflow.in .wf-step .wf-art { opacity: 1; transform: none; } html.js .workflow.in .wf-step:nth-child(2) .wf-art { transition-delay: 0.14s; } html.js .workflow.in .wf-step:nth-child(3) .wf-art { transition-delay: 0.28s; } .wf-traveler { transition: opacity 1.2s ease 3.2s; } html.js .workflow.in .wf-traveler { opacity: 1; } .wf-node span { animation: none; } html.js .workflow.in .wf-node span { animation: sessionPulse 7s ease-in-out 3.6s infinite; } /* Fireflies on the night band */ .firefly { animation: firefly 5.5s ease-in-out infinite; } .firefly.f2 { animation-delay: -1.8s; animation-duration: 6.5s; } .firefly.f3 { animation-delay: -3.4s; animation-duration: 7.2s; } @keyframes firefly { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.85; } } } /* Reduced motion: everything is simply present. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; } html.js .hour-dots i { opacity: 1; transform: none; } .wf-ink { stroke-dashoffset: 0; } .wf-traveler { display: none; } .wf-node span, .wf-art { opacity: 1 !important; transform: none !important; } }