/* About: big outlined title that fills on scroll, centered copy, 3D icon chips, floating objects */
.about { padding-block: clamp(90px, 12vw, 180px); overflow: hidden; text-align: center; }
.about__title { font-size: clamp(4.6rem, 15vw, 14rem); }
.about__body { max-width: 760px; margin: clamp(26px, 4vw, 46px) auto 0; }
.about__body .about__lead { color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 900; line-height: 1.2; margin-bottom: 18px; font-family: var(--f-display); letter-spacing: -.02em; }
.about__body p { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: var(--ink-dim); margin-bottom: .9em; }
.about__story { text-align: center; }
.about__story p { margin-bottom: 1em; }
.about__story strong { color: var(--ink); font-weight: 900; }
.about__body p strong { color: var(--ink); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 30px 0 34px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  font-size: .92rem; font-weight: 700;
  transition: transform .35s var(--ease-spring), background .3s;
}
.chip img { width: 32px; height: 32px; object-fit: contain; transition: transform .45s var(--ease-spring); }
.chip:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .08); }
.chip:hover img { transform: rotate(-12deg) scale(1.2); }

.about__char { position: absolute; z-index: 1; bottom: 0; inset-inline-start: 1%; width: clamp(180px, 19vw, 320px); pointer-events: none; }
.about__char .char { filter: drop-shadow(0 30px 50px rgba(124, 77, 255, .4)); }

/* floating 3D objects, moved by js/modules/floaties.js on scroll */
.floaty { position: absolute; z-index: 2; width: clamp(64px, 8vw, 130px); pointer-events: none; will-change: transform; }
.floaty img { width: 100%; animation: bob 5s ease-in-out infinite; animation-delay: var(--bd, 0s); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
@keyframes bob { 50% { transform: translateY(-12px) rotate(6deg); } }

@media (max-width: 860px) {
  .about__char { position: relative; inset: auto; margin: 34px auto 0; width: min(72vw, 300px); }
  /* keep floating icons in the corners so they never sit on the character or the text */
  .about .floaty { width: 52px; }
  .about .floaty:nth-of-type(1) { top: 2% !important; inset-inline-start: 4% !important; }
  .about .floaty:nth-of-type(2) { top: 3% !important; inset-inline-end: 4% !important; }
  .about .floaty:nth-of-type(3) { display: none; }
}