/* Happiness(R) whimsy: atmosphere lane (prefix ha-). Ink sky, night stars, tagline links, scroll chain.
   Everything here is decorative, aria-hidden, pointer-events:none, and animates transform/opacity/
   stroke-dashoffset/clip-path/filter:drop-shadow only. Delete this file + ha.js to remove the lane. */

:root{--ha-css:1} /* ha.js checks this before building anything, so late CSS can never cause a shift */

/* ---------- Ink sky: one fixed layer behind all content (created by ha.js after load) ---------- */
.ha-sky{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:-1;pointer-events:none;overflow:hidden;
  contain:strict;opacity:0;transition:opacity 2.6s ease}
.ha-sky.ha-on{opacity:1}
.ha-ink{position:absolute;left:-6%;top:-6%;width:112%;height:112%;will-change:transform;backface-visibility:hidden}
.ha-ink--a{animation:ha-drift-a 74s ease-in-out infinite alternate}
.ha-ink--b{animation:ha-drift-b 91s ease-in-out -30s infinite alternate}
@keyframes ha-drift-a{from{transform:translate3d(-1.6%,-1.2%,0) rotate(-1.5deg) scale(1)}
  to{transform:translate3d(2%,1.6%,0) rotate(2deg) scale(1.05)}}
@keyframes ha-drift-b{from{transform:translate3d(1.8%,1%,0) rotate(1.5deg) scale(1.04)}
  to{transform:translate3d(-2%,-1.8%,0) rotate(-2deg) scale(1)}}

/* Night stars (21:00-05:00 local) */
.ha-star{position:absolute;width:var(--s,8px);height:var(--s,8px);margin:calc(var(--s,8px)/-2) 0 0 calc(var(--s,8px)/-2);
  animation:ha-twinkle var(--t,6s) ease-in-out var(--d,0s) infinite both}
/* ONE animation per star on purpose: a finished fill-forwards fade-in stacked with the twinkle kept Chrome
   ticking the main thread at 60fps (measured). A single transform/opacity animation stays on the compositor. */
.ha-star::before,.ha-star::after{content:"";position:absolute;inset:0}
.ha-star::before{inset:-60%;border-radius:50%;background:radial-gradient(circle,var(--c,rgba(254,252,240,.34)) 0,transparent 62%)}
.ha-star::after{background:#FEFCF0;clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
.ha-star--dot::after{clip-path:circle(22% at 50% 50%)}
@keyframes ha-twinkle{0%,100%{opacity:.14;transform:scale(.5) rotate(0)}50%{opacity:.8;transform:scale(1) rotate(20deg)}}

.ha-sky.ha-paused .ha-ink,.ha-sky.ha-paused .ha-star{animation-play-state:paused}
.ha-sky.ha-still .ha-ink{animation:none}

/* ---------- Tagline "Share. Listen. Connect." (home hero) ---------- */
.ha-tag .ha-tw{display:inline-block}
.ha-tag .ha-tg{position:relative}
.ha-tag .ha-bar{color:#A18D5F;font-weight:400}
.ha-tag .ha-tg.ha-br .ha-bar{display:none}
.ha-tl{position:absolute;left:50%;top:50%;width:.62em;height:.286em;overflow:visible;pointer-events:none;
  transform:translate(calc(-50% - .26em),-66%)}
.ha-tl path{fill:none;stroke-linecap:round;stroke-width:2.5}
.ha-tl .ha-p{stroke:#FF0074}
.ha-tl .ha-b{stroke:#00AAFF}
.ha-tl .ha-k{stroke:#0B0F14;stroke-width:4.6}
.ha-tag .ha-tl .ha-dr{stroke-dasharray:1 1;stroke-dashoffset:1}
.ha-tag .ha-wv{opacity:0}
.ha-tag.ha-play .ha-tw{animation:ha-lit 1.3s ease-out calc(var(--i,0) * .6s) both}
.ha-tag.ha-play .ha-tl .ha-p{animation:ha-draw .6s cubic-bezier(.5,0,.2,1) calc(var(--i,1) * .6s - .3s) forwards}
.ha-tag.ha-play .ha-tl .ha-b{animation:ha-draw .6s cubic-bezier(.5,0,.2,1) calc(var(--i,1) * .6s - .1s) forwards}
.ha-tag.ha-play .ha-wv{animation:ha-fade .3s ease-out calc(var(--i,1) * .6s + .4s) forwards}
.ha-tag.ha-play .ha-tl{animation:ha-link-pop 1s ease-out calc(var(--i,1) * .6s) both}
@keyframes ha-lit{0%{filter:drop-shadow(0 0 0 transparent)}
  35%{filter:drop-shadow(0 0 7px var(--ha-g,rgba(255,0,116,.75))) drop-shadow(0 0 1px rgba(254,252,240,.9))}
  100%{filter:drop-shadow(0 0 0 transparent)}}
@keyframes ha-draw{to{stroke-dashoffset:0}}
@keyframes ha-fade{to{opacity:1}}
@keyframes ha-link-pop{0%{filter:drop-shadow(0 0 0 transparent)}60%{filter:drop-shadow(0 0 4px rgba(254,252,240,.55))}
  100%{filter:drop-shadow(0 0 0 transparent)}}
.ha-tag.ha-done .ha-tw,.ha-tag.ha-done .ha-tl{animation:none;filter:none}
.ha-tag.ha-done .ha-tl .ha-dr{animation:none;stroke-dashoffset:0}
.ha-tag.ha-done .ha-wv{animation:none;opacity:1}
.ha-tag .ha-tg.ha-br .ha-tl{display:none}

/* ---------- Reading progress: chain links along the nav pill's lower edge ---------- */
.ha-chain{position:absolute;left:10%;width:80%;bottom:-4px;height:8px;pointer-events:none;z-index:3;opacity:0;
  transition:opacity .4s ease}
.ha-chain.ha-has{opacity:1}
.ha-chain-track{position:absolute;inset:0;opacity:.85;clip-path:inset(0 100% 0 0);
  transition:clip-path .32s cubic-bezier(.2,.7,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 4h1.7' stroke='%2313AAFD' stroke-width='1.5'/%3E%3Crect x='.9' y='1.5' width='7.6' height='5' rx='2.5' fill='none' stroke='%23FF0082' stroke-width='1.25'/%3E%3Cpath d='M7.6 4H12' stroke='%2313AAFD' stroke-width='1.5'/%3E%3C/svg%3E") 0 50%/12px 8px repeat-x}
.ha-chain-head{position:absolute;left:0;top:0;width:12px;height:8px;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FEFCF0'/%3E%3Cstop offset='.55' stop-color='%23E3CD8E'/%3E%3Cstop offset='1' stop-color='%23A18D5F'/%3E%3C/linearGradient%3E%3Crect x='.9' y='1.5' width='7.6' height='5' rx='2.5' fill='%230B0F14' fill-opacity='.6' stroke='url(%23g)' stroke-width='1.4'/%3E%3C/svg%3E") 0 50%/12px 8px no-repeat;
  filter:drop-shadow(0 0 2px rgba(227,205,142,.55))}
.ha-chain.ha-full .ha-chain-head{animation:ha-glint 1.4s ease-out 1}
@keyframes ha-glint{0%,100%{filter:drop-shadow(0 0 2px rgba(227,205,142,.55))}40%{filter:drop-shadow(0 0 6px rgba(254,252,240,.95))}}

@media (prefers-reduced-motion:reduce){
  .ha-sky{transition:none}
  .ha-ink,.ha-star{animation:none!important}
  .ha-star{opacity:.7}
  .ha-chain,.ha-chain-track,.ha-chain-head{transition:none}
  .ha-chain.ha-full .ha-chain-head{animation:none}
  .ha-tag .ha-tw,.ha-tag .ha-tl{animation:none!important;filter:none}
  .ha-tag .ha-tl .ha-dr{animation:none!important;stroke-dashoffset:0}
  .ha-tag .ha-wv{animation:none!important;opacity:1}
}
@media print{.ha-sky,.ha-chain,.ha-tl{display:none!important}}