/* HFC public pages: joy layer (sound button, fireflies, phone film strip, wide photo bands, phone hero). Shared by apply.happyfolksclub.com and the portal's public pages. */
.fly{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:.9}
.snd{position:fixed;left:14px;bottom:14px;z-index:90;display:flex;align-items:center;gap:9px;padding:10px 15px 10px 12px;border-radius:999px;border:1px solid rgba(143,209,185,.4);background:rgba(15,48,40,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#E8F4EE;font:600 .8rem/1 Inter,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.8);-webkit-tap-highlight-color:transparent;transition:border-color .25s,box-shadow .25s,transform .25s}
.snd:hover{border-color:#F6C94B;transform:translateY(-2px)}
.snd svg{width:18px;height:18px;flex:none}
.snd .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.snd .eq i{display:block;width:3px;height:30%;border-radius:2px;background:#8FD1B9;transition:height .3s}
.snd[aria-pressed=true]{border-color:#F6C94B;box-shadow:0 0 0 4px rgba(246,201,75,.14),0 10px 30px -10px rgba(0,0,0,.8)}
.snd[aria-pressed=true] .eq i{background:#F6C94B;animation:eq 1s ease-in-out infinite alternate}
.snd[aria-pressed=true] .eq i:nth-child(2){animation-delay:-.4s}.snd[aria-pressed=true] .eq i:nth-child(3){animation-delay:-.75s}
@keyframes eq{0%{height:25%}100%{height:100%}}
.snd.nudge{animation:nudge 2.4s ease-in-out 3}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(246,201,75,.0),0 10px 30px -10px rgba(0,0,0,.8)}50%{box-shadow:0 0 0 9px rgba(246,201,75,.22),0 10px 30px -10px rgba(0,0,0,.8)}}
/* wide photo bands: the whole picture in front of a soft blurred copy of itself */
.band{position:relative;overflow:hidden;padding:clamp(34px,6vw,84px) 0;isolation:isolate}
.band-bg{position:absolute;left:-12%;top:-12%;width:124%;height:124%;object-fit:cover;filter:blur(34px) saturate(1.35) brightness(.5);z-index:-2;transform:translate3d(0,calc((var(--bp,.5) - .5) * -70px),0);will-change:transform}
.band:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0F3028,rgba(15,48,40,.1) 24%,rgba(15,48,40,.1) 76%,#0F3028)}
.band-fg{margin:0 auto;max-width:min(980px,100%);border-radius:24px;overflow:hidden;position:relative;border:1px solid rgba(143,209,185,.28);box-shadow:0 40px 90px -24px rgba(0,0,0,.9),0 0 90px -20px rgba(246,201,75,.35);transform:translate3d(0,calc((var(--bp,.5) - .5) * 34px),0)}
.band-fg img{display:block;width:100%;height:auto}
.band-fg figcaption{position:absolute;left:0;right:0;bottom:0;padding:54px clamp(16px,3vw,34px) clamp(14px,2.4vw,28px);background:linear-gradient(0deg,rgba(9,32,26,.9),rgba(9,32,26,0));color:#fff;font-family:var(--fd,Georgia,serif);font-size:clamp(1.05rem,2.3vw,1.7rem);line-height:1.25;max-width:100%}
.band-fg figcaption span{display:block;font:700 .7rem/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#F6C94B;margin-bottom:9px}
/* phone film strip */
.reel{display:none}
.more-btn{display:none}
@media(max-width:700px){
  .collage{display:none!important}
  .hero-in{display:flex!important;flex-direction:column}
  .hero{padding-top:30px}
  .hero h1{max-width:none;font-size:clamp(2.7rem,13vw,3.5rem);line-height:1;background:linear-gradient(100deg,#fff 30%,#F6C94B 55%,#8FD1B9 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .hero h1 .w,.hero h1 .w>i{-webkit-text-fill-color:inherit}
  .hero .eyebrow{font-size:.72rem;letter-spacing:.14em;padding:8px 14px}
  .hero-text{font-size:1.08rem;line-height:1.55}
  .hero-body.clamp{max-height:5.1em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .fx-on .more-btn{display:inline-flex;align-self:flex-start;margin:6px 0 4px;padding:6px 0;background:none;border:0;border-bottom:1px solid #F6C94B;color:#F6C94B;font:700 .85rem/1 Inter,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer}
  .more-btn[hidden]{display:none!important}
  .hero-in,.hero-copy,.hero-text,.hero-grid{min-width:0;max-width:100%}
  .reel{display:block;width:100vw;max-width:100vw;margin:26px calc(50% - 50vw) 8px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .reel-in{display:flex;width:max-content;animation:reel 52s linear infinite;padding:12px 0 22px}
  .reel figure{margin:0 12px 0 0;flex:none;height:200px;border-radius:20px;overflow:hidden;border:1px solid rgba(143,209,185,.3);box-shadow:0 22px 44px -18px rgba(0,0,0,.85),0 0 44px -14px rgba(92,155,136,.6);transform:rotate(var(--rr,0deg)) translateY(var(--ry,0px))}
  .reel figure:nth-child(4n+1){--rr:-1.8deg;--ry:6px}.reel figure:nth-child(4n+2){--rr:1.4deg;--ry:-4px}.reel figure:nth-child(4n+3){--rr:-.8deg;--ry:8px}.reel figure:nth-child(4n){--rr:2deg;--ry:0px}
  .reel figure:nth-child(3n){box-shadow:0 22px 44px -18px rgba(0,0,0,.85),0 0 44px -14px rgba(246,201,75,.55)}
  .reel img{height:100%;width:auto;display:block;max-width:none}
  .snd{left:10px;bottom:10px;padding:9px 13px 9px 11px}
  .snd .lbl{font-size:.74rem}
  .band{padding:26px 0}.band-fg{border-radius:18px;max-width:calc(100% - 8px)}
  .band-fg figcaption{font-size:1rem;padding:36px 14px 12px}
}
@keyframes reel{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.reel-in{animation:none;overflow-x:auto}.fly{display:none}.snd.nudge{animation:none}.band-bg,.band-fg{transform:none}}
/* no blurred copies and no floating lights: pictures are shown sharp and whole, on the plain page colour */
.band-bg,.fly{display:none!important}
.band:after{display:none}
html.reveal-on .band-fg.rv-w{clip-path:none!important}