/* hero section of the landing. owned by one agent. every class is .l-hero-…, every keyframe l-hero-… */
.l-hero{--l-acc:#ff8ad0;--l-ink:#1a0a33;--l-sub:#dccff2;--l-mut:#a58bd6;--l-out:cubic-bezier(.23,1,.32,1);--l-spr:cubic-bezier(.34,1.56,.64,1)}
.l-hero .l-hero-stage{padding:.6rem 0 1rem}

/* ---------- the little sky: a 3d sun with a moon and a heart going round it ---------- */
.l-hero-sys{--W:min(17rem,74vw);--H:clamp(5.6rem,17svh,9rem);position:relative;width:var(--W);height:var(--H);margin-bottom:clamp(.5rem,2svh,1.1rem);flex:none}
.l-hero-sys img{display:block;-webkit-user-drag:none;user-select:none}
.l-hero-sun{position:absolute;left:50%;top:50%;width:calc(var(--H) * .74);height:calc(var(--H) * .74);margin:calc(var(--H) * -.37) 0 0 calc(var(--H) * -.37);z-index:2;transition:transform .7s var(--l-spr)}
.l-hero-sun::before{content:"";position:absolute;inset:-55%;border-radius:50%;background:radial-gradient(circle,#ffb36b55 0%,#ff8ad022 38%,transparent 66%);z-index:-1;transition:opacity .8s var(--l-out);animation:l-hero-breathe 7s ease-in-out infinite alternate}
.l-hero-sun img{width:100%;height:100%;animation:l-hero-bob 6s ease-in-out infinite alternate}
@keyframes l-hero-bob{from{transform:translateY(2px) rotate(-4deg)}to{transform:translateY(-4px) rotate(5deg)}}
@keyframes l-hero-breathe{from{opacity:.75;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}

/* the orbit: an ellipse tilted a little, the front half is drawn over the sun */
.l-hero-ring{position:absolute;left:50%;top:50%;width:var(--W);height:calc(var(--W) * .25);margin:calc(var(--W) * -.125) 0 0 calc(var(--W) * -.5);border-radius:50%;border:1px solid #e9d8ff2e;transform:rotate(-9deg);z-index:1;transition:border-color .9s var(--l-out)}
.l-hero-ring.l-hero-front{z-index:3;clip-path:inset(50% 0 0 0);border-color:#e9d8ff47}
.l-hero-orb{position:absolute;left:50%;top:50%;width:calc(var(--H) * .4);height:calc(var(--H) * .4);margin:calc(var(--H) * -.2) 0 0 calc(var(--H) * -.2);will-change:transform,opacity;filter:drop-shadow(0 6px 10px #0007)}

/* ---------- copy ---------- */
.l-hero h1{position:relative}
.l-hero .l-hero-lead{margin-top:clamp(.7rem,1.8svh,1rem);max-width:30ch;text-wrap:balance}
.l-hero-get{list-style:none;padding:0;margin:clamp(.8rem,2svh,1.1rem) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.l-hero-get li{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem .38rem .55rem;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff1c;color:#efe6fb;font-size:.78rem;line-height:1.1;white-space:nowrap}
.l-hero-get .ic{width:.95rem;height:.95rem;color:var(--l-acc)}

/* ---------- form + the live sign ---------- */
.l-hero .l-hero-form{margin-top:clamp(1.1rem,3svh,1.7rem);gap:0}
.l-hero-form input{font-variant-numeric:tabular-nums;transition:border-color .35s var(--l-out),box-shadow .35s var(--l-out),background .35s var(--l-out)}
.l-hero-form input:focus{outline:none;border-color:#ff8ad077;box-shadow:0 0 0 4px #ff8ad01a}
.l-hero-form button{margin-top:.6rem;transition:transform .12s var(--l-out),box-shadow .5s var(--l-out)}
.l-hero-form button:active{transform:scale(.97)}
.l-hero.l-hero-lit .l-hero-form button{box-shadow:0 0 0 0 #ff8ad000,0 0 60px #ff8ad066;animation:l-hero-ping 1.1s var(--l-out) .25s 1}
@keyframes l-hero-ping{from{box-shadow:0 0 0 0 #ff8ad0aa,0 0 60px #ff8ad066}to{box-shadow:0 0 0 14px #ff8ad000,0 0 60px #ff8ad066}}

/* the slot under the input opens smoothly when there is something to say */
.l-hero-say{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--l-out)}
.l-hero-say.l-hero-open{grid-template-rows:1fr}
.l-hero-sayin{min-height:0;overflow:hidden}
.l-hero-sc{display:flex;align-items:center;gap:.75rem;margin-top:.6rem;padding:.6rem .9rem .6rem .6rem;border-radius:1.4rem;background:#ff8ad012;border:1px solid #ff8ad04d;text-align:left;animation:l-hero-card .5s var(--l-out) both}
@keyframes l-hero-card{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.l-hero-badge{width:2.5rem;height:2.5rem;border-radius:999px;background:var(--l-acc);display:grid;place-items:center;flex:none;box-shadow:0 0 22px -4px #ff8ad0aa;animation:l-hero-badge .6s var(--l-spr) .08s both}
@keyframes l-hero-badge{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.l-hero-badge .ic{width:1.25rem;height:1.25rem;color:var(--l-ink);stroke-width:2}
.l-hero-sc b{display:block;font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-size:1.12rem;letter-spacing:-.02em;line-height:1.05;color:#f5f0fb}
.l-hero-sc small{display:block;color:var(--l-sub);font-size:.82rem;line-height:1.3;margin-top:.15rem}
.l-hero-err{margin:.55rem 0 0;font-size:.82rem;color:var(--l-acc);text-align:center}

/* proof: three faces + the promise */
.l-hero .l-hero-tiny{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.8rem}
.l-hero-faces{display:inline-flex}
.l-hero-faces img{width:1.5rem;height:1.5rem;border-radius:999px;object-fit:cover;border:1.5px solid #120a1f;margin-left:-.4rem;object-position:50% 30%}
.l-hero-faces img:first-child{margin-left:0}

/* the sky behind lights up pink for a second when her sign lands */
.hero-bg::after{content:"";position:absolute;left:50%;top:34svh;width:110vmin;height:110vmin;margin:-55vmin 0 0 -55vmin;border-radius:50%;background:radial-gradient(circle,#ff8ad033 0%,#ff8ad010 40%,transparent 68%);opacity:0;transition:opacity 1.4s var(--l-out,ease);pointer-events:none}
.l-hero-glow .hero-bg::after{opacity:1}

/* the orbit + the sun go pink when she's typed a real date */
.l-hero.l-hero-lit .l-hero-ring{border-color:#ff8ad055}
.l-hero.l-hero-lit .l-hero-ring.l-hero-front{border-color:#ff8ad08c}
.l-hero.l-hero-lit .l-hero-sun{transform:scale(1.06)}

/* loops only run while the hero is on screen */
.l-hero.l-hero-off .l-hero-sun img,.l-hero.l-hero-off .l-hero-sun::before,.l-hero.l-hero-off .gl{animation-play-state:paused}

/* small phones */
@media (max-height:760px){
  .l-hero .l-hero-stage{padding:.2rem 0 .6rem}
  .l-hero h1{font-size:clamp(2.4rem,11.4vw,3rem)}
  .l-hero .l-hero-lead{font-size:.92rem;line-height:1.4}
  .l-hero-get li{font-size:.74rem;padding:.32rem .62rem .32rem .5rem}
  .l-hero-form input,.l-hero-form button{padding:.9rem}
}
@media (max-height:680px){.l-hero-sys{--H:4.6rem}.l-hero-get{display:none}}
@media (min-width:700px){.l-hero-sys{--W:19rem;--H:clamp(5.6rem,15svh,8.6rem)}.l-hero h1{font-size:clamp(3.4rem,6.4vw,4.6rem);white-space:nowrap}}

@media (prefers-reduced-motion:reduce){
  .l-hero-sun img,.l-hero-sun::before{animation:none}
  .l-hero-sc,.l-hero-badge{animation:l-hero-fade .3s linear both}
  .l-hero.l-hero-lit .l-hero-form button{animation:none}
  .l-hero-say,.l-hero-sun{transition:none}
}
@keyframes l-hero-fade{from{opacity:0}to{opacity:1}}
/* log in: quiet link opposite the brand, fades out with the hero like the brand does */
.l-hero-login{position:absolute;top:calc(max(2.2rem,env(safe-area-inset-top)) - .5rem);right:max(.85rem,env(safe-area-inset-right));z-index:4;padding:.6rem .55rem;font-size:.88rem;font-weight:500;color:#c9b3f0;text-decoration:none;opacity:calc(.9 - var(--sp,0) * 1.4);transition:color .2s}
.l-hero-login:hover,.l-hero-login:focus-visible{color:#f5f0fb}