/* ==========================================================================
   MY AVATAR (js/avatar.js): a pinned scroll scene in six chapters. The avatar glows at the
   centre in its aura colour; each chapter brings its own live pieces in around it.
   Always a dark stage.
   ========================================================================== */
@property --aura { syntax: "<color>"; inherits: true; initial-value: #8b6cf6; }
.av {
  --aura: #8b6cf6; --fg: #f4f3f7; --mute: #b2a6c2; --ghost: #8d82a3;
  position: relative; height: 620vh; height: 620svh; color: var(--fg); color-scheme: dark;
  transition: --aura 1s ease;
}
.av-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 2rem; padding: 64px max(var(--gutter), calc((100vw - 84rem) / 2)) 0; }
.av-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 55% at 66% 52%, color-mix(in oklch, var(--aura) 26%, transparent), transparent 70%), radial-gradient(30% 30% at 20% 80%, color-mix(in oklch, var(--aura) 10%, transparent), transparent 70%); }

/* the words: one chapter at a time */
.av-copy { position: relative; z-index: 2; }
.av-k { color: var(--mute); }
.av-steps { position: relative; min-height: 22rem; margin-top: 1rem; }
.av-steps li { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(24px); filter: blur(8px); transition: opacity .6s ease, transform .7s var(--ease), filter .6s ease, visibility 0s .7s; }
.av-steps li.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .6s ease .1s, transform .7s var(--ease) .1s, filter .6s ease .1s; }
.av-steps h3 { margin: 0; font-size: clamp(2.4rem, min(4.6vw, 8vh), 5rem); line-height: .98; letter-spacing: -.035em; }
.av-steps p { max-width: 30rem; margin: 1.3rem 0 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.58; color: var(--mute); }
.av-steps small { display: block; margin-top: .9rem; font-size: .8rem; color: var(--ghost); }
.av-dots { display: flex; gap: .45rem; margin: 0; }
.av-dots i { width: 22px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .14); transition: background .4s ease, width .4s ease; }
.av-dots i.on { width: 40px; background: linear-gradient(90deg, #a78bfa, #e879f9); }

/* the avatar */
.av-stage { position: relative; height: min(78vh, 46rem); text-align: left; }
.av-orb { position: absolute; left: 50%; top: 47%; width: min(40vh, 22vw); aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--os, 1)); transition: transform 1s var(--ease); }
.av-glow { position: absolute; inset: -32%; border-radius: 50%; background: conic-gradient(from 0deg, var(--aura), #e879f9, #60a5fa, var(--aura)); filter: blur(48px); opacity: .55; animation: av-spin 14s linear infinite; }
@keyframes av-spin { to { transform: rotate(1turn); } }
.av-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in oklch, var(--aura) 60%, transparent); animation: av-breathe 4.8s ease-in-out infinite; }
.av-ring.r2 { inset: -14%; opacity: .5; animation-delay: -1.6s; }
.av-ring.r3 { inset: -30%; opacity: .25; animation-delay: -3.2s; }
@keyframes av-breathe { 50% { transform: scale(1.05); opacity: .2; } }
.av-face { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; object-fit: cover; transition: box-shadow 1s ease, opacity .26s ease, transform .4s cubic-bezier(.2,1.2,.4,1); box-shadow: 0 0 0 4px #0b0910, 0 0 0 7px color-mix(in oklch, var(--aura) 80%, white), 0 0 60px color-mix(in oklch, var(--aura) 70%, transparent); }
.av-wave { position: absolute; inset: -20%; opacity: 0; transition: opacity .5s ease; }
.av-wave i { position: absolute; left: 50%; top: 50%; width: 4px; height: 26px; margin: -13px 0 0 -2px; border-radius: 4px; background: color-mix(in oklch, var(--aura) 70%, white); transform: rotate(calc(var(--k) * 30deg)) translateY(calc(var(--r) * -1)) scaleY(var(--h, .3)); transform-origin: 50% 50%; }
.av.s4 .av-wave { opacity: 1; }
.av-tag { position: absolute; left: 50%; top: calc(47% + min(20vh, 11vw) + 3.2rem); transform: translateX(-50%); margin: 0; display: flex; align-items: baseline; gap: .55rem; white-space: nowrap; font-size: .95rem; color: var(--mute); }
.av-tag b { font: 600 1.4rem/1 var(--font-display); color: var(--fg); }

/* each chapter's pieces */
.av-ui { position: absolute; inset: 0; pointer-events: none; }
.av-ui > * { position: absolute; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s ease, transform .6s var(--ease); }
.av-ui > .in { opacity: 1; transform: none; }
.av-card { margin: 0; padding: .7rem 1rem; border-radius: 14px; background: rgb(30 25 44 / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 20px 40px -20px rgb(0 0 0 / .7); font-size: .9rem; white-space: nowrap; }
.av-card em { margin-right: .6rem; font: 500 .75rem/1 "JetBrains Mono", ui-monospace, monospace; font-style: normal; color: color-mix(in oklch, var(--aura) 70%, white); }
.av-panel { padding: 1rem 1.15rem; border-radius: 18px; background: rgb(26 21 39 / .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 30px 60px -30px rgb(0 0 0 / .8); font-size: .88rem; }
.av-panel p { margin: 0; }
.av-pl { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem !important; font-size: .78rem; color: var(--ghost); }
.av-btns { display: flex; gap: .5rem; margin-top: .8rem !important; }
.av-btns span { padding: .45rem .85rem; border-radius: 10px; font-weight: 600; font-size: .8rem; color: var(--mute); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.av-btns .ok { background: #6fdc9f; color: #0b2b1c; box-shadow: none; transition: transform .15s ease; }
.av-btns .ok.press { transform: scale(.92); }
.av-btns .stop { color: #ff8a8d; box-shadow: inset 0 0 0 1px rgb(255 101 104 / .45); }

/* 0: meet: the aura colour */
.av-swatch { left: 50%; bottom: 6%; transform: translate(-50%, 14px); display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem .9rem; border-radius: 999px; background: rgb(30 25 44 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); font-size: .8rem; color: var(--ghost); }
.av-ui > .av-swatch.in { transform: translate(-50%, 0); }
.av-swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); transition: box-shadow .3s ease; }
.av-swatch i.on { box-shadow: 0 0 0 2px #0b0910, 0 0 0 4px var(--c); }

/* 1: the day */
.av-card.t1 { left: 2%; top: 10%; } .av-card.t2 { right: 0; top: 18%; } .av-card.t3 { left: -2%; top: 52%; }
.av-card.t4 { right: 2%; top: 60%; } .av-card.t5 { left: 50%; bottom: 3%; margin-left: -8.5rem; }

/* 2: the voice */
.av-dials { left: 0; top: 8%; width: 17rem; }
.av-dial { display: grid; grid-template-columns: 4.6rem 1fr 4.6rem; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .74rem; color: var(--ghost); }
.av-dial span:last-child { text-align: right; }
.av-dial b { position: relative; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .12); }
.av-dial b i { position: absolute; top: 50%; left: var(--x, 30%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in oklch, var(--aura) 40%, transparent); transition: left .9s var(--ease); }
.av-rules { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem !important; }
.av-rules span { padding: .3rem .6rem; border-radius: 8px; background: rgb(255 255 255 / .06); font-size: .72rem; color: var(--mute); }
.av-draft { right: -3%; top: 2%; width: 18rem; }
.av-to { font-size: .75rem; color: var(--ghost); margin-bottom: .4rem !important; }
#avDraft { min-height: 6.2em; line-height: 1.5; transition: opacity .3s ease; }
#avDraft.swap { opacity: 0; }

/* 3: asking first */
.av-modes { left: 0; top: 6%; width: 15rem; }
.av-mode { position: relative; padding: .5rem .7rem .5rem 2rem !important; border-radius: 10px; color: var(--mute); transition: background .4s ease, color .4s ease; }
.av-mode::before { content: ""; position: absolute; left: .7rem; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ghost); transition: box-shadow .3s ease, background .3s ease; }
.av-mode.on { background: color-mix(in oklch, var(--aura) 16%, transparent); color: var(--fg); }
.av-mode.on::before { background: var(--aura); box-shadow: inset 0 0 0 2px #fff; }
.av-ask { right: 0; top: 34%; width: 18rem; box-shadow: inset 0 0 0 1px rgb(251 191 36 / .45), 0 30px 60px -30px rgb(0 0 0 / .8); }
.av-ask .av-pl { color: #fcd34d; }
.av-ask-h { font: 600 1.05rem/1.25 var(--font-display); }
.av-ask-p { margin-top: .35rem !important; color: var(--mute); font-size: .82rem; }
.av-trust { left: 4%; bottom: 6%; white-space: normal; width: 19rem; font-size: .85rem; }

/* 4: the meeting */
.av-call { right: -2%; top: 8%; width: 21rem; }
.av-rec { width: 8px; height: 8px; border-radius: 50%; background: #ff6568; box-shadow: 0 0 0 4px rgb(255 101 104 / .2); animation: av-blink 1.4s ease-in-out infinite; }
@keyframes av-blink { 50% { opacity: .35; } }
.av-call b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.av-faces { display: flex; gap: .3rem; margin-bottom: .6rem !important; }
.av-faces img, .av-faces span { width: 28px; height: 28px; border-radius: 50%; }
.av-faces span { display: grid; place-items: center; background: #2a2440; font: 600 .62rem/1 var(--font-display); }
.av-cc { display: grid; gap: .45rem; }
.av-cc p { font-size: .82rem; line-height: 1.45; color: #ddd7ea; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.av-cc p.in { opacity: 1; transform: none; }
.av-cc b { display: block; font-size: .72rem; color: var(--ghost); font-weight: 500; }
.av-ping { left: 0; bottom: 12%; }

/* 5: in charge */
.av-mem { left: 0; top: 10%; width: 19rem; }
.av-fact { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0 !important; border-top: 1px solid rgb(255 255 255 / .07); font-size: .82rem; }
.av-fact:first-of-type { border-top: 0; }
.av-fact span { flex: none; font-size: .7rem; color: color-mix(in oklch, var(--aura) 70%, white); }
.av-ctl { right: 0; bottom: 12%; width: 16rem; }
.av-spend { position: relative; display: flex; align-items: baseline; gap: .4rem; padding-bottom: .7rem !important; font-size: .78rem; color: var(--ghost); }
.av-spend b { font: 600 1.3rem/1 var(--font-display); color: var(--fg); }
.av-spend i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--aura) calc(var(--p) * 100%), rgb(255 255 255 / .1) 0); }

/* ---------- phones: the avatar on top, the words below ---------- */
@media (max-width: 900px) {
  .av-pin { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.15fr) auto; align-items: stretch; gap: 0; padding: 64px var(--gutter) 1.5rem; }
  .av-stage { order: -1; height: auto; }
  /* The picture, its name and the aura picker are one group, centred in the stage, so they can't overlap
     on short screens. --s is the picture's size; the group is --s + 5.6rem tall. */
  .av-stage { --s: min(26vh, 46vw); min-height: calc(var(--s) + 6.4rem); }
  .av-orb { width: var(--s); top: calc(50% - 2.8rem); }
  .av-tag { top: calc(50% + var(--s) / 2 - 1.7rem); font-size: .8rem; }
  .av-swatch { top: calc(50% + var(--s) / 2 + .4rem); bottom: auto; }
  .av-tag b { font-size: 1.1rem; }
  .av-steps { min-height: 12.5rem; }
  .av-steps h3 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .av-steps p { margin-top: .7rem; font-size: .95rem; }
  .av-card { font-size: .74rem; padding: .5rem .7rem; }
  .av-panel { font-size: .74rem; padding: .7rem .8rem; }
  .av-card.t2, .av-card.t4 { right: -2%; }
  .av-card.t3, .av-card.t5, .av-trust, .av-ping, .av-ctl, .av-dials { display: none; }
  .av-draft, .av-ask, .av-call, .av-mem, .av-modes { left: 50%; right: auto; top: auto; bottom: 0; width: min(20rem, 100%); transform: translate(-50%, 14px); }
  .av-ui > .av-draft.in, .av-ui > .av-ask.in, .av-ui > .av-call.in, .av-ui > .av-mem.in, .av-ui > .av-modes.in { transform: translate(-50%, 0); }
  .av-modes { display: none; }
  .av-cc p:nth-child(n+3) { display: none; }
  .av.s1 .av-orb, .av.s2 .av-orb, .av.s3 .av-orb, .av.s4 .av-orb, .av.s5 .av-orb { --os: .72; }
  .av.s2 .av-tag, .av.s3 .av-tag, .av.s4 .av-tag, .av.s5 .av-tag { opacity: 0; }
}
/* Short phones: a slightly smaller picture, and no eyebrow (the heading says "Meet your avatar") */
@media (max-width: 900px) and (max-height: 740px) {
  .av-stage { --s: min(23vh, 46vw); }
  .av-k { display: none; }
}
@media (min-width: 901px) {
  .av.s2 .av-orb, .av.s3 .av-orb, .av.s4 .av-orb, .av.s5 .av-orb { --os: .82; }
}

/* ---------- reduced motion: every chapter, one after another, still ---------- */
.av.still { height: auto; }
.av.still .av-pin { position: relative; height: auto; grid-template-columns: 1fr; padding-top: 6rem; padding-bottom: 4rem; }
.av.still .av-steps { min-height: 0; display: grid; gap: 2.5rem; }
.av.still .av-steps li { position: static; opacity: 1; visibility: visible; transform: none; filter: none; }
.av.still .av-stage { height: 22rem; order: -1; }
.av.still .av-ui, .av.still .av-dots, .av.still .av-glow, .av.still .av-ring { animation: none; }
.av.still .av-ui { display: none; }

/* changing whose avatar it is */
.av-face.swap { opacity: 0; transform: scale(.92); }
.av-tag { transition: opacity .26s ease; }
.av-tag.swap { opacity: 0; }