/* Pop-up voor nieuwe bezoekers: volg Buiten Buddies op Instagram en Facebook.
   De laag eromheen is de bestaande .bb-modal uit forms.css, dus dezelfde
   donkergroene waas, dezelfde z-index en dezelfde centrering. De kaart valt uit
   de lucht en komt altijd midden in beeld tot stilstand, op welke schermhoogte de
   bezoeker ook zit. Het gedrag, dus wanneer hij verschijnt en hoe vaak, staat in
   social.jsx. */

/* Past de kaart niet op een laag scherm, bijvoorbeeld een telefoon in liggende
   stand, dan kan de laag scrollen in plaats van de kaart af te snijden. */
.bbsoc-laag{display:flex;align-items:center;justify-content:center;overflow:hidden auto;overscroll-behavior:contain}
.bbsoc{position:relative;width:100%;max-width:424px;margin:auto 0;background:radial-gradient(125% 82% at 50% 0%,var(--bb-white) 0%,var(--bb-cream) 38%,var(--bb-mint) 72%,var(--bb-gray-light) 100%);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(6,7,7,.34),inset 0 0 0 1.5px var(--border-card)}
/* Alleen de boog wordt afgesneden, zodat de voetbal straks vrij uit de kaart kan vliegen. */
.bbsoc__deco{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius-lg);pointer-events:none}
.bbsoc__boog{position:absolute;top:-92px;left:50%;z-index:0;transform:translateX(-50%);width:340px;height:170px;border-radius:0 0 170px 170px;background:var(--bb-green-logo);animation:bbsocBoog 16s ease-in-out 1.6s infinite}
@keyframes bbsocBoog{0%,100%{background:var(--bb-green-logo)}34%{background:var(--bb-mint)}67%{background:var(--bb-green-forest)}}
.bbsoc__inner{position:relative;padding:24px 28px 20px;text-align:center}
.bbsoc__bol{width:92px;height:92px;border-radius:var(--radius-circle);display:block;margin:0 auto 16px;background:var(--bb-white);border:var(--photo-ring);box-shadow:0 6px 16px rgba(6,69,48,.2);animation:bbsocBob 3.8s ease-in-out 1.2s infinite}
.bbsoc__kop{font-family:var(--font-display);color:var(--bb-green-dark);font-size:24px;line-height:1.22;margin:0 0 10px;text-wrap:balance}
.bbsoc__sub{color:var(--fg-2);font-size:18px;line-height:1.6;margin:0 0 20px;text-align:left;text-wrap:pretty}
.bbsoc__label{position:relative;font-family:var(--font-display);color:var(--bb-green-dark);font-size:22px;line-height:1.25;margin:0 0 15px}
.bbsoc__knoppen{display:grid;gap:10px;margin:0 0 12px}
.bbsoc__knop{display:flex;align-items:center;gap:13px;min-height:56px;padding:0 16px;border-radius:var(--radius-md);background:var(--bb-white);color:var(--bb-green-dark);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--border-card);transition:transform var(--t-base) var(--ease-bounce),box-shadow var(--t-base) var(--ease-out),background var(--t-fast) var(--ease-out)}
.bbsoc__knop .t{text-align:left;line-height:1.2}
.bbsoc__knop b{display:block;font-family:var(--font-display);font-weight:400;font-size:18px}
.bbsoc__knop em{display:block;font-style:normal;font-size:15px;color:var(--fg-muted);margin-top:2px;white-space:nowrap}
.bbsoc__knop .glyph{flex:0 0 auto;transition:transform var(--t-base) var(--ease-bounce)}
.bbsoc__knop .pijl{margin-left:auto;opacity:.45;transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
.bbsoc__knop:hover{background:var(--bb-mint);transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(6,69,48,.16),var(--shadow-card-h)}
.bbsoc__knop:hover .glyph{transform:rotate(-8deg) scale(1.1)}
.bbsoc__knop:hover .pijl{transform:translateX(3px);opacity:.85}
.bbsoc__later{margin-top:5px;background:var(--bb-mint);border:0;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 2px var(--bb-green-dark);transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);font:700 18px var(--font-body);color:var(--bb-green-forest);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 22px;min-height:44px;white-space:nowrap}
.bbsoc__later:hover{background:#dcecdf;color:var(--bb-green-dark);box-shadow:inset 0 0 0 2px var(--bb-green-dark)}
.bbsoc .bb-modal__x{color:var(--bb-green-dark);z-index:3;top:14px;right:14px;background:var(--bb-mint);box-shadow:inset 0 0 0 2px var(--bb-green-dark);transition:background var(--t-fast) var(--ease-out)}
.bbsoc .bb-modal__x:hover{background:#dcecdf}

.bbsoc__ster{position:absolute;color:var(--bb-yellow);animation:bbsocTwinkel 2.6s ease-in-out 1.2s infinite}
.bbsoc__ster--a{top:20px;left:26px;animation-delay:1.4s}
.bbsoc__ster--b{top:60px;right:64px;animation-delay:2.3s}
.bbsoc__ster--c{top:112px;left:44px;animation-delay:3.1s}
.bbsoc__ster--d{bottom:14px;left:20px;animation-delay:3.9s}
.bbsoc__ster--e{bottom:24px;right:22px;animation-delay:4.7s}
.bbsoc__ster--f{bottom:56px;left:11px;animation-delay:5.4s}
.bbsoc__ster--g{bottom:9px;right:66px;animation-delay:6.1s}
.bbsoc__ster--h{bottom:62px;right:13px;animation-delay:6.8s}

/* Sterretjes door de teksten heen, ongelijk verdeeld over de hele breedte. Zij
   liggen achter de tekst, want de sterren staan voor .bbsoc__inner in de opbouw.
   Elk sterretje heeft een eigen maat, een eigen tempo en een eigen vertraging, en
   ze twinkelen zachter dan die aan de rand, zodat de tekst voorop blijft staan. */
.bbsoc__ster--i,.bbsoc__ster--j,.bbsoc__ster--k,.bbsoc__ster--l,.bbsoc__ster--m,
.bbsoc__ster--n,.bbsoc__ster--o,.bbsoc__ster--p,.bbsoc__ster--q,.bbsoc__ster--r,
.bbsoc__ster--s,.bbsoc__ster--t{animation-name:bbsocTwinkelZacht}
@keyframes bbsocTwinkelZacht{0%,100%{opacity:.16;transform:scale(.78) rotate(0)}50%{opacity:.78;transform:scale(1.1) rotate(-14deg)}}
.bbsoc__ster--i{top:156px;left:12%;animation-duration:2.2s;animation-delay:.6s}
.bbsoc__ster--j{top:168px;left:74%;animation-duration:3.4s;animation-delay:1.9s}
.bbsoc__ster--k{top:189px;left:34%;animation-duration:2s;animation-delay:2.6s}
.bbsoc__ster--l{top:206px;left:88%;animation-duration:4s;animation-delay:.9s}
.bbsoc__ster--m{top:227px;left:5%;animation-duration:3s;animation-delay:3.4s}
.bbsoc__ster--n{top:214px;left:55%;animation-duration:2.4s;animation-delay:4.2s}
.bbsoc__ster--o{top:252px;left:22%;animation-duration:3.8s;animation-delay:1.3s}
.bbsoc__ster--p{top:268px;left:67%;animation-duration:2.6s;animation-delay:5.1s}
.bbsoc__ster--q{top:292px;left:44%;animation-duration:3.1s;animation-delay:2.2s}
.bbsoc__ster--r{top:301px;left:85%;animation-duration:2.5s;animation-delay:6s}
.bbsoc__ster--s{top:324px;left:14%;animation-duration:4.3s;animation-delay:.3s}
.bbsoc__ster--t{top:346px;left:60%;animation-duration:2.8s;animation-delay:3.9s}
/* Ook de sterretjes aan de rand krijgen elk hun eigen tempo. */
.bbsoc__ster--a{animation-duration:3.2s}
.bbsoc__ster--b{animation-duration:2.3s}
.bbsoc__ster--c{animation-duration:4.1s}
.bbsoc__ster--d{animation-duration:2.7s}
.bbsoc__ster--e{animation-duration:3.6s}
.bbsoc__ster--f{animation-duration:2.1s}
.bbsoc__ster--g{animation-duration:4.4s}
.bbsoc__ster--h{animation-duration:2.9s}

/* De voetbal uit de statistiekenanimatie op de homepage: komt van linksboven
   binnen, stuitert drie keer naar rechts over 'Volg Buiten Buddies op:' en
   schiet bij de vierde stuiter met een grote boog rechtsboven het beeld uit. */
.bbsoc__bal{position:absolute;left:28%;bottom:100%;margin-bottom:1px;width:81px;height:81px;z-index:4;pointer-events:none;animation:bbsocBalY 5750ms 1500ms both}
.bbsoc__bal i{display:block;animation:bbsocBalX 5750ms 1500ms both}
.bbsoc__bal svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(6,69,48,.25))}
@keyframes bbsocBalY{
  0%{transform:translateY(-460px);animation-timing-function:cubic-bezier(.36,0,.78,.6)}
  22.6%{transform:translateY(0);animation-timing-function:cubic-bezier(.14,.72,.3,1)}
  32.6%{transform:translateY(-74px);animation-timing-function:cubic-bezier(.52,0,.9,.5)}
  42.5%{transform:translateY(0);animation-timing-function:cubic-bezier(.14,.72,.3,1)}
  50.6%{transform:translateY(-44px);animation-timing-function:cubic-bezier(.52,0,.9,.5)}
  58.8%{transform:translateY(0);animation-timing-function:cubic-bezier(.14,.72,.3,1)}
  65.1%{transform:translateY(-23px);animation-timing-function:cubic-bezier(.52,0,.9,.5)}
  70.5%{transform:translateY(0);animation-timing-function:cubic-bezier(.22,.76,.34,1)}
  86%{transform:translateY(-215px);animation-timing-function:cubic-bezier(.4,0,.88,.62)}
  100%{transform:translateY(-95px)}
}
@keyframes bbsocBalX{
  0%{transform:translateX(-64px) rotate(-30deg);opacity:0;animation-timing-function:linear}
  7.2%{transform:translateX(-52px) rotate(40deg);opacity:1;animation-timing-function:linear}
  70.5%{transform:translateX(112px) rotate(600deg);opacity:1;animation-timing-function:cubic-bezier(.28,0,.72,1)}
  100%{transform:translateX(1150px) rotate(1220deg);opacity:0}
}

/* Uit de lucht vallen, met twee keer natrillen zodra de kaart landt. */
.bbsoc--in{animation:bbsocVal 1180ms both,bbsocOpaak 240ms ease-out both}
@keyframes bbsocVal{
  0%{transform:translateY(-820px) rotate(-3deg);animation-timing-function:cubic-bezier(.38,0,.82,.56)}
  60%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.16,.7,.3,1)}
  78%{transform:translateY(-22px);animation-timing-function:cubic-bezier(.55,0,.9,.5)}
  91%{transform:translateY(0);animation-timing-function:cubic-bezier(.16,.7,.3,1)}
  96%{transform:translateY(-5px);animation-timing-function:cubic-bezier(.55,0,.9,.5)}
  100%{transform:translateY(0)}
}
@keyframes bbsocOpaak{from{opacity:0}to{opacity:1}}
@keyframes bbsocBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bbsocTwinkel{0%,100%{opacity:.25;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.12) rotate(16deg)}}

/* Op een smal scherm gaat de tekst een maat groter. */
@media (max-width:520px){
  .bbsoc__inner{padding:22px 22px 18px}
  .bbsoc__kop{font-size:25px}
  .bbsoc__sub{font-size:18px;line-height:1.6}
  .bbsoc__label{font-size:22px;margin-top:5px}
  .bbsoc__knop b{font-size:18px}
  .bbsoc__knop em{font-size:15.5px}
  .bbsoc__later{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  .bbsoc--in{animation:bbsocOpaak 200ms ease-out both}
  .bbsoc__bol,.bbsoc__ster,.bbsoc__boog{animation:none}
  .bbsoc__bal{display:none}
  .bbsoc__knop,.bbsoc__knop .glyph,.bbsoc__knop .pijl{transition:none}
}
.bb-rm-force .bbsoc--in{animation:bbsocOpaak 200ms ease-out both}
.bb-rm-force .bbsoc__bol,.bb-rm-force .bbsoc__ster,.bb-rm-force .bbsoc__boog{animation:none}
.bb-rm-force .bbsoc__bal{display:none}