/* Hibbo landing.
   Every size below is measured off the design vectors and interpolated between the
   two artboards: mobile.pdf (393px) and desktop.pdf (1512px). Each clamp() lands
   exactly on the design value at both widths. */

:root {
  --bg: #FFFFFF;
  --ink: #000000;
  --ink-2: #848488;
  --ink-3: #979797;
  --ink-ph: #757575;

  --blue: #4285F4;
  --blue-hover: #2F6FDB;
  --send: #2F7DF6;
  --red: #E0563F;
  --green: #34C759;

  /* chat bar rim, sampled around the design's border */
  --rim: conic-gradient(from 0deg at 50% 50%,
      #A8BAEE 0deg, #EBAED9 74deg, #EB675C 105deg,
      #F1B24C 180deg, #EB9D91 254deg, #6DB6F4 286deg, #A8BAEE 360deg);

  /* logo rim, sampled every 20° off the design */
  --logo-rim: conic-gradient(from 0deg at 50% 50%,
      #EC83EC 0deg, #C191EF 20deg, #95A0F3 40deg, #69AFF7 60deg, #4EBCFA 80deg,
      #90BBF4 100deg, #D3B9ED 120deg, #F5ACDC 140deg, #F793C3 160deg, #F97CAB 180deg,
      #FB6392 200deg, #FD4B79 220deg, #FE4560 240deg, #FD744A 260deg, #FCA532 280deg,
      #FAA457 300deg, #F8988A 320deg, #F68BBF 340deg, #EC83EC 360deg);

  /* the signup row's width — the headline locks to it below 600px */
  --col:          min(547px, 100vw - 50px);

  /* hero */
  --logo-size:    clamp(64px, 2.860vw + 52.76px, 96px);
  --h1-size:      clamp(48.87px, 1.4397vw + 40.23px, 62px);
  --h1-lh:        clamp(53.27px, 1.0230vw + 47.13px, 62.6px);
  --sub-size:     clamp(18px, 2.011vw + 10.10px, 40.5px);
  --sub-lh:       clamp(21.6px, 2.404vw + 12.15px, 48.5px);
  --fine-size:    clamp(12px, 0.357vw + 10.60px, 16px);

  /* signup row */
  --field-h:      clamp(46px, 1.251vw + 41.08px, 60px);
  --field-font:   clamp(14px, 0.447vw + 12.24px, 19px);
  --cta-w:        clamp(97px, 3.038vw + 85.06px, 131px);
  --cta-font:     clamp(15px, 0.268vw + 13.95px, 18px);

  /* chat bar */
  --bar-w:        min(780px, 100vw - 48px);
  --bar-h:        clamp(78px, 7.328vw + 49.20px, 160px);
  --bar-r:        clamp(12px, 0.715vw + 9.19px, 20px);
  --bar-text-x:   clamp(8.9px, 0.965vw + 5.11px, 19.7px);
  --bar-text-y:   clamp(18.55px, 1.707vw + 11.84px, 37.65px);
  --ph-font:      clamp(12px, 0.626vw + 9.54px, 19px);
  --plus-size:    clamp(6.7px, 0.688vw + 4.00px, 14.4px);
  --plus-x:       clamp(7.4px, 1.037vw + 3.33px, 19px);
  --send-size:    clamp(16.3px, 1.850vw + 9.03px, 37px);
  --send-right:   clamp(7.9px, 0.188vw + 7.16px, 10px);
  --send-bottom:  clamp(7.9px, 0.804vw + 4.74px, 16.9px);

  /* result pill */
  --pill-h:       clamp(32px, 2.145vw + 23.57px, 56px);
  --pill-font:    clamp(12.6px, 1.001vw + 8.67px, 23.8px);
  --pill-icon:    clamp(16px, 1.430vw + 10.38px, 32px);
  --pill-pad-l:   clamp(15.9px, 0.724vw + 13.06px, 24px);
  --pill-pad-r:   clamp(12px, 1.251vw + 7.09px, 26px);
  --pill-gap:     clamp(9.3px, 0.760vw + 6.32px, 17.8px);
  --pill-rise:    clamp(8px, 0.179vw + 7.30px, 10px);
}

*, *::before, *::after { box-sizing: border-box; }

/* the hidden attribute has to beat the display rules below it */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow-x: hidden;
}

body {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* extra room at the bottom is reserved for the footer, so the composition
     stays centred in what is left instead of running into it */
  padding: 24px 20px 62px;
}

.foot {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  text-align: center;
  font-size: calc(var(--fine-size) * 0.92);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: #A2A2A7;
  text-wrap: pretty;
}

/* ---------- hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Ring is a CSS conic gradient clipped by the outline traced out of the design PDF,
   so the sweep of colour matches the source exactly. Eyes sit on top, unmasked. */
.logomark {
  position: relative;
  width: var(--logo-size);
  aspect-ratio: 1;
  margin-bottom: clamp(15.1px, 0.786vw + 12.01px, 23.9px);
}

.logo-ring {
  position: absolute;
  inset: 0;
  background: var(--logo-rim);
  -webkit-mask: url("/assets/logo-ring.svg") center / contain no-repeat;
  mask: url("/assets/logo-ring.svg") center / contain no-repeat;
}

.logo-eyes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #232320;
}

h1 {
  margin: 0 0 clamp(5.8px, 0.974vw + 1.97px, 16.7px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-size: var(--h1-size);
  font-weight: 700;
  line-height: var(--h1-lh);
  letter-spacing: -0.028em;
  color: var(--ink);
}

.sub {
  margin: 0 0 clamp(16.1px, 0.715vw + 13.29px, 24.1px);
  font-size: var(--sub-size);
  font-weight: 400;
  line-height: var(--sub-lh);
  letter-spacing: -0.015em;
  color: var(--ink-2);
}

/* ---------- signup ---------- */

.signup {
  display: flex;
  align-items: center;
  gap: 16px;
  width: var(--col);
  margin: 0 0 clamp(6.9px, 0.080vw + 6.58px, 7.8px);
}

.field { flex: 1 1 auto; min-width: 0; display: block; }

.field input {
  width: 100%;
  height: var(--field-h);
  padding: 0 24px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  background: #FCFCFC;
  font: inherit;
  font-size: var(--field-font);
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.field input::placeholder { color: var(--ink-ph); }

.field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.14);
}

.signup.is-error .field input {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(224, 86, 63, 0.12);
}

.signup.is-error { animation: shake 220ms ease both; }

.cta {
  flex: 0 0 auto;
  width: var(--cta-w);
  height: var(--field-h);
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: var(--cta-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.cta:hover:not(:disabled) {
  background: var(--blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(66, 133, 244, 0.32);
}

.cta:active:not(:disabled) { transform: translateY(0); }
.cta:disabled { cursor: default; }

.cta-dots { display: none; gap: 4px; align-items: center; }
.cta-dots i {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #fff;
  animation: typing 1.1s ease-in-out infinite;
}
.cta-dots i:nth-child(2) { animation-delay: 0.15s; }
.cta-dots i:nth-child(3) { animation-delay: 0.30s; }

.signup.is-loading .cta-label { display: none; }
.signup.is-loading .cta-dots { display: flex; }

.fineprint {
  margin: 0;
  font-size: var(--fine-size);
  letter-spacing: -0.005em;
  color: var(--ink-2);
}

.back {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

.back:hover { text-decoration: underline; }

.formerror {
  margin: 8px 0 0;
  font-size: var(--fine-size);
  color: var(--red);
}

.success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  max-width: 420px;
  animation: fadeIn 300ms ease both;
}

.success .check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success .check svg { width: 12px; height: 12px; }

.success-text { display: flex; flex-direction: column; gap: 3px; }
.success-text b { font-size: clamp(14px, 1.2vw, 16px); letter-spacing: -0.01em; }
.success-text span { font-size: clamp(12px, 1.05vw, 14px); line-height: 1.5; color: var(--ink-2); }

/* ---------- animation stage ---------- */

/* padding-top reserves exactly the strip the pill rests in, so its resting
   position is the top of the stage box */
.stage {
  position: relative;
  width: var(--bar-w);
  margin-top: clamp(19.6px, 1.644vw + 13.14px, 38px);
  padding-top: calc(var(--pill-h) + var(--pill-rise));
  user-select: none;
  pointer-events: none;
}

.pill, .ghost {
  position: absolute;
  left: 50%;
  top: 0;
  height: var(--pill-h);
  display: flex;
  align-items: center;
  gap: var(--pill-gap);
  padding: 0 var(--pill-pad-r) 0 var(--pill-pad-l);
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  will-change: transform, opacity, filter;
}

.pill-icon {
  width: var(--pill-icon);
  height: var(--pill-icon);
  flex: 0 0 auto;
  display: block;
}

.pill-label {
  font-size: var(--pill-font);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.chatbar {
  position: relative;
  width: 100%;
  height: var(--bar-h);
  padding: 2px;
  border-radius: var(--bar-r);
  background: var(--rim);
  will-change: transform;
}

.chatbar-inner {
  position: relative;
  height: 100%;
  border-radius: calc(var(--bar-r) - 2px);
  background: #FFFFFF;
  overflow: hidden;
}

.chatbar-text {
  position: absolute;
  left: var(--bar-text-x);
  right: calc(var(--send-size) + var(--send-right) + 12px);
  top: var(--bar-text-y);
  height: calc(var(--ph-font) * 1.4);
  transform: translateY(-50%);
}

.placeholder, .typed {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: var(--ph-font);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.placeholder {
  font-style: italic;
  color: var(--ink-3);
}

.typed { color: #111114; }

/* the caret pulses in CSS rather than being repainted from the rAF loop;
   while characters are landing it holds steady */
.caret {
  display: inline-block;
  width: 2px;
  height: calc(var(--ph-font) * 1.1);
  margin-left: 2px;
  background: #111114;
  animation: caretPulse 1.15s ease-in-out infinite;
}

.chatbar.is-typing .caret {
  animation: none;
  opacity: 1;
}

.chatbar-plus {
  position: absolute;
  left: var(--plus-x);
  bottom: var(--send-bottom);
  width: var(--plus-size);
  height: var(--plus-size);
}

.chatbar-send {
  position: absolute;
  right: var(--send-right);
  bottom: var(--send-bottom);
  width: var(--send-size);
  height: var(--send-size);
  border-radius: 999px;
  background: var(--send);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(47, 125, 246, 0.35);
}

.chatbar-send svg { width: 58%; height: 58%; }

/* ---------- keyframes ---------- */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes caretPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.08; }
}

@keyframes typing {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40%      { opacity: 1;    transform: translateY(-2px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  38% { transform: translateX(5px); }
  58% { transform: translateX(-3px); }
  78% { transform: translateX(2px); }
}

/* Below 600px the headline is sized to land exactly on the signup row's width,
   so H1 and the form share the same left and right edges.
   Above it the headline keeps growing to the 62px of the desktop artboard. */
@media (max-width: 599.98px) {
  :root {
    --h1-size: calc(var(--col) / 10.945 - 1.111px);
    --h1-lh:   calc(var(--h1-size) * 1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}