/* BloomBridge — signature scroll scene: "The bridge across the AI gap"
   Scrubbed by GSAP ScrollTrigger (assets/bridge.js). CSS-keyframe fallback runs
   via .bb-armed / .bb-play when GSAP is unavailable. Reduced motion and no-JS
   render the completed scene statically. Palette + type locked to site.css. */

.bridge-xing{position:relative;overflow:hidden;background:var(--cream);padding:clamp(64px,9vw,110px) 0 clamp(56px,8vw,96px)}
.bridge-xing::before{content:"";position:absolute;width:56vw;height:56vw;max-width:700px;max-height:700px;left:50%;top:-34%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(181,154,120,.22) 0%,transparent 62%);pointer-events:none}
.bridge-xing .section-head{margin-bottom:2rem}
.bridge-xing .bb-sub{font-family:var(--serif);font-style:italic;color:var(--brown);font-size:1.05rem}
.bb-stage{position:relative;max-width:1000px;margin:0 auto;min-height:170px}
.bb-stage svg{width:100%;height:auto;overflow:visible}

/* ---------- line-art vocabulary (matches existing botanicals) ---------- */
.bridge-xing .bb-line{stroke:var(--tan);fill:none;stroke-linecap:round;stroke-linejoin:round}
.bridge-xing .bb-line2{stroke:var(--ltan);fill:none;stroke-linecap:round;stroke-linejoin:round}
.bb-cap{font-family:var(--sans);font-size:13px;font-weight:bold;letter-spacing:.26em;fill:var(--tan)}
.bb-vine{stroke:var(--ltan);fill:none;stroke-width:1.5;stroke-linecap:round}
.bb-leafp{stroke:var(--tan);fill:rgba(236,234,208,.55);stroke-width:1.3;stroke-linejoin:round}
.bb-dash{stroke-dasharray:1}

/* ---------- pillar tag links ---------- */
.bb-taglink{cursor:pointer}
.bb-taglink rect{fill:var(--cream);stroke:var(--ltan);stroke-width:1.4;transition:stroke .3s ease}
.bb-taglink text{font-family:var(--sans);font-size:10px;font-weight:bold;letter-spacing:.16em;fill:var(--brown);transition:fill .3s ease}
.bb-taglink:hover rect{stroke:var(--tan)}
.bb-taglink:hover text{fill:var(--tan)}
.bb-taglink:focus{outline:none}
.bb-taglink:focus-visible rect{stroke:var(--brown);stroke-width:2}

/* ---------- transform plumbing ---------- */
.bb-pillar{transform-box:fill-box;transform-origin:50% 100%}
.bb-tag{transform-box:fill-box;transform-origin:50% 50%}
.bb-leaf{transform-box:fill-box;transform-origin:50% 100%}
.bb-walker .la,.bb-walker .lb{transform-box:fill-box;transform-origin:50% 0%}
.bb-glow{opacity:0;pointer-events:none}

/* ---------- walk cycle (only while the scene is live) ---------- */
.bridge-xing.bb-live .la{animation:bbLegA .42s ease-in-out infinite alternate}
.bridge-xing.bb-live .lb{animation:bbLegB .42s ease-in-out infinite alternate}
@keyframes bbLegA{from{transform:rotate(24deg)}to{transform:rotate(-24deg)}}
@keyframes bbLegB{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}

/* ---------- soft gold pulse travelling the arch once complete ---------- */
.bridge-xing.bb-done .bb-glow{animation:bbGlowRun 3.4s ease-in-out .2s infinite}
@keyframes bbGlowRun{
  0%{transform:translate(304px,266px);opacity:0}
  10%{opacity:1}
  25%{transform:translate(402px,239px)}
  50%{transform:translate(500px,230px);opacity:1}
  75%{transform:translate(598px,239px)}
  90%{opacity:1}
  100%{transform:translate(696px,266px);opacity:0}
}

/* ================================================================
   CSS FALLBACK (no GSAP): armed = initial hidden, play = timed run
   ================================================================ */
.bridge-xing.bb-armed .bb-pillar{transform:scaleY(0)}
.bridge-xing.bb-armed .bb-tag{opacity:0;transform:scale(0)}
.bridge-xing.bb-armed .bb-leaf{transform:scale(0)}
.bridge-xing.bb-armed .bb-dash{stroke-dashoffset:1}
.bridge-xing.bb-armed .bb-walker{opacity:0}

.bridge-xing.bb-play .bb-pillar{animation:bbRise .55s var(--ease) both}
.bridge-xing.bb-play .bb-p2{animation-delay:.4s}
.bridge-xing.bb-play .bb-p3{animation-delay:.8s}
@keyframes bbRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.bridge-xing.bb-play .bb-tag{animation:bbTagIn .42s cubic-bezier(.34,1.56,.64,1) both}
.bridge-xing.bb-play .bb-t1{animation-delay:.5s}
.bridge-xing.bb-play .bb-t2{animation-delay:.9s}
.bridge-xing.bb-play .bb-t3{animation-delay:1.3s}
@keyframes bbTagIn{from{opacity:0;transform:scale(0) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.bridge-xing.bb-play .bb-archline{animation:bbDashDraw 1.1s ease-in-out 1.6s both}
.bridge-xing.bb-play .bb-arch2{animation-delay:1.75s}
.bridge-xing.bb-play .bb-planks{animation:bbDashDraw 1s linear 2.6s both}
.bridge-xing.bb-play .bb-vine{animation:bbDashDraw .9s ease-in-out 3.3s both}
.bridge-xing.bb-play .bb-p2 .bb-vine{animation-delay:3.5s}
.bridge-xing.bb-play .bb-p3 .bb-vine{animation-delay:3.7s}
@keyframes bbDashDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.bridge-xing.bb-play .bb-leaf{animation:bbLeafPop .35s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(4.2s + var(--i,0)*.1s)}
@keyframes bbLeafPop{from{transform:scale(0)}to{transform:scale(1)}}

.bridge-xing.bb-play .bb-w1{animation:bbCross1 2.2s linear 5s both}
.bridge-xing.bb-play .bb-w2{animation:bbCross2 2.2s linear 5.4s both}
.bridge-xing.bb-play .bb-w3{animation:bbCross3 2.2s linear 5.8s both}
@keyframes bbCross1{
  0%{transform:translate(-180px,17px);opacity:0}
  12.5%{transform:translate(-126px,28px);opacity:1}
  25%{transform:translate(-60px,12px)}
  37.5%{transform:translate(0,0)}
  50%{transform:translate(70px,-7px)}
  62.5%{transform:translate(135px,-3px)}
  75%{transform:translate(200px,10px)}
  87.5%{transform:translate(266px,28px);opacity:1}
  100%{transform:translate(320px,17px);opacity:0}
}
@keyframes bbCross2{
  0%{transform:translate(-250px,24px);opacity:0}
  12.5%{transform:translate(-196px,35px);opacity:1}
  25%{transform:translate(-130px,19px)}
  37.5%{transform:translate(-70px,7px)}
  50%{transform:translate(0,0)}
  62.5%{transform:translate(65px,4px)}
  75%{transform:translate(130px,17px)}
  87.5%{transform:translate(196px,35px);opacity:1}
  100%{transform:translate(250px,24px);opacity:0}
}
@keyframes bbCross3{
  0%{transform:translate(-315px,20px);opacity:0}
  12.5%{transform:translate(-261px,31px);opacity:1}
  25%{transform:translate(-195px,15px)}
  37.5%{transform:translate(-135px,3px)}
  50%{transform:translate(-65px,-4px)}
  62.5%{transform:translate(0,0)}
  75%{transform:translate(65px,13px)}
  87.5%{transform:translate(131px,31px);opacity:1}
  100%{transform:translate(185px,20px);opacity:0}
}

/* ---------- mobile: keep labels legible as the scene scales ---------- */
@media (max-width:720px){
  .bb-cap{font-size:21px;letter-spacing:.2em}
  .bb-taglink text{font-size:15px;letter-spacing:.12em}
  .bb-t1 rect{x:-52px;width:104px;y:-16px;height:32px}
  .bb-t2 rect{x:-64px;width:128px;y:-16px;height:32px}
  .bb-t3 rect{x:-85px;width:170px;y:-16px;height:32px}
  .bridge-xing{padding-top:clamp(48px,10vw,72px)}
}
@media (max-width:420px){
  .bb-stage{min-height:150px}
}

/* ---------- reduced motion: full completed scene, no animation ---------- */
html.rm .bridge-xing .bb-pillar,html.rm .bridge-xing .bb-tag,html.rm .bridge-xing .bb-leaf,html.rm .bridge-xing .bb-walker{opacity:1;transform:none;animation:none}
html.rm .bridge-xing .bb-dash{stroke-dashoffset:0;animation:none}
html.rm .bridge-xing .la,html.rm .bridge-xing .lb{animation:none}
html.rm .bridge-xing .bb-glow{display:none}

/* ---------- print ---------- */
@media print{
  .bridge-xing .bb-glow{display:none}
  .bridge-xing .bb-pillar,.bridge-xing .bb-tag,.bridge-xing .bb-leaf,.bridge-xing .bb-walker{opacity:1 !important;transform:none !important;animation:none !important}
  .bridge-xing .bb-dash{stroke-dashoffset:0 !important;animation:none !important}
}