/* baddieastrology.com — base look picked 12 Sep 2026 (design/round-4/v2). Sections get added below the hero. */
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{overflow-x:hidden}
body{background:#040306;color:#f5f0fb;font-family:Inter,system-ui,sans-serif;font-weight:500;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
.orb{position:absolute;left:50%;top:64vh;width:120vmin;height:120vmin;transform:translateX(-50%);border-radius:50%;opacity:.85;background:radial-gradient(circle at 50% 35%,#b9a0ff 0%,#7a4dff 20%,#3a1a8c 46%,#120736 64%,transparent 72%);filter:blur(48px);animation:rise 14s ease-in-out infinite alternate;pointer-events:none;z-index:0}
.halo{position:absolute;left:50%;top:64vh;width:170vmin;height:170vmin;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#7a2eff44 0%,transparent 60%);filter:blur(80px);pointer-events:none;animation:rise 14s ease-in-out infinite alternate;z-index:0}
@keyframes rise{to{transform:translateX(-50%) translateY(-5vh) scale(1.04)}}
main{position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:max(2.2rem,env(safe-area-inset-top)) 1.25rem max(1.4rem,env(safe-area-inset-bottom))}
.brand{color:#c9b3f0;opacity:.85}
.stage{position:relative;width:100%;max-width:24rem;margin:auto 0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 0}
h1{font-weight:400;font-size:clamp(3rem,14vw,5.6rem);line-height:.92;letter-spacing:-.025em}
p.lead{margin-top:1rem;color:#dccff2;max-width:28ch;font-size:clamp(.95rem,3.5vw,1.05rem)}
form{margin-top:1.6rem;width:100%;display:flex;flex-direction:column;gap:.6rem}
input{width:100%;padding:1rem 1.1rem;border-radius:1rem;border:1px solid #ffffff2a;background:#ffffff0f;backdrop-filter:blur(10px);color:#fff;font:inherit;font-size:1rem;text-align:center}
input::placeholder{color:#b9a6da}
button{padding:1rem;border-radius:1rem;border:0;background:#f5f0fb;color:#1a0a33;font:inherit;font-weight:500;font-size:1.05rem;box-shadow:0 0 50px #8a3dff55}
.tiny{margin-top:.7rem;font-size:.76rem;color:#a58bd6}
.pov{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-style:italic;color:#c0a5ee;font-size:1rem;text-align:center;max-width:24rem}
@media(min-width:700px){.stage{max-width:26rem}}
.stage>*{position:relative;z-index:2}
.hero{isolation:isolate}.hero-bg{position:absolute;inset:0;overflow-x:clip;z-index:-1;pointer-events:none;transform:translateY(calc(var(--sp,0) * -6vh)) scale(calc(1 + var(--sp,0) * .08));transform-origin:50% 70%;opacity:calc(1 - var(--sp,0) * .55);will-change:transform,opacity}
h1{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;letter-spacing:-.03em;font-size:clamp(2.6rem,12vw,5rem);line-height:.98;text-wrap:balance}
.brand{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:1.15rem;color:#f5f0fb}
h1 i{color:#ffb3e6}
.stk{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .35rem;margin-top:1rem;max-width:20rem}
.st{font-weight:500;font-size:.78rem;padding:.4rem .75rem;border-radius:999px;background:#fff;color:#1a0a33;box-shadow:0 8px 24px #0006;transform:rotate(var(--r,0deg));white-space:nowrap}
.st.lime{background:#d9ff3d}.st.pink{background:#ff8ad0}.st.lav{background:#d9b8ff}

/* one background for the whole page: slow purple blobs that keep drifting while you scroll */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.24;will-change:transform}
.bg .b1{width:80vmax;height:80vmax;left:-30vmax;top:10vh;background:radial-gradient(circle,#6a2cff 0%,#3b0d8f 45%,transparent 70%);animation:d1 40s ease-in-out infinite alternate}
.bg .b2{width:70vmax;height:70vmax;right:-30vmax;top:60vh;background:radial-gradient(circle,#b23cff 0%,#4a0f7a 50%,transparent 72%);animation:d2 50s ease-in-out infinite alternate}
.bg .b3{width:50vmax;height:50vmax;left:20vw;top:120vh;background:radial-gradient(circle,#ff4fd8 0%,#7a1d9e 45%,transparent 70%);opacity:.18;animation:d3 36s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(14vw,-30vh) scale(1.15)}}@keyframes d2{to{transform:translate(-16vw,-50vh) scale(1.1)}}@keyframes d3{to{transform:translate(-18vw,-70vh) scale(1.3)}}
.hero{z-index:2}.sec,footer{z-index:3}

/* chart wheel */
.wheel{position:absolute;left:50%;top:64vh;width:150vmin;height:150vmin;transform:translate(-50%,-50%) rotate(calc(var(--sy,0) * .06deg));opacity:.14;z-index:1;pointer-events:none}



/* ---------- sections ---------- */
.sec{position:relative;z-index:3;padding:5.5rem 1.25rem}
.sec .cta{margin:2.2rem auto 0;max-width:24rem}
.wrap{max-width:64rem;margin:0 auto}
.sec h2{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-size:clamp(2.3rem,9vw,4.4rem);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.sec h2 i{color:#ffb3e6}
.sec .lead{margin:1rem 0 0;color:#dccff2;max-width:40ch;font-size:clamp(.98rem,3.5vw,1.1rem)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* what: scenes (round-8 v2, slide up) */
.seq{position:relative;height:calc(6 * 100svh);margin-top:1rem}
.pinned{position:sticky;top:0;height:100svh;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 1.5rem;max-width:30rem;margin:0 auto;pointer-events:none}
.scene .tag{font-size:.78rem;color:#a58bd6}
.scene .word{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-size:clamp(3.6rem,17vw,6.5rem);line-height:.9;letter-spacing:-.035em;color:var(--ac);margin-top:.6rem}
.scene p{color:#dccff2;line-height:1.55;max-width:30ch;margin-top:1rem}
.dots{position:absolute;right:1.25rem;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:.5rem}
.dots i{width:6px;height:6px;border-radius:50%;background:#ffffff33;transition:background .3s,transform .3s}.dots i.on{background:#fff;transform:scale(1.4)}
/* ---- illustrations, no backgrounds ---- */
.ill{position:relative;height:clamp(150px,28vh,230px);margin-bottom:.4rem;color:var(--ac)}
/* love: two profiles meet, heart pops */
.tile{position:absolute;top:50%;width:92px;height:118px;translate:0 -50%;border-radius:18px;border:1px solid #ffffff22;background:#1a1424;padding:12px;box-shadow:0 20px 50px #0008}
.tile i{display:block;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ac),#fff5)}.tile b{display:block;height:8px;border-radius:4px;background:#ffffff33;margin-top:12px}.tile b.s{width:60%;margin-top:6px}
.tile.a{left:8%;animation:meetA 3s cubic-bezier(.34,1.56,.64,1) infinite}.tile.b{right:8%;animation:meetB 3s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes meetA{0%,10%{left:4%;rotate:-8deg}40%,80%{left:calc(50% - 100px);rotate:-4deg}100%{left:4%;rotate:-8deg}}
@keyframes meetB{0%,10%{right:4%;rotate:8deg}40%,80%{right:calc(50% - 100px);rotate:4deg}100%{right:4%;rotate:8deg}}
.heart{position:absolute;left:50%;top:50%;translate:-50% -50%;animation:heart 3s cubic-bezier(.34,1.56,.64,1) infinite;scale:0}.heart svg{width:44px;height:44px;color:var(--ac);fill:var(--ac)}
@keyframes heart{0%,42%{scale:0}55%{scale:1.3}65%{scale:1}82%{scale:1}92%,100%{scale:0}}
.ring{position:absolute;left:50%;top:50%;width:44px;height:44px;translate:-50% -50%;border-radius:50%;border:2px solid var(--ac);opacity:0;animation:ring 3s ease-out infinite}.ring.r2{animation-delay:.15s}
@keyframes ring{0%,50%{scale:.6;opacity:0}58%{opacity:.8}85%,100%{scale:2.6;opacity:0}}
/* friendships: the thread types itself */
.chat{display:flex;flex-direction:column;gap:.45rem;justify-content:center}
.chat .b{max-width:82%;padding:.6rem .85rem;border-radius:1.1rem;font-size:.9rem;line-height:1.3;opacity:0;scale:.6;transform-origin:0 100%;animation:msg 5.2s cubic-bezier(.34,1.56,.64,1) infinite}
.chat .them{align-self:flex-start;background:#ffffff14;border:1px solid #ffffff14;border-bottom-left-radius:.3rem;color:#f5f0fb}
.chat .me{align-self:flex-end;background:var(--ac);color:#1a0a33;border-bottom-right-radius:.3rem;transform-origin:100% 100%}
.chat .typing{align-self:flex-start;display:flex;gap:4px;padding:.7rem .8rem;background:#ffffff14}.chat .typing i{width:6px;height:6px;border-radius:50%;background:#dccff2;animation:dot .9s ease-in-out infinite}.chat .typing i:nth-child(2){animation-delay:.15s}.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{translate:0 -4px;opacity:.4}}
.m1{animation-delay:0s}.m2{animation-delay:.8s;animation-name:typ}.m3{animation-delay:1.9s}.m4{animation-delay:2.9s}
@keyframes msg{0%{opacity:0;scale:.6}6%{opacity:1;scale:1}84%{opacity:1;scale:1}92%,100%{opacity:0;scale:.9}}
@keyframes typ{0%{opacity:0;scale:.6}5%{opacity:1;scale:1}20%{opacity:1;scale:1}24%,100%{opacity:0;scale:.6}}
/* family: photos shuffle */
.album{display:grid;place-items:center}
.pol{position:absolute;width:118px;padding:8px 8px 22px;border-radius:6px;background:#f5f0fb;color:#1a0a33;box-shadow:0 20px 50px #000a;transform-origin:50% 100%}
.pol i{display:block;aspect-ratio:1;border-radius:3px;background:linear-gradient(150deg,var(--ac),#1a0a33)}.pol span{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-family:Fraunces,serif;font-weight:700;font-size:.72rem}
.p1{animation:sh1 4.5s cubic-bezier(.34,1.56,.64,1) infinite}.p2{animation:sh2 4.5s cubic-bezier(.34,1.56,.64,1) infinite}.p3{animation:sh3 4.5s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sh1{0%,100%{rotate:-10deg;translate:-38px 6px;z-index:1}33%{rotate:4deg;translate:0 0;z-index:3}66%{rotate:10deg;translate:38px 6px;z-index:2}}
@keyframes sh2{0%,100%{rotate:4deg;translate:0 0;z-index:3}33%{rotate:10deg;translate:38px 6px;z-index:2}66%{rotate:-10deg;translate:-38px 6px;z-index:1}}
@keyframes sh3{0%,100%{rotate:10deg;translate:38px 6px;z-index:2}33%{rotate:-10deg;translate:-38px 6px;z-index:1}66%{rotate:4deg;translate:0 0;z-index:3}}
/* health: three rings fill */
.health{display:flex;align-items:center;gap:1.4rem}
.rings{width:clamp(130px,42%,180px);flex:none;rotate:-90deg}
.rings .tr{fill:none;stroke:#ffffff14;stroke-width:12}
.rings .pr{fill:none;stroke-width:12;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);animation:ringf 5s cubic-bezier(.34,1.3,.64,1) infinite;animation-delay:calc(var(--i) * .25s)}
@keyframes ringf{0%{stroke-dashoffset:var(--c)}30%,78%{stroke-dashoffset:calc(var(--c) * (1 - var(--f)))}92%,100%{stroke-dashoffset:var(--c)}}
.hl{display:flex;flex-direction:column;gap:.75rem;font-size:.88rem;color:#dccff2;min-width:9rem}
.hl div{display:flex;align-items:center;gap:.5rem;opacity:0;animation:hlin 5s ease-out infinite;animation-delay:calc(var(--i) * .25s + .3s)}
.hl .ic{width:1rem;height:1rem;color:var(--c)}.hl b{color:var(--c);font-weight:500;margin-left:auto}
@keyframes hlin{0%{opacity:0;translate:8px 0}12%,80%{opacity:1;translate:0 0}92%,100%{opacity:0}}
/* career: the notifications you want */
.ntf{display:flex;flex-direction:column;justify-content:center;gap:.5rem;max-width:22rem}
.ntf .n{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:1rem;background:#ffffff14;border:1px solid #ffffff14;backdrop-filter:blur(10px);font-size:.84rem;color:#f5f0fb;opacity:0;animation:ntf 6.5s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * 1.1s)}
.ntf .ic{width:2rem;height:2rem;padding:.45rem;border-radius:.6rem;background:var(--ac);color:#1a0a33;flex:none}
.ntf b{display:block;font-weight:500;font-size:.7rem;color:#dccff2}.ntf span{display:block}.ntf small{margin-left:auto;font-size:.65rem;color:#8d7bb0;align-self:flex-start}
@keyframes ntf{0%{opacity:0;transform:translateY(-22px) scale(.92)}8%{opacity:1;transform:none}72%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(10px) scale(.96)}}
/* purpose: south node to north node */
.path .pth{width:100%;height:100%;overflow:visible}
.path .trk{fill:none;stroke:#ffffff22;stroke-width:2;stroke-dasharray:4 6}
.path .prg{fill:none;stroke:var(--ac);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:trace 6s linear infinite}
@keyframes trace{0%,10%{stroke-dashoffset:1000}70%,100%{stroke-dashoffset:0}}
.path .st1{fill:#ffffff55}.path .mv{fill:#fff;filter:drop-shadow(0 0 6px var(--ac))}
.path .st2{fill:var(--ac);transform-box:fill-box;transform-origin:center;animation:glow 6s ease-out infinite}
@keyframes glow{0%,66%{opacity:.35;scale:1}74%{opacity:1;scale:1.7}100%{opacity:1;scale:1.2}}
.lb{position:absolute;font-size:.7rem;color:#a58bd6}.lb b{display:block;font-family:Fraunces,serif;font-weight:700;font-size:.95rem;color:#f5f0fb;letter-spacing:-.01em}
.l1{left:0;top:4%}.l2{right:2.4rem;bottom:0;text-align:right;opacity:0;animation:lbin 6s ease-out infinite}
@keyframes lbin{0%,68%{opacity:0;translate:0 6px}76%,100%{opacity:1;translate:0 0}}

.scene{opacity:calc(1 - var(--a,1) * 1.2);transform:translateY(calc(var(--t,0) * -55vh))}.scene .ill{transform:translateY(calc(var(--t,0) * -12vh))}
/* where: boarding pass (round-9 v2) */
.w9{position:relative;margin:3rem auto 0;max-width:24rem;color:#f5f0fb}
.passes{position:relative;height:clamp(300px,42vh,340px);max-width:24rem;margin:0 auto}
.bp{position:absolute;inset:0;display:flex;flex-direction:column;color:#1a0a33;opacity:0;animation:flip 9s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * 3s);transform-origin:50% 100%;filter:drop-shadow(0 30px 40px #000a)}
.main{flex:1;background:#f5f0fb;border-radius:1.2rem 1.2rem 0 0;padding:1rem 1.2rem 1.1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;position:relative;overflow:hidden}
.main::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ac)}
.hd{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:#8d7bb0;margin-top:.2rem}
.pill{padding:.2rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--ac) 30%,#fff);color:#1a0a33;font-weight:500}
.route{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.route b{display:block;font-family:Fraunces,serif;font-weight:700;font-size:clamp(2.2rem,11vw,3rem);line-height:.95;letter-spacing:-.03em}
.route small{display:block;font-size:.68rem;color:#8d7bb0;margin-top:.2rem}
.route>div:last-child{text-align:right}
.arr{position:relative;flex:1;display:flex;align-items:center;justify-content:center;color:var(--ac)}
.arr .ic{width:1.4rem;height:1.4rem;position:relative;z-index:1;background:#f5f0fb;padding:0 .2rem;box-sizing:content-box;animation:fly 3s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * 3s)}
.arr i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed color-mix(in srgb,var(--ac) 60%,#fff)}
@keyframes fly{0%{translate:-40% 0;opacity:0}20%{translate:0 0;opacity:1}60%{translate:0 0;opacity:1}100%{translate:40% 0;opacity:0}}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;border-top:1px solid #1a0a3314;padding-top:.8rem}
.grid small{display:block;font-size:.62rem;color:#8d7bb0}.grid b{display:block;font-family:Fraunces,serif;font-weight:700;font-size:.95rem;line-height:1.1;margin-top:.15rem}
.perf{position:relative;height:0;border-top:2px dashed #ffffff00;background:#f5f0fb}
.perf::before,.perf::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:#0a0710}
.perf::before{left:-11px}.perf::after{right:-11px}
.perf{background:transparent;height:22px;margin:-11px 0;background:linear-gradient(#f5f0fb,#f5f0fb);z-index:1}
.perf i{display:none}
.stub{background:#f5f0fb;border-radius:0 0 1.2rem 1.2rem;padding:.9rem 1.2rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:2px dashed #1a0a3326}
.stub small{display:block;font-size:.62rem;color:#8d7bb0}.stub b{display:block;font-family:Fraunces,serif;font-weight:700;font-size:1.3rem;line-height:1}.stub .why{display:block;font-size:.7rem;color:#8d7bb0;margin-top:.25rem}
.bar{width:92px;height:44px;background:repeating-linear-gradient(90deg,#1a0a33 0 2px,transparent 2px 4px,#1a0a33 4px 5px,transparent 5px 8px,#1a0a33 8px 11px,transparent 11px 13px);opacity:.85}
.stamp{position:absolute;left:50%;top:15%;translate:-50% 0;z-index:3;padding:.3rem .8rem;border:3px solid var(--ac);color:var(--ac);border-radius:.4rem;font-family:Fraunces,serif;font-weight:700;font-size:1.35rem;rotate:-14deg;scale:0;mix-blend-mode:multiply;animation:stamp 9s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * 3s + .7s)}
@keyframes flip{0%{opacity:0;transform:translateY(40px) rotate(3deg)}4%{opacity:1;transform:none}31%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-30px) rotate(-2deg)}}
@keyframes stamp{0%{scale:0;rotate:-30deg}5%{scale:1.25;rotate:-14deg}8%{scale:1}28%{scale:1}31%,100%{scale:0}}

.note{margin-top:.9rem;font-size:.78rem;color:#8d7bb0;text-align:center}

/* testimonials: photo cloud (round-10 v1) */
.talk{overflow:hidden}.t10{position:relative;margin-top:3.5rem}
.t10 .q{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-style:italic;line-height:1.2;color:#f5f0fb}
.t10 .who{font-size:.78rem;color:#c9b3f0}.t10 .who b{color:var(--ac);font-weight:500}
.t10 img.ph{object-fit:cover;border-radius:1rem;box-shadow:0 20px 50px #000a}
.t10 figure{width:auto;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;flex:none;border-radius:0;margin:0}
.cloud{position:relative;height:clamp(440px,64vh,560px);margin-inline:-1.25rem}
.cloud .ph{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:3/4;animation:drift var(--d) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2s)}
@keyframes drift{from{transform:translate(0,0) rotate(-3deg)}to{transform:translate(10px,-16px) rotate(3deg)}}.qs{position:relative;height:10rem;margin-top:2rem;max-width:30rem}
.qq{position:absolute;inset:0;margin:0;opacity:0;animation:qcyc 36s ease-in-out infinite;animation-delay:calc(var(--i) * 4s)}
.qq .q{font-size:clamp(1.15rem,4.6vw,1.5rem)}.qq .who{margin-top:.6rem}
@keyframes qcyc{0%{opacity:0;transform:translateY(12px)}2.8%{opacity:1;transform:none}9.4%{opacity:1;transform:none}11.1%,100%{opacity:0;transform:translateY(-12px)}}
.t10 .qs{margin-inline:auto;text-align:center}
@media(min-width:760px){.cloud{max-width:36rem;margin-inline:auto}}

/* section headers: centered like the hero, chips flying around */
.sh{position:relative;text-align:center;max-width:32rem;margin:0 auto;padding:1.6rem 0 3.4rem}
.sh h2,.sh .lead{position:relative;z-index:1}.sh .lead{margin-inline:auto}
.fly{position:absolute;z-index:0;animation:flyc var(--d,8s) ease-in-out infinite alternate;opacity:.95}
@keyframes flyc{from{translate:0 0;rotate:var(--r,0deg)}to{translate:6px -12px;rotate:calc(var(--r,0deg) + 6deg)}}
@media(min-width:760px){.fly{font-size:.86rem}.sh{max-width:40rem}}
.hero .stk .st{animation:flyc var(--d,8s) ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -1.3s)}

/* closing */
.fin{padding:0}
.fseq{position:relative;height:calc(4 * 90svh)}
.fglow{position:absolute;left:50%;top:60%;width:120vmin;height:120vmin;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#7a4dff 0%,#3a1a8c 30%,#120736 55%,transparent 72%);filter:blur(60px);opacity:calc(.1 + var(--p,0) * .75);scale:calc(.5 + var(--p,0) * .7);pointer-events:none}
.fl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 1.5rem;pointer-events:none;opacity:calc(1 - var(--a,1) * 1.5);filter:blur(calc(var(--a,1) * 10px));transform:translateY(calc(var(--t,0) * -10vh)) scale(calc(1 - var(--a,1) * .08))}
.fl.on{pointer-events:auto}.fl h2{max-width:20ch;animation:none!important}.fl h2 i{white-space:nowrap}.fl .cta{margin-top:2rem;width:100%}
.gl{position:relative;display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;margin:0 .04em;animation:bob var(--d,3s) ease-in-out infinite alternate}
.gl>svg:first-child{width:100%;height:100%;display:block;fill:var(--c);overflow:visible}
.gl .ic{position:absolute;left:50%;top:50%;width:38%;height:38%;translate:-50% -50%;color:#1a0a33;stroke-width:2}.gl.flower .ic{width:36%;height:36%}
.gl.blob{background:var(--c);border-radius:58% 42% 55% 45%/48% 60% 40% 52%}
.gl.lime{--c:#d9ff3d}.gl.pink{--c:#ff8ad0}.gl.lav{--c:#d9b8ff}.gl.gold{--c:#ffc46b}
@keyframes bob{from{translate:0 3px;rotate:calc(var(--r,0deg) - 6deg)}to{translate:0 -7px;rotate:calc(var(--r,0deg) + 8deg)}}
.egg{margin-top:1.4rem;color:#c9b3f0;opacity:0;translate:0 8px;transition:opacity .9s .2s,translate .9s .2s}.egg.in{opacity:1;translate:0 0}


/* footer */
footer{position:relative;z-index:3;margin-top:-22svh;padding:2.5rem 1.25rem 3rem;border-top:1px solid #ffffff12;font-size:.82rem;color:#8d7bb0}
.fbrand{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:1.15rem;color:#f5f0fb}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.9rem 0}
footer a{color:#c9b3f0;text-decoration:none}footer a:hover{color:#fff}


/* ---------- results page ---------- */
:root{--c-sun:#ffc46b;--c-moon:#d9b8ff;--c-mercury:#9fe8ff;--c-venus:#ff8ad0;--c-mars:#ff6b6b;--c-jupiter:#d9ff3d;--c-saturn:#b9a6da;--c-uranus:#7ff5e6;--c-neptune:#8aa4ff;--c-pluto:#c77dff}
.result{position:relative;z-index:3;max-width:34rem;margin:0 auto;padding:max(1.4rem,env(safe-area-inset-top)) 1.25rem 3rem;min-height:100svh;display:block}
.result .brand{display:block;text-decoration:none;margin-bottom:1.6rem}
.out{display:flex;flex-direction:column;gap:1rem}
.hero-card{padding:1.8rem 1.6rem;border-radius:1.8rem;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 22%,#0d0a14),#0d0a14 60%);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);box-shadow:0 30px 80px #0008,inset 0 1px 0 #ffffff22,0 0 80px color-mix(in srgb,var(--ac) 18%,transparent)}
.hero-card .tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;padding:.3rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}
.hero-card h1{margin-top:.9rem;font-size:clamp(2.4rem,11vw,3.6rem);line-height:.98}
.hero-card h1 i{color:var(--ac)}
.hero-card .line{margin-top:.8rem;font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-style:italic;font-size:1.25rem;color:#f5f0fb}
.hero-card .lead{margin-top:.6rem;max-width:none}
.hero-card .meta{margin-top:1rem;font-size:.76rem;color:#a58bd6}
.glass{padding:1.5rem;border-radius:1.8rem;background:linear-gradient(160deg,#ffffff10,#0d0a14 70%);border:1px solid #ffffff1a;box-shadow:0 30px 80px #0008,inset 0 1px 0 #ffffff22;backdrop-filter:blur(14px)}
.glass h2{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.placements ul{list-style:none;padding:0;margin:1rem 0 0}
.placements li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-top:1px solid #ffffff12;font-size:.95rem}
.placements li:first-child{border-top:0}
.placements .pl{color:#dccff2;display:inline-flex;align-items:center;gap:.4rem}.placements .sg{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}.placements .sg b{margin-right:.35rem}.placements .sg em{font-style:normal;color:#a58bd6;margin-left:.4rem}.placements .sg small{display:block;text-align:right;font-size:.72rem;color:#a58bd6}
.refine label{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;padding:0 1rem;border-radius:1rem;border:1px solid #ffffff2a;background:#ffffff0f}
.refine label input{border:0;background:none;text-align:left;padding:1rem 0;color-scheme:dark}
.refine button{margin-top:.8rem;width:100%}
.ic{width:1.1rem;height:1.1rem;color:#c9b3f0;flex:none}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.ghost{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1rem;border-radius:999px;border:1px solid #ffffff2a;background:transparent;color:#f5f0fb;font:inherit;font-size:.9rem;text-decoration:none;box-shadow:none}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}


/* ---------- grain + motion ---------- */
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;background:url(/noise.png) 0 0/128px 128px;opacity:.055}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-1%)}75%{transform:translate(-1%,-3%)}100%{transform:translate(2%,2%)}}
/* hero: the copy shrinks and fades as you scroll, the sky behind it grows */
.hero .stage,.hero .brand,.hero .pov{transform:translateY(calc(var(--sp,0) * -14vh)) scale(calc(1 - var(--sp,0) * .10));opacity:calc(1 - var(--sp,0) * 1.4);will-change:transform,opacity}
.hero .stk .st{transform:rotate(var(--r,0deg)) translate(calc(var(--sp,0) * var(--dx,0px)),calc(var(--sp,0) * -20vh))}
/* everything below enters with the scroll, no timers */
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:none}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
@supports (animation-timeline: view()){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none;animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .sec h2{animation:enter-h linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@keyframes enter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes enter-h{from{opacity:0;transform:translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.grain,.reveal,.sec h2{animation:none!important}.reveal{opacity:1;transform:none}.hero .stage,.hero .brand,.hero .pov,.hero-bg{transform:none;opacity:1}}
.hero .stk .st:nth-child(2){--i:1}.hero .stk .st:nth-child(3){--i:2}.hero .stk .st:nth-child(4){--i:3}

/* buttons speak in the main font (round 16): Fraunces, soft + a little wonky, like the headings */
button.go,form button,.cr-mp-add,.p2-pill,.l-inside-btn,.l-hero-go,.cr-bar button,.cr-sheet button.go{font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;letter-spacing:-.012em;font-size:1.12rem}