/* FurBrainia story scroll. Every class starts with fbs- so nothing clashes with the rest of the site. */
.fbs-story{--cream:#FBF3E6; --gold:#F2B33F; --magenta:#EC3670; color:var(--cream); font-family:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif; position:relative; height:calc(13 * 62vh + 100vh); height:calc(13 * 62svh + 100svh)}
.fbs-stage{position:sticky; top:env(safe-area-inset-top,0px); height:100vh; height:100svh; overflow:hidden; isolation:isolate; background:#120c08}
.fbs-shot{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; opacity:0; will-change:transform, opacity; backface-visibility:hidden}
.fbs-shot:first-of-type{opacity:1}
.fbs-bloom{position:absolute; inset:0; pointer-events:none; z-index:3; opacity:var(--bloom,0);
  background:radial-gradient(circle at 50% 50%, #FFF4D6 0%, rgba(255,214,140,.9) 25%, rgba(242,179,63,.45) 50%, transparent 78%)}
.fbs-shimmer{position:absolute; inset:0; pointer-events:none; z-index:3; opacity:var(--shimmer,0); mix-blend-mode:screen;
  background:radial-gradient(ellipse 80% 70% at 50% 55%, rgba(255,226,170,.75), rgba(242,179,63,.25) 50%, transparent 80%)}
.fbs-under{position:absolute; z-index:3; height:64px; translate:-50% -55%; pointer-events:none; opacity:var(--under,0);
  background:radial-gradient(ellipse at 50% 60%, rgba(255,220,150,.95), rgba(242,179,63,.45) 40%, transparent 72%); filter:blur(2px)}
.fbs-under i{position:absolute; bottom:40%; width:4px; height:4px; border-radius:50%; background:#FFE9B0; box-shadow:0 0 8px 2px rgba(255,214,140,.9); animation:fbs-slip 3.2s ease-out infinite}
.fbs-under i:nth-child(1){left:22%; animation-delay:0s} .fbs-under i:nth-child(2){left:40%; animation-delay:-.7s} .fbs-under i:nth-child(3){left:56%; animation-delay:-1.5s}
.fbs-under i:nth-child(4){left:70%; animation-delay:-2.2s} .fbs-under i:nth-child(5){left:84%; animation-delay:-2.8s}
@keyframes fbs-slip{0%{transform:translate(0,0); opacity:0} 20%{opacity:1} 100%{transform:translate(8px,-46px); opacity:0}}
.fbs-trail{position:absolute; z-index:6; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; pointer-events:none; background:#FFF1C9; box-shadow:0 0 10px 3px rgba(255,214,140,.85); animation:fbs-fadeTrail .9s ease-out forwards}
@keyframes fbs-fadeTrail{to{transform:translateY(16px) scale(.2); opacity:0}}
.fbs-dust{position:absolute; inset:0; pointer-events:none; z-index:3; opacity:var(--magic,0)}
.fbs-dust i{position:absolute; border-radius:50%; background:#FFE9B0; box-shadow:0 0 8px 2px rgba(255,214,140,.8); animation:fbs-drift linear infinite}
@keyframes fbs-drift{0%{transform:translateY(0); opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{transform:translateY(-22vh); opacity:0}}
.fbs-shade{position:absolute; inset:0; pointer-events:none; z-index:4; background:radial-gradient(ellipse 70% 45% at 50% 12%, rgba(18,12,8,.55), transparent 70%), linear-gradient(rgba(18,12,8,.6), rgba(18,12,8,.1) 40%, transparent 62%, rgba(18,12,8,.3))}
.fbs-beats{position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 9vh); z-index:5; display:grid; justify-items:center; padding:0 6vw; pointer-events:none}
.fbs-beat{grid-area:1/1; max-width:40rem; text-align:center; opacity:0; translate:0 12px}
.fbs-beat h1,.fbs-beat .fbs-big{margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.14; font-size:clamp(1.75rem, 1.15rem + 2.7vw, 3.2rem); text-wrap:balance; text-shadow:0 2px 26px rgba(18,12,8,.85)}
.fbs-beat p{margin:.9rem auto 0; max-width:34rem; font-size:clamp(1.08rem, 1rem + .45vw, 1.32rem); color:var(--cream); text-wrap:pretty; text-shadow:0 1px 16px rgba(18,12,8,.95)}
.fbs-beat .fbs-quote{font-weight:700; font-size:clamp(1.25rem, 1.05rem + .9vw, 1.7rem); line-height:1.3}
.fbs-beat .fbs-go{display:inline-flex; align-items:center; justify-content:center; min-height:52px; margin-top:1.4rem; padding:.9rem 2rem; border-radius:999px; background:var(--magenta); color:#fff; font-weight:800; font-size:1.1rem; text-decoration:none; box-shadow:0 12px 30px -10px rgba(236,54,112,.8)}
.fbs-beat .fbs-go:hover{background:#d92a62}
.fbs-beat .fbs-go:focus-visible{outline:3px solid var(--gold); outline-offset:4px}
.fbs-cue{position:absolute; left:0; right:0; bottom:5vh; z-index:5; display:flex; flex-direction:column; align-items:center; gap:.3rem; font-size:.95rem; font-weight:600; color:var(--cream); text-shadow:0 1px 12px rgba(18,12,8,.9); opacity:var(--cue,1); pointer-events:none}
.fbs-cue svg{width:22px; height:22px; animation:fbs-nudge 1.8s ease-in-out infinite}
@keyframes fbs-nudge{50%{translate:0 5px}}
.fbs-progress{position:absolute; left:0; bottom:0; z-index:6; height:3px; width:calc(var(--prog,0) * 100%); background:linear-gradient(90deg, var(--gold), var(--magenta)); box-shadow:0 0 10px rgba(242,179,63,.7)}
.fbs-sparkle{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; pointer-events:none; animation:fbs-spark 1.1s ease-out forwards; z-index:6}
@keyframes fbs-spark{from{transform:scale(.2); opacity:1} to{transform:translateY(-44px) scale(1.8); opacity:0}}
.fbs-tap{display:inline-block; margin-top:1rem; padding:.4rem .95rem; border-radius:999px; background:rgba(18,12,8,.55); font-size:.92rem; font-weight:700; color:var(--cream)}
.fbs-skip{position:absolute; right:max(16px, 4vw); bottom:max(16px, 5vh); z-index:7; display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.55rem 1.15rem; border-radius:999px; background:rgba(18,12,8,.55); box-shadow:inset 0 0 0 1px rgba(251,243,230,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--cream); font-size:.95rem; font-weight:800; text-decoration:none; transition:background .2s;
  /* fades out as the story ends, where its own "Meet the FurBrains" button takes over */
  opacity:clamp(0, (.95 - var(--prog,0)) * 25, 1)}
.fbs-skip svg{width:18px; height:18px}
.fbs-skip:hover{background:rgba(18,12,8,.8)}
.fbs-skip:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .fbs-dust i,.fbs-cue svg,.fbs-under i{animation:none}
  .fbs-sparkle{animation-duration:.01s}
}