:root {
  --bg: #000;
  --primary: #FFCD29;
  --ink: #F4F2EC;
  --muted: #9A978F;
  --faint: #2A2926;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body.ax-home {
  font-family: var(--font);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 50;
  background: var(--primary); color: #000; padding: .5rem .75rem; border-radius: 6px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh; min-height: 100dvh;
  /* A column, not a row. `.hero-stack` is the only in-flow child (#stage and .controls
     are both absolute), so centring it with justify-content is the same thing. What
     changes is the fallback for `.ax-see`: under 700px of viewport height the arrow is
     in the flow rather than floated, and as a row-flex item it landed beside the hero
     and squeezed the headline off the left edge of a phone. In a column it sits under
     the search bar, which is where it reads. */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 7rem var(--pad) 5rem;
  isolation: isolate;
}
#stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-stack { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; }
.hero-inner { grid-area: 1 / 1; align-self: center; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Hero 1 → Hero 2 hand-off */
.hero-1 { transition: opacity .8s ease, transform .9s var(--ease-out), filter .8s ease; }
.is-hero2 .hero-1 { opacity: 0; transform: translateY(-28px); filter: blur(6px); pointer-events: none; }
.hero-2 { visibility: hidden; }
.is-hero2 .hero-2 { visibility: visible; }
.hero-2 { position: relative; }

/* "Hi, I am Adhith Sundaram" — centred, then the name flies to the nav */
.hi {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0; z-index: 2;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-align: center;
  opacity: 0; transform: translateY(calc(-50% + 22px));
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  pointer-events: none;
}
.hi-lead { display: inline-block; transition: opacity .35s ease, transform .5s var(--ease-out); }
.hi-name { display: inline-block; color: var(--primary); transform-origin: 0 0; will-change: transform; }
.h2-hi .hi { opacity: 1; transform: translateY(-50%); }
.h2-fly .hi-lead { opacity: 0; transform: translateX(-14px); }
.h2-landed .hi { visibility: hidden; }

/* Main hero-2 content */
.h2-main { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mask { overflow: hidden; padding: .08em 0 .16em; }
.what {
  max-width: 22ch; margin: 0 auto;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.12; color: var(--ink);
  text-wrap: balance;
  transform: translateY(110%); opacity: 0;
  transition: transform 1s var(--ease-out), opacity .6s ease;
}
.h2-what .what { transform: none; opacity: 1; }
.prev {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.35vw, 1.15rem); font-weight: 500; color: var(--muted);
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.prev span { color: var(--ink); }
.h2-prev .prev { opacity: 1; transform: none; }

/* Header fades in together with the search bar (home, first visit) */
.ax-home .ax-head .nav-late, .ax-home .ax-head .ax-role { opacity: 0; transform: translateY(-6px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.ax-home .ax-head .ax-name { opacity: 0; }
.ax-home.h2-landed .ax-head .ax-name { opacity: 1; }
.ax-home.h2-nav .ax-head .nav-late, .ax-home.h2-landed .ax-head .ax-role { opacity: 1; transform: none; }
.ax-home.h2-landed .ax-head .ax-role { transition-delay: .15s; }
.ax-home:not(.h2-nav) .ax-head { pointer-events: none; }
/* The header is filled and sticky, as on every other page. It was transparent here
   while the home was one dark screen with nothing to scroll past it; now the projects
   run underneath, and a transparent bar left the name and the nav links sitting on top
   of the card artwork. It stays clear only during the intro, where the nav has not
   arrived yet and there is nothing behind it but the hero. */
.ax-home:not(.h2-nav) .ax-head { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ax-home .ax-head { transition: background-color .5s, border-color .5s; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Spotlight-style search + pills ---------- */
:root { --glass: #1B1A17; --spring: cubic-bezier(.34, 1.56, .64, 1); --bar-h: 56px; }
.spot {
  position: relative; margin-top: 2.5rem; width: min(760px, 100%);
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.h2-nav .spot { opacity: 1; transform: none; }
.goo-defs { position: absolute; }
.goo { position: absolute; inset: 0; filter: url(#goo); pointer-events: none; z-index: 0; }
.goo i { position: absolute; left: 0; top: 0; display: block; background: var(--glass); border-radius: 999px; }
.goo i[data-for="panel"] { border-radius: 24px; }
.goo i[data-for="b-projects"], .goo i[data-for="b-about"] { background: #4A3B0C; }

.spot-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
.bar {
  position: relative; display: flex; align-items: center; gap: .7rem;
  height: var(--bar-h); flex: 0 1 460px; min-width: 0; padding: 0 .75rem 0 1.15rem;
  border-radius: 999px;
  transition: flex-basis .7s var(--spring), box-shadow .3s;
}
.bar-icon { display: grid; color: var(--muted); transition: color .3s; }
.spot.focus .bar-icon { color: var(--primary); }
.spot.focus .bar { flex-basis: 580px; box-shadow: 0 0 0 1.5px rgba(255, 205, 41, .55), 0 10px 40px -6px rgba(255, 205, 41, .38); }
.field { position: relative; flex: 1; min-width: 0; height: 100%; }
.field input, .ghost, .ph {
  position: absolute; inset: 0; width: 100%;
  font: 500 1.02rem/var(--bar-h) var(--font); letter-spacing: -.005em;
  padding: 0; margin: 0; border: 0; background: none; text-align: left; white-space: pre; overflow: hidden;
}
.field input { color: var(--ink); caret-color: var(--primary); outline: none; z-index: 2; }
.ghost { color: transparent; z-index: 1; }
.ghost b { font-weight: inherit; color: #5E5B54; }
.ph { color: var(--muted); z-index: 0; pointer-events: none; display: flex; align-items: center; }
.ph .caret { display: inline-block; flex: none; width: 1.5px; height: 1.15em; margin-right: 3px; background: var(--primary); animation: blink 1s steps(1) infinite; }
#ph-text { opacity: 0; transform: translateX(6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.spot.guide #ph-text { opacity: 1; transform: none; }
.spot.focus #ph-text { transform: translateX(3px); }
.spot.has-value .ph { opacity: 0; }
.spot.focus .ph .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.send {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; margin-right: -2px; border: 0; border-radius: 50%; cursor: pointer;
  background: #3A3935; color: #B9B6AE;
  box-shadow: none;
  transition: transform .35s var(--spring), box-shadow .25s, background-color .25s, color .25s;
}
.spot.focus .send, .spot.has-value .send { background: var(--primary); color: #000; }
.send svg { transition: transform .35s var(--spring); }
.spot.focus .send:hover { background: #FFD95C; box-shadow: 0 6px 22px -4px rgba(255, 205, 41, .7); }
.send:hover svg { transform: translateX(2px); }
.send:active { transform: scale(.92); }
.send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--bar-h); padding: 0 1.3rem; border-radius: 999px; flex: none;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap;
  transform: translateX(var(--from-x, -80px)) scale(.4); opacity: 0;
  transition: transform .9s var(--spring), opacity .4s ease, padding .6s var(--spring), width .6s var(--spring), color .2s;
}
/* Tinted yellow liquid glass: tint comes from the goo blob, glass layers live on the element */
.pill {
  overflow: hidden; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 244, 200, .10) 38%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 80% at 50% 125%, rgba(255, 205, 41, .45), rgba(255, 205, 41, 0) 65%),
    radial-gradient(60% 50% at 18% 18%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 0 -10px 18px -8px rgba(255, 214, 80, .45),
    inset 0 10px 16px -10px rgba(255, 255, 255, .35),
    0 10px 30px -10px rgba(255, 205, 41, .36);
  color: #FFF4CC;
}
.pill::after {
  content: ''; position: absolute; inset: -20% auto -20% 0; width: 42%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%) skewX(-18deg); opacity: 0;
}
.pill.shine::after { animation: streak .9s cubic-bezier(.4, 0, .2, 1) forwards; }
.pill > * { position: relative; z-index: 1; }
@keyframes streak {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}
.pill svg { color: var(--primary); flex: none; }
.pill span { display: inline-block; max-width: 8em; overflow: hidden; transition: max-width .6s var(--spring), opacity .3s ease .15s; }
.spot.focus .pill span { transition: max-width .6s var(--spring), opacity .12s ease; }
#b-projects { --from-x: -96px; }
#b-about { --from-x: -210px; transition-delay: .08s; }
.spot.in .pill { transform: none; opacity: 1; }
.spot.in .pill:hover { transform: scale(1.06); color: #FFFFFF; box-shadow: inset 0 -10px 18px -8px rgba(255, 214, 80, .6), inset 0 10px 16px -10px rgba(255, 255, 255, .45), 0 12px 36px -8px rgba(255, 205, 41, .48); }
.spot.in .pill:active { transform: scale(.96); }
.spot.focus .pill { padding: 0; width: var(--bar-h); gap: 0; }
.spot.focus .pill span { max-width: 0; opacity: 0; }

.panel {
  position: absolute; z-index: 1; left: var(--panel-x, 0); top: calc(var(--bar-h) + 12px);
  width: var(--panel-w, 460px);
  border-radius: 24px; text-align: left;
  transform-origin: 50% 0; transform: translateY(calc(-1 * var(--bar-h) - 12px)) scale(.9, .15);
  transition: transform .7s var(--spring), width .7s var(--spring), left .7s var(--spring);
  pointer-events: none;
}
.panel-inner { padding: .6rem; opacity: 0; transition: opacity .25s ease; }
.spot.open .panel { transform: none; pointer-events: auto; }
.spot.open .panel-inner { opacity: 1; transition-delay: .12s; }
.panel-label { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .5rem .75rem .35rem; }
#sugg li {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .75rem; border-radius: 14px; cursor: pointer;
  font-size: .95rem; color: #D6D3CB; transition: background-color .15s, color .15s;
}
#sugg li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4A4740; flex: none; transition: background-color .15s; }
#sugg li[aria-selected="true"], #sugg li:hover { background: #2A2825; color: var(--ink); }
#sugg li[aria-selected="true"]::before { background: var(--primary); }
#sugg mark { background: none; color: var(--primary); }
.answer { padding: .5rem .75rem .8rem; font-size: .95rem; line-height: 1.55; color: #D6D3CB; }
.answer strong { color: var(--ink); font-weight: 600; }

/* Hold indicator (15s break) */
.hold { position: absolute; left: 50%; bottom: 2.1rem; transform: translateX(-50%); z-index: 2; width: 120px; height: 2px; background: #1E1D1A; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .4s; }
.hold i { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: left; transform: scaleX(0); }
.is-holding .hold { opacity: 1; }

.eyebrow {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.5rem;
}
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.headline {
  margin: 0 0 1.75rem;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 14ch;
  text-wrap: balance;
}
.headline .accent { color: var(--primary); }
.headline .w { display: inline-block; }

.lede {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: #C9C6BE;
}

/* Phase caption */
.phase {
  position: absolute; left: 50%; bottom: 4.5rem; transform: translateX(-50%);
  z-index: 2; margin: 0;
  font-size: clamp(.95rem, 1.3vw, 1.15rem); letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--primary); opacity: 0; transition: opacity .4s; white-space: nowrap;
}
.phase.on { opacity: 1; }

/* Controls */
.controls { position: absolute; right: var(--pad); bottom: 1.5rem; z-index: 3; display: flex; gap: .5rem; }
.ctl {
  font: 500 .78rem/1 var(--font); letter-spacing: .02em;
  color: var(--muted); background: rgba(255,255,255,.04);
  border: 1px solid #2E2D29; border-radius: 999px; padding: .55rem .85rem; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.ctl:hover { color: var(--ink); border-color: #55524A; }

/* Reveal choreography */
[data-reveal] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.is-playing [data-reveal] { opacity: 0; transform: translateY(10px); pointer-events: none; }
.is-playing .headline .w { opacity: 0; }
.headline .w { transition: opacity .9s ease, filter .9s ease; }
.is-dissolving .headline .w { opacity: 1; }
.is-revealed [data-reveal] { opacity: 1; transform: none; }
.is-revealed [data-reveal="2"] { transition-delay: .15s; }

@media (max-width: 640px) {
  .nav ul { gap: 1rem; }
  .brand-role { font-size: .72rem; }
  .brand-name { font-size: 1.05rem; }
  .spot-row { flex-wrap: wrap; gap: 12px; }
  .bar, .spot.focus .bar { flex: 1 1 100%; }
  #b-projects, #b-about { --from-x: 0px; }
  .pill { transform: translateY(-64px) scale(.4); }
  .spot.focus .pill { padding: 0 1.3rem; width: auto; gap: .5rem; }
  .spot.focus .pill span { max-width: 8em; opacity: 1; }
  .spot.open .pill { opacity: 0; pointer-events: none; }
  .brand { gap: .6rem; }
  .nav { gap: 1rem; }
  .nav a:not(.brand) { font-size: .85rem; }
  .nav ul { gap: .75rem; }
  .hold { bottom: 4.75rem; }
  .nav { padding-top: 1rem; }
  .logo-slot { width: 56px; height: 32px; }
  .phase { bottom: 5rem; font-size: .85rem; white-space: normal; width: 90%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ======================= V5 additions ======================= */
body.ax-home { padding-top: 0; }
.hero { padding-top: calc(var(--ax-head-h) + 2rem); }


.ax-helper {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  width: min(620px, 100%); margin: .95rem auto 0; padding: 0 .5rem;
  font-size: .82rem; color: var(--muted); line-height: 1.4;
  opacity: 0; transform: translateY(-4px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.ax-helper.is-on { opacity: 1; transform: none; }
.ax-helper button { all: unset; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; min-height: 32px; border-radius: 8px; }
.ax-helper button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ax-helper .ax-h-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.ax-helper .ax-h-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-helper.is-open .ax-h-text { white-space: normal; }
.is-chat .ax-helper { display: none; }
/* Desktop only. The tip is a single ellipsed line that has to be tapped to unfold, and
   on a phone it crowds the bar it is explaining. 760px is where the header already
   switches to its small-screen treatment. */
@media (max-width: 760px) { .ax-helper { display: none; } }

/* Chat mode */
.ax-thread { display: none; }
.is-chat .hero { display: none; }
.is-chat .ax-thread { display: block; }
.ax-thread { min-height: 100dvh; padding: calc(var(--ax-head-h) + clamp(1.5rem, 5vw, 3.5rem)) var(--pad) calc(var(--bar-h) + 120px); }
.ax-thread-col { width: min(640px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.ax-turn { display: flex; flex-direction: column; gap: 1.1rem; }
.ax-bubble-me {
  align-self: flex-end; display: inline-flex; align-items: center; gap: .55rem;
  max-width: 85%; padding: .6rem 1rem; border-radius: 999px;
  background: #fff; color: #000; font-weight: 500; font-size: .95rem; line-height: 1.35;
  animation: ax-pop .5s var(--spring) both;
}
.ax-bubble-me.is-long { border-radius: 20px 20px 6px 20px; }
@keyframes ax-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.ax-home .ax-msg.ai { max-width: 100%; font-size: 1.02rem; color: var(--ax-ink-2); animation: ax-pop .45s var(--ease-out) both; }
.ax-home .ax-think { margin: .2rem 0; }
.ax-thread .ax-chips { margin-top: .2rem; }

/* Bottom composer (wireframe footer) */
.ax-home-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 1rem var(--pad) calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.92) 28%, #000 60%);
  display: flex; justify-content: center;
  pointer-events: none;
}
.ax-home-dock .spot { pointer-events: auto; margin-top: 0; opacity: 1; transform: none; }
.ax-home-dock .panel { top: auto; bottom: calc(var(--bar-h) + 12px); transform-origin: 50% 100%; transform: translateY(calc(var(--bar-h) + 12px)) scale(.9, .15); }
.ax-home-dock .spot.open .panel { transform: none; }
@media (max-width: 640px) {
  .ax-home-dock { padding-top: 1.6rem; }
  .ax-home-dock .spot-row { flex-wrap: nowrap; }
  .ax-home-dock .bar, .ax-home-dock .spot.focus .bar { flex: 1 1 auto; }
  .ax-home-dock .pill { padding: 0; width: var(--bar-h); gap: 0; }
  .ax-home-dock .pill span { max-width: 0; opacity: 0; }
  .ax-home-dock .spot.open .pill { opacity: 1; pointer-events: auto; }
}
.is-chat .controls { display: none; }

/* Pills are real buttons now */
button.pill { border: 0; cursor: pointer; font-family: inherit; }

/* Wide screens: keep the composition centred and readable */
@media (min-width: 1920px) {
  .ax-thread-col { width: min(720px, 100%); }
  .what { font-size: 3.9rem; }
}
/* Keep off-stage hero text (the flying name) from widening the layout viewport on phones.

   The clip lives on `.hero` and on the page, NOT on `.hero-stack` or `.hero-inner`.
   Those two are only as tall as their content (about 390px of a 900px hero), and the
   suggestion panel is a descendant that hangs some 100px below them — measured, not
   assumed. `overflow-x: clip` with `overflow-y: visible` is supposed to clip one axis
   only, and Chromium, Gecko and the WebKit that Playwright drives all honour that, but
   Safari cut the panel off at `.hero-2`'s bottom edge mid-item. Clipping at `.hero`
   instead is enough to contain the flying text sideways, and `.hero` is the full
   viewport box, so nothing inside it can be cut. */
.hero { overflow-x: clip; }
.hero, .hero-stack, .hero-inner { max-width: 100vw; }
.hero-inner { min-width: 0; }
.hi { max-width: 100%; }
@media (max-width: 480px) { .hi { font-size: clamp(1.6rem, 9vw, 2.4rem); } }

/* ======================= Design feedback 1 ======================= */
/* Header logo stays hidden during the intro; it appears (and flips twice) as the name lands */
.ax-home .ax-head .ax-logo { opacity: 0; transform: scale(.6); transition: opacity .45s var(--ease-out), transform .6s var(--spring); }
.ax-home.logo-on .ax-head .ax-logo { opacity: 1; transform: none; }

/* Skip goes straight to the resting state: no hero-1 copy left behind */
.is-skipped .hero-1 { transition: none; visibility: hidden; }
.is-skipped #stage { opacity: 0; }

/* Home icon pill (chat mode only) */
.pill-icon { padding: 0; width: var(--bar-h); --from-x: 80px; }
.pill[hidden] { display: none; }

/* Suggestions open upward when there isn't room below */
.spot.drop-up .panel { top: auto; bottom: calc(var(--bar-h) + 12px); transform-origin: 50% 100%; transform: translateY(calc(var(--bar-h) + 12px)) scale(.9, .15); }
.spot.drop-up.open .panel { transform: none; }


/* "Pulling up projects…" line */
.ax-pulling { display: flex; align-items: center; gap: .75rem; color: var(--primary); font-weight: 600; font-size: 1rem; padding: .4rem 0; animation: ax-pop .35s var(--ease-out) both; }
.ax-pulling .ax-logo { width: 40px; height: 23px; }

/* Radii: chat bubble 8px, project cards 16px */
.ax-bubble-me, .ax-bubble-me.is-long { border-radius: 8px; }
.ax-card { border-radius: 16px; clip-path: inset(0 round 16px); }
.ax-card.is-instant { transition: none; }
.spot.open + .ax-helper, .spot.focus + .ax-helper { opacity: 0 !important; visibility: hidden; transition: opacity .15s; }

/* ======================= Design feedback 2 ======================= */
/* Returning visitors: the resting hero paints on first frame, before any script runs */
html.hero-static .hero-1, html.hero-static #stage, html.hero-static .controls, html.hero-static .phase, html.hero-static .hold { display: none !important; }
html.hero-static .hero-2 { visibility: visible; }
html.hero-static .hi { visibility: hidden; }
html.hero-static .what, html.hero-static .prev, html.hero-static .spot { opacity: 1; transform: none; }
html.hero-static .ax-home .ax-head .nav-late, html.hero-static .ax-home .ax-head .ax-role,
html.hero-static .ax-home .ax-head .ax-name, html.hero-static .ax-home .ax-head .ax-logo { opacity: 1; transform: none; }
html.hero-static .ax-home .ax-head { pointer-events: auto; }
html.hero-static:not(.hero-static-ready) .hero-2 *, html.hero-static:not(.hero-static-ready) .ax-head * { transition: none !important; animation: none !important; }
html.hero-static .spot .pill { transform: none; opacity: 1; }

/* Suggestions always open below the bar; the hero lifts to make room */
.hero-2 .h2-main { transition: transform .6s var(--spring); }
.spot.drop-up .panel { top: calc(var(--bar-h) + 12px); bottom: auto; transform-origin: 50% 0; transform: translateY(calc(-1 * var(--bar-h) - 12px)) scale(.9, .15); }
.spot.drop-up.open .panel { transform: none; }

/* Dropdown: solid dark surface, joined to the bar, high-contrast rows */
.panel-inner { background: #121210; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 205, 41, .45), 0 24px 60px -20px rgba(0, 0, 0, .9); }
.spot.open .panel { top: calc(var(--bar-h) + 4px); }
.spot.open.focus .bar { border-color: rgba(255, 205, 41, .7); }
.panel::before { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 8px; background: rgba(255, 205, 41, .7); transform: translateX(-50%); opacity: 0; transition: opacity .2s; }
.spot.open .panel::before { opacity: 1; }
.ax-home-dock .spot.open .panel { bottom: calc(var(--bar-h) + 4px); top: auto; }
.ax-home-dock .panel::before { top: auto; bottom: -6px; }
.panel-label { color: #B9B6AE; }
#sugg li { color: #F4F2EC; }
#sugg li::before { background: #6B675E; }
#sugg li[aria-selected="true"], #sugg li:hover { background: #2A2825; color: #fff; }
#sugg li[aria-selected="true"]::before, #sugg li:hover::before { background: var(--primary); }
#sugg mark { background: none; color: var(--primary); font-weight: 600; }
.panel-enter { display: none; align-items: center; gap: .6rem; margin: .35rem .25rem .15rem; padding: .7rem .75rem; border-radius: 14px; background: rgba(255, 205, 41, .12); color: #FFE08A; font-size: .92rem; font-weight: 600; }
.panel-enter kbd { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.6rem; padding: 0 .45rem; border-radius: 6px; background: var(--primary); color: #000; font: 700 .75rem/1 var(--font); box-shadow: 0 2px 0 #B38F14; }
.spot.has-value .panel-enter { display: flex; }
/* Feedback 3: chat dock rides above the footer in the projects view */
.ax-home-dock { bottom: var(--ax-lift, 0px); transition: bottom .12s linear; }
.ax-thread { padding-bottom: calc(var(--bar-h) + 70px); }
.goo { inset: -48px; }
/* DF4: keep the last chips and answers clear of the dock */
.is-chat .ax-thread { padding-bottom: calc(var(--bar-h, 56px) + 80px); }

/* ---------- Projects below the hero, and the bar that follows you there ----------
   Projects used to be a question: a pill in the search row, a "Pulling up projects"
   loader, then cards dealt into the conversation. They are a place on the page now.
   The list sits under the hero and the pill is replaced by the arrow below. */
/* column-reverse: the label reads first and the arrow sits under it, pointing at what
   it leads to. Source order keeps the arrow first so it is decorative, not the label.

   It floats at the foot of the hero rather than sitting in the flow under the search
   bar. The hero is a fixed 100dvh with its content centred, so an in-flow arrow left a
   package of dead space between itself and the projects that no amount of padding could
   close: shrinking the padding only moved the slack to the other side of the centred
   block. Pinning the arrow to the bottom spends that space instead of fighting it.

   It is a child of .hero, not of .h2-main. A transform makes an element the containing
   block for its absolutely positioned descendants, and .h2-main takes one when the
   suggestion panel lifts the hero, which would make the arrow jump on open. */
.ax-see {
  display: inline-flex; flex-direction: column-reverse; align-items: center; gap: .5rem;
  margin: clamp(1.75rem, 5vw, 3rem) auto 0;
  color: var(--ax-brand); text-decoration: none; font-weight: 600;
  font-size: .9rem; letter-spacing: .02em;
}
@media (min-height: 700px) {
  .ax-see {
    position: absolute; z-index: 2; left: 50%; bottom: clamp(1.25rem, 3.5vh, 2.25rem);
    margin: 0; transform: translateX(-50%);
  }
}
.ax-see-arrow {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  color: #1a1a1a; background: var(--ax-brand);
  box-shadow: 0 10px 26px -10px rgba(255, 205, 41, .7);
  animation: ax-see-float 2.4s ease-in-out infinite;
}
.ax-see:hover .ax-see-arrow, .ax-see:focus-visible .ax-see-arrow { background: var(--ax-brand-hi); }
.ax-see:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 6px; border-radius: 8px; }
@keyframes ax-see-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
/* Needs a real box: its parent is a flex column, so a bare block collapses to zero
   width, and an IntersectionObserver target with no area never reports a change. */
.ax-spot-sentinel { display: block; width: 100%; align-self: stretch; height: 1px; }

.ax-projects { padding: clamp(1.25rem, 3vw, 2rem) var(--pad) clamp(3rem, 8vw, 5rem); }
/* The cards are the width they were when they were dealt into the conversation: the
   thread column, not the full page. At 1100px they stood a third taller than the
   window and read as banners rather than a list. */
.ax-projects-inner { width: min(640px, 100%); margin: 0 auto; }
@media (min-width: 1100px) { .ax-projects-inner { width: min(720px, 100%); } }
.ax-projects-title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ax-muted);
}

/* The bar is moved into this dock, not pinned where it sits: `.h2-main` takes a
   transform when the suggestion panel lifts it, and a transformed ancestor makes
   position:fixed resolve against that ancestor rather than the viewport. */
.ax-spot-dock {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60; width: min(660px, calc(100vw - 28px));
  transform: translate(-50%, 160%); opacity: 0;
  transition: transform .5s cubic-bezier(.22, 1.18, .36, 1), opacity .3s ease;
  pointer-events: none;
}
body.is-spot-docked .ax-spot-dock { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* No surface of its own. A first pass gave the dock a dark blurred pill, which read as
   a filled button sitting behind the bar; the ask bar on the case study pages (.ax-dock)
   is a bare container and lets the bar's own glass carry it, and this now matches. The
   bar keeps its goo blob when it is moved here, so it still has a background. */
body.is-spot-docked .ax-spot-dock .spot { margin: 0; }
body.is-spot-docked .ax-see { opacity: 0; pointer-events: none; }
/* It used to sit inside .h2-main and was revealed with it. Out on its own it needs the
   same gate, or it is the one lit thing on screen through the whole intro. */
.ax-home:not(.h2-nav) .ax-see { opacity: 0; pointer-events: none; }
/* The panel opens downward into the arrow's space on a short window. */
body.is-sugg-open .ax-see { opacity: 0; pointer-events: none; }
.ax-see { transition: opacity .3s ease; }

/* Coming back up, the bar lands under the hero title with a little overshoot. */
.spot.is-returning { animation: ax-spot-return .52s cubic-bezier(.22, 1.18, .36, 1) both; }
@keyframes ax-spot-return {
  0% { transform: translateY(26px); opacity: .25; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-see-arrow { animation: none; }
  .ax-spot-dock { transition: none; }
  .spot.is-returning { animation: none; }
}
@media (max-width: 640px) {
  .ax-projects { padding-top: clamp(2.25rem, 8vw, 3.5rem); }
}