/*
Theme Name: Hello Dolly
Theme URI: https://hellodolly.fun/
Author: hellodolly.fun
Description: Single-page landing theme for hellodolly.fun — an experimental open agent network built on WordPress. Renders one centered hero with a waitlist form. No nav, no posts, no footer chrome. Activate on the main site of the network only.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hellodolly
*/

:root{
  --bg:#faf6ee;
  --card:#fff;
  --bg-sink:#f4f0e6;
  --ink:oklch(20% 0.04 280);
  --ink-soft:oklch(35% 0.04 280);
  --ink-mute:oklch(50% 0.04 280);
  --rule:oklch(90% 0.02 280);
  --rule-soft:oklch(94% 0.015 280);
  --violet:#5b3df5;
  --violet-soft:oklch(92% 0.05 290);
  --citrus:#f4b942;
  --citrus-soft:oklch(94% 0.06 85);
  --coral:#f97366;
  --coral-soft:oklch(94% 0.045 30);
  --mint:#5fc9a6;
  --mint-soft:oklch(94% 0.05 165);
  --shadow-1:0 1px 2px rgba(20,18,50,.04);
  --shadow-2:0 4px 16px rgba(20,18,50,.06);
  --shadow-3:0 24px 60px rgba(20,18,50,.10);
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --serif:"Source Serif Pro","Charter",Georgia,serif;
  --sans:"Inter",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ambient orbs */
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  will-change:transform;
}
.orb.a{
  width:420px;height:420px;left:-120px;top:-80px;
  background:radial-gradient(circle, color-mix(in oklab, var(--violet) 55%, transparent), transparent 65%);
  animation:float-a 22s ease-in-out infinite alternate;
}
.orb.b{
  width:380px;height:380px;right:-100px;top:140px;
  background:radial-gradient(circle, color-mix(in oklab, var(--coral) 60%, transparent), transparent 65%);
  animation:float-b 26s ease-in-out infinite alternate;
}
.orb.c{
  width:340px;height:340px;left:30%;bottom:-120px;
  background:radial-gradient(circle, color-mix(in oklab, var(--citrus) 60%, transparent), transparent 65%);
  animation:float-c 28s ease-in-out infinite alternate;
}
.orb.d{
  width:260px;height:260px;right:18%;bottom:8%;
  background:radial-gradient(circle, color-mix(in oklab, var(--mint) 55%, transparent), transparent 65%);
  animation:float-d 24s ease-in-out infinite alternate;
}
@keyframes float-a{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.08)}}
@keyframes float-b{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,50px) scale(1.05)}}
@keyframes float-c{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,-40px) scale(1.1)}}
@keyframes float-d{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,-30px) scale(1.06)}}

/* page chrome */
.page{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;
}

.topbar{
  position:fixed;top:20px;right:24px;z-index:3;
}
.topbar__login{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);
  text-decoration:none;padding:6px 12px;border-radius:999px;
  transition:color .2s, background .2s, border-color .2s;
  border:1px solid transparent;
}
.topbar__login:hover,
.topbar__login:focus{
  color:var(--ink);
  background:var(--card);
  border-color:var(--rule);
  outline:none;
}
@media (max-width:640px){
  .topbar{top:14px;right:16px}
}

/* hero */
.hero{
  flex:1;display:grid;place-items:center;padding:40px 24px 80px;
  text-align:center;
}
.hero__inner{
  max-width:680px;width:100%;
  animation:rise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.14em;
  background:var(--card);border:1px solid var(--rule);
  padding:6px 12px;border-radius:999px;
  margin-bottom:36px;
  box-shadow:var(--shadow-1);
}
.hero__eyebrow b{color:var(--violet);font-weight:600}

.hero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(56px, 9vw, 112px);
  line-height:.95;letter-spacing:-.02em;
  margin:0 0 4px;
  color:var(--ink);
}
.hero__title--small{
  font-size:clamp(40px, 6vw, 72px);
}
.hero__title em{
  font-style:italic;color:var(--violet);
  position:relative;display:inline-block;
}
.hero__title em::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:10px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M1 4 Q 10 1 20 4 T 40 4 T 60 4 T 80 4 T 100 4 T 119 4' fill='none' stroke='%235b3df5' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;
  animation:draw 1.2s .7s cubic-bezier(.4,0,.2,1) both;
  transform-origin:left;
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero__lede{
  font-family:var(--serif);
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.5;color:var(--ink-soft);
  margin:36px auto 8px;max-width:520px;
  text-wrap:pretty;
}
.hero__lede em{font-style:italic;color:var(--violet)}

.hero__sub{
  font-family:var(--sans);font-size:14px;color:var(--ink-mute);
  margin:0 auto 40px;max-width:460px;line-height:1.6;
}

/* form */
.form{
  display:flex;align-items:stretch;
  background:var(--card);border:1px solid var(--rule);
  border-radius:999px;
  padding:5px;max-width:460px;margin:0 auto;
  box-shadow:var(--shadow-2);
  transition:box-shadow .2s, border-color .2s, transform .15s;
}
.form:focus-within{
  border-color:var(--violet);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--violet) 15%, transparent), var(--shadow-2);
}
.form__input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--sans);font-size:14.5px;color:var(--ink);
  padding:10px 16px;
}
.form__input::placeholder{color:var(--ink-mute)}
.form .form__btn{
  background:#1c1729;color:#fff;border:0;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:0 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .2s, transform .15s;
  white-space:nowrap;
  text-decoration:none;
  text-shadow:none;
  box-shadow:none;
}
.form .form__btn:hover,
.form .form__btn:focus{background:var(--violet);color:#fff;transform:translateY(-1px)}
.form .form__btn:active{transform:translateY(0);color:#fff}
.form .form__btn[disabled]{opacity:.7;cursor:wait}
.form .form__btn svg{width:13px;height:13px;stroke-width:2.4;transition:transform .2s;color:#fff}
.form .form__btn:hover svg{transform:translateX(2px)}

.form__hint{
  font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  text-align:center;margin:14px auto 0;letter-spacing:.04em;
}
.form__hint.is-error{color:var(--coral)}

/* signed-in front-door: existing-sites list + create CTA */
.dollys{
  max-width:480px;margin:0 auto;width:100%;
  text-align:left;
}
.dollys--empty{text-align:center}
.dollys__heading{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);
  text-align:center;margin:0 0 16px;
}
.dollys__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}

.dolly-card{margin:0;padding:0}
.dolly-card__link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:14px 18px;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow-1);
  transition:border-color .2s, transform .15s, box-shadow .2s;
}
.dolly-card__link:hover{
  border-color:var(--violet);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(91,61,245,.10);
}
.dolly-card__title{
  font-family:var(--serif);font-size:18px;font-weight:500;
  color:var(--ink);line-height:1.2;
}
.dolly-card__slug{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-mute);
}

.dolly-card--new{margin-top:4px}
.dolly-card__create{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:transparent;cursor:pointer;
  border:1.5px dashed var(--rule);
  border-radius:var(--r-lg);padding:14px 18px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  color:var(--ink-mute);
  transition:border-color .2s, color .2s, background .2s, transform .15s;
}
.dolly-card__create:hover{
  border-color:var(--violet);color:var(--violet);
  background:color-mix(in oklab, var(--violet) 4%, transparent);
  transform:translateY(-1px);
}
.dolly-card__create[disabled]{
  opacity:.7;cursor:wait;transform:none;
  border-style:solid;border-color:var(--rule);
  background:var(--card);color:var(--ink-mute);
}
.dolly-card__plus{
  font-family:var(--serif);font-size:20px;line-height:1;
  color:var(--violet);font-weight:500;
}

/* Empty-state primary CTA — serif + violet accent matches the hero */
.dolly-create-cta{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--card);border:1px solid var(--rule);
  border-radius:999px;padding:16px 32px;
  font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink);
  box-shadow:var(--shadow-2);
  transition:border-color .2s, transform .15s, box-shadow .2s;
}
.dolly-create-cta em{font-style:italic;color:var(--violet)}
.dolly-create-cta:hover{
  border-color:var(--violet);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(91,61,245,.14);
}
.dolly-create-cta:active{transform:translateY(0)}
.dolly-create-cta[disabled]{opacity:.65;cursor:wait;transform:none}
.dolly-create-cta__arrow{
  font-family:var(--sans);font-size:18px;color:var(--violet);
  transition:transform .2s;
}
.dolly-create-cta:hover .dolly-create-cta__arrow{transform:translateX(3px)}

.create-site__hint{
  font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  text-align:center;margin:18px auto 0;letter-spacing:.04em;
  min-height:1.4em;
}
.create-site__hint.is-error{color:var(--coral)}

@media (max-width:640px){
  .dolly-create-cta{font-size:18px;padding:14px 24px}
  .dolly-card__link{padding:12px 16px}
}

/* success state */
.form.is-sent{pointer-events:none}
.form__success{
  display:none;align-items:center;gap:8px;
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--mint);
  justify-content:center;animation:rise .5s ease both;
}
.form__success.show{display:inline-flex}
.form__success svg{width:18px;height:18px}

/* "You already have an account — use Log In" variant.
   Overrides .form__success's inline-flex so the longer sentence reads as
   one centered line on desktop, wrapping naturally on mobile. */
.form__success--existing{
  font-family:var(--serif);font-style:normal;font-size:18px;
  color:var(--ink-soft);
  text-align:center;line-height:1.5;
  max-width:520px;margin:0 auto;
  text-wrap:pretty;
}
.form__success--existing.show{display:block}
.form__success--existing em{font-style:italic;color:var(--violet);font-weight:500}
.form__success-arrow{
  display:inline-block;color:var(--violet);
  font-family:var(--sans);font-size:20px;font-style:normal;line-height:1;
  margin-left:8px;transform:translateY(2px);
}

/* /login "no account for that email" notice */
.login__no-account{
  display:none;
  font-family:var(--serif);font-size:16px;color:var(--ink-soft);
  text-align:center;line-height:1.5;
  max-width:460px;margin:18px auto 0;
  text-wrap:pretty;
}
.login__no-account.show{display:block;animation:rise .5s ease both}
.login__no-account a{
  color:var(--violet);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.login__no-account a:hover{color:var(--ink)}
.login__no-account em{font-style:italic;color:inherit}

/* A12 bypass — shown after submitting an @a8c.com / @automattic.com email */
.a8c-bypass{
  display:none;flex-direction:column;align-items:center;gap:14px;
  max-width:460px;margin:0 auto;
  animation:rise .5s ease both;
}
.a8c-bypass.show{display:flex}
.a8c-bypass__copy{
  font-family:var(--serif);font-size:18px;color:var(--ink-soft);
  margin:0;text-align:center;
}
.a8c-bypass__copy em{font-style:italic;color:var(--violet)}
.a8c-bypass .a8c-bypass__btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#1c1729;color:#fff;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:999px;
  box-shadow:var(--shadow-2);
  text-decoration:none;text-shadow:none;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.a8c-bypass .a8c-bypass__btn:hover,
.a8c-bypass .a8c-bypass__btn:focus{background:var(--violet);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(91,61,245,.18)}
.a8c-bypass .a8c-bypass__btn:active{transform:translateY(0);color:#fff}
.a8c-bypass .a8c-bypass__btn[disabled]{opacity:.7;cursor:wait;transform:none;background:#1c1729;color:#fff}
.a8c-bypass .a8c-bypass__btn svg{width:13px;height:13px;stroke-width:2.4;color:#fff;transition:transform .2s}
.a8c-bypass .a8c-bypass__btn:hover svg{transform:translateX(2px)}

@media (max-width:640px){
  .hero{padding:20px 22px 60px}
  .hero__eyebrow{margin-bottom:26px}
  .form{flex-direction:column;border-radius:var(--r-lg);padding:6px}
  .form__input{padding:14px 16px}
  .form__btn{padding:12px 22px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .orb, .form__btn svg, .hero__title em::after, .hero__inner{animation:none !important}
  .hero__inner{opacity:1;transform:none}
  .hero__title em::after{transform:none}
}