/* Bob the ghost: shared character styles (used by bob.js) + the Meet Bob page. */
:root {
  --bob-bg: #0e1124;
  --bob-ink: #1d2340;
  --bob-paper: #f3f1ec;
  --bob-orange: #ff5a36;
  --bob-mint: #7fe3c4;
  --bob-yellow: #ffd86b;
  --bob-purple: #b78cff;
  --bob-blue: #8ab4ff;
  --bob-pink: #ff8fa3;
  --bob-font: "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}

/* ---------- character ---------- */
.bob-svg { display: block; overflow: visible; width: 100%; height: auto; filter: drop-shadow(0 0 26px rgba(243, 241, 236, .12)); touch-action: manipulation; cursor: pointer; }
.bob-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: bob-hop 2.4s ease-in-out infinite; }
.bob-svg:not([data-idle]) .bob-hop { animation: none; }
@keyframes bob-hop {
  0%, 100% { transform: translateY(0) scale(1.03, .96); }
  45% { transform: translateY(-9px) scale(.97, 1.04); }
  70% { transform: translateY(0) scale(1.04, .95); }
}
.bob-fx, .bob-eyewrap, .bob-eyeopen, .bob-eye, .bob-arm-wave { transform-box: fill-box; transform-origin: 50% 50%; }
.bob-fx { transform-origin: 50% 100%; }
.bob-eyewrap { transition: transform .22s ease-out; }
.bob-eyeopen { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.bob-eye { animation: bob-blink 4s infinite; }
@keyframes bob-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }

.bob-hand { transform-box: fill-box; transform-origin: 10% 90%; opacity: 0; transform: scale(.2); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.7, .5, 1); }
.bob-svg[data-wave] .bob-hand { opacity: 1; transform: scale(1); }
.bob-arm-wave { transform-origin: 10% 90%; }
.bob-svg[data-wave] .bob-arm-wave { animation: bob-wave 1.1s ease-in-out infinite; }
@keyframes bob-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-32deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-28deg); } }

/* the eye glows alone in the dark before Bob pops in */
.bob-svg[data-state="eye"] .bob-pop,
.bob-svg[data-state="eye"] .bob-shadow { opacity: 0; }
.bob-svg[data-state="eye"] .bob-eyewrap { filter: drop-shadow(0 0 12px #ff5a36) drop-shadow(0 0 30px rgba(255, 90, 54, .6)); }

/* moods */
.bob-svg[data-mood="happy"] .bob-eyeopen { transform: scaleY(.82); }
.bob-svg[data-mood="surprised"] .bob-eyeopen { transform: scale(1.22); }
.bob-svg[data-mood="sleepy"] .bob-eye { animation: none; transform: scaleY(.14); }
.bob-zzz text { opacity: 0; transform-box: fill-box; font: 800 26px var(--bob-font); fill: #cfd6ff; }
.bob-svg[data-mood="sleepy"] .bob-zzz text { animation: bob-zzz 2.6s ease-in infinite; }
.bob-svg[data-mood="sleepy"] .bob-zzz text:nth-child(2) { animation-delay: .8s; }
.bob-svg[data-mood="sleepy"] .bob-zzz text:nth-child(3) { animation-delay: 1.6s; }
@keyframes bob-zzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, -44px) scale(1.2); } }



/* ---------- Project Bob lander ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.bob-page { margin: 0; background: radial-gradient(ellipse at 70% 28%, #262e66 0%, #151a38 46%, var(--bob-bg) 80%) fixed; background-color: var(--bob-bg); color: var(--bob-paper); font: 17px/1.65 var(--bob-font); min-height: 100vh; overflow-x: hidden; }
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .5; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .8; transform: scale(1.2); } }
.drift { position: absolute; bottom: -80px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%); animation: drift linear infinite; }
@keyframes drift { to { transform: translateY(-120vh) translateX(var(--dx, 30px)); } }
main, .studio-foot { position: relative; z-index: 1; }
.bwrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(36px, 7vw, 88px); }
.hero h1 { margin: 0; font-size: clamp(2.3rem, 6.4vw, 4.4rem); line-height: 1.04; font-weight: 800; letter-spacing: -.01em; }
.hero h1 em { font-style: normal; color: var(--bob-orange); text-shadow: 0 0 40px rgba(255, 90, 54, .4); }
.chip { display: inline-block; margin-bottom: 20px; padding: 5px 16px; border-radius: 999px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bob-purple); box-shadow: inset 0 0 0 1.5px rgba(183, 140, 255, .55); background: rgba(183, 140, 255, .1); }
.lead { margin: 22px 0 0; max-width: 46ch; color: #c3caf0; font-size: 1.12rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.btn { display: inline-block; margin-top: 28px; padding: 12px 28px; border-radius: 999px; background: var(--bob-orange); color: #fff; font-weight: 800; text-decoration: none; transition: transform .15s, filter .15s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: center; margin-inline: auto; }
.speech { position: absolute; left: 60%; top: -4%; z-index: 2; white-space: nowrap; background: #fff; color: var(--bob-ink); font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.5rem); padding: .25em .8em; border-radius: 1.1em; transform: scale(0); transform-origin: 0 100%; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); pointer-events: none; }
.speech::after { content: ""; position: absolute; left: .7em; bottom: -.28em; width: .7em; height: .7em; background: #fff; transform: rotate(45deg); border-radius: 0 0 .2em 0; }
.speech.on { transform: scale(1); }
.shapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; padding: 0; list-style: none; max-width: 440px; }
.shapes button { font: 700 .95rem var(--bob-font); color: var(--bob-paper); background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 14px; cursor: pointer; }
.shapes button:hover { background: rgba(255, 255, 255, .16); }
.shapes button:focus-visible { outline: 3px solid var(--bob-orange); outline-offset: 2px; }
.shapes button[aria-pressed="true"] { background: var(--bob-orange); border-color: var(--bob-orange); color: #fff; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding-bottom: clamp(36px, 6vw, 72px); }
.step { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 24px; }
.step b { display: block; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bob-yellow); margin-bottom: 8px; }
.step h2 { margin: 0 0 6px; font-size: 1.35rem; }
.step p { margin: 0; color: #c3caf0; font-size: 1rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.note { text-align: center; color: #9aa3d6; font: .95rem system-ui, -apple-system, "Segoe UI", sans-serif; padding-bottom: clamp(36px, 6vw, 72px); }
@media (max-width: 800px) { .hero { grid-template-columns: minmax(0, 1fr); } .stage { order: -1; width: min(100%, 320px); } .speech { left: 52%; } }