@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500&display=swap');

:root{
  --ink:      #0d2847;
  --ink-soft: #244567;
  --ink-faint:#5c7a9a;
  --bg-0:     #eef3fa;
  --bg-1:     #e3ecf7;
  --paper:    #f6f9fd;
  --line:     rgba(13,40,71,0.14);
  --line-soft:rgba(13,40,71,0.08);
  --white:    #ffffff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow:hidden;
}

#stage{
  position:relative;
  width:100%;
  height:100vh;
  max-width: 560px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, var(--bg-1), transparent 60%),
    var(--bg-0);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.bg-bubbles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-bubbles span{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--line-soft);
  opacity:0.5;
  animation: drift linear infinite;
}
@keyframes drift{ from{ transform:translateY(0) } to{ transform:translateY(-40px) } }

header.top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px 28px 0 28px;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--ink-faint);
  min-height: 20px;
}
header.top .brand{ font-weight:500; color: var(--ink-soft); }
header.top .budget{
  display:flex; align-items:center; gap:7px;
  opacity:0;
  transition: opacity .6s ease;
}
header.top .budget.show{ opacity:1; }
.budget .dots{ display:flex; gap:4px; }
.budget .dot{
  width:6px;height:6px;border-radius:50%;
  background: var(--line);
  transition: background .4s ease;
}
.budget .dot.filled{ background: var(--ink-soft); }

main{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 32px 32px;
  overflow:hidden;
}

.scene{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 90px 32px 40px 32px;
  opacity:0;
  transform: translateY(14px) scale(0.99);
  pointer-events:none;
  transition: opacity 0.85s cubic-bezier(.22,.61,.36,1), transform 0.85s cubic-bezier(.22,.61,.36,1);
}
.scene.active{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.scene.leaving{ opacity:0; transform: translateY(-10px) scale(1.01); }

.eyebrow{
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--ink-faint);
  margin-bottom:18px;
  text-align:center;
  opacity:0;
  animation: fadeUp .7s ease forwards;
  animation-delay:.05s;
}

.prompt{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-style:italic;
  text-align:center;
  color: var(--ink);
  line-height:1.28;
  margin:0 0 8px 0;
  opacity:0;
  animation: fadeUp .8s ease forwards;
  animation-delay:.12s;
}
.prompt.big{ font-size: clamp(26px,7vw,34px); }
.prompt.med{ font-size: clamp(21px,5.6vw,26px); font-style:normal; font-weight:500;}

.sub{
  font-size:13.5px;
  color: var(--ink-faint);
  text-align:center;
  max-width:340px;
  line-height:1.55;
  margin: 6px 0 0 0;
  opacity:0;
  animation: fadeUp .8s ease forwards;
  animation-delay:.22s;
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.chain{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  margin: 10px 0 28px 0;
  max-width: 380px;
  width:100%;
}
.connector{
  width:1px;
  height:26px;
  background: linear-gradient(var(--line), var(--ink-faint));
  opacity:0.6;
  animation: growLine .6s ease forwards;
  transform-origin: top;
}
@keyframes growLine{ from{ transform: scaleY(0);} to{ transform: scaleY(1);} }

.node{
  font-family:'Fraunces', serif;
  letter-spacing:0.04em;
  text-align:center;
  padding: 10px 22px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: all .5s ease;
}
.node.primary{
  font-size: 19px;
  font-weight:500;
  box-shadow: 0 6px 20px rgba(13,40,71,0.08);
  border-color: rgba(13,40,71,0.28);
}
.node.faded{
  font-size: 13px;
  color: var(--ink-faint);
  background: transparent;
  border-color: var(--line-soft);
  opacity:0.7;
  transform: scale(0.92);
}

.input-wrap{
  width:100%;
  max-width: 380px;
  margin-top: 26px;
  opacity:0;
  animation: fadeUp .8s ease forwards;
  animation-delay:.32s;
}
.input-line{
  display:flex;
  align-items:baseline;
  gap:8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  transition: border-color .3s ease;
}
.input-line:focus-within{ border-color: var(--ink-soft); }
.input-line .stem{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:17px;
  color: var(--ink-soft);
  white-space:nowrap;
}
.input-line input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:17px;
  color: var(--ink);
  width:100%;
}
.input-line input::placeholder{ color: var(--ink-faint); opacity:0.6; }

textarea.freeform{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  border-bottom:1px solid var(--line);
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:16px;
  color: var(--ink);
  padding-bottom:10px;
  min-height: 52px;
  text-align:center;
  resize:none;
}
textarea.freeform::placeholder{ color:var(--ink-faint); opacity:0.55; }

.btn{
  font-family:'Inter', sans-serif;
  font-size:14px;
  letter-spacing:0.02em;
  color: var(--white);
  background: var(--ink);
  border:none;
  padding: 14px 34px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease;
  box-shadow: 0 8px 22px rgba(13,40,71,0.18);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(13,40,71,0.24); }
.btn:active{ transform: translateY(0px) scale(0.98); }
.btn:disabled{ opacity:0.35; cursor:default; box-shadow:none; transform:none; }
.btn.ghost-btn{ background:transparent; color: var(--ink-soft); border: 1px solid var(--line); box-shadow:none; }
.btn.ghost-btn:hover{ background: var(--paper); }

.cta-row{
  margin-top: 30px;
  display:flex;
  gap:12px;
  opacity:0;
  animation: fadeUp .7s ease forwards;
  animation-delay:.4s;
}

.map-canvas{
  width:100%;
  max-width: 400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin: 6px 0 20px 0;
}
.map-tree{ font-family:'Fraunces', serif; text-align:center; color:var(--ink-soft); }
.map-node{
  display:inline-block;
  padding: 7px 16px;
  margin: 3px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
  background:var(--paper);
  opacity:0;
  animation: fadeUp .6s ease forwards;
}
.map-node.strong{ border-color: var(--ink-soft); color:var(--ink); font-size:14.5px; background:var(--white); }
.map-branch-line{ color: var(--line); font-size:12px; }

.reflection-text{
  font-family:'Fraunces', serif;
  font-size:15px;
  font-style:italic;
  line-height:1.65;
  color: var(--ink-soft);
  text-align:center;
  max-width:360px;
  margin: 18px 0 4px 0;
  opacity:0;
  animation: fadeUp .8s ease forwards;
}

footer.foot{
  position:relative;
  z-index:2;
  text-align:center;
  padding: 10px 0 18px 0;
  font-size:10.5px;
  letter-spacing:0.1em;
  color: var(--ink-faint);
  opacity:0.55;
}

.pause-mark{
  width:5px; height:5px; border-radius:50%;
  background: var(--ink-faint);
  opacity:0.5;
  animation: pulse 1.8s ease-in-out infinite;
  margin: 30px auto 0 auto;
}
@keyframes pulse{ 0%,100%{opacity:0.2; transform:scale(0.8);} 50%{opacity:0.6; transform:scale(1.1);} }

.crack-note{
  font-size:12px;
  letter-spacing:0.06em;
  color: var(--ink-faint);
  font-style:italic;
  margin-top:14px;
  opacity:0;
  animation: fadeUp .9s ease forwards;
}

@media (max-width:400px){
  .scene{ padding-top:80px; }
}