/* Flow State motion styles. Previews only (loaded with brand-switcher.js): remove or pick one before launch. is set by the switcher (?motion= in the address works too). Hooks (any page can use them): .js .reveal / .reveal.in scroll reveals (site; content is visible without JS) .m-play [data-m-reveal] entry animation, replayed by adding .m-play (brand lab) [data-m="hero"] hero block [data-m="heading"], .section h2 section headings [data-m="card"], .card cards .btn, [data-m="btn"] buttons .doodle, [data-m="doodle"] hand-drawn marks .fs-img, .doodle-row, [data-m="img"] imagery bands [data-m="draw"] path, .brave .ul path underline that draws in (path needs pathLength="1") [data-m="twinkle"], .portrait .star, .spark-a star motif Rules: nothing flashes faster than 3 times a second; prefers-reduced-motion turns everything off; colour never carries meaning. Animations use the individual translate/rotate/scale properties so they add to each element's own transform. */ @keyframes m-fadeup { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @keyframes m-pop { 0% { opacity: 0; scale: .94; } 70% { opacity: 1; scale: 1.02; } 100% { opacity: 1; scale: 1; } } @keyframes m-drift-in { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } } @keyframes m-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 75% { rotate: 5deg; } } @keyframes m-bounce { 0%, 100% { translate: 0 0; } 40% { translate: 0 -5px; } 70% { translate: 0 1px; } } @keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @keyframes m-sway { 0%, 100% { translate: -6px 0; } 50% { translate: 6px 0; } } @keyframes m-glow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes m-twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .8; opacity: .65; } } @keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* ---- Still: nothing moves ---- */ :root[data-motion="still"] .js .reveal, :root[data-motion="still"].js .reveal { opacity: 1; transform: none; transition: none; } :root[data-motion="still"] :is(.btn, [data-m="btn"], .door, .card, [data-m="card"]):hover { transform: none; } :root[data-motion="still"] :is(.btn, [data-m="btn"]):hover .arrow { transform: none; } /* ---- Gentle: soft fade-up on scroll, small hover lift ---- */ :root[data-motion="gentle"] .m-play [data-m-reveal] { animation: m-fadeup .7s ease both; } :root[data-motion="gentle"] :is(.card, [data-m="card"]) { transition: translate .25s ease, box-shadow .25s ease; } :root[data-motion="gentle"] :is(.card, [data-m="card"]):hover { translate: 0 -3px; } :root[data-motion="gentle"] :is(.btn, [data-m="btn"]):hover, :root[data-motion="gentle"] .door:hover { transform: translateY(-2px); } /* ---- Playful: pop-in reveals, doodles wiggle, buttons bounce, cards tilt ---- */ :root[data-motion="playful"].js .reveal { opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); } :root[data-motion="playful"].js .reveal.in { opacity: 1; transform: none; } :root[data-motion="playful"] .m-play [data-m-reveal] { animation: m-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; } :root[data-motion="playful"] :is(.doodle, [data-m="doodle"]) { animation: m-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 50%; } :root[data-motion="playful"] :is(.btn, [data-m="btn"]):hover { animation: m-bounce .5s ease; } :root[data-motion="playful"] :is(.card, [data-m="card"], .door) { transition: transform .25s ease; } :root[data-motion="playful"] :is(.card, [data-m="card"], .door):hover { transform: rotate(-1.2deg) translateY(-4px); } /* ---- Flowing: slow drift-in, gentle float, colour drift in the hero, imagery sways ---- */ :root[data-motion="flowing"].js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1); } :root[data-motion="flowing"].js .reveal.in { opacity: 1; transform: none; } :root[data-motion="flowing"] .m-play [data-m-reveal] { animation: m-drift-in 1.3s cubic-bezier(.22, 1, .36, 1) both; } :root[data-motion="flowing"] [data-m="hero"] { position: relative; isolation: isolate; } :root[data-motion="flowing"] [data-m="hero"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: -1; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .10) 45%, transparent 70%); background-size: 250% 250%; animation: m-glow 16s ease-in-out infinite; } :root[data-motion="flowing"] :is(.doodle, [data-m="doodle"], [data-m="twinkle"]) { animation: m-float 6s ease-in-out infinite; } :root[data-motion="flowing"] :is(.doodle-row, [data-m="img"]) { animation: m-sway 9s ease-in-out infinite; } :root[data-motion="flowing"] :is(.fs-img, .portrait-art) { translate: 0 calc(var(--m-sy, 0) * -0.04px); } /* ---- Lively: staggered reveals, underline draws in, star twinkles, buttons lift ---- */ :root[data-motion="lively"] .m-play [data-m-reveal] { animation: m-fadeup .6s ease both; } :root[data-motion="lively"] .m-play [data-m-reveal]:nth-child(2), :root[data-motion="lively"].js :is(.doors, .steps, .spec) > :nth-child(2) { animation-delay: .12s; transition-delay: .12s; } :root[data-motion="lively"] .m-play [data-m-reveal]:nth-child(3), :root[data-motion="lively"].js :is(.doors, .steps, .spec) > :nth-child(3) { animation-delay: .24s; transition-delay: .24s; } :root[data-motion="lively"] .m-play [data-m-reveal]:nth-child(4), :root[data-motion="lively"].js :is(.doors, .steps, .spec) > :nth-child(4) { animation-delay: .36s; transition-delay: .36s; } :root[data-motion="lively"] :is([data-m="draw"], .brave .ul) path { stroke-dasharray: 1; animation: m-draw 1.1s .3s ease-out both; } :root[data-motion="lively"] :is([data-m="twinkle"], .portrait .star, .spark-a) { animation: m-twinkle 2.4s ease-in-out infinite; transform-origin: 50% 50%; } :root[data-motion="lively"] :is(.btn, [data-m="btn"]) { transition: transform .2s ease, box-shadow .2s ease; } :root[data-motion="lively"] :is(.btn, [data-m="btn"]):hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } :root[data-motion="lively"] :is(.card, [data-m="card"], .door):hover { transform: translateY(-5px); } /* ---- Reduced motion: everything static, whatever the style ---- */ @media (prefers-reduced-motion: reduce) { :root[data-motion] *, :root[data-motion] *::after { animation: none !important; transition: none !important; translate: none !important; scale: none !important; rotate: none !important; } :root[data-motion].js .reveal { opacity: 1 !important; transform: none !important; } :root[data-motion] :is([data-m="draw"], .brave .ul) path { stroke-dasharray: none !important; } }