/* ============================================================
   BEAM Daily — Phase 1.6 HYBRID experience layer
   Builds on css/color-system.css brand tokens. Synthesis of the
   cinematic-editorial + spatial concepts. Additive only; drives the
   /beam-daily review route. Real data is composed by js/beam-daily.js.
   ============================================================ */

:root{
  --bd-ob:#09090B; --bd-white:#F7F5F0; --bd-mut:#9A9AA4; --bd-line:#232430;
  --bd-gold:#E2B644; --bd-gold-soft:#C6A052;
  --bd-mind:#4C9AEA; --bd-body:#E05656; --bd-soul:#9B57C4;
  --bd-lifestyle:#F2C94C; --bd-brotherhood:#2FA894; --bd-legacy:#C79A45;
  --bd-ease:cubic-bezier(.22,1,.36,1);
  --amb1:rgba(226,182,68,.10); --amb2:rgba(47,168,148,.06); --amb3:rgba(155,87,196,.05);
  --sky-top:#0B0B0F; --sky-bloom:rgba(226,182,68,.14);
}
html[data-bd-tod="morning"]{--amb1:rgba(242,201,76,.12);--amb2:rgba(226,182,68,.08);--amb3:rgba(76,154,234,.05);--sky-top:#0C0B0A;--sky-bloom:rgba(242,201,76,.16);}
html[data-bd-tod="evening"]{--amb1:rgba(155,87,196,.10);--amb2:rgba(76,90,180,.08);--amb3:rgba(226,182,68,.06);--sky-top:#0A0A10;--sky-bloom:rgba(155,87,196,.14);}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.bd-body{margin:0;background:var(--bd-ob);color:var(--bd-white);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;}
.serif{font-family:'Playfair Display',Georgia,serif;}

/* Ambient environment */
.bd-env{position:fixed;inset:0;z-index:-2;overflow:hidden;}
.bd-env__sky{position:absolute;inset:-10%;transition:background 1.6s var(--bd-ease);background:
  radial-gradient(70% 55% at 50% -8%, var(--sky-bloom), transparent 60%),
  radial-gradient(60% 45% at 12% 18%, var(--amb1), transparent 55%),
  radial-gradient(55% 45% at 92% 26%, var(--amb2), transparent 55%),
  radial-gradient(70% 55% at 50% 118%, var(--amb3), transparent 60%),
  linear-gradient(180deg,var(--sky-top),var(--bd-ob));}
.bd-env__stars{position:absolute;inset:0;opacity:.4;background-image:
  radial-gradient(1px 1px at 18% 24%, rgba(255,255,255,.5), transparent),
  radial-gradient(1px 1px at 68% 58%, rgba(255,255,255,.32), transparent),
  radial-gradient(1px 1px at 42% 82%, rgba(255,255,255,.36), transparent),
  radial-gradient(1.5px 1.5px at 84% 14%, rgba(226,182,68,.5), transparent),
  radial-gradient(1px 1px at 30% 62%, rgba(255,255,255,.24), transparent);}
.bd-grain{position:fixed;inset:0;z-index:-1;opacity:.022;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Arrival */
.bd-arrival{position:fixed;inset:0;z-index:60;background:var(--bd-ob);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px;}
.bd-arrival[hidden]{display:none;}
/* Deliberate, paced arrival — light, then greeting, a held pause, the
   proof, a held pause, then "three things matter today". */
.bd-arrival__bloom{position:absolute;inset:0;background:radial-gradient(50% 40% at 50% 44%, rgba(226,182,68,0), transparent 70%);animation:bd-bloom 2.6s var(--bd-ease) .5s forwards;}
.bd-arrival__mark{font-weight:800;letter-spacing:.2em;font-size:28px;opacity:0;transform:translateY(8px);animation:bd-rise 1.1s var(--bd-ease) 1.4s forwards;}
.bd-arrival__greet{font-weight:800;font-size:clamp(30px,6vw,54px);opacity:0;transform:translateY(10px);animation:bd-rise 1.1s var(--bd-ease) 2.9s forwards;}
.bd-arrival__sub{color:var(--bd-mut);font-size:clamp(15px,3.4vw,19px);max-width:26ch;opacity:0;animation:bd-fade 1.2s var(--bd-ease) 4.8s forwards;}
.bd-arrival__three{color:var(--bd-gold-soft);font-size:clamp(13px,3vw,16px);letter-spacing:.02em;opacity:0;margin-top:8px;animation:bd-fade 1.2s var(--bd-ease) 6.8s forwards;}
.bd-arrival__skip{position:absolute;bottom:34px;left:0;right:0;text-align:center;color:var(--bd-mut);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:0;animation:bd-fade 1s var(--bd-ease) 3.5s forwards;}
.bd-arrival.bd-done{animation:bd-arriveOut 1.5s var(--bd-ease) 0s forwards;pointer-events:none;}
@keyframes bd-bloom{to{background:radial-gradient(50% 40% at 50% 44%, rgba(226,182,68,.18), transparent 70%);}}
@keyframes bd-rise{to{opacity:1;transform:none;}}
@keyframes bd-fade{to{opacity:1;}}
@keyframes bd-arriveOut{to{opacity:0;visibility:hidden;}}

/* Flow */
.bd-main{position:relative;z-index:1;}
/* A section is as tall as what is in it.
   It used to be min-height:100vh — every section a full screen whatever it
   held. Measured on a real account: "Your day." plus fifty characters,
   occupying 900px. A heading, then most of a screen of nothing. That is what
   reads as unfinished, and no amount of content fixes it because the empty
   space is in the stylesheet, not the data. */
.bd-scene{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(54px,9vh,116px) clamp(22px,7vw,96px);max-width:1240px;margin:0 auto;position:relative;}
/* `hidden` must actually hide.
   THE defect behind "Continue — the rest unfolds", "Your day", "Where you
   began" and "From the Guide" appearing as empty cinematic containers: the
   browser's own [hidden] rule is display:none, but the author rule above sets
   display:flex on the same element and wins on specificity. Four sections
   carried hidden="" for months and rendered their heading over empty space
   anyway. Every module that sets the attribute was working correctly; the
   stylesheet was quietly cancelling it. */
.bd-scene[hidden],.bd-split[hidden]{display:none;}
.bd-hero__greet:focus{outline:none;}
.bd-hero__greet:focus-visible{outline:2px solid var(--bd-gold);outline-offset:6px;border-radius:6px;}
.bd-reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--bd-ease),transform 1s var(--bd-ease);}
.bd-reveal.in{opacity:1;transform:none;}
.bd-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--bd-gold-soft);}

/* Hero + Rule of Three */
.bd-hero{min-height:100vh;}
.bd-hero__greet{font-weight:800;font-size:clamp(38px,7.5vw,80px);line-height:1.0;}
.bd-hero__sub{color:var(--bd-mut);font-size:clamp(16px,2vw,21px);margin-top:14px;max-width:34ch;}
.bd-three{margin-top:clamp(44px,8vh,88px);display:flex;flex-direction:column;gap:2px;max-width:840px;}
.bd-p{position:relative;padding:26px 0 26px 46px;border-top:1px solid var(--bd-line);transition:transform .5s var(--bd-ease);}
.bd-p:hover{transform:translateX(6px);}
.bd-p::before{content:"";position:absolute;left:0;top:34px;width:14px;height:14px;border-radius:50%;
  background:var(--dotc,var(--bd-gold));box-shadow:0 0 20px 2px var(--dotc,var(--bd-gold));opacity:.9;}
.bd-p__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--dotc,var(--bd-gold-soft));}
.bd-p__lead{font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,3vw,30px);font-weight:700;line-height:1.22;margin-top:8px;}
.bd-p__meta{color:var(--bd-mut);font-size:14.5px;margin-top:8px;line-height:1.5;}
.bd-cue{margin-top:64px;color:var(--bd-gold-soft);font-size:12px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px;}
.bd-cue::after{content:"";width:1px;height:40px;background:linear-gradient(var(--bd-gold-soft),transparent);animation:bd-breathe 2.6s ease-in-out infinite;}
@keyframes bd-breathe{0%,100%{opacity:.35;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1)}}

/* Shared bits */
.bd-why{color:var(--bd-mut);font-size:clamp(15px,1.4vw,17px);line-height:1.65;border-left:1px solid var(--bd-gold);padding-left:18px;margin:18px 0;max-width:56ch;}
.bd-act{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--bd-ob);background:var(--bd-gold);
  font-weight:700;font-size:14px;text-decoration:none;padding:13px 24px;border-radius:100px;transition:transform .3s var(--bd-ease),box-shadow .3s var(--bd-ease);}
.bd-act:hover{transform:translateY(-2px);box-shadow:0 16px 40px -16px rgba(226,182,68,.6);}
.bd-act--quiet{background:transparent;color:var(--bd-white);border:1px solid var(--bd-line);}
.bd-act--quiet:hover{border-color:var(--bd-gold-soft);box-shadow:none;}
.bd-scene__title{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:clamp(28px,4.8vw,50px);line-height:1.06;margin:14px 0;}

/* The One Move — the single directive, made quietly inevitable (not louder). */
.bd-onemove{max-width:60ch;}
.bd-onemove .bd-why{font-size:clamp(17px,2vw,20px);border-left-width:2px;}
.bd-onemove .bd-act{margin-top:16px;padding:15px 28px;font-size:15px;}

/* Intelligence split.
   One column by default, because there is no photography in the product yet.
   The second column used to hold `.bd-light-field` — a 4/5 gradient rectangle
   labelled "Reserved for real community photography", 603px tall on desktop,
   permanently empty for every member. A box reserved for an asset that does
   not exist is indistinguishable from a broken image, so it is gone. When
   real photography is captured, add `bd-split--media` and the column returns. */
.bd-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:6px;}
.bd-split--media{grid-template-columns:1.02fr .98fr;}

/* The day's verified organisation. A record, not a placement: BEAM is not
   paid to show anyone and nothing here endorses. */
.bd-orgcard{margin-top:26px;border:1px solid var(--bd-line);border-radius:20px;
  padding:clamp(20px,3vw,30px);background:rgba(255,255,255,.012);max-width:62ch;}
.bd-orgcard__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--bd-gold-soft);margin:0 0 8px;}
.bd-orgcard__n{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(21px,2.6vw,28px);line-height:1.2;margin:0 0 10px;
  /* Long organisation names wrap rather than pushing the card wide. */
  overflow-wrap:anywhere;}
.bd-orgcard__s{color:var(--bd-mut);font-size:15px;line-height:1.65;margin:0 0 10px;}
.bd-orgcard__w{color:var(--bd-white);font-size:14.5px;line-height:1.6;margin:0;
  border-left:1px solid var(--bd-gold);padding-left:14px;}
@media (max-width:520px){.bd-orgcard{padding:18px 16px;}}

/* Opportunity horizon */
.bd-horizon{position:relative;border-radius:28px;overflow:hidden;padding:clamp(32px,6vw,72px);min-height:320px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(0deg, rgba(199,154,69,.22), transparent 62%),
             radial-gradient(120% 80% at 50% 128%, rgba(226,182,68,.30), transparent 62%),
             linear-gradient(160deg,#16130d,#0a0a0c);border:1px solid rgba(199,154,69,.26);}
.bd-horizon__grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(226,182,68,.10) 1px,transparent 1px);
  background-size:100% 46px;transform:perspective(460px) rotateX(62deg);transform-origin:bottom;}
.bd-tagline{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--bd-gold);
  border:1px solid rgba(226,182,68,.32);padding:7px 14px;border-radius:100px;margin-bottom:14px;position:relative;}
.bd-tagline .bd-pulse{width:7px;height:7px;border-radius:50%;background:var(--bd-gold);animation:bd-pulse 2s ease-in-out infinite;}
@keyframes bd-pulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.bd-horizon .bd-headline{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:clamp(26px,4.4vw,44px);line-height:1.07;margin:0;}

/* Relationships orbit */
.bd-orbit{position:relative;height:min(64vh,500px);display:flex;align-items:center;justify-content:center;margin-top:10px;}
.bd-ring{position:absolute;border-radius:50%;border:1px solid var(--bd-line);}
.bd-ring--1{width:min(64vw,380px);aspect-ratio:1;} .bd-ring--2{width:min(44vw,250px);aspect-ratio:1;}
/* Orbit rings are calm and still — a continuous spin was decoration that
   implied activity that isn't real. Presence, not motion for its own sake. */
.bd-you{width:82px;height:82px;border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--bd-ob);font-size:12px;letter-spacing:.05em;text-align:center;
  background:radial-gradient(circle at 40% 34%, var(--bd-gold), var(--bd-legacy));box-shadow:0 0 50px rgba(226,182,68,.4);}
.bd-sat{position:absolute;max-width:210px;border-radius:20px;border:1px solid var(--bd-line);padding:16px 18px;
  background:linear-gradient(160deg,rgba(22,22,28,.9),rgba(11,11,15,.82));}
.bd-sat__face{width:38px;height:38px;border-radius:50%;margin-bottom:10px;background:radial-gradient(circle at 38% 32%, rgba(47,168,148,.6), rgba(226,182,68,.35));}
.bd-sat__name{font-size:15px;font-weight:600;}
.bd-sat__why{font-size:12.5px;color:var(--bd-mut);line-height:1.45;margin-top:4px;}
.bd-sat--1{top:2%;left:0;} .bd-sat--2{bottom:4%;right:0;}

/* Constellation */
.bd-constellation-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;}
.bd-constellation{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1;}
.bd-constellation svg{width:100%;height:100%;overflow:visible;}
.bd-cnode{cursor:pointer;}
.bd-cnode .halo{transition:r .5s var(--bd-ease),opacity .5s var(--bd-ease);}
.bd-cnode .core{transition:transform .5s var(--bd-ease);transform-origin:center;transform-box:fill-box;}
.bd-cnode:hover .halo,.bd-cnode:focus .halo{opacity:.85;}
.bd-cnode:focus{outline:none;}
.bd-cnode text{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.05em;fill:var(--bd-mut);}
/* The constellation breathes just enough to feel alive, never enough to
   distract — felt, not seen. */
.bd-breathing .core{animation:bd-pulseNode 6s ease-in-out infinite;}
@keyframes bd-pulseNode{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* No reserved height: an absent sentence must not leave a gap where one was. */
.bd-story{color:var(--bd-mut);font-size:15px;line-height:1.6;margin-top:14px;}
.bd-story b{color:var(--bd-white);font-weight:600;}
.bd-fineprint{color:var(--bd-mut);font-size:13px;margin-top:10px;}
/* A verified-source link is a receipt, not a body link. Left unstyled it
   rendered in the browser's default blue-and-purple, which on a dark card is
   both unreadable and the one thing on screen that looks unfinished. */
.bd-fineprint a{color:var(--bd-gold-soft);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;}
.bd-fineprint a:hover{color:var(--bd-gold);}
.bd-fineprint a:focus-visible{outline:2px solid var(--bd-gold);outline-offset:2px;}

/* Honest empty state */
.bd-empty{color:var(--bd-mut);font-size:15px;line-height:1.65;font-style:italic;max-width:56ch;margin:6px 0;}

/* Close */
/* One sentence. It does not need three quarters of a screen. */
.bd-close{align-items:center;text-align:center;padding-top:clamp(48px,7vh,88px);padding-bottom:clamp(64px,10vh,120px);}
.bd-close[hidden]{display:none;}
.bd-close__line{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(26px,5vw,44px);}
.bd-close__line span{color:var(--bd-gold);}
.bd-close__sub{color:var(--bd-mut);font-size:14.5px;margin-top:14px;}

/* Responsive */
@media (max-width:820px){
  .bd-split,.bd-split--media{grid-template-columns:1fr;}
  .bd-constellation-wrap{grid-template-columns:1fr;} .bd-constellation{max-width:360px;}
  .bd-sat{max-width:158px;} .bd-sat--1{left:-4px;} .bd-sat--2{right:-4px;}
  .bd-p{padding-left:40px;}
}

/* Motion off */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .bd-arrival{display:none!important;}
  .bd-arrival__bloom,.bd-arrival__mark,.bd-arrival__greet,.bd-arrival__sub{animation:none!important;opacity:1!important;transform:none!important;}
  .bd-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .bd-cue::after,.bd-tagline .bd-pulse,.bd-breathing .core,.bd-ring--spin{animation:none!important;}
  .bd-parallax{transform:none!important;}
}

/* Focus visibility */
a:focus-visible,.bd-act:focus-visible,.bd-cnode:focus-visible{outline:2px solid var(--bd-gold);outline-offset:4px;border-radius:6px;}