/* ============================================================
   BloomBridge — "The Bridge at Play" entry overlay (home only)
   Warm cream dawn wash; a tan line-art bridge draws itself
   across the full screen (arch + deck + plank ticks, dash-
   offset, eased burst); children run and skip across the deck,
   an adult + child walk hand in hand, a little dog trots along;
   the tagline sweeps in behind a band of light; everything
   dissolves into drifting motes that release to the hero.
   New file; no existing selectors are overridden.
   Hard cap 2.5s. Any input skips. Reduced motion = no intro.
   ============================================================ */
#bb-intro3{position:fixed;inset:0;z-index:7000;pointer-events:auto}
#bb-intro3.out{pointer-events:none}

/* warm cream dawn wash */
#bb-intro3 .bbi3-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 24%,rgba(255,252,232,.95) 0%,rgba(245,245,220,0) 60%),
    radial-gradient(110% 70% at 50% 104%,rgba(181,154,120,.30) 0%,rgba(181,154,120,0) 62%),
    linear-gradient(180deg,#FAF8E8 0%,#F5F5DC 46%,#ECEAD0 100%);
  animation:bbi3Dawn .4s ease both;
}
#bb-intro3.out .bbi3-bg{animation:bbi3BgOut .38s ease forwards}
@keyframes bbi3Dawn{from{opacity:0}to{opacity:1}}
@keyframes bbi3BgOut{from{opacity:1}to{opacity:0}}

/* the drawn scene */
#bb-intro3 .bbi3-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
#bb-intro3.out .bbi3-scene{animation:bbi3SceneOut .4s ease forwards}
@keyframes bbi3SceneOut{to{opacity:0;transform:translateY(-8px)}}

/* bridge draws itself — stroke-dashoffset, eased burst */
#bb-intro3 .bbi3-draw{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:bbi3Draw var(--d,.6s) cubic-bezier(.2,.85,.25,1) var(--dl,0s) forwards;
}
@keyframes bbi3Draw{to{stroke-dashoffset:0}}

/* figures pop in with a soft scale-in once the bridge lands (.p1) */
#bb-intro3 .fig{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
#bb-intro3.p1 .fig{animation:bbi3Pop .38s cubic-bezier(.3,1.4,.4,1) var(--dl,0s) both}
@keyframes bbi3Pop{
  0%{opacity:0;transform:scale(.2)}
  60%{opacity:1;transform:scale(1.09)}
  100%{opacity:1;transform:scale(1)}
}

/* children running: 2-frame leg scissor + dash across the deck */
#bb-intro3 .runner .pB{opacity:0}
#bb-intro3.p1 .runner .pA{animation:bbi3Sw .3s linear .1s infinite}
#bb-intro3.p1 .runner .pB{animation:bbi3Sw .3s linear -.05s infinite}
@keyframes bbi3Sw{0%,49.9%{opacity:1}50%,100%{opacity:0}}
#bb-intro3.p1 .mv1{animation:bbi3Dash1 1.5s linear .1s both}
#bb-intro3.p1 .mv2{animation:bbi3Dash2 1.55s linear .24s both}
@keyframes bbi3Dash1{to{transform:translateX(190px)}}
@keyframes bbi3Dash2{to{transform:translateX(170px)}}

/* skipping child mid-deck */
#bb-intro3.p1 .hop{animation:bbi3Hop .6s cubic-bezier(.4,0,.6,1) .4s infinite}
@keyframes bbi3Hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

/* adult + child strolling hand in hand */
#bb-intro3.p1 .walk{animation:bbi3Walk 1.4s linear .45s both}
@keyframes bbi3Walk{
  0%{transform:translate(0,0)}25%{transform:translate(-7px,-2.5px)}
  50%{transform:translate(-14px,0)}75%{transform:translate(-21px,-2.5px)}
  100%{transform:translate(-28px,0)}
}

/* tiny dog: trot + tail wag */
#bb-intro3.p1 .trot{animation:bbi3Trot .32s ease-in-out .55s infinite}
@keyframes bbi3Trot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#bb-intro3 .tail{transform-box:fill-box;transform-origin:100% 100%}
#bb-intro3.p1 .tail{animation:bbi3Wag .26s ease-in-out .55s infinite alternate}
@keyframes bbi3Wag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}

/* tagline — light-band mask reveal + scale settle (dark on cream) */
#bb-intro3 .bbi3-tag{
  position:absolute;left:50%;top:26%;
  transform:translate(-50%,-50%) scale(1.06);
  margin:0;padding:.32em .9em;max-width:none;white-space:nowrap;overflow:hidden;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.2rem,3.6vw,2.2rem);
  letter-spacing:.6px;color:#3D2F24;opacity:0;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
#bb-intro3 .bbi3-txt{display:inline-block;clip-path:inset(-40% 103% -40% -3%)}
#bb-intro3 .bbi3-band{
  position:absolute;top:-30%;bottom:-30%;left:-18%;width:15%;
  background:linear-gradient(90deg,rgba(217,182,138,0) 0%,rgba(255,244,214,.95) 50%,rgba(217,182,138,0) 100%);
  filter:blur(5px);opacity:0;pointer-events:none;
}
#bb-intro3 .bbi3-tag.on{animation:bbi3Settle .95s cubic-bezier(.22,.9,.24,1) forwards}
#bb-intro3 .bbi3-tag.on .bbi3-txt{animation:bbi3Reveal .72s cubic-bezier(.3,.7,.2,1) .06s forwards}
#bb-intro3 .bbi3-tag.on .bbi3-band{animation:bbi3Band .8s cubic-bezier(.3,.7,.2,1) forwards}
#bb-intro3.out .bbi3-tag{animation:bbi3Fade .3s ease forwards}
@keyframes bbi3Settle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.07)}
  30%{opacity:1}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes bbi3Reveal{to{clip-path:inset(-40% -3% -40% -3%)}}
@keyframes bbi3Band{
  0%{left:-18%;opacity:0}
  12%{opacity:1}
  86%{opacity:1}
  100%{left:106%;opacity:0}
}
@keyframes bbi3Fade{
  from{opacity:1;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-50%) scale(.99)}
}

/* dissolve motes drifting up as the overlay releases */
#bb-intro3 .bbi3-mote{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,154,120,.95) 0%,rgba(181,154,120,0) 70%);
  opacity:0;pointer-events:none;
  animation:bbi3Mote .55s ease-out var(--dl,0s) forwards;
}
@keyframes bbi3Mote{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  25%{opacity:.95}
  100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-46px)) scale(1.15)}
}

/* Reduced motion: intro never appears (JS also bails; belt + braces) */
html.rm #bb-intro3{display:none !important}
@media (prefers-reduced-motion:reduce){#bb-intro3{display:none !important}}