/* What we believe: light band. Big statement beside a diagram where four disciplines draw in to one point. */
.bf { background: #ececef; color: var(--ink-2); }
.bf .label__name, .bf .label__side { color: var(--ink-2); }
.bf .label__side small { color: var(--ink-3); }
.bf .label__name .mark { background-image: url("../images/brand/novva-n-dark.svg"); }
.bf__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; margin-top: clamp(1.5rem, 3vw, 3rem); }
.bf__lead { font-size: clamp(1.9rem, 1rem + 3vw, 4rem); font-weight: 600; letter-spacing: -0.055em; line-height: 1.06; color: var(--ink-2); }
.bf__lead em { font-style: normal; color: var(--purple); }
.bf__viz { background: #fff; border-radius: 22px; padding: clamp(.6rem, 1.5vw, 1.2rem); box-shadow: 0 30px 70px -40px rgba(11,11,14,.4); }
.bf__viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.bf__ring circle { stroke: rgba(11,11,14,.1); stroke-dasharray: 3 8; transform-box: fill-box; transform-origin: center; animation: bfSpin 50s linear infinite; }
@keyframes bfSpin { to { transform: rotate(360deg); } }
.bf__line { fill: none; stroke: #b266ff; stroke-width: 2; stroke-linecap: round; }
.bf__pulse { fill: var(--purple); }
.bf__node circle { fill: #fff; stroke: var(--ink-2); stroke-width: 2.4; }
.bf__node text { font-size: 17px; font-weight: 600; letter-spacing: -.02em; fill: var(--ink-2); font-family: inherit; }
.bf__core circle { fill: var(--purple); filter: drop-shadow(0 8px 22px rgba(144,15,255,.5)); }
.bf__core text { fill: #fff; font-size: 15px; font-weight: 700; font-family: inherit; letter-spacing: -.02em; }
/* draw in once visible */
.js .bf__viz .bf__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); transition-delay: calc(var(--i) * 150ms + .3s); }
.js .bf__viz.is-in .bf__line { stroke-dashoffset: 0; }
.js .bf__viz .bf__node, .js .bf__viz .bf__core { opacity: 0; transition: opacity .7s; transition-delay: calc(var(--i, 0) * 150ms + .2s); }
.js .bf__viz .bf__core { transition-delay: 1.3s; }
.js .bf__viz.is-in .bf__node, .js .bf__viz.is-in .bf__core { opacity: 1; }
.js .bf__viz .bf__pulse { opacity: 0; }
.js .bf__viz.is-in .bf__pulse { opacity: 1; transition: opacity .5s 1.8s; }
.bf__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 4rem); padding-top: clamp(1.4rem, 2.4vw, 2rem); border-top: 1px solid rgba(11,11,14,.14); }
.bf__cols p { color: var(--ink-3); font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); letter-spacing: -0.025em; line-height: 1.55; max-width: 52ch; }
@media (max-width: 900px) { .bf__grid, .bf__cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bf__ring circle { animation: none; } .bf__pulse { display: none; } .js .bf__viz .bf__line { transition: none; stroke-dashoffset: 0; } .js .bf__viz .bf__node, .js .bf__viz .bf__core { opacity: 1; transition: none; } }

/* v2: four circles drift together as you scroll (js/about-belief.js sets --p from 0 to 1) */
.bf__venn { --p: 0; background: transparent; box-shadow: none; padding: 0; }
.venn { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; isolation: isolate; }
.venn__c { position: absolute; left: 27%; top: 27%; width: 46%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; display: grid; place-items: center; will-change: transform;
  transform: translate(calc((var(--sx) * (1 - var(--p)) + var(--ex) * var(--p)) * 1%), calc((var(--sy) * (1 - var(--p)) + var(--ey) * var(--p)) * 1%)); }
.venn__c b { font-size: clamp(.85rem, .6rem + .9vw, 1.2rem); font-weight: 700; letter-spacing: -0.03em; color: #fff; text-align: center; transform: translate(calc(var(--lx) * (1 - var(--p)) * 1%), calc(var(--ly) * (1 - var(--p)) * 1%)); }
.venn__c--1 { --sx: -52; --sy: -52; --ex: -20; --ey: -20; --lx: -18; --ly: -18; background: rgba(144,15,255,.82); }
.venn__c--2 { --sx: 52; --sy: -52; --ex: 20; --ey: -20; --lx: 18; --ly: -18; background: rgba(75,10,153,.82); }
.venn__c--3 { --sx: -52; --sy: 52; --ex: -20; --ey: 20; --lx: -18; --ly: 18; background: rgba(178,102,255,.85); }
.venn__c--4 { --sx: 52; --sy: 52; --ex: 20; --ey: 20; --lx: 18; --ly: 18; background: rgba(122,122,132,.8); }
.venn__one { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(calc(.6 + var(--p) * .4)); z-index: 2; text-align: center; font-weight: 700; font-size: clamp(.9rem, .6rem + 1vw, 1.3rem); line-height: 1.05; letter-spacing: -0.04em; color: #fff; opacity: clamp(0, calc((var(--p) - .75) * 4), 1); pointer-events: none; }
html:not(.js) .bf__venn { --p: 1; }
@media (prefers-reduced-motion: reduce) { .bf__venn { --p: 1 !important; } }
.venn__c b { opacity: clamp(0, calc(1 - (var(--p) - .45) * 2.5), 1); }

/* v3: statement fills in word by word on scroll; the two paragraphs become cards */
.bf__lead .w { color: #bdbdc5; transition: color .35s; }
.bf__lead .w.on { color: var(--ink-2); }
.bf__lead em .w.on { color: var(--purple); }
.bf__cols { border-top: 0; padding-top: 0; gap: 12px; }
.bf__card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; min-height: 260px; padding: clamp(1.3rem, 2.4vw, 2.2rem); border-radius: 22px; background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bf__card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px -34px rgba(11,11,14,.4); }
.bf__card:nth-child(2) { background: var(--ink); color: #fff; }
.bf__card:nth-child(2) p { color: rgba(255,255,255,.82); }
.bf__no { position: absolute; right: .8rem; top: -.1em; font-size: clamp(6rem, 4rem + 8vw, 11rem); font-weight: 700; letter-spacing: -0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(144,15,255,.22); pointer-events: none; }
.bf__tag { align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; background: rgba(144,15,255,.1); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--purple); }
.bf__card:nth-child(2) .bf__tag { background: rgba(255,255,255,.14); color: #fff; }
.bf__card p { position: relative; margin-top: auto; max-width: 46ch; }
.bf__no { font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem); top: .5rem; right: 1.2rem; }

/* v5: the circles open and close on their own, on a loop (merge, hold, spread, rest) */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.bf__venn { animation: vennLoop 8s cubic-bezier(.65,0,.35,1) infinite; }
.bf__venn.is-paused { animation-play-state: paused; }
@keyframes vennLoop { 0%, 18% { --p: 0; } 42%, 68% { --p: 1; } 92%, 100% { --p: 0; } }
@media (prefers-reduced-motion: reduce) { .bf__venn { animation: none; --p: 1; } }