/* ==========================================================================
   Vibe — "So… what brings you here?" contact picker (light --ice section)
   Three sticker faces with rotating ring text act as a single-select radio
   group; the choice primes the "let's talk" modal via the CTA's data-lead-*.
   ========================================================================== */

.s-vibe {
  background: var(--ice);
  color: var(--ink);
  padding: 150rem 0 210rem;
}
.vibe__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: max(1100rem, var(--vhx, 100svh));
  text-align: center;
}

/* ---------- Title + sub ---------- */
.vibe__title {
  font-size: 210rem;
  line-height: .93;              /* Anton's caps are ~.88em tall: .8 would make stacked lines touch */
  color: var(--ink);
}
.vibe__lines { display: block; }
.vibe__lines > span { display: block; } /* one line per span, even when the reveal script can't run */
.vibe__lines--mob { display: none; }
.vibe__title .wide { margin: 0 .02em 0 .01em; line-height: .8; }
.vibe__sub {
  margin-top: 56rem;
  font-size: 22rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Radio group ---------- */
.vibe__fieldset { margin: 84rem 0 0; padding: 0; border: 0; min-width: 0; }
.vibe__list { display: flex; justify-content: center; gap: 87rem; }
.vibe__item { position: relative; }

/* real radio, visually hidden but focusable (arrow keys move the choice) */
.vibe__input {
  position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.vibe__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* wrapper stack — each layer owns one kind of transform:
   pop (scroll reveal, JS) > dim (selected/unselected, CSS) > sticker (squash + wiggle, JS) */
.vibe__pop, .vibe__dim, .vibe__sticker, .vibe__boxpop { display: block; position: relative; }
.vibe__dim {
  transition: transform .7s var(--ease-back), opacity .5s ease;
}
.vibe__sticker { width: 244rem; height: 244rem; transform-origin: 50% 85%; }
.vibe__svg { width: 100%; height: 100%; overflow: visible; }

/* unselected stickers settle back a touch; the chosen one leans forward */
.vibe__list:has(.vibe__input:checked) .vibe__input:not(:checked) + .vibe__option .vibe__dim {
  transform: scale(.9);
  opacity: .9;
}
.vibe__input:checked + .vibe__option .vibe__dim { transform: translateY(-8rem) scale(1.04); }
@media (hover: hover) and (pointer: fine) {
  .vibe__input:not(:checked) + .vibe__option:hover .vibe__dim { transform: scale(.97); opacity: 1; }
  .vibe__input:checked + .vibe__option:hover .vibe__dim { transform: translateY(-12rem) scale(1.07); }
}

/* ---------- Sticker artwork ---------- */
.vibe__disc { stroke: var(--ink); stroke-width: 3; }
.vibe__item--later .vibe__disc { fill: var(--red); }
.vibe__item--website .vibe__disc { fill: var(--cyan); }
.vibe__item--audit .vibe__disc { fill: var(--yellow); }

.vibe__ring-text {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 25px;               /* SVG user units (viewBox 240) */
  letter-spacing: 0;
  fill: var(--ink);
}
.vibe__item--later .vibe__ring-text { fill: var(--white); font-size: 28px; }
.vibe__item--audit .vibe__ring-text { font-size: 26px; }
.vibe__sep { fill: var(--white); font-size: 1.5em; }
.vibe__item--later .vibe__sep { fill: var(--ink); }
.vibe__item--audit .vibe__sep { fill: var(--red); }

.vibe__splash { fill: var(--white); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.vibe__sclera { fill: var(--white); }
.vibe__outline { fill: none; stroke: var(--ink); stroke-width: 3.4; }
.vibe__pupil { fill: var(--ink); }
.vibe__glint { fill: var(--white); }
.vibe__lid { fill: var(--white); }
.vibe__lid-line { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.vibe__brows path { fill: none; stroke: var(--ink); stroke-width: 5.5; stroke-linecap: round; }
.vibe__squiggle { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.vibe__blush { fill: var(--red); opacity: .32; }
.vibe__mouth-fill { fill: var(--ink); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.vibe__tongue { fill: var(--red); }
.vibe__teeth { fill: var(--white); }
.vibe__star { fill: var(--red); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.vibe__twinkle { fill: var(--blue); }

/* speed-line burst that flashes around a sticker when it's picked */
.vibe__burst {
  position: absolute; left: 50%; top: 50%;
  width: 125%; height: 125%;
  transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none;
}
.vibe__burst line {
  stroke: var(--ink); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
}

/* ---------- Checkbox ---------- */
.vibe__box {
  position: relative;
  display: grid;
  place-items: center;
  width: 50rem; height: 50rem;
  border: 2rem solid var(--ink);
  border-radius: 12rem;
  background: rgba(7, 11, 31, .1);
  transition: background-color .5s ease-in-out, transform .5s var(--ease-back);
}
.vibe__spark {
  width: 70%; height: 70%;
  opacity: 0;
  transform: scale(0) rotate(-120deg);
  transition: transform .55s var(--ease-back), opacity .35s ease;
}
.vibe__item--later .vibe__spark { fill: var(--red); }
.vibe__item--website .vibe__spark { fill: var(--cyan); }
.vibe__item--audit .vibe__spark { fill: var(--yellow); }
.vibe__spark-mini { opacity: .9; }
.vibe__input:checked + .vibe__option .vibe__box { background: var(--ink); transform: scale(1.06); }
.vibe__input:checked + .vibe__option .vibe__spark { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .vibe__input:not(:checked) + .vibe__option:hover .vibe__box { background: rgba(7, 11, 31, .22); transform: scale(1.06); }
}
/* keyboard focus lands on the hidden radio: ring the box and the sticker */
.vibe__input:focus-visible + .vibe__option .vibe__box { outline: 3rem solid var(--blue); outline-offset: 5rem; }
.vibe__input:focus-visible + .vibe__option .vibe__sticker { outline: 3rem dashed var(--blue); outline-offset: 10rem; border-radius: 50%; }

/* ---------- CTA ---------- */
.vibe__actions { margin-top: 96rem; }
.vibe__cta { --bubble: var(--cyan); --bubble-fg: var(--ink); }
.vibe__cta .btn__label { height: 70rem; padding: 0 34rem; font-size: 21rem; }
/* label roll: both texts share one grid cell while the old one exits up and the new one enters */
.vibe__cta-roll {
  display: inline-grid;
  overflow: hidden;
  height: 1.3em; line-height: 1.3;
  white-space: nowrap;
}
.vibe__cta-text { grid-area: 1 / 1; display: block; }
.vibe__cta .btn__arrow { width: 70rem; height: 70rem; }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .s-vibe { padding: 130rem 0 150rem; }
  .vibe__container { min-height: 0; }
  .vibe__title { font-size: 146rem; }
  .vibe__lines--desk { display: none; }
  .vibe__lines--mob { display: block; }
  .vibe__sub { margin-top: 30rem; font-size: 18rem; }
  .vibe__fieldset { margin-top: 64rem; }
  .vibe__list { gap: 44rem; }
  .vibe__sticker { width: 184rem; height: 184rem; }
  .vibe__option { gap: 22rem; }
  .vibe__box { width: 44rem; height: 44rem; border-radius: 11rem; }
  .vibe__actions { margin-top: 60rem; }
  .vibe__cta .btn__label { height: 58rem; padding: 0 28rem; font-size: 18rem; }
  .vibe__cta .btn__arrow { width: 58rem; height: 58rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 743px) {
  .s-vibe { padding: 96rem 0 110rem; }
  .vibe__title { font-size: 79rem; }
  .vibe__sub { margin-top: 16rem; font-size: 14rem; }
  .vibe__fieldset { margin-top: 40rem; }
  .vibe__list { gap: 16rem; max-width: 358rem; }
  .vibe__sticker { width: 108rem; height: 108rem; }
  .vibe__option { gap: 18rem; }
  .vibe__box { width: 32rem; height: 32rem; border-width: 1.5rem; border-radius: 8rem; }
  .vibe__input:checked + .vibe__option .vibe__dim { transform: translateY(-4rem) scale(1.04); }
  .vibe__input:focus-visible + .vibe__option .vibe__sticker { outline-offset: 5rem; outline-width: 2px; }
  .vibe__actions { margin-top: 42rem; }
  .vibe__cta .btn__label { height: 52rem; padding: 0 26rem; font-size: 16rem; }
  .vibe__cta .btn__arrow { width: 52rem; height: 52rem; }
}

/* ---------- Reduced motion: final, readable state ---------- */
html.reduced-motion .vibe__dim,
html.reduced-motion .vibe__box,
html.reduced-motion .vibe__spark { transition: none; }