/* =============================================================================
   BEAT-ONE OVERRIDE — "the post is the singularity; the big bang erupts
   from its EDGES." Scoped additively over brand.css (body.pulse-stream).
   THE RULE: this file only ADDS the detonation surface + edge-burst; tokens,
   fonts and spectrum still come from brand.css.
   --------------------------------------------------------------------------- */

/* the raw blast (transparent-bg PNG). The standalone build swaps this one
   declaration for an inlined data: URI — nothing else changes. */
:root{ --blast:url(assets/explosion.png); }

/* ---- the surface: one post, centered on the warm-black void -------------- */
body.pulse-stream.beat-solo{
  min-height:100vh; display:flex; flex-direction:column; overflow-x:clip;
}
.beat-solo .solo-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 30px; position:relative; z-index:5;
}
.beat-solo .solo-top .brandmark{
  font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--bronze); font-weight:600; text-decoration:none;
}
.beat-solo .solo-top .here{
  font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.beat-solo .stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:34px 24px; position:relative;
}

/* ---- the detonation: wraps the card; shards anchor to its perimeter ------ */
.detonation{ position:relative; }

.blast-field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  transform-origin:50% 50%;
  animation:ignite 1.5s cubic-bezier(.16,.86,.3,1) both, breathe 7.5s ease-in-out 1.5s infinite;
}
.shard{
  position:absolute; left:50%; top:50%; pointer-events:none;
  background:var(--blast) no-repeat center / cover;
  mix-blend-mode:screen; will-change:transform,opacity;
}

/* a deep full-spectrum haze sitting furthest back — sells the "gas past the
   perimeter" without competing with the litany */
.haze{
  position:absolute; left:50%; top:50%; width:185%; height:170%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side at 50% 50%,
      rgba(232,168,30,.16), rgba(106,46,168,.13) 44%, rgba(31,158,154,.08) 64%, transparent 76%);
  mix-blend-mode:screen; pointer-events:none; z-index:0;
}

/* THE BLAST — one detonation centered on the litany. The dark scrim darkens
   the white-hot core (kills glare behind text); the colorful nebula ring +
   debris blaze OUT past all four sides into the black. */
.shard.s-core{
  width:1480px; height:1480px;
  transform:translate(-50%,-50%) translateY(-10px) scale(1);
  filter:brightness(1.05) saturate(1.55) contrast(1.05);
  z-index:1;
}
/* a 180° balance copy — fills the top (source debris is bottom-heavy) and
   thickens the ring so the burst reads as a full sphere */
.shard.s-balance{
  width:1360px; height:1360px;
  transform:translate(-50%,-50%) translateY(6px) rotate(180deg) scale(1.02);
  filter:brightness(.95) saturate(1.55) contrast(1.04);
  opacity:.8; z-index:1;
}
/* a wider, fainter pass to throw long sparks far out + fade into black */
.shard.s-reach{
  width:1880px; height:1880px;
  transform:translate(-50%,-50%) rotate(26deg) scale(1);
  filter:brightness(.9) saturate(1.45);
  opacity:.5; z-index:0;
}
/* the DOUSE — paints dark over the white-hot heart so the core glare can't
   blow out the centre lines; tuned tight so the colorful ring + debris around
   it stay bright. Sits above the blast, below the text. */
.douse{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:420px; height:560px; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 40% 46% at 50% 50%,
    rgba(6,5,4,.5) 0%, rgba(6,5,4,.32) 42%, rgba(6,5,4,.12) 64%, rgba(6,5,4,0) 82%);
}

/* ---- the post: NO hard panel, NO bulky rect. Each LINE carries its own
   soft, feathered dark that shrink-wraps to the text width — so the dark
   silhouette follows the ragged, centre-set litany instead of a slab. ------- */
.beat-solo .post{
  position:relative; z-index:3; width:560px; max-width:100%;
  padding:46px 30px 42px;
}
.beat-solo .post .stamp{
  position:relative; z-index:0;
  font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.16em;
  color:var(--shell); text-align:center; margin:0 auto 16px; width:fit-content;
  display:flex; align-items:center; justify-content:center; gap:10px; padding:0 6px;
  text-shadow:0 1px 7px rgba(0,0,0,.6);
}
.beat-solo .post .stamp::before{
  content:""; position:absolute; inset:-6px -18px; z-index:-1;
  background:rgba(7,6,4,.74); border-radius:20px; filter:blur(19px);
}
.beat-solo .post .stamp .dot{ width:3px; height:3px; border-radius:50%; background:var(--bronze); }

/* ---- the litany: Inter, ~17px, centred, FULL-CONTRAST white, NO fade ------ */
.beat-solo .litany{ display:block; margin:0; }
.beat-solo .litany p{
  position:relative; z-index:0;
  font-family:"Inter",sans-serif; font-weight:400; font-size:17px; line-height:1.66;
  letter-spacing:.004em; color:var(--linen); margin:0 auto; text-align:center;
  width:fit-content; max-width:100%; padding:0 8px;
  text-shadow:0 1px 7px rgba(0,0,0,.5);
}
.beat-solo .litany p::before{
  content:""; position:absolute; inset:-1px -18px; z-index:-1;
  background:rgba(7,6,4,.8); border-radius:24px; filter:blur(26px);
}
.beat-solo .litany .n{ font-weight:600; }   /* gentle emphasis, same linen white */

/* the turn: "You are something more." — white + iridescent "more." 1.5x */
.beat-solo .closer{
  position:relative; z-index:0;
  margin:22px auto 0; text-align:center; width:fit-content; max-width:100%;
  font-family:"Inter",sans-serif; font-weight:600; font-size:22px; line-height:1.3;
  color:var(--linen); letter-spacing:.004em; padding:0 12px;
  text-shadow:0 1px 9px rgba(0,0,0,.55);
}
.beat-solo .closer::before{
  content:""; position:absolute; inset:-9px -24px; z-index:-1;
  background:rgba(7,6,4,.85); border-radius:30px; filter:blur(23px);
}
.beat-solo .closer .more{
  font-size:1.5em; font-weight:700; display:inline-block; vertical-align:-.05em;
  background-image:var(--spectrum); background-size:300% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:drift-af 20s linear infinite;
}

/* a tiny heartbeat blip — the surface's identity, sealing the post */
.beat-solo .seal{ display:block; margin:20px auto 0; width:128px; height:30px; opacity:.8; }
.beat-solo .seal polyline{ fill:none; stroke:var(--bronze); stroke-width:1.5;
  filter:drop-shadow(0 0 4px rgba(232,168,30,.4)); }

/* ---- the void footer ----------------------------------------------------- */
.beat-solo .solo-foot{
  text-align:center; padding:16px 30px 26px; position:relative; z-index:5;
}
.beat-solo .solo-foot .sigil{ font-size:22px; }
.beat-solo .solo-foot .fine{
  font-family:"Inter",sans-serif; font-size:9.5px; letter-spacing:.1em;
  color:var(--stone); margin-top:10px;
}

/* ---- motion -------------------------------------------------------------- */
@keyframes ignite{
  0%  { opacity:0; transform:scale(.42) rotate(-8deg); }
  55% { opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.035); }
}
@media (prefers-reduced-motion:reduce){
  .blast-field{ animation:none; opacity:1; }
  .beat-solo .closer .more{ animation:drift-af 20s linear infinite; }
}

/* ---- responsive: shrink the burst on small screens ----------------------- */
@media(max-width:680px){
  .beat-solo .stage{ padding:80px 14px; }
  .beat-solo .post{ width:100%; padding:48px 22px 44px; }
  .beat-solo .litany p{ font-size:16px; line-height:1.8; }
  .shard.s-core{ width:840px; height:840px; }
  .shard.s-balance{ width:780px; height:780px; }
  .shard.s-reach{ width:1040px; height:1040px; }
}

/* =============================================================================
   IN-FEED big-bang — the Design surface folded into a feed card (.beat.bigbang).
   Same explosion-from-edges, but CONTAINED to this beat's slot: a vertical mask
   fades the blast to nothing before it reaches the beat above / footer below, so
   it merges cleanly into the scrolling feed. Loaded after brand.css, so these
   override the older crude bigbang rules. No animation (static) in-feed.
   ============================================================================= */
.pulse-stream .beat.bigbang{
  position:relative; background:transparent; border:0; overflow-x:clip;
  padding:64px 16px 58px; margin:30px 0 38px; isolation:isolate;
}
.pulse-stream .beat.bigbang .beat-meta{ position:relative; z-index:3; justify-content:center;
  text-shadow:0 1px 7px rgba(0,0,0,.65); }
.pulse-stream .beat.bigbang .beat-time{ color:var(--shell); }

/* the blast, bounded to this slot */
.pulse-stream .beat.bigbang .blast-field{
  position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  animation:none; z-index:0; pointer-events:none; width:1160px; height:1000px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.pulse-stream .beat.bigbang .shard{
  position:absolute; left:50%; top:50%; background:var(--blast) no-repeat center/cover;
  mix-blend-mode:screen;
}
.pulse-stream .beat.bigbang .haze{
  position:absolute; left:50%; top:50%; width:135%; height:150%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side at 50% 50%,
     rgba(232,168,30,.16),rgba(106,46,168,.13) 44%,rgba(31,158,154,.08) 64%,transparent 76%);
  mix-blend-mode:screen; z-index:0;
}
.pulse-stream .beat.bigbang .shard.s-core{
  width:1020px; height:1020px; transform:translate(-50%,-50%) translateY(-8px);
  filter:brightness(1.05) saturate(1.55) contrast(1.05); z-index:1;
}
.pulse-stream .beat.bigbang .shard.s-balance{
  width:940px; height:940px; transform:translate(-50%,-50%) translateY(6px) rotate(180deg) scale(1.02);
  filter:brightness(.95) saturate(1.55) contrast(1.04); opacity:.8; z-index:1;
}
.pulse-stream .beat.bigbang .shard.s-reach{
  width:1300px; height:1300px; transform:translate(-50%,-50%) rotate(26deg);
  filter:brightness(.9) saturate(1.45); opacity:.5; z-index:0;
}
.pulse-stream .beat.bigbang .douse{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:420px; height:560px; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 40% 46% at 50% 50%,
    rgba(6,5,4,.5) 0%,rgba(6,5,4,.32) 42%,rgba(6,5,4,.12) 64%,rgba(6,5,4,0) 82%);
}

/* the litany — full-white, readable on per-line feathered dark halos */
.pulse-stream .beat.bigbang .litany{ position:relative; z-index:3; display:block; margin:0; }
.pulse-stream .beat.bigbang .litany p{
  position:relative; z-index:0; font-family:"Inter",sans-serif; font-weight:400;
  font-size:16px; line-height:1.66; letter-spacing:.004em; color:var(--linen);
  margin:0 auto; text-align:center; width:fit-content; max-width:100%; padding:0 8px;
  text-shadow:0 1px 7px rgba(0,0,0,.5);
}
.pulse-stream .beat.bigbang .litany p::before{
  content:""; position:absolute; inset:-1px -18px; z-index:-1;
  background:rgba(7,6,4,.8); border-radius:24px; filter:blur(26px);
}
.pulse-stream .beat.bigbang .litany .n{ font-weight:600; }

.pulse-stream .beat.bigbang .closer{
  position:relative; z-index:3; margin:20px auto 0; text-align:center; width:fit-content; max-width:100%;
  font-family:"Inter",sans-serif; font-weight:600; font-size:21px; line-height:1.3;
  color:var(--linen); letter-spacing:.004em; padding:0 12px; text-shadow:0 1px 9px rgba(0,0,0,.55);
}
.pulse-stream .beat.bigbang .closer::before{
  content:""; position:absolute; inset:-9px -24px; z-index:-1;
  background:rgba(7,6,4,.85); border-radius:30px; filter:blur(23px);
}
.pulse-stream .beat.bigbang .closer .more{
  font-size:1.5em; font-weight:700; display:inline-block; vertical-align:-.05em;
  background-image:var(--spectrum); background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:drift-af 20s linear infinite;
}
.pulse-stream .beat.bigbang .bb-seal{ display:block; position:relative; z-index:3;
  margin:18px auto 0; width:128px; height:30px; opacity:.8; }
.pulse-stream .beat.bigbang .bb-seal polyline{ fill:none; stroke:var(--bronze); stroke-width:1.5;
  filter:drop-shadow(0 0 4px rgba(232,168,30,.4)); }

@media(max-width:680px){
  .pulse-stream .beat.bigbang .blast-field{ width:96vw; height:780px; }
  .pulse-stream .beat.bigbang .shard.s-core{ width:760px; height:760px; }
  .pulse-stream .beat.bigbang .shard.s-balance{ width:700px; height:700px; }
  .pulse-stream .beat.bigbang .shard.s-reach{ width:960px; height:960px; }
  .pulse-stream .beat.bigbang .litany p{ font-size:15.5px; }
}

/* =============================================================================
   LIGHT MODE — strip the big bang to plain text. The explosion is
   mix-blend-mode:screen, which only works on a black void; on a light ground it
   turns to mud. So in light mode this ONE beat drops the whole treatment — the
   blast image, the dark void, every legibility halo and glow, the seal — leaving
   a clean black-on-white litany. Dark mode is untouched: the big bang stays.
   ============================================================================= */
[data-theme="light"] .pulse-stream .beat.bigbang{ background:none; }
[data-theme="light"] .pulse-stream .beat.bigbang .blast-field,
[data-theme="light"] .pulse-stream .beat.bigbang .haze,
[data-theme="light"] .pulse-stream .beat.bigbang .douse,
[data-theme="light"] .pulse-stream .beat.bigbang .bb-seal{ display:none; }
[data-theme="light"] .pulse-stream .beat.bigbang .litany p::before,
[data-theme="light"] .pulse-stream .beat.bigbang .closer::before{ display:none; }
[data-theme="light"] .pulse-stream .beat.bigbang .litany p,
[data-theme="light"] .pulse-stream .beat.bigbang .closer{
  color:var(--linen); text-shadow:none;            /* --linen = #1A1813 in light = near-black */
}
[data-theme="light"] .pulse-stream .beat.bigbang .closer .more{
  background:none; color:var(--linen); -webkit-text-fill-color:currentColor; animation:none;
}