/* Homepage BumpBuddy intro and the "We are BumpBuddy" page (crew art, 2026-10-17). Uses brand tokens from style.css. */

/* Speech bubble */
.bbi-bubble{position:relative;margin:0;background:#fff;border:1px solid var(--lilac);border-radius:22px;padding:16px 20px;
  font:400 clamp(1.05rem,1.5vw,1.25rem)/1.45 var(--serif);color:var(--plum);box-shadow:0 14px 34px -20px rgba(54,41,98,.45)}
.bbi-bubble::before{content:"";position:absolute;left:-9px;top:28px;width:16px;height:16px;background:#fff;border-left:1px solid var(--lilac);border-bottom:1px solid var(--lilac);transform:rotate(45deg)}

/* Homepage intro block: the whole card is one link. Four crew hosts side by side. */
section.bbi-sec{padding:clamp(18px,3vw,36px) 0 0}
.bbi{display:flex;align-items:flex-end;gap:clamp(18px,3vw,34px);text-decoration:none;color:inherit;max-width:1000px;margin:0 auto;
  padding:clamp(16px,2.4vw,24px) clamp(18px,3vw,34px) 0;border-radius:var(--radius);border:2px solid var(--lilac);overflow:hidden;
  background:linear-gradient(120deg,#fff 0%,var(--lilac-soft) 70%,#f6ece4 100%);box-shadow:0 18px 44px -26px rgba(54,41,98,.45);transition:transform .25s,box-shadow .25s,border-color .25s}
.bbi:hover{transform:translateY(-3px);border-color:var(--lavender);box-shadow:var(--shadow)}
.bbi:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:var(--radius)}
.bbi-crew{flex:none;width:clamp(260px,34vw,390px);align-self:flex-end;line-height:0}
.bbi-crew img{display:block;width:100%;height:auto;max-height:260px;object-fit:contain;object-position:50% 100%}
.bbi-body{flex:1;min-width:0;display:grid;gap:12px;justify-items:start;align-self:center;padding-bottom:clamp(16px,2.4vw,24px)}
.bbi-kicker{font:700 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7a5a98}
.bbi .btn{pointer-events:none}
@media (max-width:720px){
  .bbi{flex-direction:column-reverse;align-items:center;text-align:center;gap:14px;padding-top:20px}
  .bbi-body{justify-items:center;padding-bottom:0}
  .bbi-bubble::before{display:none}
  .bbi-body .btn{width:100%;justify-content:center}
  .bbi-crew{width:min(100%,330px)}
}

/* ===== We are BumpBuddy page ===== */
.mbb-hero{padding-bottom:0}
.mbb-hero.hero-banner{padding-top:clamp(28px,4vw,52px)}
.mbb-hero .actions{margin-top:14px}
.mbb-hero-in{display:grid;justify-items:center;text-align:center;gap:clamp(6px,1.4vw,14px)}
.mbb-hero-copy{max-width:760px;margin:0 auto}
.mbb-hero h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.2em}
.mbb-subline{font-family:var(--serif);color:var(--plum);font-size:clamp(1.15rem,1.9vw,1.45rem);margin:0 auto 10px;max-width:46ch}
.mbb-intro{max-width:62ch;margin:0 auto 6px;color:#3d3150}
.mbb-hero .actions{justify-content:center}
.mbb-crew{margin:0 auto;width:100%;max-width:1100px;line-height:0}
.mbb-crew img{display:block;width:100%;height:auto;max-height:clamp(300px,64vh,660px);object-fit:contain;object-position:50% 100%}

.mbb-areas-sec{padding-top:clamp(36px,6vw,72px)}
.mbb-areas-head{max-width:760px;margin:0 auto clamp(20px,4vw,40px)}
.mbb-areas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,3vw,30px)}
.mbb-area{display:grid;grid-template-columns:minmax(220px,320px) 1fr;align-items:center;gap:clamp(20px,4vw,56px);
  padding:clamp(18px,3vw,30px) clamp(18px,4vw,48px);border-radius:var(--radius);background:linear-gradient(120deg,#fff 0%,var(--lilac-soft) 100%);border:1px solid #eadff5}
.mbb-area.mbb-right{grid-template-columns:1fr minmax(220px,320px)}
.mbb-area.mbb-right .mbb-art{order:2}
.mbb-area:nth-child(4n+3){background:linear-gradient(120deg,#fff 0%,#f6ece4 100%);border-color:#efe2d6}
.mbb-art{display:flex;justify-content:center;align-items:flex-end}
.mbb-fig{position:relative;display:block;width:clamp(180px,20vw,268px);isolation:isolate;animation:mbb-bob 4.2s ease-in-out var(--d,0s) infinite}
.mbb-fig img{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:460px;object-fit:contain}
/* soft glow near the phone, drawn behind the figure so it rims the phone, never the face */
.mbb-glow{position:absolute;z-index:0;left:var(--gx,50%);top:var(--gy,30%);width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,226,160,.85) 0%,rgba(205,184,230,.55) 38%,rgba(205,184,230,0) 70%);opacity:.55;animation:mbb-glow 2.8s ease-in-out var(--d,0s) infinite}
.mbb-kicker{display:block;font:700 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7a5a98;margin-bottom:6px}
.mbb-copy h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 10px;color:var(--plum)}
.mbb-copy p{margin:0 0 18px;max-width:52ch;font-size:1.05rem}
.mbb-links{display:flex;flex-wrap:wrap;gap:10px}
.mbb-note{font-size:.95rem;color:#5b4a73;max-width:70ch;margin:28px auto 0}
section.mbb-cta-sec{padding-top:clamp(12px,3vw,32px)}
.mbb-cta-sec .mbb-cta-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}

/* entrance on scroll: site.js adds .in to .reveal (IntersectionObserver); the art slides in from its side */
.mbb-area.reveal .mbb-art{transform:translateX(-28px);transition:transform .8s ease-out}
.mbb-area.mbb-right.reveal .mbb-art{transform:translateX(28px)}
.mbb-area.reveal.in .mbb-art{transform:none}
@keyframes mbb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mbb-glow{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.08)}}

@media (max-width:900px){
  .mbb-area,.mbb-area.mbb-right{grid-template-columns:1fr;text-align:center;justify-items:center}
  .mbb-area.mbb-right .mbb-art{order:0}
  .mbb-copy p{margin-inline:auto}
  .mbb-links{justify-content:center}
  .mbb-area.reveal .mbb-art,.mbb-area.mbb-right.reveal .mbb-art{transform:translateY(18px)}
  .mbb-area.reveal.in .mbb-art{transform:none}
  .mbb-fig{width:min(200px,56vw)}
  .mbb-fig img{max-height:343px}
}
@media (max-width:560px){
  .mbb-links .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bbi{transition:none}.bbi:hover{transform:none}
  .mbb-fig,.mbb-glow{animation:none!important}
  .mbb-glow{opacity:.45}
  .mbb-area.reveal .mbb-art,.mbb-area.mbb-right.reveal .mbb-art{transform:none!important;transition:none!important}
}
/* wide screens: copy left, crew right, so the whole crew sits in the first view */
@media (min-width:1100px){
  .mbb-hero-in{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;text-align:left;gap:clamp(20px,3vw,48px);max-width:1320px}
  .mbb-hero-copy{margin:0;padding-bottom:40px}
  .mbb-subline,.mbb-intro{margin-left:0;margin-right:0}
  .mbb-hero .actions{justify-content:flex-start}
  .mbb-crew img{max-height:min(640px,calc(100vh - 140px))}
}

/* ===== Raining BumpBuddy faces (bb-rain.js). The layer sits behind the hero copy and crew art, so they always stay on top. ===== */
.mbb-hero .mbb-hero-in{position:relative;z-index:2}
.bbr-layer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:strict}
.bbr-ball{position:absolute;left:0;top:0;visibility:hidden;border-radius:50%;pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-select:none;
  will-change:transform;transform-origin:50% 50%;box-shadow:0 6px 14px -6px rgba(54,41,98,.45),0 0 0 2px #fff;-webkit-tap-highlight-color:transparent}
.bbr-band{position:relative;z-index:1;height:clamp(150px,17vw,230px);pointer-events:none}
.bbr-again{position:absolute;z-index:3;left:max(4vw,calc((100vw - 1180px)/2));top:10px;pointer-events:auto;
  font:600 .82rem var(--sans);color:var(--plum);background:rgba(255,255,255,.85);border:1px solid var(--lilac);border-radius:999px;padding:7px 14px;cursor:pointer;
  box-shadow:0 6px 16px -10px rgba(54,41,98,.5);transition:background .2s,transform .2s}
.bbr-again:hover{background:#fff;transform:translateY(-1px)}
.bbr-again:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:720px){.bbr-band{height:150px}.bbr-again{top:6px;font-size:.78rem;padding:6px 12px}}
@media (prefers-reduced-motion:reduce){.bbr-again{display:none}}

/* "Meet BumpBuddy" YouTube embed, just below the hero (2026-10-17) */
section.mbb-video-sec{padding:clamp(32px,5vw,60px) 0 0}
.mbb-video-head{max-width:760px;margin:0 auto clamp(14px,2.4vw,24px)}
.mbb-video-head h2{color:var(--plum);margin:0}
.mbb-video{position:relative;width:100%;max-width:880px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:linear-gradient(120deg,var(--plum) 0%,var(--lavender) 100%);border:2px solid var(--lilac);box-shadow:0 22px 50px -24px rgba(54,41,98,.5)}
.mbb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mbb-video-link{margin:14px auto 0;font-size:.95rem}
.mbb-video-link a{color:#7a5a98;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mbb-video-link a:hover{color:var(--plum)}
@media (max-width:560px){.mbb-video{border-radius:14px}}