/* SPE BUE - shared extras (loaded on every page, after the page styles)
   1. Scroll progress: the yellow bar on top of the navigation bar fills as you scroll
   2. Slogan + Who we are: the three blocks become a side-swiping row on phones and tablets
      (same behaviour as the "What's happening" cards), plus their entrance animation
   3. Navigation spacing
   4. Page-to-page transition (Home, Photos, News, Join SPE, FAQ)
*/

/* ---------- 1. scroll progress bar ---------- */
header::before{
  left:0;right:auto;top:0;height:4px;
  width:calc(var(--spe-scroll,0) * 100%);
  border-radius:0 99px 99px 0;
  background:linear-gradient(90deg,#E7A93C,#F5B82E 55%,#ffd86a);
  box-shadow:0 0 10px rgba(245,184,46,.55);
  transition:width .12s linear;
  z-index:3;pointer-events:none;
}
header::after{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:rgba(245,184,46,.16);
  z-index:2;pointer-events:none;
}

/* ---------- 2. slogan + who we are ---------- */
.hs-dots{display:none}

/* entrance: cards slide up/in one after another, icon floats, gold top line draws across.
   (works on desktop and phone, and ignores the "reduce motion" setting like the rest of the site) */
.about .wb.reveal.in::before{transform-origin:left;animation:speLine 1.1s cubic-bezier(.2,.85,.2,1) calc(var(--d,0ms) + .25s) backwards}
.about .wb.reveal.in .wb-ico{animation:speIcon 3.8s ease-in-out calc(var(--d,0ms) + .9s) infinite}
.about .wb .wb-ico{transition:transform .35s cubic-bezier(.2,.85,.2,1.3),background .25s ease}
.about .wb:hover .wb-ico{transform:rotate(-7deg) scale(1.1);background:rgba(245,184,46,.22)}
.about .wb.reveal.in .wb-no{animation:speNo .9s cubic-bezier(.2,.85,.2,1) calc(var(--d,0ms) + .3s) backwards}
@keyframes speLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes speIcon{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes speNo{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}

/* the heading flashes when you arrive from the About link */
.about .section-head.flash h2,.about .section-head.flash .tag{animation:speFlash 1.4s ease .1s both}
@keyframes speFlash{
  0%,100%{filter:drop-shadow(0 0 0 rgba(245,184,46,0))}
  35%{filter:drop-shadow(0 0 16px rgba(245,184,46,.85))}
}

/* swipe row: phones + tablets (the point where the three columns no longer fit) */
@media (max-width:980px){
  .about.hs-on{--wp:28px}
  .about.hs-on .wwa{
    display:flex;grid-template-columns:none;align-items:stretch;gap:14px;position:relative;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1 * var(--wp));margin-right:calc(-1 * var(--wp));
    padding:6px var(--wp) 12px;scroll-padding:0 var(--wp);
  }
  .about.hs-on .wwa::-webkit-scrollbar{display:none}
  .about.hs-on .wwa:focus-visible{outline:2px solid var(--gold,#F5B82E);outline-offset:-2px;border-radius:14px}
  .about.hs-on .wb{flex:0 0 46%;min-width:0;scroll-snap-align:start}
  .about.hs-on .wb:hover{transform:none;box-shadow:none}

  /* cards glide in from the right, one after the other */
  .about.hs-on .wb.reveal.in{animation:speSlideIn .9s cubic-bezier(.2,.85,.2,1) backwards;animation-delay:var(--d,0ms)}
  @keyframes speSlideIn{from{opacity:0;transform:translateX(72px) scale(.94)}to{opacity:1;transform:none}}

  /* position dots (tap one to jump to that block) */
  .about.hs-on .hs-dots{display:flex;justify-content:center;gap:9px;margin-top:.9rem;height:7px}
  .hs-dots i{position:relative;display:block;width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;transition:width .25s ease,background .25s ease}
  .hs-dots i::after{content:'';position:absolute;inset:-12px -5px}
  .hs-dots i.on{width:22px;background:var(--gold,#F5B82E)}
}

@media (max-width:760px){
  /* tighter typography so the blocks stay compact on a phone */
  .about.hs-on{padding-top:2.4rem;padding-bottom:2.4rem}
  .about.hs-on .section-head{margin-bottom:.9rem;max-width:none}
  .about.hs-on .section-head h2{font-size:1.7rem}
  .about.hs-on .section-head p{font-size:.9rem;line-height:1.55;margin-top:.6rem}
  .about.hs-on .wwa{margin-top:0}
  .about.hs-on .wb{flex-basis:86%;padding:1.15rem 1.05rem 1.2rem;gap:.55rem;border-radius:16px}
  .about.hs-on .wb-ico{width:40px;height:40px;border-radius:12px}
  .about.hs-on .wb-ico svg{width:22px;height:22px}
  .about.hs-on .wb h3{font-size:1.1rem}
  .about.hs-on .wb p{font-size:.86rem;line-height:1.5}
  .about.hs-on .wb-no{font-size:1.9rem;top:10px;right:14px}
  .about.hs-on .chips{gap:.35rem;margin-top:.5rem;padding-top:0}
  .about.hs-on .chips span{font-size:.72rem;padding:.22rem .55rem}
  .about.hs-on .wb-pills{gap:.35rem}
  .about.hs-on .wb-pills a{font-size:.76rem;padding:.28rem .65rem}
  .about.hs-on .wb-ach{gap:.4rem}
  .about.hs-on .wb-ach .ach{grid-template-columns:76px 1fr;padding:.5rem .65rem;gap:.55rem}
  .about.hs-on .wb-ach .ach b{font-size:.85rem}
  .about.hs-on .wb-ach .ach span{font-size:.8rem;line-height:1.35}
}
@media (min-width:561px) and (max-width:760px){
  .about.hs-on .wb{flex-basis:62%}
}
@media (max-width:560px){
  .about.hs-on{--wp:20px}
}

/* ---------- 3. navigation with the new About link ---------- */
/* desktop: slightly tighter spacing so all eight links stay on one line */
@media (min-width:1101px){
  header nav{gap:.8rem}
  .nav-links{gap:.1rem;padding:.25rem}
  .nav-links a{padding:.5rem .6rem;font-size:.84rem;white-space:nowrap}
  .brand{font-size:.95rem;gap:9px;white-space:nowrap}
  .apply-btn{flex:0 0 auto;padding:.65rem 1rem;font-size:.82rem}
}
/* tablets: use the menu button (same as phones) instead of squeezing the links */
@media (min-width:901px) and (max-width:1100px){
  .nav-links,.apply-btn{display:none}
  .burger{display:flex}
}

/* ---------- 4. page transition ----------
   Chrome / Edge / Safari 18.2+: the old page fades and lifts away while the new one rises in
   (the navigation bar stays in place). Other browsers: spe-extras.js fades the page out on click,
   and the new page fades in (html.no-vt). */
@view-transition{navigation:auto}

#siteHeader{view-transition-name:spe-nav}
::view-transition-group(spe-nav){animation-duration:.01ms}
::view-transition-old(spe-nav),::view-transition-new(spe-nav){animation:none;mix-blend-mode:normal}
::view-transition-old(spe-nav){display:none}

::view-transition-old(root){animation:speVtOut .34s cubic-bezier(.4,0,.8,.6) both}
::view-transition-new(root){animation:speVtIn .85s cubic-bezier(.25,.75,.25,1) .08s both}
@keyframes speVtOut{to{opacity:0;transform:translateY(-14px) scale(.992)}}
@keyframes speVtIn{from{opacity:0;transform:translateY(26px) scale(.99)}}

html.no-vt body{animation:speEnter .6s cubic-bezier(.16,.84,.3,1) both}
@keyframes speEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.spe-leaving body{opacity:0;transform:translateY(-10px);transition:opacity .24s ease,transform .24s ease}