/* ButterFact motion edition — restrained, continuous, and user-controllable. */
:root{--ease-silk:cubic-bezier(.22,1,.36,1)}
.review-banner{position:relative;gap:22px;background:linear-gradient(110deg,#f0eaf7,#edf1f8);letter-spacing:.1em;padding-inline:18px;min-height:37px}
.motion-control{display:inline-flex;gap:7px;align-items:center;border:1px solid #9674b12e;border-radius:30px;padding:5px 10px;background:#ffffff7d;color:#705581;font-size:10px;letter-spacing:0;white-space:nowrap}.motion-control:hover{background:#fff}.motion-control:disabled{opacity:.75;cursor:default}.motion-icon{font-size:9px}
.site-header{box-shadow:0 12px 35px #67438704;background:#faf9fce8}
.hero{position:relative}.hero h1{font-weight:450;letter-spacing:-.055em}.hero h1 em{background-size:220% 100%;animation:ink-flow 14s ease-in-out infinite;background-image:linear-gradient(110deg,#74419e 8%,#a250a5 38%,#526daa 65%,#74419e 95%)}
.hero-scene{isolation:isolate}.hero-scene .scene-grid{opacity:.55}.hero-scene .scene-glow{animation:aurora-breathe 13s ease-in-out infinite;will-change:transform}
.scene-aurora{position:absolute;inset:15% 8% 14%;background:radial-gradient(ellipse at 65% 35%,#e6c4e84f,transparent 58%),radial-gradient(ellipse at 30% 65%,#b9d5ed40,transparent 63%);filter:blur(20px);animation:aurora-drift 18s ease-in-out infinite alternate;z-index:-1;border-radius:50%}
.hero-scene .orbit{opacity:.7}.hero-scene .orbit-a{animation:orbit-sway-a 22s ease-in-out infinite}.hero-scene .orbit-b{animation:orbit-sway-b 26s ease-in-out infinite}.hero-scene .orbit-c:before{animation:orbit-spin 90s linear infinite}
.hero-scene .emblem{animation:logo-levitate 9s ease-in-out infinite;filter:drop-shadow(0 16px 21px #7649991c);z-index:2}
.hero-scene .scene-bottom{z-index:3}.ripple-art{position:absolute;inset:4% -2% 3%;width:104%;height:89%;pointer-events:none;opacity:.55}.ripple-line{stroke-width:.8;stroke-dasharray:7 8;animation:line-flow 34s linear infinite}.line-two{animation-duration:42s;animation-direction:reverse;opacity:.65}.line-three{opacity:.5;stroke-dasharray:none}.ripple-dots{fill:#b08ac8}.ripple-dots circle{transform-box:fill-box;transform-origin:center;animation:dot-breathe 6s ease-in-out infinite}.ripple-dots circle:nth-child(2n){animation-delay:-3s}
.travel-spark{position:absolute;top:0;left:0;width:5px;height:5px;border-radius:50%;background:#9e6fc2;box-shadow:0 0 12px #b98edc88;offset-path:ellipse(43% 29% at 50% 47%);offset-rotate:0deg;animation:spark-lap 19s linear infinite;opacity:.7}.spark-two{width:3px;height:3px;background:#8aa8d1;animation-duration:27s;animation-delay:-12s;animation-direction:reverse;offset-path:ellipse(35% 37% at 50% 47%)}
.primary{position:relative;overflow:hidden;border:1px solid #8457b1;box-shadow:0 7px 22px #7746a526,inset 0 1px #ffffff28;transition:transform .35s var(--ease-silk),box-shadow .35s}.primary:after{content:'';position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 20%,#ffffff18 48%,transparent 75%);transform:translateX(-130%);transition:transform .7s var(--ease-silk);pointer-events:none}.primary:hover:after{transform:translateX(130%)}.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px #7746a533}.primary>span:last-child{transition:transform .35s var(--ease-silk)}.primary:hover>span:last-child{transform:translate(3px,-3px)}
.trust-strip{background:linear-gradient(90deg,transparent,#ffffff66,transparent)}
.review-example{padding-top:78px;padding-bottom:90px;gap:38px 65px}.example-heading{padding-top:16px}.example-heading h2{max-width:490px}.example-heading .eyebrow{display:flex;align-items:center;gap:12px}.example-heading .eyebrow:before{content:'';width:25px;height:1px;background:#b99bcf}
.branch-explorer{position:relative;isolation:isolate;border-color:#a888bc26;background:linear-gradient(135deg,#f2eaf9dd,#f9f6fccc 48%,#eaf2f9cc);box-shadow:0 22px 65px -30px #6840873b,inset 0 1px #fff;border-radius:24px;padding:30px 32px;overflow:hidden;transition:box-shadow .5s,background .5s}.branch-explorer:before{content:'';position:absolute;inset:-20%;z-index:-1;background:radial-gradient(ellipse at 35% 20%,#f0d6e83d,transparent 60%);animation:aurora-drift 16s ease-in-out infinite alternate;pointer-events:none}
.branch-prompt{margin-bottom:17px}.branch-buttons{gap:8px}.branch-buttons button{padding:9px 14px;box-shadow:0 2px 6px #59326b04;transition:background .3s,color .3s,transform .3s,box-shadow .3s}.branch-buttons button:hover{transform:translateY(-2px);box-shadow:0 4px 10px #7e4c9a12}.branch-buttons button[aria-pressed=true]{background:linear-gradient(130deg,#8950af,#6d48a4);box-shadow:0 4px 12px #71429321;border-color:transparent}
.branch-art{height:156px;margin:18px -4px -6px}.branch-art svg{width:100%;height:100%;overflow:visible}.skateboard{transform-box:fill-box;transform-origin:center;animation:skate-float 6s ease-in-out infinite}.board-shadow{transform-box:fill-box;transform-origin:center;animation:shadow-breathe 6s ease-in-out infinite}.branch-trails path{stroke-dasharray:180;stroke-dashoffset:0;animation:trail-reveal 1.3s var(--ease-silk) both}.branch-trails path:first-child{animation-delay:.1s}.branch-trails path:last-child{animation-delay:.2s}.branch-motif{transform-box:fill-box;transform-origin:center;animation:motif-appear .7s var(--ease-silk) both}.branch-dot{animation:dot-breathe 4s ease-in-out infinite}.dot-two{animation-delay:-2s}.branch-traveller{offset-path:path('M154 88C195 88 218 86 237 86');animation:branch-spark 3.5s ease-in-out infinite}
.branch-result{min-height:132px;padding-top:9px;padding-bottom:20px;gap:16px}.branch-result>div{animation:result-enter .55s var(--ease-silk) both}.branch-symbol{width:33px;height:33px;font-size:21px;flex-shrink:0;animation:motif-appear .6s var(--ease-silk) both}.branch-result h3{font-size:23px;line-height:1.5}.branch-result p{font-size:14px;margin-top:9px}.branch-footer{font-size:12px;line-height:1.85}
.feature-panel{border-color:#b49ac72b;box-shadow:0 14px 45px -28px #76528d3b,inset 0 1px #fff;transition:transform .55s var(--ease-silk),box-shadow .55s var(--ease-silk),border-color .4s;border-radius:22px}.feature-panel:hover{transform:translateY(-5px);box-shadow:0 24px 48px -24px #76528d35;border-color:#a77bc34a}.feature-number{width:30px;height:30px;border:1px solid #ab8abd34;display:grid;place-items:center;border-radius:50%;letter-spacing:.04em;margin-bottom:22px}.feature-label{color:#886493}.concept-window{box-shadow:0 12px 28px #50346010,inset 0 1px #fff;transition:transform .5s var(--ease-silk)}.feature-panel:hover .concept-window{transform:translateY(-3px)}
.bf-symbol{position:relative;display:inline-block;overflow:hidden;width:28px;height:30px;flex-shrink:0;mix-blend-mode:multiply}.bf-symbol img{position:absolute;max-width:none;width:40px;height:auto;left:-6px;top:0;filter:none}.concept-bar{padding:11px 16px;min-height:53px}.concept-bar .concept-menu{font-size:15px;color:#b09abd}.product-brand{display:inline-flex!important;align-items:center;gap:9px!important;letter-spacing:.1em}.product-brand .bf-symbol{width:25px;height:27px}.product-brand .bf-symbol img{width:35px;left:-5px}
.choice-tile{animation:choice-lift 9s ease-in-out infinite}.choice-tile:nth-child(2){animation-delay:-6s}.choice-tile:nth-child(3){animation-delay:-3s}
.map-you:before,.map-you:after{content:'';position:absolute;inset:-5px;border:1px solid #9d76bb55;border-radius:inherit;animation:map-ripple 5s ease-out infinite;pointer-events:none}.map-you:after{animation-delay:2.5s}.map-pin{animation:pin-float 6s ease-in-out infinite}.pin-two{animation-delay:-2s}.pin-three{animation-delay:-4s}
.vein-connector{transform-origin:top;animation:vein-draw 8s ease-in-out infinite}.middle-node{animation:node-respond 8s ease-in-out infinite}.vein-split{transform-origin:top;animation:split-draw 8s ease-in-out infinite}.vein-children .vein-node{animation:child-respond 8s ease-in-out infinite}.vein-children .vein-node:last-child{animation-delay:.6s}.vein-tail{animation:dot-breathe 5s ease-in-out infinite}
.review-vision{box-shadow:inset 0 1px #fff,0 16px 35px -28px #79519e44}.product-watermark{display:none}.portrait{box-shadow:0 10px 30px #76528d0c}.beta-area{position:relative;overflow:hidden}.beta-orbit span{animation:orbit-sway-small 16s ease-in-out infinite}.beta-orbit span+span{animation-direction:reverse;animation-duration:21s}
/* Reveals never hide essential content when scripting or observers are unavailable. */
.motion-ready.reveal-pending{opacity:0;transform:translateY(18px)}.motion-ready.reveal-visible{opacity:1;transform:none;transition:opacity .8s var(--ease-silk),transform .9s var(--ease-silk);transition-delay:var(--reveal-delay,0ms)}
.hero-copy>*{animation:hero-arrive .95s var(--ease-silk) both}.hero-copy>*:nth-child(2){animation-delay:.09s}.hero-copy>*:nth-child(3){animation-delay:.18s}.hero-copy>*:nth-child(4){animation-delay:.26s}.hero-copy>*:nth-child(5){animation-delay:.34s}
@keyframes ink-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes aurora-breathe{0%,100%{transform:scale(.98);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes aurora-drift{from{transform:translate(-2%,-3%) rotate(-8deg)}to{transform:translate(3%,4%) rotate(9deg)}}
@keyframes orbit-sway-a{0%,100%{transform:translate(-50%,-50%) rotate(-34deg)}50%{transform:translate(-50%,-50%) rotate(-24deg)}}
@keyframes orbit-sway-b{0%,100%{transform:translate(-50%,-50%) rotate(34deg)}50%{transform:translate(-50%,-50%) rotate(23deg)}}
@keyframes orbit-sway-small{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(-20deg)}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes logo-levitate{0%,100%{transform:translate(-50%,-50%) rotate(-8deg)}50%{transform:translate(-50%,-53%) rotate(-5deg)}}
@keyframes line-flow{to{stroke-dashoffset:-180}}
@keyframes dot-breathe{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes spark-lap{to{offset-distance:100%}}
@keyframes skate-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes shadow-breathe{0%,100%{transform:scaleX(1);opacity:.09}50%{transform:scaleX(.88);opacity:.06}}
@keyframes trail-reveal{from{stroke-dashoffset:180;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes branch-spark{0%{offset-distance:0%;opacity:0}15%{opacity:.8}85%{opacity:.8}100%{offset-distance:100%;opacity:0}}
@keyframes motif-appear{from{opacity:0;transform:scale(.91)}to{opacity:1;transform:scale(1)}}
@keyframes result-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes choice-lift{0%,34%,100%{transform:translateY(0);box-shadow:0 0 0 transparent}12%,23%{transform:translateY(-5px);box-shadow:0 6px 15px #8860a31a}}
@keyframes map-ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
@keyframes pin-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes vein-draw{0%,10%{transform:scaleY(.25);opacity:.3}30%,85%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.25);opacity:.3}}
@keyframes node-respond{0%,20%,100%{box-shadow:0 0 0 0 #a47ac600;background:#f4edf9}35%,50%{box-shadow:0 0 0 5px #a47ac617;background:#e9ddf5}}
@keyframes split-draw{0%,28%{opacity:.25}50%,90%{opacity:1}100%{opacity:.25}}
@keyframes child-respond{0%,45%,100%{box-shadow:0 0 0 0 #9faed100}60%,75%{box-shadow:0 0 0 4px #9faed122;background:#e7ecfa}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
html[data-motion=paused] *,html[data-motion=paused] *:before,html[data-motion=paused] *:after,html[data-idle=true] *,html[data-idle=true] *:before,html[data-idle=true] *:after{animation-play-state:paused!important}
html[data-motion=paused] .reveal-pending,html[data-motion=reduced] .reveal-pending{opacity:1;transform:none}
html[data-motion=paused] .hero-copy>*,html[data-motion=paused] .branch-result>*,html[data-motion=paused] .branch-motif,html[data-motion=paused] .branch-trails path{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
@media(max-width:920px){.review-example{gap:30px;padding-block:50px 65px}.example-heading{padding-top:0}.branch-explorer{padding:29px}.branch-art{height:170px}.branch-result{min-height:110px}.ripple-art{opacity:.4}}
@media(max-width:600px){.review-banner{gap:12px;font-size:8px;min-height:36px}.motion-control{font-size:9px;padding:5px 8px}.hero-copy>*{animation-duration:.75s}.hero-scene{margin-top:24px}.ripple-art{opacity:.4}.travel-spark{width:3px;height:3px}.review-example{padding-block:35px 48px;gap:25px}.branch-explorer{padding:25px 21px;border-radius:20px}.branch-art{height:148px;margin-top:14px}.branch-buttons button{padding:8px 11px}.branch-result{min-height:150px;padding-top:7px;gap:12px}.branch-result h3{font-size:21px}.branch-result p{font-size:13px}.branch-footer{font-size:11px}.feature-panel{border-radius:19px}.feature-panel:hover{transform:none}.feature-number{margin-bottom:17px}.motion-ready.reveal-pending{transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready.reveal-pending{opacity:1;transform:none}.travel-spark,.branch-traveller{display:none}.branch-trails path{stroke-dashoffset:0}.hero-copy>*,.branch-result>*,.branch-motif{opacity:1;transform:none}}